136 lines
4.9 KiB
SCSS
136 lines
4.9 KiB
SCSS
@use '@lucas-labs/lui-micro/var' as var;
|
|
@use '@lucas-labs/lui-micro/color' as color;
|
|
|
|
@mixin editor {
|
|
#comment-form, .edit-content-zone {
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
|
|
.combo-markdown-editor {
|
|
.top.tabular.menu {
|
|
background-color: var(--color-box-header);
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
min-height: 0px;
|
|
margin-bottom: var.get('measure/1x') !important;
|
|
|
|
.item {
|
|
margin: -1px 0 0 -1px; // merge borders
|
|
border-top-left-radius: var(--border-radius) !important;
|
|
border-top-right-radius: var(--border-radius) !important;
|
|
padding: var.get('measure/.5x') var.get('measure/.75x') !important;
|
|
font-weight: 400;
|
|
|
|
&:hover {
|
|
color: var(--color-text-light-2);
|
|
}
|
|
|
|
&.active {
|
|
color: var(--color-text);
|
|
&:after {
|
|
// a hacky 1 pixel "button border" to make the border
|
|
// of the whole menu disappear under the active tab
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: var(--color-body);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
.EasyMDEContainer { // legacy editor
|
|
border: none !important;
|
|
|
|
.editor-toolbar {
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
markdown-toolbar, .EasyMDEContainer .editor-toolbar {
|
|
padding: 0 10px !important;
|
|
|
|
.markdown-toolbar-group {
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
|
|
&:not(:last-child) {
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: relative;
|
|
width: 1px;
|
|
flex: 1;
|
|
margin: var.get('measure/.375x') var.get('measure/.375x') !important;
|
|
background-color: color.get('elevation/6');
|
|
}
|
|
}
|
|
}
|
|
|
|
.markdown-toolbar-button, button {
|
|
line-height: 0;
|
|
display: inline-block;
|
|
color: var(--color-text-light-2) !important;
|
|
padding: var.get('measure/.375x') !important;
|
|
transition: background-color .1s ease;
|
|
border-radius: var.get('measure/.375x') !important;
|
|
height: auto;
|
|
min-width: fit-content;
|
|
|
|
&:hover {
|
|
background-color: color.get('elevation/5') !important;
|
|
}
|
|
|
|
// if has attribute level
|
|
&[level] {
|
|
width: 34px;
|
|
}
|
|
|
|
// if aria-checked is true
|
|
&[aria-checked="true"] {
|
|
background-color: color.get('elevation/4');
|
|
}
|
|
}
|
|
|
|
button {
|
|
&:after {
|
|
vertical-align: unset !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
padding: var.get('measure/1x') var.get('measure/1x') !important;
|
|
}
|
|
|
|
.editor-statusbar {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
&.markup {
|
|
padding: 0 var.get('measure/1x') var.get('measure/1x');
|
|
}
|
|
}
|
|
}
|
|
|
|
.field:first-child {
|
|
border: 1px solid var(--color-secondary);
|
|
border-radius: var(--border-radius);
|
|
&:focus-within {
|
|
outline: 2px solid var(--color-accent);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: var.get('measure/1x') !important;
|
|
}
|
|
}
|
|
}
|