&.disabled, &[disabled] {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
}
+ &[readonly] {
+ background-color: #f8f8f8;
+ }
&:focus {
border-color: var(--color-primary);
outline: 1px solid var(--color-primary);
width: 50%;
max-width: 50%;
}
+ &.fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ z-index: 2;
+ }
}
@include smaller-than($m) {
#markdown-editor .markdown-editor-wrap {
width: 100%;
max-width: 100%;
+ flex-grow: 1;
}
#markdown-editor .editor-toolbar {
padding: 0;
border-bottom: 1px solid #DDD;
display: block;
}
- .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
+ .markdown-editor-wrap:not(.active) .editor-toolbar + div,
+ .markdown-editor-wrap:not(.active) .editor-toolbar .buttons,
+ .markdown-editor-wrap:not(.active) .markdown-display {
display: none;
}
#markdown-editor .markdown-editor-wrap:not(.active) {
flex-grow: 0;
flex: none;
+ min-height: 0;
}
}
.markdown-display {
- margin-left: -1px;
+ margin-inline-start: -1px;
}
.markdown-editor-display {
background-color: #FFFFFF;
body {
background-color: #FFFFFF;
- padding-left: 16px;
- padding-right: 16px;
+ padding-inline-start: 16px;
+ pmargin-inline-end: 16px;
}
[drawio-diagram]:hover {
outline: 2px solid var(--color-primary);
font-weight: 400;
user-select: none;
input[type="radio"], input[type="checkbox"] {
- margin-right: $-xs;
+ margin-inline-end: $-xs;
}
}
label.inline.checkbox {
- margin-right: $-m;
+ margin-inline-end: $-m;
}
label + p.small {
input[type=color] {
height: 60px;
+ &.small {
+ height: 42px;
+ width: 60px;
+ padding: 2px;
+ }
}
.toggle-switch {
border: 1px solid #DDD;
border-radius: 4px;
.collapse-title {
- margin-left: -$-m;
- margin-right: -$-m;
+ margin-inline-start: -$-m;
+ margin-inline-end: -$-m;
padding: $-s $-m;
display: block;
width: calc(100% + 32px);
- text-align: left;
+ text-align: start;
}
.collapse-title, .collapse-title label {
cursor: pointer;
.collapse-title label:before {
display: inline-block;
content: '▸';
- margin-right: $-m;
+ margin-inline-end: $-m;
transition: all ease-in-out 400ms;
transform: rotate(0);
}
position: absolute;
left: 8px;
top: 9px;
+ @include rtl {
+ right: 8px;
+ left: auto;
+ }
}
input {
display: block;
- padding-left: $-l + 4px;
+ padding-inline-start: $-l + 4px;
width: 300px;
max-width: 100%;
}