editor.js/src/styles/variables.css
Peter Savchenko 972eb87d89
UI: Block Settings, show Plus after Enter keydown (#265)
* Some UI improvements: icons settigns

* Show plus button after split

* decrease autoprefixer

* rename variable
2018-06-28 12:20:41 +03:00

77 lines
1.4 KiB
CSS

:root {
/**
* Toolbar buttons
*/
--bg-light: #eff2f5;
/**
* All gray texts: placeholders, settings
*/
--grayText: #707684;
/** Blue icons */
--color-active-icon: #388AE5;
/**
* Block content width
*/
--content-width: 650px;
/**
* Toolbar Plus Button and Toolbox buttons height and width
*/
--toolbar-buttons-size: 34px;
/**
* Confirm deletion bg
*/
--color-confirm: #E24A4A;
--overlay-pane: {
position: absolute;
background: #FFFFFF;
box-shadow: 0 8px 23px -6px rgba(21,40,54,0.31), 22px -14px 34px -18px rgba(33,48,73,0.26);
border-radius: 4px;
z-index: 2;
&::before {
content: '';
width: 15px;
height: 15px;
position: absolute;
top: -7px;
left: 50%;
margin-left: -7px;
transform: rotate(-45deg);
background: #fff;
z-index: -1;
}
};
--toolbar-button: {
display: inline-block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
border-radius: 3px;
cursor: pointer;
border: 0;
outline: none;
background: transparent;
vertical-align: bottom;
color: var(--grayText);
&:not(:last-of-type){
margin-right: 5px;
}
&:hover {
background: var(--bg-light);
}
&--active {
color: var(--color-active-icon);
}
};
}