1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 15:42:41 +01:00
BookStack/resources/sass/_forms.scss
Dan Brown f7ad387a10
CSS: Updated status colors to be CSS variables, Added dark variants
Needed some level of harcoding though due to callouts using colors,
which can't be css colors as DOMPDF won't understand these.
Use css variables elsewhere and added new dark variants to fit a bit
better.
2023-06-13 15:52:33 +01:00

558 lines
10 KiB
SCSS

.input-base {
border-radius: 3px;
border: 1px solid #D4D4D4;
@include lightDark(background-color, #fff, #333);
@include lightDark(border-color, #d4d4d4, #111);
@include lightDark(color, #666, #AAA);
display: inline-block;
font-size: $fs-m;
padding: $-xs*1.8;
height: 40px;
width: 250px;
max-width: 100%;
&.neg, &.invalid {
border: 1px solid var(--color-negative);
}
&.pos, &.valid {
border: 1px solid var(--color-positive);
}
&.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);
}
}
.input-fill-width {
width: 100% !important;
}
.fake-input {
@extend .input-base;
overflow: auto;
}
#html-editor {
display: none;
}
#markdown-editor {
position: relative;
z-index: 5;
#markdown-editor-input {
font-style: normal;
font-weight: 400;
padding: $-xs $-m;
color: #444;
border-radius: 0;
max-height: 100%;
flex: 1;
border: 0;
width: 100%;
&:focus {
outline: 0;
}
}
&.fullscreen {
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: 2;
}
}
.markdown-editor-wrap {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
position: relative;
flex: 1;
min-width: 0;
}
.markdown-editor-wrap + .markdown-editor-wrap {
flex-basis: 50%;
flex-shrink: 0;
flex-grow: 0;
}
.markdown-editor-wrap .cm-editor {
flex: 1;
max-width: 100%;
border: 0;
margin: 0;
}
.markdown-panel-divider {
width: 2px;
@include lightDark(background-color, #ddd, #000);
cursor: col-resize;
}
@include smaller-than($m) {
#markdown-editor {
flex-direction: column;
}
#markdown-editor .markdown-editor-wrap {
width: 100%;
max-width: 100%;
flex-grow: 1;
flex-basis: auto !important;
}
.editor-toolbar-label {
float: none !important;
@include lightDark(border-color, #DDD, #555);
display: block;
}
.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-editor-display {
background-color: #fff;
body {
display: block;
background-color: #fff;
padding-inline-start: 16px;
padding-inline-end: 16px;
}
[drawio-diagram]:hover {
outline: 2px solid var(--color-primary);
}
}
html.markdown-editor-display.dark-mode {
background-color: #222;
body {
background-color: #222;
}
}
.editor-toolbar {
height: 32px;
width: 100%;
font-size: 11px;
line-height: 1.6;
border-bottom: 1px solid #DDD;
background-color: #EEE;
@include lightDark(background-color, #eee, #111);
@include lightDark(border-color, #ddd, #000);
flex: none;
@include whenDark {
button {
color: #AAA;
}
}
}
.editor-toolbar .buttons {
font-size: $fs-m;
.dropdown-menu {
padding: 0;
}
.toggle-switch {
margin: $-s 0;
}
}
.editor-toolbar .buttons button {
font-size: .9rem;
width: 2rem;
text-align: center;
border-left: 1px solid;
@include lightDark(border-color, #DDD, #555);
svg {
margin-inline-end: 0;
}
&:hover {
@include lightDark(background-color, #DDD, #222);
}
}
label {
@include lightDark(color, #666, #ddd);
display: block;
line-height: 1.4em;
font-size: 0.94em;
font-weight: 400;
padding-bottom: 2px;
margin-bottom: 0.2em;
&.inline {
display: inline-block;
}
}
label.radio, label.checkbox {
font-weight: 400;
user-select: none;
input[type="radio"], input[type="checkbox"] {
margin-inline-end: $-xs;
}
}
label.inline.checkbox {
margin-inline-end: $-m;
}
label + p.small {
margin-bottom: 0.8em;
}
table.form-table {
max-width: 100%;
td {
overflow: hidden;
padding: math.div($-xxs, 2) 0;
}
}
input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"],
input[type="color"], input[type="password"], select, textarea {
@extend .input-base;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23666666'><polygon points='0,0 100,0 50,50'/></svg>");
background-size: 10px 12px;
background-position: calc(100% - 20px) 64%;
background-repeat: no-repeat;
@include rtl {
background-position: 20px 70%;
}
}
input[type=date] {
width: 190px;
}
input[type=color] {
height: 60px;
&.small {
height: 42px;
width: 60px;
padding: 2px;
}
}
.toggle-switch {
user-select: none;
display: inline-grid;
grid-template-columns: (16px + $-s) 1fr;
align-items: center;
margin: $-m 0;
.custom-checkbox {
width: 16px;
height: 16px;
border-radius: 2px;
display: inline-block;
border: 2px solid currentColor;
overflow: hidden;
fill: currentColor;
.svg-icon {
width: 100%;
height: 100%;
margin: 0;
bottom: auto;
top: -1.5px;
left: 0;
transition: transform ease-in-out 120ms;
transform: scale(0);
transform-origin: center center;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked + .custom-checkbox .svg-icon {
transform: scale(1);
}
.custom-checkbox:hover {
background-color: rgba(0, 0, 0, 0.05);
opacity: 0.8;
}
input[type=checkbox][disabled] ~ * {
opacity: 0.8;
cursor: not-allowed;
}
input[type=checkbox][disabled] ~ .custom-checkbox {
border-color: #999;
color: #999 !important;
background: #f2f2f2;
}
}
.toggle-switch-list {
.toggle-switch {
margin: $-xs 0;
}
&.compact .toggle-switch {
margin: 1px 0;
}
}
.form-group {
margin-bottom: $-s;
}
.setting-list > div {
border-bottom: 1px solid #DDD;
padding: $-xl 0;
&:last-child {
border-bottom: none;
}
}
.setting-list-label {
color: #222;
font-size: 1rem;
}
.setting-list-label + p.small {
margin-bottom: 0;
}
.setting-list-label + .grid {
margin-top: $-m;
}
.setting-list .grid, .stretch-inputs {
input[type=text], input[type=email], input[type=password], select {
width: 100%;
}
}
.simple-code-input {
background-color: #F8F8F8;
font-family: monospace;
font-size: 12px;
min-height: 100px;
display: block;
width: 100%;
}
.form-group {
div.text-pos, div.text-neg, p.text-post, p.text-neg {
padding: $-xs 0;
}
}
.form-group.collapsible {
padding: 0 $-m;
border: 1px solid;
@include lightDark(border-color, #DDD, #000);
border-radius: 4px;
.collapse-title {
margin-inline-start: -$-m;
margin-inline-end: -$-m;
padding: $-s $-m;
display: block;
width: calc(100% + 32px);
text-align: start;
}
.collapse-title, .collapse-title label {
cursor: pointer;
}
.collapse-title label {
padding-bottom: 0;
margin-bottom: 0;
color: inherit;
}
.collapse-title label:before {
display: inline-block;
content: '';
margin-inline-end: $-m;
transition: all ease-in-out 400ms;
transform: rotate(0);
}
.collapse-content {
display: none;
padding-bottom: $-m;
}
&.open .collapse-title label:before {
transform: rotate(90deg);
}
}
.title-input input[type="text"] {
display: block;
width: 100%;
padding: $-s;
margin-top: 0;
font-size: 2em;
height: auto;
}
.title-input.page-title {
font-size: 0.8em;
@include lightDark(background-color, #fff, #333);
.input {
border: 0;
margin-bottom: -1px;
}
input[type="text"] {
max-width: 840px;
margin: 0 auto;
border: none;
height: auto;
}
}
.page-title input {
display: block;
width: 100%;
font-size: 1.4em;
}
.description-input textarea {
display: block;
width: 100%;
padding: $-s;
font-size: $fs-m;
color: #666;
height: auto;
}
div[editor-type="markdown"] .title-input.page-title input[type="text"] {
max-width: 100%;
border-radius: 0;
}
.search-box {
max-width: 100%;
position: relative;
button[tabindex="-1"] {
background-color: transparent;
border: none;
@include lightDark(color, #666, #AAA);
padding: 0;
cursor: pointer;
position: absolute;
left: 8px;
top: 9px;
@include rtl {
right: 8px;
left: auto;
}
}
input {
display: block;
padding: $-xs * 1.5;
padding-inline-start: $-l + 4px;
width: 300px;
max-width: 100%;
height: auto;
}
&.flexible input {
width: 100%;
}
.search-box-cancel {
left: auto;
right: 0;
}
}
.contained-search-box {
display: flex;
height: 38px;
z-index: -1;
&.floating {
box-shadow: $bs-med;
border-radius: 4px;
overflow: hidden;
@include whenDark {
border: 1px solid #000;
}
}
input, button {
height: 100%;
border-radius: 0;
border: 1px solid #ddd;
@include lightDark(border-color, #ddd, #000);
margin-inline-start: -1px;
&:last-child {
border-inline-end: 0;
}
}
input {
border: 0;
flex: 5;
padding: $-xs $-s;
&:focus, &:active {
outline: 1px dotted var(--color-primary);
outline-offset: -2px;
border: 0;
}
}
button {
border: 0;
width: 48px;
border-inline-start: 1px solid #DDD;
background-color: #FFF;
@include lightDark(background-color, #FFF, #333);
@include lightDark(color, #444, #AAA);
}
button:focus {
outline: 1px dotted var(--color-primary);
outline-offset: -2px;
}
svg {
margin: 0;
}
@include smaller-than($s) {
width: 180px;
}
}
.outline > input {
border: 0;
border-bottom: 2px solid #DDD;
border-radius: 0;
&:focus, &:active {
border: 0;
border-bottom: 2px solid #AAA;
outline: 0;
}
}
.image-picker img {
background-color: #BBB;
max-width: 100%;
}
.custom-file-input {
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0, 0);
}
.custom-file-input:focus + label {
border-color: var(--color-primary);
outline: 1px solid var(--color-primary);
}
input.shortcut-input {
width: auto;
max-width: 120px;
height: auto;
}