X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/b80b6ed942c0eddfc5591b0f6745a990322c8ee2..refs/pull/3433/head:/resources/sass/_components.scss diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 13e16e42f..e3c9d5eea 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -61,7 +61,7 @@ } } -[chapter-toggle] { +.chapter-contents-toggle { cursor: pointer; margin: 0; transition: all ease-in-out 180ms; @@ -77,11 +77,11 @@ transform: rotate(90deg); } svg[data-icon="caret-right"] + * { - margin-inline-start: $-xs; + margin-inline-start: $-xxs; } } -[overlay] { +[overlay], .popup-background { @include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6)); position: fixed; z-index: 95536; @@ -120,6 +120,11 @@ width: 800px; max-width: 90%; } + &.very-small { + margin: 2% auto; + width: 600px; + max-width: 90%; + } &:before { display: flex; align-self: flex-start; @@ -190,18 +195,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { float: left; margin: 0; cursor: pointer; - width: (100%/6); + width: math.div(100%, 6); height: auto; @include lightDark(border-color, #ddd, #000); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transition: all cubic-bezier(.4, 0, 1, 1) 160ms; overflow: hidden; &.selected { - //transform: scale3d(0.92, 0.92, 0.92); - border: 4px solid #FFF; - overflow: hidden; - border-radius: 8px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); + transform: scale3d(0.92, 0.92, 0.92); + outline: currentColor 2px solid; } img { width: 100%; @@ -222,7 +224,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } } @include smaller-than($xl) { - width: (100%/4); + width: math.div(100%, 4); } @include smaller-than($m) { .image-meta { @@ -231,7 +233,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } } -#image-manager .load-more { +.image-manager .load-more { display: block; text-align: center; @include lightDark(background-color, #EEE, #444); @@ -243,6 +245,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { font-style: italic; } +.image-manager .loading-container { + text-align: center; +} + .image-manager-sidebar { width: 300px; overflow-y: auto; @@ -250,6 +256,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { border-inline-start: 1px solid #DDD; @include lightDark(border-color, #ddd, #000); .inner { + min-height: auto; padding: $-m; } img { @@ -291,6 +298,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } } +.image-manager .corner-button { + margin: 0; + border-radius: 0; + padding: $-m; +} + // Dropzone /* * The MIT License @@ -298,7 +311,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { */ .dz-message { font-size: 1em; - line-height: 2.35; + line-height: 2.85; font-style: italic; color: #888; text-align: center; @@ -601,9 +614,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { display: inline-block; @include lightDark(color, #666, #999); cursor: pointer; + border-right: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 2px solid transparent; &.selected { border-bottom: 2px solid var(--color-primary); } + &:last-child { + border-right: 0; + } } } @@ -611,12 +629,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { display: none; } -#code-editor .CodeMirror { +.code-editor .CodeMirror { height: 400px; } -#code-editor .lang-options { - max-width: 480px; +.code-editor .lang-options { + max-width: 540px; margin-bottom: $-s; a { margin-inline-end: $-xs; @@ -625,10 +643,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } @include smaller-than($m) { - #code-editor .lang-options { + .code-editor .lang-options { max-width: 100%; } - #code-editor .CodeMirror { + .code-editor .CodeMirror { height: 200px; } } @@ -711,4 +729,113 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .template-item-actions button:first-child { border-top: 0; } +} + + +.dropdown-search { + position: relative; +} +.dropdown-search-toggle-breadcrumb { + border: 1px solid transparent; + border-radius: 4px; + line-height: normal; + padding: $-xs; + &:hover { + border-color: #DDD; + } + .svg-icon { + margin-inline-end: 0; + } +} +.dropdown-search-toggle-select { + display: flex; + gap: $-s; + line-height: normal; + .svg-icon { + height: 16px; + margin: 0; + } + .avatar { + height: 22px; + width: 22px; + } + .avatar + span { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .dropdown-search-toggle-caret { + font-size: 1.15rem; + } +} +.dropdown-search-toggle-select-label { + min-width: 0; + white-space: nowrap; +} +.dropdown-search-toggle-select-caret { + font-size: 1.5rem; + line-height: 0; + margin-left: auto; + margin-top: -2px; +} + +.dropdown-search-dropdown { + box-shadow: $bs-med; + overflow: hidden; + min-height: 100px; + width: 240px; + display: none; + position: absolute; + z-index: 80; + right: 0; + top: 0; + margin-top: $-m; + @include rtl { + right: auto; + left: -$-m; + } + .dropdown-search-search .svg-icon { + position: absolute; + left: $-s; + @include rtl { + right: $-s; + left: auto; + } + top: 11px; + fill: #888; + pointer-events: none; + } + .dropdown-search-list { + max-height: 400px; + overflow-y: scroll; + text-align: start; + } + .dropdown-search-item { + padding: $-s $-m; + &:hover,&:focus { + background-color: #F2F2F2; + text-decoration: none; + } + } + input, input:focus { + padding-inline-start: $-xl; + border-radius: 0; + border: 0; + border-bottom: 1px solid #DDD; + } + input:focus { + outline: 0; + } +} + +@include smaller-than($m) { + .dropdown-search-dropdown { + position: fixed; + right: auto; + left: $-m; + } + .dropdown-search-dropdown .dropdown-search-list { + max-height: 240px; + } } \ No newline at end of file