BookStack/resources/sass/_components.scss
Dan Brown ffd6a1002e
Centralised handling of permission form data to own class
Also updates show roles on permission view to just those with
permissions applied.
Fixes rounded borders for lone permission rows.
Moves "Everyone Else" handling from role to new class.
2022-10-09 17:14:11 +01:00

969 lines
No EOL
17 KiB
SCSS

// System wide notifications
[notification] {
position: fixed;
top: 0;
right: 0;
margin: $-xl;
padding: $-m $-l;
background-color: #FFF;
@include lightDark(background-color, #fff, #444);
border-radius: 4px;
border-inline-start: 6px solid currentColor;
box-shadow: $bs-large;
z-index: 999999;
cursor: pointer;
max-width: 360px;
transition: transform ease-in-out 280ms;
transform: translateX(580px);
display: grid;
grid-template-columns: 42px 1fr 12px;
color: #444;
font-weight: 700;
span, svg {
vertical-align: middle;
justify-self: center;
align-self: center;
}
svg {
width: 2.8rem;
height: 2.8rem;
padding-inline-end: $-s;
fill: currentColor;
}
.dismiss {
margin-top: -8px;
svg {
height: 1.0rem;
@include lightDark(color, #444, #888);
}
}
span {
vertical-align: middle;
line-height: 1.3;
@include whenDark {
color: #BBB;
}
}
&.pos {
color: $positive;
}
&.neg {
color: $negative;
}
&.warning {
color: $warning;
}
&.showing {
transform: translateX(0);
}
&.showing:hover {
transform: translate3d(0, -2px, 0);
}
}
.chapter-contents-toggle {
cursor: pointer;
margin: 0;
transition: all ease-in-out 180ms;
user-select: none;
svg[data-icon="caret-right"] {
margin-inline-end: 0;
font-size: 1rem;
transition: all ease-in-out 180ms;
transform: rotate(0deg);
transform-origin: 50% 50%;
}
&.open svg[data-icon="caret-right"] {
transform: rotate(90deg);
}
svg[data-icon="caret-right"] + * {
margin-inline-start: $-xxs;
}
}
[overlay], .popup-background {
@include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
position: fixed;
z-index: 95536;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
align-items: center;
justify-content: center;
display: none;
}
.popup-body-wrap {
display: flex;
}
.popup-body {
@include lightDark(background-color, #fff, #333);
max-height: 90%;
max-width: 1200px;
width: 90%;
height: auto;
margin: 2% auto;
border-radius: 4px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
overflow: hidden;
z-index: 999;
display: flex;
flex-direction: column;
&.small {
margin: 2% auto;
width: 800px;
max-width: 90%;
}
&.very-small {
margin: 2% auto;
width: 600px;
max-width: 90%;
}
&:before {
display: flex;
align-self: flex-start;
}
.popup-content {
overflow-y: auto;
}
&:focus {
outline: 0;
}
}
.popup-header button, .popup-footer button {
margin: 0;
border-radius: 0;
box-shadow: none;
color: #FFF;
padding: $-xs $-m;
}
.popup-header button:not(.popup-header-close) {
font-size: 0.8rem;
}
.popup-header button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.popup-footer {
justify-content: end;
background-color: var(--color-primary-light);
min-height: 41px;
button {
padding: 10px $-m;
}
}
.popup-header-close {
border: 0;
color: #FFF;
font-size: 16px;
cursor: pointer;
svg {
margin-right: 0;
}
}
.popup-header, .popup-footer {
display: flex;
position: relative;
height: 40px;
flex: 0;
.popup-title {
color: #FFF;
margin-right: auto;
padding: 8px $-m;
}
&.flex-container-row {
display: flex !important;
}
}
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: 444px;
min-height: 444px;
}
#entity-selector-wrap .popup-body .form-group {
margin: 0;
}
.popup-body .entity-selector-container {
flex: 1;
}
.image-manager-body {
min-height: 70vh;
}
.dropzone-container {
position: relative;
@include lightDark(background-color, #eee, #222);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.image-manager-list .image {
display: block;
position: relative;
border-radius: 0;
float: left;
margin: 0;
cursor: pointer;
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);
outline: currentColor 2px solid;
}
img {
width: 100%;
max-width: 100%;
display: block;
}
.image-meta {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
color: #EEE;
background-color: rgba(0, 0, 0, 0.4);
font-size: 10px;
padding: 3px 4px;
span {
display: block;
}
}
@include smaller-than($xl) {
width: math.div(100%, 4);
}
@include smaller-than($m) {
.image-meta {
display: none;
}
}
}
.image-manager .load-more {
display: block;
text-align: center;
@include lightDark(background-color, #EEE, #444);
padding: $-s $-m;
color: #AAA;
clear: both;
font-size: 20px;
cursor: pointer;
font-style: italic;
}
.image-manager .loading-container {
text-align: center;
}
.image-manager-sidebar {
width: 300px;
overflow-y: auto;
overflow-x: hidden;
border-inline-start: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
.inner {
min-height: auto;
padding: $-m;
}
img {
max-width: 100%;
max-height: 180px;
display: block;
margin: 0 auto $-m auto;
box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
}
.image-manager-viewer {
height: 196px;
display: flex;
align-items: center;
justify-content: center;
a {
display: inline-block;
}
}
.dropzone-container {
border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
}
}
.image-manager-list {
overflow-y: scroll;
flex: 1;
}
.image-manager-content {
display: flex;
flex-direction: column;
flex: 1;
.container {
width: 100%;
}
.full-tab {
text-align: center;
}
}
// Dropzone
/*
* The MIT License
* Copyright (c) 2012 Matias Meno <m@tias.me>
*/
.dz-message {
font-size: 1em;
line-height: 2.85;
font-style: italic;
color: #888;
text-align: center;
cursor: pointer;
padding: $-l $-m;
transition: all ease-in-out 120ms;
}
.dz-drag-hover .dz-message {
background-color: rgb(16, 126, 210);
color: #EEE;
}
@keyframes passing-through {
0% {
opacity: 0;
transform: translateY(40px);
}
30%, 70% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(-40px);
}
}
@keyframes slide-in {
0% {
opacity: 0;
transform: translateY(40px);
}
30% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
10% {
transform: scale(1.1);
}
20% {
transform: scale(1);
}
}
.dropzone, .dropzone * {
box-sizing: border-box;
}
.dz-preview {
position: relative;
display: inline-block;
vertical-align: top;
margin: 12px;
min-height: 80px;
}
.dz-preview:hover {
z-index: 1000;
}
.dz-preview:hover .dz-details {
opacity: 1;
}
.dz-preview.dz-file-preview .dz-image {
border-radius: 4px;
background: #e9e9e9;
}
.dz-preview.dz-file-preview .dz-details {
opacity: 1;
}
.dz-preview.dz-image-preview {
background: white;
}
.dz-preview.dz-image-preview .dz-details {
transition: opacity 0.2s linear;
}
.dz-preview .dz-remove {
font-size: 13px;
text-align: center;
display: block;
cursor: pointer;
border: none;
margin-top: 3px;
}
.dz-preview .dz-remove:hover {
text-decoration: underline;
}
.dz-preview:hover .dz-details {
opacity: 1;
}
.dz-preview .dz-details {
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 10px;
min-width: 100%;
max-width: 100%;
padding: 6px 3px;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%;
}
.dz-preview .dz-details .dz-size {
margin-bottom: 0.5em;
font-size: 12px;
}
.dz-preview .dz-details .dz-filename {
white-space: nowrap;
}
.dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8);
}
.dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis;
}
.dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent;
}
.dz-preview .dz-details .dz-filename span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px;
}
.dz-preview:hover .dz-image img {
filter: blur(8px);
}
.dz-preview .dz-image {
border-radius: 4px;
overflow: hidden;
width: 80px;
height: 80px;
position: relative;
display: block;
z-index: 10;
}
.dz-preview .dz-image img {
display: block;
}
.dz-preview.dz-success .dz-success-mark {
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dz-preview.dz-error .dz-error-mark {
opacity: 1;
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
pointer-events: none;
opacity: 0;
z-index: 1001;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-inline-start: -27px;
margin-top: -35px;
}
.dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px;
}
.dz-preview.dz-processing .dz-progress {
opacity: 1;
transition: all 0.2s linear;
}
.dz-preview.dz-complete .dz-progress {
opacity: 0;
transition: opacity 0.4s ease-in;
}
.dz-preview:not(.dz-processing) .dz-progress {
animation: pulse 6s ease infinite;
}
.dz-preview .dz-progress {
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 16px;
left: 50%;
top: 50%;
margin-top: -8px;
width: 80px;
margin-inline-start: -40px;
background: rgba(255, 255, 255, 0.9);
transform: scale(1);
border-radius: 8px;
overflow: hidden;
}
.dz-preview .dz-progress .dz-upload {
background: #333;
background: linear-gradient(to bottom, #666, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
transition: width 300ms ease-in-out;
}
.dz-preview.dz-error .dz-error-message {
display: block;
}
.dz-preview.dz-error {
.dz-image, .dz-details {
&:hover ~ .dz-error-message {
opacity: 1;
pointer-events: auto;
}
}
}
.dz-preview .dz-error-message {
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 4px;
font-size: 12px;
line-height: 1.2;
top: 88px;
left: -12px;
width: 160px;
background: $negative;
padding: $-xs;
color: white;
}
.dz-preview .dz-error-message:after {
content: '';
position: absolute;
top: -6px;
left: 44px;
width: 0;
height: 0;
border-inline-start: 6px solid transparent;
border-inline-end: 6px solid transparent;
border-bottom: 6px solid $negative;
}
.tab-container .nav-tabs {
text-align: start;
border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #444);
margin-bottom: $-m;
.tab-item {
padding: $-s;
@include lightDark(color, #666, #999);
&.selected {
border-bottom-width: 3px;
}
}
}
.nav-tabs {
text-align: center;
a, .tab-item {
padding: $-m;
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;
}
}
}
.image-picker .none {
display: none;
}
.code-editor .CodeMirror {
height: auto;
min-height: 50vh;
border-bottom: 0;
}
.code-editor .lang-options {
overflow-y: scroll;
flex-basis: 200px;
flex-grow: 1;
}
.code-editor .lang-options button {
display: block;
padding: $-xs $-m;
border-bottom: 1px solid;
@include lightDark(color, #333, #AAA);
@include lightDark(border-bottom-color, #EEE, #000);
cursor: pointer;
width: 100%;
text-align: left;
font-family: $mono;
font-size: 0.7rem;
padding-left: 24px + $-xs;
&:hover, &.active {
background-color: var(--color-primary-light);
color: var(--color-primary);
}
}
.code-editor button.lang-option-favorite-toggle {
position: absolute;
top: 0;
left: 0;
width: 28px;
font-size: 1rem;
border: 0;
line-height: 1;
padding: 2px;
z-index: 2;
height: 100%;
text-align: center;
color: var(--color-primary);
svg {
margin: 0;
}
}
.code-editor button[data-favourite="true"] ~ .action-favourite,
.code-editor button[data-favourite="false"] ~ .action-unfavourite {
display: none;
}
.code-editor .action-favourite {
opacity: 0.5;
}
.code-editor button:hover ~ .action-favourite {
opacity: 1;
}
.code-editor label {
background-color: var(--color-primary-light);
width: 100%;
color: var(--color-primary);
padding: $-xxs $-s;
margin-bottom: 0;
}
.code-editor-language-list {
position: relative;
width: 160px;
z-index: 2;
align-items: stretch;
}
.code-editor-language-list input {
border-radius: 0;
border: 0;
border-bottom: 1px solid #DDD;
padding: $-xs $-s;
height: auto;
}
.code-editor-main {
flex: 1;
min-width: 0;
.CodeMirror {
margin-bottom: 0;
z-index: 1;
max-width: 100%;
width: 100%;
}
}
.code-editor-body-wrap {
height: 80vh;
}
@include smaller-than($s) {
.code-editor .lang-options {
display: none;
}
.code-editor-body-wrap {
flex-direction: column;
}
.code-editor-language-list, .code-editor-language-list input {
width: 100%;
}
}
.comment-box {
border-radius: 4px;
border: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
@include lightDark(background-color, #FFF, #222);
.content {
font-size: 0.666em;
p, ul, ol {
font-size: $fs-m;
margin: .5em 0;
}
}
.actions {
opacity: 0;
transition: opacity ease-in-out 120ms;
}
&:hover .actions, &:focus-within .actions {
opacity: 1;
}
}
.comment-box .header {
.meta {
img, a, span {
display: inline-block;
vertical-align: top;
}
a, span {
padding: $-xxs 0 $-xxs 0;
line-height: 1.6;
}
a { color: #666; }
span {
padding-inline-start: $-xxs;
}
}
.text-muted {
color: #999;
}
}
#tag-manager .drag-card {
max-width: 500px;
}
.content-permissions {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.content-permissions-row {
border: 1.5px solid #E2E2E2;
border-bottom-width: 0;
label {
padding-bottom: 0;
}
&:hover {
background-color: #F2F2F2;
}
}
.content-permissions-row:first-child {
border-radius: 4px 4px 0 0;
}
.content-permissions-row:last-child {
border-radius: 0 0 4px 4px;
border-bottom-width: 1.5px;
}
.content-permissions-row:first-child:last-child {
border-radius: 4px;
}
.content-permissions-row-toggle-all {
visibility: hidden;
}
.content-permissions-row:hover .content-permissions-row-toggle-all {
visibility: visible;
}
.template-item {
cursor: pointer;
position: relative;
&:hover, .template-item-actions button:hover {
background-color: #F2F2F2;
}
.template-item-actions {
position: absolute;
top: 0;
inset-inline-end: 0;
width: 50px;
height: 100%;
display: flex;
flex-direction: column;
border-inline-start: 1px solid #DDD;
}
.template-item-actions button {
cursor: pointer;
flex: 1;
background: #FFF;
border: 0;
border-top: 1px solid #DDD;
}
.template-item-actions button svg {
margin: 0;
}
.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;
}
}