editor.js/src/styles/toolbar.css
Peter Savchenko aab317895b
Responsive layout (#593)
* Mobile adaptation beginned

* mobile ready

* Narrow mode supported

* update version

* disable narrow mode testing

* prod build

* rm unnecessary code

* Update src/styles/variables.css

* rm unused code

* add viewport

* disable narrow mode on mobile

* mobile: add bg to current block

* add paddings for highlighted block

* rm changelog
2019-01-12 05:47:19 +03:00

113 lines
1.7 KiB
CSS

.ce-toolbar {
position: absolute;
left: 0;
right: 0;
top: 0;
/*opacity: 0;*/
/*visibility: hidden;*/
transition: opacity 100ms ease;
will-change: opacity, transform;
display: none;
@media (--mobile) {
position: fixed;
bottom: 0;
top: auto;
left: 0;
right: 0;
z-index: 9;
height: 50px;
background: #fff;
box-shadow: 0 -2px 12px rgba(60, 67, 81, 0.18);
transform: none !important;
}
&--opened {
display: block;
@media (--mobile){
display: flex;
}
}
&__content {
max-width: var(--content-width);
margin: 0 auto;
position: relative;
@media (--mobile){
display: flex;
align-content: center;
margin: 0;
padding: 0 10px;
max-width: calc(100% - 70px);
overflow-x: auto;
}
}
&__plus {
@apply --toolbox-button;
position: absolute;
left: calc(var(--toolbox-buttons-size) * -1);
&--hidden {
display: none;
}
@media (--mobile){
display: none !important;
}
}
&__plus,
.ce-toolbox {
top: 50%;
transform: translateY(-50%);
}
/**
* Block actions Zone
* -------------------------
*/
&__actions {
position: absolute;
right: 0;
top: 10px;
padding-right: 16px;
opacity: 0;
@media (--mobile){
position: static;
margin-left: auto;
display: flex;
align-items: center;
}
&--opened {
opacity: 1;
}
&-buttons {
text-align: right;
}
}
&__settings-btn {
display: inline-block;
width: 24px;
height: 24px;
color: var(--grayText);
cursor: pointer;
}
}
/**
* Styles for Narrow mode
*/
.codex-editor--narrow .ce-toolbar__plus {
@media (--not-mobile) {
left: 5px;
}
}