mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-07-28 17:02:04 +03:00
Merge branch 'laravel-upgrade'
This commit is contained in:
Dan Brown
72
resources/sass/_animations.scss
Normal file
72
resources/sass/_animations.scss
Normal file
@ -0,0 +1,72 @@
|
||||
|
||||
.anim.fadeIn {
|
||||
opacity: 0;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 180ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.anim.searchResult {
|
||||
opacity: 0;
|
||||
transform: translate3d(580px, 0, 0);
|
||||
animation-name: searchResult;
|
||||
animation-duration: 220ms;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
|
||||
}
|
||||
|
||||
@keyframes searchResult {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(400px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingBob {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
30% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
70% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pointer {
|
||||
0% {
|
||||
transform: translate3d(0, 20px, 0) scale3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.anim.pointer {
|
||||
transform-origin: 50% 100%;
|
||||
animation-name: pointer;
|
||||
animation-duration: 180ms;
|
||||
animation-delay: 0s;
|
||||
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
|
||||
}
|
||||
239
resources/sass/_blocks.scss
Normal file
239
resources/sass/_blocks.scss
Normal file
@ -0,0 +1,239 @@
|
||||
|
||||
/**
|
||||
* Callouts
|
||||
*/
|
||||
.callout {
|
||||
border-left: 3px solid #BBB;
|
||||
background-color: #EEE;
|
||||
padding: $-s $-s $-s $-xl;
|
||||
display: block;
|
||||
position: relative;
|
||||
&:before {
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
|
||||
background-repeat: no-repeat;
|
||||
content: '';
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
left: $-xs + 2px;
|
||||
top: 50%;
|
||||
margin-top: -9px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
&.success {
|
||||
border-left-color: $positive;
|
||||
background-color: lighten($positive, 68%);
|
||||
color: darken($positive, 16%);
|
||||
}
|
||||
&.success:before {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
|
||||
}
|
||||
&.danger {
|
||||
border-left-color: $negative;
|
||||
background-color: lighten($negative, 56%);
|
||||
color: darken($negative, 20%);
|
||||
}
|
||||
&.danger:before {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
|
||||
}
|
||||
&.info {
|
||||
border-left-color: $info;
|
||||
background-color: lighten($info, 50%);
|
||||
color: darken($info, 20%);
|
||||
}
|
||||
&.warning {
|
||||
border-left-color: $warning;
|
||||
background-color: lighten($warning, 50%);
|
||||
color: darken($warning, 20%);
|
||||
}
|
||||
&.warning:before {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Card-style blocks
|
||||
*/
|
||||
|
||||
.card {
|
||||
background-color: #FFF;
|
||||
box-shadow: $bs-card;
|
||||
border-radius: 3px;
|
||||
border: 1px solid transparent;
|
||||
.body, p.empty-text {
|
||||
padding: $-m;
|
||||
}
|
||||
a, p {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: $-m $-m $-xs;
|
||||
margin: 0;
|
||||
font-size: $fs-m;
|
||||
color: #222;
|
||||
fill: #222;
|
||||
font-weight: 400;
|
||||
}
|
||||
.card-title a {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.card.border-card {
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.card.drag-card {
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 0 0 0 ($-s + 28px);
|
||||
margin: $-s 0;
|
||||
position: relative;
|
||||
.drag-card-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
.handle, .drag-card-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
flex-grow: 0;
|
||||
padding: 0 $-xs;
|
||||
&:hover {
|
||||
background-color: #EEE;
|
||||
}
|
||||
.svg-icon {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
> div .outline input {
|
||||
margin: $-s 0;
|
||||
width: 100%;
|
||||
}
|
||||
.handle {
|
||||
background-color: #EEE;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
> div {
|
||||
padding: 0 $-s;
|
||||
max-width: 80%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ddd;
|
||||
margin-bottom: $-l;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
min-width: 100px;
|
||||
color: $text-dark;
|
||||
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
|
||||
&:hover {
|
||||
color: $text-dark;
|
||||
text-decoration: none;
|
||||
box-shadow: $bs-card;
|
||||
}
|
||||
h2 {
|
||||
width: 100%;
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
p {
|
||||
font-size: .7rem;
|
||||
margin: 0;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
.grid-card-content {
|
||||
flex: 1;
|
||||
border-top: 0;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
.grid-card-content, .grid-card-footer {
|
||||
padding: $-l;
|
||||
}
|
||||
.grid-card-content + .grid-card-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.book-grid-item .grid-card-footer {
|
||||
p.small {
|
||||
font-size: .8em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap.card {
|
||||
padding: $-m $-xxl;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: $-xl;
|
||||
overflow: initial;
|
||||
min-height: 60vh;
|
||||
&.auto-height {
|
||||
min-height: 0;
|
||||
}
|
||||
&.fill-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include smaller-than($xxl) {
|
||||
.content-wrap.card {
|
||||
padding: $-m $-xl;
|
||||
}
|
||||
}
|
||||
@include smaller-than($m) {
|
||||
.content-wrap.card {
|
||||
padding: $-m $-l;
|
||||
}
|
||||
}
|
||||
@include smaller-than($s) {
|
||||
.content-wrap.card {
|
||||
padding: $-m $-m;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tags
|
||||
*/
|
||||
.tag-item {
|
||||
display: inline-flex;
|
||||
margin-bottom: $-xs;
|
||||
margin-right: $-xs;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #CCC;
|
||||
overflow: hidden;
|
||||
font-size: 0.85em;
|
||||
a, a:hover, a:active {
|
||||
padding: 4px 8px;
|
||||
color: #777;
|
||||
transition: background-color ease-in-out 80ms;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
svg {
|
||||
fill: #888;
|
||||
}
|
||||
.tag-value {
|
||||
border-left: 1px solid #DDD;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list div:last-child .tag-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
133
resources/sass/_buttons.scss
Normal file
133
resources/sass/_buttons.scss
Normal file
@ -0,0 +1,133 @@
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4em;
|
||||
padding: $-xs*1.3 $-m;
|
||||
margin-top: $-xs;
|
||||
margin-bottom: $-xs;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
outline: 0;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: background-color ease-in-out 120ms,
|
||||
filter ease-in-out 120ms,
|
||||
box-shadow ease-in-out 120ms;
|
||||
box-shadow: none;
|
||||
background-color: var(--color-primary);
|
||||
color: #FFF;
|
||||
fill: #FFF;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--color-primary);
|
||||
vertical-align: top;
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: $bs-light;
|
||||
filter: brightness(110%);
|
||||
}
|
||||
&:focus {
|
||||
outline: 1px dotted currentColor;
|
||||
outline-offset: -$-xs;
|
||||
box-shadow: none;
|
||||
filter: brightness(90%);
|
||||
}
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button.outline {
|
||||
background-color: transparent;
|
||||
color: #666;
|
||||
fill: currentColor;
|
||||
border: 1px solid #CCC;
|
||||
&:hover, &:focus, &:active {
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: none;
|
||||
background-color: #F2F2F2;
|
||||
filter: none;
|
||||
}
|
||||
&:active {
|
||||
border-color: #BBB;
|
||||
background-color: #DDD;
|
||||
color: #666;
|
||||
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.button + .button {
|
||||
margin-left: $-s;
|
||||
}
|
||||
|
||||
.button.small {
|
||||
font-size: 0.75rem;
|
||||
padding: $-xs*1.2 $-s;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
user-select: none;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.4em;
|
||||
color: var(--color-primary);
|
||||
fill: var(--color-primary);
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: var(--color-primary);
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.button.block {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button.icon {
|
||||
.svg-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button.svg {
|
||||
svg {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: $-m;
|
||||
top: $-s - 2px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
padding: $-s $-m ($-s - 2px) ($-m*2 + 24px);
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
background-color: #BBB;
|
||||
cursor: default;
|
||||
border-color: #CCC;
|
||||
&:hover {
|
||||
background-color: #BBB;
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
442
resources/sass/_codemirror.scss
Normal file
442
resources/sass/_codemirror.scss
Normal file
@ -0,0 +1,442 @@
|
||||
/* BASICS */
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
height: 300px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding: 4px 0; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
padding: 0 4px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
/* GUTTER */
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.CodeMirror-linenumbers {}
|
||||
.CodeMirror-linenumber {
|
||||
padding: 0 3px 0 5px;
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker { color: black; }
|
||||
.CodeMirror-guttermarker-subtle { color: #999; }
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.cm-fat-cursor .CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0 !important;
|
||||
background: #7e7;
|
||||
}
|
||||
.cm-fat-cursor div.CodeMirror-cursors {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cm-animate-fat-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
background-color: #7e7;
|
||||
}
|
||||
@-moz-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
.CodeMirror-overwrite .CodeMirror-cursor {}
|
||||
|
||||
.cm-tab { display: inline-block; text-decoration: inherit; }
|
||||
|
||||
.CodeMirror-rulers {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: -50px; bottom: -20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
.cm-strikethrough {text-decoration: line-through;}
|
||||
|
||||
.cm-s-default .cm-keyword {color: #708;}
|
||||
.cm-s-default .cm-atom {color: #219;}
|
||||
.cm-s-default .cm-number {color: #164;}
|
||||
.cm-s-default .cm-def {color: #00f;}
|
||||
.cm-s-default .cm-variable,
|
||||
.cm-s-default .cm-punctuation,
|
||||
.cm-s-default .cm-property,
|
||||
.cm-s-default .cm-operator {}
|
||||
.cm-s-default .cm-variable-2 {color: #05a;}
|
||||
.cm-s-default .cm-variable-3 {color: #085;}
|
||||
.cm-s-default .cm-comment {color: #a50;}
|
||||
.cm-s-default .cm-string {color: #a11;}
|
||||
.cm-s-default .cm-string-2 {color: #f50;}
|
||||
.cm-s-default .cm-meta {color: #555;}
|
||||
.cm-s-default .cm-qualifier {color: #555;}
|
||||
.cm-s-default .cm-builtin {color: #30a;}
|
||||
.cm-s-default .cm-bracket {color: #997;}
|
||||
.cm-s-default .cm-tag {color: #170;}
|
||||
.cm-s-default .cm-attribute {color: #00c;}
|
||||
.cm-s-default .cm-hr {color: #999;}
|
||||
.cm-s-default .cm-link {color: #00c;}
|
||||
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-invalidchar {color: #f00;}
|
||||
|
||||
.CodeMirror-composing { border-bottom: 2px solid; }
|
||||
|
||||
/* Default styles for common addons */
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
||||
.CodeMirror-activeline-background {background: #e8f2ff;}
|
||||
|
||||
/* STOP */
|
||||
|
||||
/* The rest of this file contains styles related to the mechanics of
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
overflow: scroll !important; /* Things will break if this is overridden */
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror */
|
||||
margin-bottom: -30px; margin-right: -30px;
|
||||
padding-bottom: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actual scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror-vscrollbar {
|
||||
right: 0; top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.CodeMirror-hscrollbar {
|
||||
bottom: 0; left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0; bottom: 0;
|
||||
}
|
||||
.CodeMirror-gutter-filler {
|
||||
left: 0; bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute; left: 0; top: 0;
|
||||
min-height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.CodeMirror-gutter-background {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
|
||||
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-variant-ligatures: contextual;
|
||||
font-variant-ligatures: contextual;
|
||||
&:after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-linewidget {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.CodeMirror-widget {}
|
||||
|
||||
.CodeMirror-rtl pre { direction: rtl; }
|
||||
|
||||
.CodeMirror-code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Force content-box sizing for the elements where we expect it */
|
||||
.CodeMirror-scroll,
|
||||
.CodeMirror-sizer,
|
||||
.CodeMirror-gutter,
|
||||
.CodeMirror-gutters,
|
||||
.CodeMirror-linenumber {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
div.CodeMirror-dragcursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected { background: #d9d9d9; }
|
||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
||||
.CodeMirror-crosshair { cursor: crosshair; }
|
||||
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
|
||||
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
|
||||
|
||||
.cm-searching {
|
||||
background: #ffa;
|
||||
background: rgba(255, 255, 0, .4);
|
||||
}
|
||||
|
||||
/* Used to force a border model for a node */
|
||||
.cm-force-border { padding-right: .1px; }
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* See issue #2901 */
|
||||
.cm-tab-wrap-hack:after { content: ''; }
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Name: Base16 Default Light
|
||||
Author: Chris Kempson (http://chriskempson.com)
|
||||
|
||||
CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
|
||||
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
|
||||
|
||||
*/
|
||||
|
||||
.cm-s-base16-light.CodeMirror { background: #f8f8f8; color: #444444; }
|
||||
.cm-s-base16-light div.CodeMirror-selected { background: #e0e0e0; }
|
||||
.cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: #e0e0e0; }
|
||||
.cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
|
||||
.cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; }
|
||||
.cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; }
|
||||
.cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
|
||||
.cm-s-base16-light .CodeMirror-linenumber { color: #b0b0b0; }
|
||||
.cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #505050; }
|
||||
|
||||
.cm-s-base16-light span.cm-comment { color: #8f5536; }
|
||||
.cm-s-base16-light span.cm-atom { color: #aa759f; }
|
||||
.cm-s-base16-light span.cm-number { color: #aa759f; }
|
||||
|
||||
.cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute { color: #678c30; }
|
||||
.cm-s-base16-light span.cm-keyword { color: #ac4142; }
|
||||
.cm-s-base16-light span.cm-string { color: #e09c3c; }
|
||||
|
||||
.cm-s-base16-light span.cm-builtin { color: #4c7f9e; }
|
||||
.cm-s-base16-light span.cm-variable { color: #90a959; }
|
||||
.cm-s-base16-light span.cm-variable-2 { color: #6a9fb5; }
|
||||
.cm-s-base16-light span.cm-def { color: #d28445; }
|
||||
.cm-s-base16-light span.cm-bracket { color: #202020; }
|
||||
.cm-s-base16-light span.cm-tag { color: #ac4142; }
|
||||
.cm-s-base16-light span.cm-link { color: #aa759f; }
|
||||
.cm-s-base16-light span.cm-error { background: #ac4142; color: #505050; }
|
||||
|
||||
.cm-s-base16-light .CodeMirror-activeline-background { background: #DDDCDC; }
|
||||
.cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
|
||||
|
||||
/**
|
||||
* Custom BookStack overrides
|
||||
*/
|
||||
.CodeMirror, .CodeMirror pre {
|
||||
font-size: 12px;
|
||||
}
|
||||
.CodeMirror {
|
||||
font-size: 12px;
|
||||
height: auto;
|
||||
margin-bottom: $-l;
|
||||
border: 1px solid #DDD;;
|
||||
}
|
||||
.cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 1px solid #DDD; }
|
||||
|
||||
.code-fill .CodeMirror {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom Copy Button
|
||||
*/
|
||||
.CodeMirror-copy {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
background-color: #EEE;
|
||||
padding: $-xs;
|
||||
line-height: 0;
|
||||
border: 1px solid #DDD;
|
||||
cursor: pointer;
|
||||
fill: #444;
|
||||
z-index: 5;
|
||||
transition: all ease-in 240ms;
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
svg {
|
||||
transition: transform ease-in 240ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
&.success {
|
||||
background-color: lighten($positive, 10%);
|
||||
fill: #FFF;
|
||||
svg {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.CodeMirror:hover .CodeMirror-copy {
|
||||
user-select: all;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
81
resources/sass/_colors.scss
Normal file
81
resources/sass/_colors.scss
Normal file
@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Background colors
|
||||
*/
|
||||
|
||||
.primary-background {
|
||||
background-color: var(--color-primary) !important;
|
||||
}
|
||||
.primary-background-light {
|
||||
background-color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
/*
|
||||
* Status text colors
|
||||
*/
|
||||
.text-pos, .text-pos:hover, .text-pos-hover:hover {
|
||||
color: $positive !important;
|
||||
fill: $positive !important;
|
||||
}
|
||||
|
||||
.text-warn, .text-warn:hover, .text-warn-hover:hover {
|
||||
color: $warning !important;
|
||||
fill: $warning !important;
|
||||
}
|
||||
|
||||
.text-neg, .text-neg:hover, .text-neg-hover:hover {
|
||||
color: $negative !important;
|
||||
fill: $negative !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Style text colors
|
||||
*/
|
||||
.text-primary, .text-primary:hover, .text-primary-hover:hover {
|
||||
color: var(--color-primary) !important;
|
||||
fill: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #575757 !important;
|
||||
fill: #575757 !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Entity text colors
|
||||
*/
|
||||
.text-bookshelf, .text-bookshelf:hover {
|
||||
color: var(--color-bookshelf);
|
||||
fill: var(--color-bookshelf);
|
||||
}
|
||||
.text-book, .text-book:hover {
|
||||
color: var(--color-book);
|
||||
fill: var(--color-book);
|
||||
}
|
||||
.text-page, .text-page:hover {
|
||||
color: var(--color-page);
|
||||
fill: var(--color-page);
|
||||
}
|
||||
.text-page.draft, .text-page.draft:hover {
|
||||
color: var(--color-page-draft);
|
||||
fill: var(--color-page-draft);
|
||||
}
|
||||
.text-chapter, .text-chapter:hover {
|
||||
color: var(--color-chapter);
|
||||
fill: var(--color-chapter);
|
||||
}
|
||||
|
||||
/*
|
||||
* Standard & Entity background colors
|
||||
*/
|
||||
.bg-white {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.bg-book {
|
||||
background-color: var(--color-book);
|
||||
}
|
||||
.bg-chapter {
|
||||
background-color: var(--color-chapter);
|
||||
}
|
||||
.bg-shelf {
|
||||
background-color: var(--color-bookshelf);
|
||||
}
|
||||
699
resources/sass/_components.scss
Normal file
699
resources/sass/_components.scss
Normal file
@ -0,0 +1,699 @@
|
||||
// System wide notifications
|
||||
[notification] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: $-xl;
|
||||
padding: $-m $-l;
|
||||
background-color: #FFF;
|
||||
border-radius: 4px;
|
||||
border-left: 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;
|
||||
color: #444;
|
||||
font-weight: 700;
|
||||
span, svg {
|
||||
vertical-align: middle;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
svg {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
padding-right: $-s;
|
||||
fill: currentColor;
|
||||
}
|
||||
span {
|
||||
vertical-align: middle;
|
||||
line-height: 1.3;
|
||||
}
|
||||
&.pos {
|
||||
color: $positive;
|
||||
}
|
||||
&.neg {
|
||||
color: $negative;
|
||||
}
|
||||
&.warning {
|
||||
color: $warning;
|
||||
}
|
||||
&.showing {
|
||||
transform: translateX(0);
|
||||
}
|
||||
&.showing:hover {
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
[chapter-toggle] {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
transition: all ease-in-out 180ms;
|
||||
user-select: none;
|
||||
svg[data-icon="caret-right"] {
|
||||
margin-right: 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-left: $-xs;
|
||||
}
|
||||
}
|
||||
|
||||
[overlay] {
|
||||
background-color: rgba(0, 0, 0, 0.333);
|
||||
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 {
|
||||
background-color: #FFF;
|
||||
max-height: 90%;
|
||||
width: 1200px;
|
||||
height: auto;
|
||||
margin: 2% 5%;
|
||||
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%;
|
||||
}
|
||||
&:before {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.popup-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer button, .popup-header-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
height: 40px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
.popup-header-close {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
padding: 0 $-m;
|
||||
}
|
||||
|
||||
.popup-header, .popup-footer {
|
||||
display: block !important;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
flex: none !important;
|
||||
.popup-title {
|
||||
color: #FFF;
|
||||
padding: 8px $-m;
|
||||
}
|
||||
}
|
||||
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;
|
||||
background-color: #EEE;
|
||||
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: (100%/6);
|
||||
height: auto;
|
||||
border: 1px solid #DDD;
|
||||
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);
|
||||
}
|
||||
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: (100%/4);
|
||||
}
|
||||
@include smaller-than($m) {
|
||||
.image-meta {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#image-manager .load-more {
|
||||
display: block;
|
||||
text-align: center;
|
||||
background-color: #EEE;
|
||||
padding: $-s $-m;
|
||||
color: #AAA;
|
||||
clear: both;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.image-manager-sidebar {
|
||||
width: 300px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-left: 1px solid #DDD;
|
||||
.inner {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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.35;
|
||||
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-left: -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-left: -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-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $negative;
|
||||
}
|
||||
|
||||
|
||||
.tab-container .nav-tabs {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #DDD;
|
||||
margin-bottom: $-m;
|
||||
.tab-item {
|
||||
padding: $-s;
|
||||
color: #666;
|
||||
&.selected {
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
text-align: center;
|
||||
a, .tab-item {
|
||||
padding: $-m;
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
fill: #666;
|
||||
cursor: pointer;
|
||||
&.selected {
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-picker .none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#code-editor .CodeMirror {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#code-editor .lang-options {
|
||||
max-width: 400px;
|
||||
margin-bottom: $-s;
|
||||
a {
|
||||
margin-right: $-xs;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
#code-editor .lang-options {
|
||||
max-width: 100%;
|
||||
}
|
||||
#code-editor .CodeMirror {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-box {
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 4px;
|
||||
background-color: #FFF;
|
||||
.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-left: $-xxs;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
#tag-manager .drag-card {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.permissions-table [permissions-table-toggle-all-in-row] {
|
||||
display: none;
|
||||
}
|
||||
.permissions-table tr:hover [permissions-table-toggle-all-in-row] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.template-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
&:hover, .template-item-actions button:hover {
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
.template-item-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #DDD;
|
||||
}
|
||||
.template-item-actions button {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
background: #FFF;
|
||||
border: 0;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
.template-item-actions button:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
403
resources/sass/_forms.scss
Normal file
403
resources/sass/_forms.scss
Normal file
@ -0,0 +1,403 @@
|
||||
|
||||
.input-base {
|
||||
background-color: #FFF;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #D4D4D4;
|
||||
display: inline-block;
|
||||
font-size: $fs-s;
|
||||
padding: $-xs*1.5;
|
||||
color: #666;
|
||||
width: 250px;
|
||||
max-width: 100%;
|
||||
|
||||
&.neg, &.invalid {
|
||||
border: 1px solid $negative;
|
||||
}
|
||||
&.pos, &.valid {
|
||||
border: 1px solid $positive;
|
||||
}
|
||||
&.disabled, &[disabled] {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--color-primary);
|
||||
outline: 1px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.markdown-display, .markdown-editor-wrap {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.markdown-editor-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #DDD;
|
||||
width: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
#markdown-editor {
|
||||
flex-direction: column;
|
||||
}
|
||||
#markdown-editor .markdown-editor-wrap {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
#markdown-editor .editor-toolbar {
|
||||
padding: 0;
|
||||
}
|
||||
#markdown-editor .editor-toolbar > * {
|
||||
padding: $-xs $-s;
|
||||
}
|
||||
.editor-toolbar-label {
|
||||
float: none !important;
|
||||
border-bottom: 1px solid #DDD;
|
||||
display: block;
|
||||
}
|
||||
.markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
|
||||
display: none;
|
||||
}
|
||||
#markdown-editor .markdown-editor-wrap:not(.active) {
|
||||
flex-grow: 0;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-display {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.markdown-editor-display {
|
||||
background-color: #FFFFFF;
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
[drawio-diagram]:hover {
|
||||
outline: 2px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
width: 100%;
|
||||
padding: $-xs $-m;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid #DDD;
|
||||
background-color: #EEE;
|
||||
flex: none;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
display: block;
|
||||
line-height: 1.4em;
|
||||
font-size: 0.94em;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
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-right: $-xs;
|
||||
}
|
||||
}
|
||||
|
||||
label.inline.checkbox {
|
||||
margin-right: $-m;
|
||||
}
|
||||
|
||||
label + p.small {
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
table.form-table {
|
||||
max-width: 100%;
|
||||
td {
|
||||
overflow: hidden;
|
||||
padding: $-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;
|
||||
}
|
||||
|
||||
input[type=date] {
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
input[type=color] {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.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;
|
||||
opacity: 0.6;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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 #DDD;
|
||||
border-radius: 4px;
|
||||
.collapse-title {
|
||||
margin-left: -$-m;
|
||||
margin-right: -$-m;
|
||||
padding: $-s $-m;
|
||||
display: block;
|
||||
width: calc(100% + 32px);
|
||||
text-align: left;
|
||||
}
|
||||
.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-right: $-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);
|
||||
}
|
||||
}
|
||||
|
||||
.inline-input-style {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $-s;
|
||||
}
|
||||
|
||||
.title-input input[type="text"] {
|
||||
@extend .inline-input-style;
|
||||
margin-top: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.title-input.page-title {
|
||||
font-size: 0.8em;
|
||||
.input {
|
||||
border: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
input[type="text"] {
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.description-input textarea {
|
||||
@extend .inline-input-style;
|
||||
font-size: $fs-m;
|
||||
color: #666;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div[editor-type="markdown"] .title-input.page-title input[type="text"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
fill: #666;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 9px;
|
||||
}
|
||||
input {
|
||||
display: block;
|
||||
padding-left: $-l + 4px;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
&.flexible input {
|
||||
width: 100%;
|
||||
}
|
||||
.search-box-cancel {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
373
resources/sass/_header.scss
Normal file
373
resources/sass/_header.scss
Normal file
@ -0,0 +1,373 @@
|
||||
/**
|
||||
* Includes the main navigation header and the faded toolbar.
|
||||
*/
|
||||
|
||||
header .grid {
|
||||
grid-template-columns: auto min-content auto;
|
||||
}
|
||||
|
||||
@include smaller-than($l) {
|
||||
header .grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 11;
|
||||
top: 0;
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
border-bottom: 1px solid #DDD;
|
||||
box-shadow: $bs-card;
|
||||
padding: $-xxs 0;
|
||||
.links {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.links a {
|
||||
display: inline-block;
|
||||
padding: $-m;
|
||||
color: #FFF;
|
||||
fill: #FFF;
|
||||
}
|
||||
.dropdown-container {
|
||||
padding-left: $-m;
|
||||
padding-right: 0;
|
||||
}
|
||||
.avatar, .user-name {
|
||||
display: inline-block;
|
||||
}
|
||||
.avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.user-name {
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
> * {
|
||||
vertical-align: top;
|
||||
}
|
||||
> span {
|
||||
padding-left: $-xs;
|
||||
display: inline-block;
|
||||
padding-top: $-xxs;
|
||||
}
|
||||
> svg {
|
||||
padding-top: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
@include between($l, $xl) {
|
||||
padding-left: $-xs;
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header *, .primary-background * {
|
||||
outline-color: #FFF;
|
||||
}
|
||||
|
||||
|
||||
.header-search {
|
||||
display: inline-block;
|
||||
}
|
||||
header .search-box {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
input {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 40px;
|
||||
color: #EEE;
|
||||
z-index: 2;
|
||||
padding-left: 40px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
button {
|
||||
fill: #EEE;
|
||||
z-index: 1;
|
||||
left: 16px;
|
||||
svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: #DDD;
|
||||
}
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: #DDD;
|
||||
}
|
||||
@include between($l, $xl) {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.logo-text {
|
||||
display: inline-block;
|
||||
font-size: 1.8em;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
padding: 14px $-l 14px 0;
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
}
|
||||
.logo-image {
|
||||
margin: $-xs $-s $-xs 0;
|
||||
vertical-align: top;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
color: #FFF;
|
||||
fill: #FFF;
|
||||
font-size: 2em;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
padding: 0 $-xs;
|
||||
position: absolute;
|
||||
right: $-m;
|
||||
top: 13px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
svg {
|
||||
margin: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($l) {
|
||||
header .header-links {
|
||||
display: none;
|
||||
background-color: #FFF;
|
||||
z-index: 10;
|
||||
right: $-m;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
box-shadow: $bs-hover;
|
||||
margin-top: -$-xs;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
header .links a, header .dropdown-container ul li a {
|
||||
text-align: left;
|
||||
display: block;
|
||||
padding: $-s $-m;
|
||||
color: $text-dark;
|
||||
fill: $text-dark;
|
||||
svg {
|
||||
margin-right: $-s;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #EEE;
|
||||
color: #444;
|
||||
fill: #444;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
header .dropdown-container {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
}
|
||||
header .links {
|
||||
display: block;
|
||||
}
|
||||
header .dropdown-container ul {
|
||||
display: block !important;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tri-layout-mobile-tabs {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid #DDD;
|
||||
box-shadow: $bs-card;
|
||||
}
|
||||
.tri-layout-mobile-tab {
|
||||
text-align: center;
|
||||
border-bottom: 3px solid #BBB;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
border-right: 1px solid #DDD;
|
||||
}
|
||||
&.active {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
opacity: 0.7;
|
||||
.icon-list-item {
|
||||
width: auto;
|
||||
padding-top: $-xs;
|
||||
padding-bottom: $-xs;
|
||||
}
|
||||
.separator {
|
||||
display: inline-block;
|
||||
fill: #aaa;
|
||||
font-size: 1.6em;
|
||||
line-height: 0.8;
|
||||
margin: -2px 0 0;
|
||||
}
|
||||
&:hover, &:focus-within {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($l) {
|
||||
.breadcrumbs .icon-list-item {
|
||||
padding: $-xs;
|
||||
> span + span {
|
||||
display: none;
|
||||
}
|
||||
> span:first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-listing {
|
||||
position: relative;
|
||||
.breadcrumb-listing-toggle {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
border-color: #DDD;
|
||||
}
|
||||
}
|
||||
.svg-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-listing-dropdown {
|
||||
box-shadow: $bs-med;
|
||||
overflow: hidden;
|
||||
min-height: 100px;
|
||||
width: 240px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
right: -$-m;
|
||||
.breadcrumb-listing-search .svg-icon {
|
||||
position: absolute;
|
||||
left: $-s;
|
||||
top: 11px;
|
||||
fill: #888;
|
||||
pointer-events: none;
|
||||
}
|
||||
.breadcrumb-listing-entity-list {
|
||||
max-height: 400px;
|
||||
overflow-y: scroll;
|
||||
text-align: left;
|
||||
}
|
||||
input {
|
||||
padding-left: $-xl;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.breadcrumb-listing-dropdown {
|
||||
position: fixed;
|
||||
right: auto;
|
||||
left: $-m;
|
||||
}
|
||||
.breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
|
||||
max-height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.faded {
|
||||
a, button, span, span > div {
|
||||
color: #666;
|
||||
fill: #666;
|
||||
}
|
||||
.text-button {
|
||||
opacity: 0.5;
|
||||
transition: all ease-in-out 120ms;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faded span.faded-text {
|
||||
display: inline-block;
|
||||
padding: $-s;
|
||||
}
|
||||
|
||||
.action-buttons .text-button {
|
||||
display: inline-block;
|
||||
padding: $-xs $-s;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.action-buttons .dropdown-container:last-child a {
|
||||
padding-right: 0;
|
||||
padding-left: $-s;
|
||||
}
|
||||
.action-buttons {
|
||||
text-align: right;
|
||||
&.text-left {
|
||||
text-align: left;
|
||||
.text-button {
|
||||
padding-right: $-m;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.action-buttons .text-button {
|
||||
padding: $-xs $-xs;
|
||||
}
|
||||
.action-buttons .dropdown-container:last-child a {
|
||||
padding-left: $-xs;
|
||||
}
|
||||
}
|
||||
25
resources/sass/_html.scss
Normal file
25
resources/sass/_html.scss
Normal file
@ -0,0 +1,25 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline-color: #444444;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline-style: dotted;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
background-color: #F2F2F2;
|
||||
&.flexbox {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $fs-m;
|
||||
line-height: 1.6;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
323
resources/sass/_layout.scss
Normal file
323
resources/sass/_layout.scss
Normal file
@ -0,0 +1,323 @@
|
||||
|
||||
/**
|
||||
* Generic content container
|
||||
*/
|
||||
.container {
|
||||
max-width: $xxl;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: $-m;
|
||||
padding-right: $-m;
|
||||
&.small {
|
||||
max-width: 840px;
|
||||
}
|
||||
&.very-small {
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Core grid layout system
|
||||
*/
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-column-gap: $-l;
|
||||
grid-row-gap: $-l;
|
||||
&.half {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
&.third {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
&.left-focus {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
&.right-focus {
|
||||
grid-template-columns: 1fr 3fr;
|
||||
}
|
||||
&.gap-y-xs {
|
||||
grid-row-gap: $-xs;
|
||||
}
|
||||
&.gap-xl {
|
||||
grid-column-gap: $-xl;
|
||||
grid-row-gap: $-xl;
|
||||
}
|
||||
&.gap-xxl {
|
||||
grid-column-gap: $-xxl;
|
||||
grid-row-gap: $-xxl;
|
||||
}
|
||||
&.v-center {
|
||||
align-items: center;
|
||||
}
|
||||
&.no-gap {
|
||||
grid-row-gap: 0;
|
||||
grid-column-gap: 0;
|
||||
}
|
||||
&.no-row-gap {
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.grid.third:not(.no-break) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.grid.half.collapse-xs {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.grid.gap-xl {
|
||||
grid-column-gap: $-m;
|
||||
grid-row-gap: $-m;
|
||||
}
|
||||
.grid.right-focus.reverse-collapse > *:nth-child(2) {
|
||||
order: 0;
|
||||
}
|
||||
.grid.right-focus.reverse-collapse > *:nth-child(1) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
.grid.third:not(.no-break) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($xs) {
|
||||
.grid.half.collapse-xs {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Flexbox layout system
|
||||
*/
|
||||
body.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
#content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-fill {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.flex {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Display and float utilities
|
||||
*/
|
||||
.block {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.block.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Visibility
|
||||
*/
|
||||
@each $sizeLetter, $size in $screen-sizes {
|
||||
@include smaller-than($size) {
|
||||
.hide-under-#{$sizeLetter} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include larger-than($size) {
|
||||
.hide-over-#{$sizeLetter} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Inline content columns
|
||||
*/
|
||||
.dual-column-content {
|
||||
columns: 2;
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.dual-column-content {
|
||||
columns: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Fixes
|
||||
*/
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/**
|
||||
* View Layouts
|
||||
*/
|
||||
.tri-layout-container {
|
||||
display: grid;
|
||||
margin-left: $-xl;
|
||||
margin-right: $-xl;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-template-areas: "a b c";
|
||||
grid-column-gap: $-xxl;
|
||||
.tri-layout-right {
|
||||
grid-area: c;
|
||||
min-width: 0;
|
||||
}
|
||||
.tri-layout-left {
|
||||
grid-area: a;
|
||||
min-width: 0;
|
||||
}
|
||||
.tri-layout-middle {
|
||||
grid-area: b;
|
||||
padding-top: $-m;
|
||||
}
|
||||
}
|
||||
@include smaller-than($xxl) {
|
||||
.tri-layout-container {
|
||||
grid-template-areas: "c b b"
|
||||
"a b b"
|
||||
". b b";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-template-rows: min-content min-content 1fr;
|
||||
padding-right: $-l;
|
||||
}
|
||||
}
|
||||
@include between($l, $xxl) {
|
||||
.tri-layout-left {
|
||||
position: sticky;
|
||||
top: $-m;
|
||||
}
|
||||
}
|
||||
@include larger-than($xxl) {
|
||||
.tri-layout-left-contents, .tri-layout-right-contents {
|
||||
padding: $-m;
|
||||
position: sticky;
|
||||
top: $-m;
|
||||
max-height: 100vh;
|
||||
min-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tri-layout-middle-contents {
|
||||
max-width: 940px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($l) {
|
||||
.tri-layout-container {
|
||||
grid-template-areas: none;
|
||||
grid-template-columns: 1fr;
|
||||
grid-column-gap: 0;
|
||||
padding-right: $-xs;
|
||||
padding-left: $-xs;
|
||||
.tri-layout-left-contents, .tri-layout-right-contents {
|
||||
padding-left: $-m;
|
||||
padding-right: $-m;
|
||||
}
|
||||
.tri-layout-left > *, .tri-layout-right > * {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tri-layout-left, .tri-layout-right {
|
||||
grid-area: none;
|
||||
grid-column: 1/1;
|
||||
grid-row: 1;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.tri-layout-middle {
|
||||
grid-area: none;
|
||||
grid-row: 3;
|
||||
grid-column: 1/1;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
transition: transform ease-in-out 240ms;
|
||||
}
|
||||
.tri-layout-left {
|
||||
grid-row: 2;
|
||||
}
|
||||
&.show-info {
|
||||
overflow: hidden;
|
||||
.tri-layout-middle {
|
||||
display: none;
|
||||
}
|
||||
.tri-layout-right > *, .tri-layout-left > * {
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include larger-than($l) {
|
||||
.tri-layout-mobile-tabs {
|
||||
display: none;
|
||||
}
|
||||
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
|
||||
opacity: 0.6;
|
||||
transition: opacity ease-in-out 120ms;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus-within {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.tri-layout-container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
652
resources/sass/_lists.scss
Normal file
652
resources/sass/_lists.scss
Normal file
@ -0,0 +1,652 @@
|
||||
|
||||
.book-contents .entity-list-item {
|
||||
.icon {
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
height: auto;
|
||||
margin-right: $-l;
|
||||
}
|
||||
.icon:after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.icon svg {
|
||||
display: none;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.inner-page {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-list-item + .chapter-expansion {
|
||||
display: flex;
|
||||
padding: 0 $-m $-m $-m;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
> .icon {
|
||||
width: 4px;
|
||||
height: auto;
|
||||
border-radius: 0 0 1px 1px;
|
||||
align-self: stretch;
|
||||
flex-shrink: 0;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: currentColor;
|
||||
content: '';
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.icon svg {
|
||||
display: none;
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
}
|
||||
.chapter-expansion-toggle {
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: $-xs $-m;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.chapter-expansion-toggle:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-list-item.has-children {
|
||||
padding-bottom: 0;
|
||||
> .icon {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.inset-list {
|
||||
display: none;
|
||||
.entity-list-item-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.entity-list-item-children {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-page-nav {
|
||||
$nav-indent: $-m;
|
||||
list-style: none;
|
||||
margin: $-s 0 $-m $-xs;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
width: 2px;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
z-index: 0;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.95em;
|
||||
position: relative;
|
||||
}
|
||||
.h1 {
|
||||
padding-left: $nav-indent;
|
||||
}
|
||||
.h2 {
|
||||
padding-left: $nav-indent * 1.5;
|
||||
}
|
||||
.h3 {
|
||||
padding-left: $nav-indent * 2;
|
||||
}
|
||||
.h4 {
|
||||
padding-left: $nav-indent * 2.5;
|
||||
}
|
||||
.h5 {
|
||||
padding-left: $nav-indent*3;
|
||||
}
|
||||
.h6 {
|
||||
padding-left: $nav-indent*3.5;
|
||||
}
|
||||
.current-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
li:not(.current-heading) .sidebar-page-nav-bullet {
|
||||
background-color: #BBB !important;
|
||||
}
|
||||
.sidebar-page-nav-bullet {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 30%;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 6px #F2F2F2;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar list
|
||||
.book-tree .sidebar-page-list {
|
||||
list-style: none;
|
||||
margin: $-xs -$-s 0 -$-s;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
|
||||
&:after, .sub-menu:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: $-m;
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
border-left: 4px solid rgba(0, 0, 0, 0.1);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.entity-list-item {
|
||||
padding-top: $-xxs;
|
||||
padding-bottom: $-xxs;
|
||||
background-clip: content-box;
|
||||
border-radius: 0 3px 3px 0;
|
||||
.content {
|
||||
padding-top: $-xs;
|
||||
padding-bottom: $-xs;
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
.entity-list-item.selected {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.entity-list-item.no-hover {
|
||||
margin-top: -$-xs;
|
||||
padding-right: 0;
|
||||
}
|
||||
.entity-list-item-name {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
.chapter-child-menu {
|
||||
font-size: .8rem;
|
||||
margin-top: -.2rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
[chapter-toggle] {
|
||||
padding-left: .7rem;
|
||||
padding-bottom: .2rem;
|
||||
}
|
||||
.entity-list-item .icon {
|
||||
z-index: 2;
|
||||
width: 4px;
|
||||
height: auto;
|
||||
align-self: stretch;
|
||||
flex-shrink: 0;
|
||||
border-radius: 1px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.entity-list-item .icon:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.entity-list-item .icon svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-child-menu {
|
||||
ul.sub-menu {
|
||||
display: none;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
[chapter-toggle].open + .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Sortable Lists
|
||||
.sortable-page-list, .sortable-page-list ul {
|
||||
list-style: none;
|
||||
}
|
||||
.sort-box {
|
||||
margin-bottom: $-m;
|
||||
padding: $-m $-xl;
|
||||
position: relative;
|
||||
&::before {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
border-radius: 4px;
|
||||
opacity: 0.5;
|
||||
border: 2px solid var(--color-book);
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.sort-box-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.sort-box-options .button {
|
||||
margin-left: 0;
|
||||
}
|
||||
.sortable-page-list {
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
.entity-list-item > span:first-child {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.entity-list-item > div {
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
> ul {
|
||||
margin-left: 0;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: $-m;
|
||||
margin-top: 0;
|
||||
padding-left: $-m;
|
||||
}
|
||||
li {
|
||||
border: 1px solid #DDD;
|
||||
margin-top: -1px;
|
||||
min-height: 38px;
|
||||
}
|
||||
li.text-page, li.text-chapter {
|
||||
border-left: 2px solid currentColor;
|
||||
}
|
||||
li:first-child {
|
||||
margin-top: $-xs;
|
||||
}
|
||||
}
|
||||
.sortable-page-list li.placeholder {
|
||||
position: relative;
|
||||
}
|
||||
.sortable-page-list li.placeholder:before {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.activity-list-item {
|
||||
padding: $-s 0;
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-column-gap: $-m;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.card .activity-list-item {
|
||||
padding: $-s $-m;
|
||||
}
|
||||
|
||||
.user-list-item {
|
||||
display: inline-grid;
|
||||
padding: $-s;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-column-gap: $-m;
|
||||
font-size: 0.9em;
|
||||
align-items: center;
|
||||
> div:first-child {
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.pagination {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: $-m 0;
|
||||
padding-left: 1px;
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
li:first-child {
|
||||
a, span {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
}
|
||||
li:last-child {
|
||||
a, span {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
a, span {
|
||||
display: block;
|
||||
padding: $-xxs $-s;
|
||||
border: 1px solid #CCC;
|
||||
margin-left: -1px;
|
||||
user-select: none;
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
li.active span {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.compact ul.pagination {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.entity-list, .icon-list {
|
||||
margin: 0 (-$-m);
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
.text-small.text-muted {
|
||||
color: #AAA;
|
||||
font-size: 0.75em;
|
||||
margin-top: $-xs;
|
||||
}
|
||||
.text-muted p.text-muted {
|
||||
margin-top: 0;
|
||||
}
|
||||
.page.draft .text-page {
|
||||
color: var(--color-page-draft);
|
||||
fill: var(--color-page-draft);
|
||||
}
|
||||
> .dropdown-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-list hr {
|
||||
margin: $-s $-m;
|
||||
max-width: 140px;
|
||||
opacity: 0.25;
|
||||
height: 1.1px;
|
||||
}
|
||||
|
||||
.icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.entity-list-item, .icon-list-item {
|
||||
padding: $-s $-m;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
h4 a {
|
||||
color: #666;
|
||||
}
|
||||
> span:first-child {
|
||||
margin-right: $-m;
|
||||
flex-basis: 1.88em;
|
||||
flex: none;
|
||||
}
|
||||
> span:last-child {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
&:not(.no-hover) {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:not(.no-hover):hover {
|
||||
text-decoration: none;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
&.outline-hover {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
&.outline-hover:hover {
|
||||
background-color: transparent;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&:focus {
|
||||
background-color: #eee;
|
||||
outline: 1px dotted #666;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-list-item-path-sep {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card .entity-list-item:not(.no-hover):hover {
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
.card .entity-list-item .entity-list-item:hover {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.entity-list-item-children {
|
||||
padding: $-m;
|
||||
> div {
|
||||
overflow: hidden;
|
||||
padding: $-xs 0;
|
||||
margin-top: -$-xs;
|
||||
}
|
||||
.entity-chip {
|
||||
text-overflow: ellipsis;
|
||||
height: 2.5em;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-list-item-image {
|
||||
align-self: stretch;
|
||||
width: 140px;
|
||||
flex: none;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
margin-right: $-l;
|
||||
|
||||
&.entity-list-item-image-wide {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: #FFF;
|
||||
fill: #FFF;
|
||||
font-size: 1.66rem;
|
||||
margin-right: 0;
|
||||
position: absolute;
|
||||
bottom: $-xs;
|
||||
left: $-xs;
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.chapter > .entity-list-item-image {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.entity-list.compact {
|
||||
font-size: 0.6 * $fs-m;
|
||||
h4, a {
|
||||
line-height: 1.2;
|
||||
}
|
||||
.entity-item-snippet {
|
||||
display: none;
|
||||
}
|
||||
.entity-list-item p {
|
||||
font-size: $fs-m * 0.8;
|
||||
padding-top: $-xs;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
> p.empty-text {
|
||||
display: block;
|
||||
font-size: $fs-m;
|
||||
}
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
@include smaller-than($m) {
|
||||
h4 {
|
||||
font-size: 1.666em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
list-style: none;
|
||||
right: 0;
|
||||
margin: $-m 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1px;
|
||||
border: 1px solid #EEE;
|
||||
min-width: 180px;
|
||||
padding: $-xs 0;
|
||||
color: #555;
|
||||
fill: #555;
|
||||
text-align: left !important;
|
||||
&.wide {
|
||||
min-width: 220px;
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
fill: #999;
|
||||
}
|
||||
li.active a {
|
||||
font-weight: 600;
|
||||
}
|
||||
a, button {
|
||||
display: block;
|
||||
padding: $-xs $-m;
|
||||
color: #555;
|
||||
fill: currentColor;
|
||||
white-space: nowrap;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
background-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&:focus {
|
||||
outline: 1px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
svg {
|
||||
margin-right: $-s;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
li.border-bottom {
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
}
|
||||
|
||||
// Books grid view
|
||||
.featured-image-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 140px;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
transition: opacity ease-in-out 240ms;
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.featured-image-container-wrap {
|
||||
position: relative;
|
||||
.svg-icon {
|
||||
color: #FFF;
|
||||
fill: #FFF;
|
||||
font-size: 2rem;
|
||||
margin-right: 0;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
.grid-card:hover .featured-image-container {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.action-link-list {
|
||||
//padding: $-s 0;
|
||||
}
|
||||
.action-link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: currentColor;
|
||||
padding: $-m 0;
|
||||
}
|
||||
|
||||
.active-link-list {
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: $-s;
|
||||
}
|
||||
a:not(.active) {
|
||||
color: #444;
|
||||
fill: #444;
|
||||
}
|
||||
a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
10
resources/sass/_mixins.scss
Normal file
10
resources/sass/_mixins.scss
Normal file
@ -0,0 +1,10 @@
|
||||
// Responsive breakpoint control
|
||||
@mixin smaller-than($size) {
|
||||
@media screen and (max-width: $size) { @content; }
|
||||
}
|
||||
@mixin larger-than($size) {
|
||||
@media screen and (min-width: $size) { @content; }
|
||||
}
|
||||
@mixin between($min, $max) {
|
||||
@media screen and (min-width: $min) and (max-width: $max) { @content; }
|
||||
}
|
||||
445
resources/sass/_pages.scss
Executable file
445
resources/sass/_pages.scss
Executable file
@ -0,0 +1,445 @@
|
||||
.page-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
background-color: #FFF;
|
||||
|
||||
.edit-area {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mce-tinymce {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mce-top-part::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.mce-fullscreen .page-editor .edit-area {
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
.page-edit-toolbar {
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.page-edit-toolbar .grid.third {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
> div {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-save-mobile-button {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
font-size: 24px;
|
||||
right: $-m;
|
||||
bottom: $-s;
|
||||
box-shadow: $bs-hover;
|
||||
background-color: currentColor;
|
||||
text-align: center;
|
||||
svg {
|
||||
fill: #FFF;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.draft-notification {
|
||||
pointer-events: none;
|
||||
transform: scale(0);
|
||||
transition: transform ease-in-out 120ms;
|
||||
transform-origin: 50% 50%;
|
||||
&.visible {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.page-style.editor {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 100%;
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
overflow-wrap: break-word;
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
img.align-left, table.align-left {
|
||||
float: left !important;
|
||||
margin: $-xs $-m $-m 0;
|
||||
}
|
||||
.align-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
img.align-right, table.align-right {
|
||||
float: right !important;
|
||||
margin: $-xs 0 $-xs $-s;
|
||||
}
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
img.align-center {
|
||||
display: block;
|
||||
}
|
||||
img.align-center, table.align-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height:auto;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, pre {
|
||||
clear: left;
|
||||
}
|
||||
hr {
|
||||
clear: both;
|
||||
margin: $-m 0;
|
||||
}
|
||||
table {
|
||||
hyphens: auto;
|
||||
table-layout: fixed;
|
||||
max-width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
// diffs
|
||||
ins,
|
||||
del {
|
||||
text-decoration: none;
|
||||
}
|
||||
ins {
|
||||
background: #dbffdb;
|
||||
}
|
||||
del {
|
||||
background: #FFECEC;
|
||||
}
|
||||
|
||||
&.page-revision {
|
||||
pre code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Page content pointers
|
||||
.pointer-container {
|
||||
position: relative;
|
||||
display: none;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.pointer {
|
||||
border: 1px solid #CCC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: $-s $-s;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 12px 1px rgba(212, 209, 209, 0.3);
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
background-color:#FFF;
|
||||
width: 275px;
|
||||
z-index: 55;
|
||||
|
||||
&.is-page-editable {
|
||||
width: 328px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -9px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: -8px;
|
||||
content: '';
|
||||
display: block;
|
||||
background-color:#FFF;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 50% 50%;
|
||||
border-bottom: 1px solid #CCC;
|
||||
border-right: 1px solid #CCC;
|
||||
z-index: 56;
|
||||
}
|
||||
input, button, a {
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
vertical-align: top;
|
||||
padding: 5px 16px;
|
||||
}
|
||||
input {
|
||||
background-color: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
color: #666;
|
||||
width: 172px;
|
||||
z-index: 40;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
span.icon {
|
||||
fill: #444;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.input-group .button {
|
||||
line-height: 1;
|
||||
margin: 0 0 0 -4px;
|
||||
box-shadow: none;
|
||||
}
|
||||
a.button {
|
||||
margin: 0;
|
||||
}
|
||||
.svg-icon {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Attribute form
|
||||
.floating-toolbox {
|
||||
background-color: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
right: $-xl*2;
|
||||
width: 48px;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
transition: width ease-in-out 180ms;
|
||||
margin-top: -1px;
|
||||
min-height: 0;
|
||||
&.open {
|
||||
width: 480px;
|
||||
}
|
||||
[toolbox-toggle] svg {
|
||||
transition: transform ease-in-out 180ms;
|
||||
}
|
||||
[toolbox-toggle] {
|
||||
transition: background-color ease-in-out 180ms;
|
||||
}
|
||||
&.open [toolbox-toggle] {
|
||||
background-color: rgba(255, 0, 0, 0.29);
|
||||
}
|
||||
&.open [toolbox-toggle] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
> div {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.tabs {
|
||||
display: block;
|
||||
border-right: 1px solid #DDD;
|
||||
width: 48px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.tabs svg {
|
||||
fill: rgba(0, 0, 0, 0.5);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.tabs > button {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: $-s $-m;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
&.open .tabs > button.active {
|
||||
fill: #444;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
div[toolbox-tab-content] {
|
||||
padding-bottom: 45px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-height: 0px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
margin: $-m 0 0 0;
|
||||
padding: 0 $-l $-s $-l;
|
||||
}
|
||||
.tags input {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-width: 50px;
|
||||
}
|
||||
.tags td, .tag-table > div > div > div {
|
||||
padding-right: $-s;
|
||||
padding-top: $-s;
|
||||
position: relative;
|
||||
}
|
||||
.handle {
|
||||
user-select: none;
|
||||
cursor: move;
|
||||
fill: #999;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
table td, table th {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
[toolbox-tab-content] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tag-display {
|
||||
position: relative;
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
tr:first-child td {
|
||||
padding-top: 0;
|
||||
}
|
||||
.heading th {
|
||||
padding: $-xs $-s;
|
||||
color: rgba(100, 100, 100, 0.7);
|
||||
border: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
td {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #EEE;
|
||||
padding: $-xs $-s;
|
||||
color: #444;
|
||||
}
|
||||
tr td:first-child {
|
||||
padding-left:0;
|
||||
}
|
||||
.tag-value {
|
||||
color: #888;
|
||||
}
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.tag {
|
||||
padding: $-s;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-box {
|
||||
position: absolute;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #BBB;
|
||||
box-shadow: $bs-light;
|
||||
list-style: none;
|
||||
z-index: 100;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
li {
|
||||
display: block;
|
||||
padding: $-xs $-s;
|
||||
border-bottom: 1px solid #DDD;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
&.active {
|
||||
background-color: #EEE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments-container h5 {
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
|
||||
min-height: 175px;
|
||||
}
|
||||
|
||||
/* FIXME - Ugly hack to modify the media plugin for TinyMCE */
|
||||
.mce-floatpanel[aria-label="Insert/edit media"] {
|
||||
.mce-open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {
|
||||
font-size: 0.8rem;
|
||||
width: 1.88em;
|
||||
height: 1.88em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border-radius: 1em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
svg {
|
||||
margin: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: currentColor;
|
||||
opacity: 0.2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-chip {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: $-xs $-s;
|
||||
fill: currentColor;
|
||||
opacity: 0.85;
|
||||
transition: opacity ease-in-out 120ms;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: currentColor;
|
||||
opacity: 0.15;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
40
resources/sass/_reset.scss
Normal file
40
resources/sass/_reset.scss
Normal file
@ -0,0 +1,40 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
|
||||
body {
|
||||
line-height: 1; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
|
||||
blockquote {
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
content: none; } }
|
||||
|
||||
q {
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
content: none; } }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
32
resources/sass/_spacing.scss
Normal file
32
resources/sass/_spacing.scss
Normal file
@ -0,0 +1,32 @@
|
||||
// Here we generate spacing utility classes for our sizes for all box sides and axis.
|
||||
// These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size)
|
||||
|
||||
@mixin spacing($prop, $propLetter) {
|
||||
@each $sizeLetter, $size in $spacing {
|
||||
.#{$propLetter}-#{$sizeLetter} {
|
||||
#{$prop}: $size !important;
|
||||
}
|
||||
.#{$propLetter}x-#{$sizeLetter} {
|
||||
#{$prop}-left: $size !important;
|
||||
#{$prop}-right: $size !important;
|
||||
}
|
||||
.#{$propLetter}y-#{$sizeLetter} {
|
||||
#{$prop}-top: $size !important;
|
||||
#{$prop}-bottom: $size !important;
|
||||
}
|
||||
.#{$propLetter}t-#{$sizeLetter} {
|
||||
#{$prop}-top: $size !important;
|
||||
}
|
||||
.#{$propLetter}r-#{$sizeLetter} {
|
||||
#{$prop}-right: $size !important;
|
||||
}
|
||||
.#{$propLetter}b-#{$sizeLetter} {
|
||||
#{$prop}-bottom: $size !important;
|
||||
}
|
||||
.#{$propLetter}l-#{$sizeLetter} {
|
||||
#{$prop}-left: $size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include spacing('margin', 'm')
|
||||
@include spacing('padding', 'p')
|
||||
66
resources/sass/_tables.scss
Normal file
66
resources/sass/_tables.scss
Normal file
@ -0,0 +1,66 @@
|
||||
table {
|
||||
min-width: 100px;
|
||||
max-width: 100%;
|
||||
thead {
|
||||
background-color: #F8F8F8;
|
||||
font-weight: 500;
|
||||
}
|
||||
td, th {
|
||||
min-width: 10px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #DDD;
|
||||
overflow: auto;
|
||||
line-height: 1.2;
|
||||
}
|
||||
td p, th p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
table.table {
|
||||
width: 100%;
|
||||
tr td, tr th {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
border: none;
|
||||
padding: $-s $-s;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: #EEE;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
td.actions {
|
||||
overflow: visible;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
table.no-style {
|
||||
td {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
table.list-table {
|
||||
margin: 0 -$-xs;
|
||||
td {
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
padding: $-xs;
|
||||
}
|
||||
}
|
||||
372
resources/sass/_text.scss
Normal file
372
resources/sass/_text.scss
Normal file
@ -0,0 +1,372 @@
|
||||
/**
|
||||
* Fonts
|
||||
*/
|
||||
|
||||
body, button, input, select, label, textarea {
|
||||
font-family: $text;
|
||||
}
|
||||
.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
|
||||
font-family: $mono;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header Styles
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 3.425em;
|
||||
line-height: 1.22222222em;
|
||||
margin-top: 0.48888889em;
|
||||
margin-bottom: 0.48888889em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.8275em;
|
||||
line-height: 1.294117647em;
|
||||
margin-top: 0.8627451em;
|
||||
margin-bottom: 0.43137255em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2.333em;
|
||||
line-height: 1.221428572em;
|
||||
margin-top: 0.78571429em;
|
||||
margin-bottom: 0.43137255em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.666em;
|
||||
line-height: 1.375em;
|
||||
margin-top: 0.78571429em;
|
||||
margin-bottom: 0.43137255em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: #222;
|
||||
.subheader {
|
||||
font-size: 0.5em;
|
||||
line-height: 1em;
|
||||
color: lighten($text-dark, 32%);
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
h5, h6 {
|
||||
line-height: 1.2em;
|
||||
margin-top: 0.78571429em;
|
||||
margin-bottom: 0.66em;
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
h1 {
|
||||
font-size: 2.8275em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.333em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.666em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.333em;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.161616em;
|
||||
}
|
||||
}
|
||||
|
||||
.list-heading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2.list-heading {
|
||||
font-size: 1.333rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Link styling
|
||||
*/
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
fill: var(--color-primary);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: filter ease-in-out 80ms;
|
||||
line-height: 1.6;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
svg {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
&:focus img:only-child {
|
||||
outline: 2px dashed var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.blended-links a {
|
||||
color: inherit;
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Other HTML Text Elements
|
||||
*/
|
||||
p, ul, ol, pre, table, blockquote {
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 1.375em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: #EAEAEA;
|
||||
margin-bottom: $-l;
|
||||
&.faded {
|
||||
background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
|
||||
}
|
||||
&.margin-top, &.even {
|
||||
margin-top: $-l;
|
||||
}
|
||||
}
|
||||
|
||||
strong, b, .bold, .strong {
|
||||
font-weight: bold;
|
||||
> strong, > b, > .bold, > .strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
em, i, .italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
small, p.small, span.small, .text-small {
|
||||
font-size: 0.75rem;
|
||||
color: lighten($text-dark, 10%);
|
||||
}
|
||||
|
||||
sup, .superscript {
|
||||
vertical-align: super;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
sub, .subscript {
|
||||
vertical-align: sub;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 12px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #DDD;
|
||||
padding-left: 31px;
|
||||
position: relative;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 29px;
|
||||
left: 0;
|
||||
background-color: #f5f5f5;
|
||||
height: 100%;
|
||||
border-right: 1px solid #DDD;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
pre {
|
||||
padding-left: 12px;
|
||||
}
|
||||
pre:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
background-color: #F8F8F8;
|
||||
padding: $-s $-m $-s $-xl;
|
||||
&:before {
|
||||
content: "\201C";
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: $-s;
|
||||
left: $-s;
|
||||
color: lighten($text-dark, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.code-base {
|
||||
background-color: #F8F8F8;
|
||||
font-size: 0.80em;
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
code {
|
||||
@extend .code-base;
|
||||
display: inline;
|
||||
padding: 1px 3px;
|
||||
white-space:pre;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
span.code {
|
||||
@extend .code-base;
|
||||
padding: 1px $-xs;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
span.highlight {
|
||||
font-weight: bold;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Lists
|
||||
*/
|
||||
ul, ol {
|
||||
overflow: hidden;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
padding-left: $-m * 1.3;
|
||||
padding-right: $-m * 1.3;
|
||||
list-style: disc;
|
||||
ul {
|
||||
list-style: circle;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
padding-left: $-m * 2;
|
||||
padding-right: $-m * 2;
|
||||
}
|
||||
|
||||
li.checkbox-item, li.task-list-item {
|
||||
list-style: none;
|
||||
margin-left: - ($-m * 1.3);
|
||||
input[type="checkbox"] {
|
||||
margin-right: $-xs;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Generic text styling classes
|
||||
*/
|
||||
.underlined {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@each $sizeLetter, $size in $screen-sizes {
|
||||
@include larger-than($size) {
|
||||
.text-#{$sizeLetter}-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-#{$sizeLetter}-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-#{$sizeLetter}-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-bigger {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.text-large {
|
||||
font-size: 1.6666em;
|
||||
}
|
||||
|
||||
.no-color {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.break-text {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.limit-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/**
|
||||
* Grouping
|
||||
*/
|
||||
.header-group {
|
||||
margin: $-m 0;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span.sep {
|
||||
color: #BBB;
|
||||
padding: 0 $-xs;
|
||||
}
|
||||
|
||||
.list > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons
|
||||
*/
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: -0.105em;
|
||||
margin-right: $-xs;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
75
resources/sass/_tinymce.scss
Normal file
75
resources/sass/_tinymce.scss
Normal file
@ -0,0 +1,75 @@
|
||||
|
||||
.mce-tinymce.mce-container.mce-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.mce-tinymce {
|
||||
.mce-panel {
|
||||
background-color: #FFF;
|
||||
}
|
||||
.mce-btn {
|
||||
background-color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.mce-container-body.mce-flow-layout {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include smaller-than($l) {
|
||||
.mce-container-body.mce-flow-layout {
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-area.flex > div > .mce-tinymce.mce-container.mce-panel {
|
||||
flex: 1 1 auto;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
margin: 0 -1px;
|
||||
> .mce-container-body {
|
||||
flex: 1 1 auto;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
> .mce-toolbar-grp {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
> .mce-edit-area {
|
||||
flex: 1 1 auto;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
-webkit-overflow-scrolling:touch;
|
||||
overflow:auto;
|
||||
iframe {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-content.mce-content-body p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.page-content.mce-content-body {
|
||||
padding-top: 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Fix to prevent 'No color' option from not being clickable.
|
||||
.mce-colorbtn-trans {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Fix to prevent CodeMirror focus events throwing TinyMCE cursor position.
|
||||
.mce-content-body .CodeMirrorContainer > .CodeMirror {
|
||||
pointer-events: none;
|
||||
}
|
||||
69
resources/sass/_variables.scss
Normal file
69
resources/sass/_variables.scss
Normal file
@ -0,0 +1,69 @@
|
||||
// Variables
|
||||
///////////////
|
||||
|
||||
// Screen breakpoints
|
||||
$xxl: 1400px;
|
||||
$xl: 1100px;
|
||||
$ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality.
|
||||
$l: 1000px;
|
||||
$m: 880px;
|
||||
$s: 600px;
|
||||
$xs: 400px;
|
||||
$xxs: 360px;
|
||||
$screen-lg: 1200px;
|
||||
$screen-md: 992px;
|
||||
$screen-sm: 768px;
|
||||
|
||||
// List of screen sizes
|
||||
$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));
|
||||
|
||||
// Spacing (Margins+Padding)
|
||||
$-xxxl: 64px;
|
||||
$-xxl: 48px;
|
||||
$-xl: 32px;
|
||||
$-l: 24px;
|
||||
$-m: 16px;
|
||||
$-s: 12px;
|
||||
$-xs: 6px;
|
||||
$-xxs: 3px;
|
||||
|
||||
// List of our spacing sizes
|
||||
$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl));
|
||||
|
||||
// Fonts
|
||||
$text: -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
|
||||
"Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
$mono: "Lucida Console", "DejaVu Sans Mono", "Ubunto Mono", Monaco, monospace;
|
||||
$heading: $text;
|
||||
$fs-m: 14px;
|
||||
$fs-s: 12px;
|
||||
|
||||
// Colours
|
||||
:root {
|
||||
--color-primary: #206ea7;
|
||||
--color-primary-light: rgba(32,110,167,0.15);
|
||||
|
||||
--color-page: #206ea7;
|
||||
--color-page-draft: #7e50b1;
|
||||
--color-chapter: #af4d0d;
|
||||
--color-book: #077b70;
|
||||
--color-bookshelf: #a94747;
|
||||
}
|
||||
|
||||
$positive: #0f7d15;
|
||||
$negative: #ab0f0e;
|
||||
$info: #0288D1;
|
||||
$warning: #cf4d03;
|
||||
|
||||
// Text colours
|
||||
$text-dark: #444;
|
||||
$text-light: #EEE;
|
||||
|
||||
// Shadows
|
||||
$bs-light: 0 0 4px 1px #CCC;
|
||||
$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
|
||||
$bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
|
||||
$bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
|
||||
43
resources/sass/export-styles.scss
Normal file
43
resources/sass/export-styles.scss
Normal file
@ -0,0 +1,43 @@
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "spacing";
|
||||
@import "html";
|
||||
@import "text";
|
||||
@import "layout";
|
||||
@import "blocks";
|
||||
@import "forms";
|
||||
@import "tables";
|
||||
@import "header";
|
||||
@import "lists";
|
||||
@import "pages";
|
||||
|
||||
|
||||
html, body {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Prevent code block overflow on export
|
||||
pre {
|
||||
padding-left: 12px;
|
||||
}
|
||||
pre:after {
|
||||
display: none;
|
||||
}
|
||||
pre code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
35
resources/sass/print-styles.scss
Normal file
35
resources/sass/print-styles.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@import "variables";
|
||||
|
||||
header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-size: 12px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.print-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tri-layout-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "b";
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.content-wrap.card {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
282
resources/sass/styles.scss
Normal file
282
resources/sass/styles.scss
Normal file
@ -0,0 +1,282 @@
|
||||
@import "reset";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "spacing";
|
||||
@import "html";
|
||||
@import "text";
|
||||
@import "colors";
|
||||
@import "layout";
|
||||
@import "blocks";
|
||||
@import "buttons";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "animations";
|
||||
@import "tinymce";
|
||||
@import "codemirror";
|
||||
@import "components";
|
||||
@import "header";
|
||||
@import "lists";
|
||||
@import "pages";
|
||||
|
||||
[v-cloak] {
|
||||
display: none; opacity: 0;
|
||||
animation-name: none !important;
|
||||
}
|
||||
|
||||
// Jquery Sortable Styles
|
||||
.dragged {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
z-index: 2000;
|
||||
}
|
||||
body.dragging, body.dragging * {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
// User Avatar Images
|
||||
.avatar {
|
||||
border-radius: 100%;
|
||||
background-color: #EEE;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
&.med {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
&.large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
&.huge {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
&.square {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading icon
|
||||
$loadingSize: 10px;
|
||||
.loading-container {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: $-xl auto;
|
||||
> div {
|
||||
width: $loadingSize;
|
||||
height: $loadingSize;
|
||||
border-radius: $loadingSize;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
margin-top: $-xs;
|
||||
animation-name: loadingBob;
|
||||
animation-duration: 1.4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
|
||||
margin-right: 4px;
|
||||
background-color: var(--color-page);
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
> div:first-child {
|
||||
left: -($loadingSize+$-xs);
|
||||
background-color: var(--color-book);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
> div:last-of-type {
|
||||
left: $loadingSize+$-xs;
|
||||
background-color: var(--color-chapter);
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
> span {
|
||||
margin-left: $-s;
|
||||
font-style: italic;
|
||||
color: #888;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
// Back to top link
|
||||
$btt-size: 40px;
|
||||
[back-to-top] {
|
||||
background-color: var(--color-primary);
|
||||
position: fixed;
|
||||
bottom: $-m;
|
||||
right: $-l;
|
||||
padding: 5px 7px;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
fill: #FFF;
|
||||
svg {
|
||||
width: $btt-size / 1.5;
|
||||
height: $btt-size / 1.5;
|
||||
margin-right: 4px;
|
||||
}
|
||||
width: $btt-size;
|
||||
height: $btt-size;
|
||||
border-radius: $btt-size;
|
||||
transition: all ease-in-out 180ms;
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
width: $btt-size*3.4;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.inner {
|
||||
width: $btt-size*3.4;
|
||||
}
|
||||
span {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.contained-search-box {
|
||||
display: flex;
|
||||
input, button {
|
||||
border-radius: 0;
|
||||
border: 1px solid #DDD;
|
||||
margin-left: -1px;
|
||||
}
|
||||
input {
|
||||
flex: 5;
|
||||
padding: $-xs $-s;
|
||||
&:focus, &:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 60px;
|
||||
}
|
||||
button i {
|
||||
padding: 0;
|
||||
}
|
||||
button.cancel.active {
|
||||
background-color: $negative;
|
||||
color: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-selector {
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
font-size: 0.8em;
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
font-size: 16px;
|
||||
padding: $-s $-m;
|
||||
}
|
||||
.entity-list {
|
||||
overflow-y: scroll;
|
||||
height: 400px;
|
||||
background-color: #EEEEEE;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.entity-list-item {
|
||||
background-color: #FFF;
|
||||
}
|
||||
.entity-list-item p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.entity-list-item.selected {
|
||||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
.loading {
|
||||
height: 400px;
|
||||
padding-top: $-l;
|
||||
}
|
||||
.entity-selector-add button {
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
&.compact {
|
||||
font-size: 10px;
|
||||
.entity-item-snippet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box {
|
||||
max-height: 250px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 3px;
|
||||
.scroll-box-item {
|
||||
padding: $-xs $-m;
|
||||
border-bottom: 1px solid #DDD;
|
||||
border-top: 1px solid #DDD;
|
||||
margin-top: -1px;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box[data-instruction]:before {
|
||||
content: attr(data-instruction);
|
||||
padding: $-xs $-m;
|
||||
border-bottom: 1px solid #DDD;
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
border:0;
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
.list-sort-container {
|
||||
display: inline-block;
|
||||
form {
|
||||
display: inline-block;
|
||||
}
|
||||
.list-sort {
|
||||
display: inline-grid;
|
||||
margin-left: $-s;
|
||||
grid-template-columns: 120px 40px;
|
||||
border: 2px solid #DDD;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.list-sort-label {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
color: #555;
|
||||
}
|
||||
.list-sort-type {
|
||||
text-align: left;
|
||||
}
|
||||
.list-sort-type, .list-sort-dir {
|
||||
padding: $-xs $-s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-sort-dir {
|
||||
border-left: 2px solid #DDD;
|
||||
fill: #888;
|
||||
.svg-icon {
|
||||
transition: transform ease-in-out 120ms;
|
||||
}
|
||||
&:hover .svg-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user