editor.js/src/styles/inline-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

71 lines
1.1 KiB
CSS

.ce-inline-toolbar {
@apply --overlay-pane;
padding: 6px;
transform: translateX(-50%);
display: none;
box-shadow: 0 6px 12px -6px rgba(131, 147, 173, 0.46),
5px -12px 34px -13px rgba(97, 105, 134, 0.6),
0 26px 52px 3px rgba(147, 165, 186, 0.24);
&--showed {
display: block;
}
[hidden] {
display: none !important;
}
&__buttons {
display: flex;
}
}
.ce-inline-tool {
@apply --toolbar-button;
line-height: normal;
&--last {
margin-right: 0 !important;
}
&--link {
.icon {
margin-top: -2px;
}
.icon--unlink {
display: none;
}
}
&--unlink {
.icon--link {
display: none;
}
.icon--unlink {
display: inline-block;
}
}
&-input {
background-color: var(--bg-light);
outline: none;
border: 0;
border-radius: 3px;
margin: 6px 0 0;
font-size: 13px;
padding: 8px;
width: 100%;
box-sizing: border-box;
display: none;
&::placeholder {
color: var(--grayText);
}
&--showed {
display: block;
}
}
}