diff --git a/wax-prosemirror-components/src/components/button/Button.js b/wax-prosemirror-components/src/components/button/Button.js index 00b2558f7b5c12b0ed0f771881c78acff6701007..cd6c110e7bb4ab04bc8d0248a55812db39623dc5 100644 --- a/wax-prosemirror-components/src/components/button/Button.js +++ b/wax-prosemirror-components/src/components/button/Button.js @@ -1,28 +1,19 @@ import React from "react"; import styled from "styled-components"; +import { ButtonStyles } from "wax-prosemirror-themes"; const ButtonStyled = styled.button` opacity: ${props => (props.select ? 1 : 0.4)}; pointer-events: ${props => (props.select ? "default" : "none")}; - background: #fff; - border: none; - font-size: inherit; - cursor: pointer; color: ${props => props.isActive ? props.theme.colorPrimary : props.theme.colorButton}; - border-radius: 0; - padding: 5px 10px; - &:disabled { - color: #ccc; - pointer-events: none; - } &:hover { color: ${props => (props.isActive ? props.theme.colorPrimary : "#000")}; - background: #f6f6f6; } + ${ButtonStyles}; `; -const Button = ({ view = {}, item }) => ( +const tesy = ({ view = {}, item }) => ( <ButtonStyled type="button" isActive={item.active && item.active(view.state)} @@ -38,4 +29,4 @@ const Button = ({ view = {}, item }) => ( </ButtonStyled> ); -export default Button; +export default tesy; diff --git a/wax-prosemirror-themes/index.js b/wax-prosemirror-themes/index.js index b1ec4b46ba92d73dde1bf29392428c87c2b60b8b..bf02c65de07faae9568ae1d891857399d1e74742 100644 --- a/wax-prosemirror-themes/index.js +++ b/wax-prosemirror-themes/index.js @@ -1 +1,2 @@ export { default as cokoTheme } from "./src/coko-theme/index"; +export { default as ButtonStyles } from "./src/coko-theme/elements/Button"; diff --git a/wax-prosemirror-themes/src/coko-theme/elements/Button.js b/wax-prosemirror-themes/src/coko-theme/elements/Button.js new file mode 100644 index 0000000000000000000000000000000000000000..5a54e9877430650d1835b3b5a117d0cbbe51b350 --- /dev/null +++ b/wax-prosemirror-themes/src/coko-theme/elements/Button.js @@ -0,0 +1,17 @@ +import styled, { css } from "styled-components"; + +export default css` + background: #fff; + border: none; + font-size: inherit; + cursor: pointer; + border-radius: 0; + padding: 5px 10px; + &:disabled { + color: #ccc; + pointer-events: none; + } + &:hover { + background: #f6f6f6; + } +`; diff --git a/wax-prosemirror-themes/src/coko-theme/elements/index.js b/wax-prosemirror-themes/src/coko-theme/elements/index.js new file mode 100644 index 0000000000000000000000000000000000000000..1fdf4382e5bd73f112a978acdddd4aa444265db1 --- /dev/null +++ b/wax-prosemirror-themes/src/coko-theme/elements/index.js @@ -0,0 +1 @@ +export { default as Button } from "./Button"; diff --git a/wax-prosemirror-themes/src/coko-theme/index.js b/wax-prosemirror-themes/src/coko-theme/index.js index a8f8b87d9c172b8c5ec5ed9fbd199bd117be63eb..6f58b08f6729ccaa120b9568f3182891585e4df5 100644 --- a/wax-prosemirror-themes/src/coko-theme/index.js +++ b/wax-prosemirror-themes/src/coko-theme/index.js @@ -2,6 +2,8 @@ import "typeface-fira-sans-condensed"; import "typeface-vollkorn"; +import { Button } from "./elements"; + const cokoTheme = { /* Colors */ colorBackground: "white", @@ -63,7 +65,11 @@ const cokoTheme = { transitionTimingFunction: "ease", transitionDelay: "0", /* Breakpoints */ - breakpoints: [480, 768, 1000, 1272] + breakpoints: [480, 768, 1000, 1272], + + cssOverrides: { + Button + } }; export default cokoTheme;