Changes the name of our spacing variables due to the prefixing -/_
meaning private in the use of new "use" rather than include.
All now modular too, so all variables/mixins are accessed via their
package.
Also renamed variables file to vars for simpler/cleaner access/writing.
eg. '$-m' is now 'vars.$m'
20 files changed:
+@use "mixins";
+@use "vars";
+
/**
* Card-style blocks
*/
.card {
/**
* Card-style blocks
*/
.card {
- @include lightDark(background-color, #FFF, #222);
- box-shadow: $bs-card;
+ @include mixins.lightDark(background-color, #FFF, #222);
+ box-shadow: vars.$bs-card;
border-radius: 3px;
break-inside: avoid;
.body, p.empty-text {
border-radius: 3px;
break-inside: avoid;
.body, p.empty-text {
+ padding-block: vars.$m;
}
a, p {
word-wrap: break-word;
}
a, p {
word-wrap: break-word;
+ padding: vars.$m vars.$m vars.$xs;
color: #222;
fill: #222;
font-weight: 400;
color: #222;
fill: #222;
font-weight: 400;
}
.card-footer-link, button.card-footer-link {
display: block;
}
.card-footer-link, button.card-footer-link {
display: block;
+ padding: vars.$s vars.$m;
line-height: 1;
border-top: 1px solid;
width: 100%;
text-align: left;
line-height: 1;
border-top: 1px solid;
width: 100%;
text-align: left;
- @include lightDark(border-color, #DDD, #555);
+ @include mixins.lightDark(border-color, #DDD, #555);
border-radius: 0 0 3px 3px;
font-size: 0.9em;
border-radius: 0 0 3px 3px;
font-size: 0.9em;
&:hover {
text-decoration: none;
&:hover {
text-decoration: none;
- @include lightDark(background-color, #f2f2f2, #2d2d2d);
+ @include mixins.lightDark(background-color, #f2f2f2, #2d2d2d);
- @include lightDark(background-color, #eee, #222);
+ @include mixins.lightDark(background-color, #eee, #222);
outline: 1px dotted #666;
outline-offset: -2px;
}
outline: 1px dotted #666;
outline-offset: -2px;
}
.card.border-card {
border: 1px solid;
.card.border-card {
border: 1px solid;
- @include lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(border-color, #ddd, #000);
}
.card.drag-card {
border: 1px solid #DDD;
}
.card.drag-card {
border: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #000);
- @include lightDark(background-color, #fff, #333);
+ @include mixins.lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(background-color, #fff, #333);
border-radius: 4px;
display: flex;
border-radius: 4px;
display: flex;
- padding: 0 0 0 ($-s + 28px);
- margin: $-s 0;
+ padding: 0 0 0 (vars.$s + 28px);
+ margin: vars.$s 0;
position: relative;
.drag-card-action {
cursor: pointer;
position: relative;
.drag-card-action {
cursor: pointer;
justify-content: center;
width: 28px;
flex-grow: 0;
justify-content: center;
width: 28px;
flex-grow: 0;
- @include lightDark(background-color, #eee, #2d2d2d);
+ @include mixins.lightDark(background-color, #eee, #2d2d2d);
}
.svg-icon {
margin-inline-end: 0px;
}
}
.outline input {
}
.svg-icon {
margin-inline-end: 0px;
}
}
.outline input {
width: 100%;
}
.outline {
position: relative;
}
.handle {
width: 100%;
}
.outline {
position: relative;
}
.handle {
- @include lightDark(background-color, #eee, #2d2d2d);
+ @include mixins.lightDark(background-color, #eee, #2d2d2d);
left: 0;
position: absolute;
top: 0;
bottom: 0;
}
> div {
left: 0;
position: absolute;
top: 0;
bottom: 0;
}
> div {
max-width: 80%;
flex: 1;
}
max-width: 80%;
flex: 1;
}
display: flex;
flex-direction: column;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
border: 1px solid #ddd;
- @include lightDark(border-color, #ddd, #000);
- margin-bottom: $-l;
+ @include mixins.lightDark(border-color, #ddd, #000);
+ margin-bottom: vars.$l;
border-radius: 4px;
overflow: hidden;
min-width: 100px;
border-radius: 4px;
overflow: hidden;
min-width: 100px;
+ color: vars.$text-dark;
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
&:hover {
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
&:hover {
+ color: vars.$text-dark;
- @include lightDark(box-shadow, $bs-card, $bs-card-dark);
+ @include mixins.lightDark(box-shadow, vars.$bs-card, vars.$bs-card-dark);
border-bottom-width: 2px;
}
.grid-card-content, .grid-card-footer {
border-bottom-width: 2px;
}
.grid-card-content, .grid-card-footer {
}
.grid-card-content + .grid-card-footer {
padding-top: 0;
}
.grid-card-content + .grid-card-footer {
padding-top: 0;
+ padding: vars.$m vars.$xxl;
margin-inline-start: auto;
margin-inline-end: auto;
margin-inline-start: auto;
margin-inline-end: auto;
+ margin-bottom: vars.$l;
overflow: initial;
min-height: 60vh;
border-radius: 8px;
overflow: initial;
min-height: 60vh;
border-radius: 8px;
-@include smaller-than($xxl) {
+@include mixins.smaller-than(vars.$bp-xxl) {
+ padding: vars.$m vars.$xl;
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
+ padding: vars.$m vars.$l;
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
+ padding: vars.$m vars.$m;
}
}
.sub-card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
border: 1.5px solid;
}
}
.sub-card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
border: 1.5px solid;
- @include lightDark(border-color, #E2E2E2, #444);
+ @include mixins.lightDark(border-color, #E2E2E2, #444);
- @include lightDark(opacity, 0.6, 0.7);
+ @include mixins.lightDark(opacity, 0.6, 0.7);
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
opacity: 1 !important;
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
opacity: 1 !important;
*/
.tag-item {
display: inline-flex;
*/
.tag-item {
display: inline-flex;
- margin-bottom: $-xs;
- margin-inline-end: $-xs;
+ margin-bottom: vars.$xs;
+ margin-inline-end: vars.$xs;
border-radius: 4px;
border: 1px solid;
overflow: hidden;
font-size: 0.85em;
border-radius: 4px;
border: 1px solid;
overflow: hidden;
font-size: 0.85em;
- @include lightDark(border-color, #CCC, #666);
+ @include mixins.lightDark(border-color, #CCC, #666);
a, span, a:hover, a:active {
padding: 4px 8px;
a, span, a:hover, a:active {
padding: 4px 8px;
- @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
+ @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
transition: background-color ease-in-out 80ms;
text-decoration: none;
}
a:hover {
transition: background-color ease-in-out 80ms;
text-decoration: none;
}
a:hover {
- @include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
+ @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
- @include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
+ @include mixins.lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
}
.tag-value {
border-inline-start: 1px solid;
}
.tag-value {
border-inline-start: 1px solid;
- @include lightDark(border-color, #DDD, #666);
- @include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
+ @include mixins.lightDark(border-color, #DDD, #666);
+ @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
.api-method {
font-size: 0.75rem;
background-color: #888;
.api-method {
font-size: 0.75rem;
background-color: #888;
line-height: 1.3;
opacity: 0.7;
vertical-align: top;
line-height: 1.3;
opacity: 0.7;
vertical-align: top;
.sticky-sidebar {
position: sticky;
.sticky-sidebar {
position: sticky;
- top: $-m;
- max-height: calc(100vh - #{$-m});
+ top: vars.$m;
+ max-height: calc(100vh - #{vars.$m});
+@use "mixins";
+@use "vars";
+
button {
background-color: transparent;
border: 0;
button {
background-color: transparent;
border: 0;
text-decoration: none;
font-size: 0.85rem;
line-height: 1.4em;
text-decoration: none;
font-size: 0.85rem;
line-height: 1.4em;
- padding: $-xs*1.3 $-m;
- margin-top: $-xs;
- margin-bottom: $-xs;
+ padding: vars.$xs*1.3 vars.$m;
+ margin-top: vars.$xs;
+ margin-bottom: vars.$xs;
display: inline-block;
font-weight: 400;
outline: 0;
display: inline-block;
font-weight: 400;
outline: 0;
color: #FFFFFF;
}
&:hover {
color: #FFFFFF;
}
&:hover {
- @include lightDark(box-shadow, $bs-light, $bs-dark);
+ @include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
filter: brightness(110%);
}
&:focus {
outline: 1px dotted currentColor;
filter: brightness(110%);
}
&:focus {
outline: 1px dotted currentColor;
+ outline-offset: -(vars.$xs);
box-shadow: none;
filter: brightness(90%);
}
box-shadow: none;
filter: brightness(90%);
}
.button.outline {
background-color: transparent;
.button.outline {
background-color: transparent;
- @include lightDark(color, #666, #AAA);
+ @include mixins.lightDark(color, #666, #AAA);
fill: currentColor;
border: 1px solid;
fill: currentColor;
border: 1px solid;
- @include lightDark(border-color, #CCC, #666);
+ @include mixins.lightDark(border-color, #CCC, #666);
&:hover, &:focus, &:active {
&:hover, &:focus, &:active {
- @include lightDark(color, #444, #BBB);
+ @include mixins.lightDark(color, #444, #BBB);
border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2;
border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2;
- @include lightDark(background-color, #f8f8f8, #444);
+ @include mixins.lightDark(background-color, #f8f8f8, #444);
filter: none;
}
&:active {
filter: none;
}
&:active {
- margin-inline-start: $-s;
+ margin-inline-start: vars.$s;
}
.button.small {
font-size: 0.75rem;
}
.button.small {
font-size: 0.75rem;
+ padding: vars.$xs*1.2 vars.$s;
.icon-button:hover {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px;
.icon-button:hover {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px;
- @include lightDark(border-color, #DDD, #444);
+ @include mixins.lightDark(border-color, #DDD, #444);
cursor: pointer;
}
.button.svg {
display: flex;
align-items: center;
cursor: pointer;
}
.button.svg {
display: flex;
align-items: center;
- padding: $-s $-m;
- padding-bottom: ($-s - 2px);
+ padding: vars.$s vars.$m;
+ padding-bottom: (vars.$s - 2px);
width: 100%;
svg {
display: inline-block;
width: 24px;
height: 24px;
bottom: auto;
width: 100%;
svg {
display: inline-block;
width: 24px;
height: 24px;
bottom: auto;
- margin-inline-end: $-m;
+ margin-inline-end: vars.$m;
+@use "mixins";
+@use "vars";
+
/**
* Custom CodeMirror BookStack overrides
*/
/**
* Custom CodeMirror BookStack overrides
*/
font-size: 12px;
border: 1px solid #ddd;
line-height: 1.4;
font-size: 12px;
border: 1px solid #ddd;
line-height: 1.4;
+ margin-bottom: vars.$l;
}
.page-content .cm-editor,
}
.page-content .cm-editor,
background-color: #EEE;
border: 1px solid #DDD;
border-start-end-radius: 4px;
background-color: #EEE;
border: 1px solid #DDD;
border-start-end-radius: 4px;
- @include lightDark(background-color, #eee, #333);
- @include lightDark(border-color, #ddd, #444);
- @include lightDark(color, #444, #888);
+ @include mixins.lightDark(background-color, #eee, #333);
+ @include mixins.lightDark(border-color, #ddd, #444);
+ @include mixins.lightDark(color, #444, #888);
line-height: 0;
cursor: pointer;
z-index: 5;
line-height: 0;
cursor: pointer;
z-index: 5;
/**
* Background colors
*/
/**
* Background colors
*/
}
.primary-background-light {
background-color: var(--color-primary-light);
}
.primary-background-light {
background-color: var(--color-primary-light);
+ @include mixins.whenDark {
background: #000;
.text-link {
color: #AAA !important;
background: #000;
.text-link {
color: #AAA !important;
- @include lightDark(color, #575757, #888888, true);
+ @include mixins.lightDark(color, #575757, #888888, true);
fill: currentColor !important;
}
.text-dark {
fill: currentColor !important;
}
.text-dark {
- @include lightDark(color, #222, #ccc, true);
+ @include mixins.lightDark(color, #222, #ccc, true);
fill: currentColor !important;
}
fill: currentColor !important;
}
+@use "sass:math";
+
+@use "mixins";
+@use "vars";
+
// System wide notifications
.notification {
position: fixed;
top: 0;
right: 0;
// System wide notifications
.notification {
position: fixed;
top: 0;
right: 0;
- margin: $-xl;
- padding: $-m $-l;
+ margin: vars.$xl;
+ padding: vars.$m vars.$l;
- @include lightDark(background-color, #fff, #444);
+ @include mixins.lightDark(background-color, #fff, #444);
border-radius: 4px;
border-inline-start: 6px solid currentColor;
border-radius: 4px;
border-inline-start: 6px solid currentColor;
+ box-shadow: vars.$bs-large;
z-index: 999999;
cursor: pointer;
max-width: 360px;
z-index: 999999;
cursor: pointer;
max-width: 360px;
svg {
width: 2.8rem;
height: 2.8rem;
svg {
width: 2.8rem;
height: 2.8rem;
- padding-inline-end: $-s;
+ padding-inline-end: vars.$s;
fill: currentColor;
}
.dismiss {
margin-top: -8px;
svg {
height: 1.0rem;
fill: currentColor;
}
.dismiss {
margin-top: -8px;
svg {
height: 1.0rem;
- @include lightDark(color, #444, #888);
+ @include mixins.lightDark(color, #444, #888);
}
}
span {
vertical-align: middle;
line-height: 1.3;
}
}
span {
vertical-align: middle;
line-height: 1.3;
+ @include mixins.whenDark {
transform: rotate(90deg);
}
svg[data-icon="caret-right"] + * {
transform: rotate(90deg);
}
svg[data-icon="caret-right"] + * {
- margin-inline-start: $-xxs;
+ margin-inline-start: vars.$xxs;
}
}
[overlay], .popup-background {
}
}
[overlay], .popup-background {
- @include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
position: fixed;
z-index: 95536;
width: 100%;
position: fixed;
z-index: 95536;
width: 100%;
- @include lightDark(background-color, #fff, #333);
+ @include mixins.lightDark(background-color, #fff, #333);
max-height: 90%;
max-width: 1200px;
width: 90%;
max-height: 90%;
max-width: 1200px;
width: 90%;
border-radius: 0;
box-shadow: none;
color: #FFF;
border-radius: 0;
box-shadow: none;
color: #FFF;
+ padding: vars.$xs vars.$m;
background-color: var(--color-primary-light);
min-height: 41px;
button {
background-color: var(--color-primary-light);
min-height: 41px;
button {
.popup-title {
color: #FFF;
margin-inline-end: auto;
.popup-title {
color: #FFF;
margin-inline-end: auto;
}
&.flex-container-row {
display: flex !important;
}
&.flex-container-row {
display: flex !important;
.dropzone-landing-area {
background-color: var(--color-primary-light);
.dropzone-landing-area {
background-color: var(--color-primary-light);
+ padding: vars.$m vars.$l;
width: 100%;
border: 1px dashed var(--color-primary);
color: var(--color-primary);
width: 100%;
border: 1px dashed var(--color-primary);
color: var(--color-primary);
display: flex;
margin: 1rem;
flex-direction: row;
display: flex;
margin: 1rem;
flex-direction: row;
- @include lightDark(background, #FFF, #444);
- box-shadow: $bs-large;
+ @include mixins.lightDark(background, #FFF, #444);
+ box-shadow: vars.$bs-large;
border-radius: 4px;
overflow: hidden;
padding-bottom: 3px;
border-radius: 4px;
overflow: hidden;
padding-bottom: 3px;
position: sticky;
top: 0;
z-index: 5;
position: sticky;
top: 0;
z-index: 5;
- @include lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85));
+ @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85));
}
.image-manager-filter-bar-bg {
position: absolute;
}
.image-manager-filter-bar-bg {
position: absolute;
}
.image-manager-filters {
}
.image-manager-filters {
+ box-shadow: vars.$bs-med;
border-radius: 4px;
overflow: hidden;
border-bottom: 0 !important;
border-radius: 4px;
overflow: hidden;
border-bottom: 0 !important;
+ @include mixins.whenDark {
border: 1px solid #000 !important;
}
button {
line-height: 0;
border: 1px solid #000 !important;
}
button {
line-height: 0;
- @include lightDark(background-color, #FFF, #333);
+ @include mixins.lightDark(background-color, #FFF, #333);
padding: 0;
cursor: pointer;
aspect-ratio: 1;
padding: 0;
cursor: pointer;
aspect-ratio: 1;
- @include lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(border-color, #ddd, #000);
transition: all linear 80ms;
overflow: hidden;
&.selected {
transition: all linear 80ms;
overflow: hidden;
&.selected {
&:focus .image-meta {
opacity: 1;
}
&:focus .image-meta {
opacity: 1;
}
- @include smaller-than($m) {
+ @include mixins.smaller-than(vars.$bp-m) {
.image-meta {
display: none;
}
.image-meta {
display: none;
}
.image-manager .load-more {
text-align: center;
.image-manager .load-more {
text-align: center;
+ padding: vars.$s vars.$m;
clear: both;
.loading-container {
margin: 0;
clear: both;
.loading-container {
margin: 0;
}
.image-manager-warning {
}
.image-manager-warning {
- @include lightDark(background, #FFF, #333);
+ @include mixins.lightDark(background, #FFF, #333);
color: var(--color-warning);
font-weight: bold;
border-inline: 3px solid var(--color-warning);
color: var(--color-warning);
font-weight: bold;
border-inline: 3px solid var(--color-warning);
overflow-y: auto;
overflow-x: hidden;
border-inline-start: 1px solid #DDD;
overflow-y: auto;
overflow-x: hidden;
border-inline-start: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(border-color, #ddd, #000);
.inner {
min-height: auto;
.inner {
min-height: auto;
}
.image-manager-viewer img {
max-width: 100%;
max-height: 180px;
display: block;
}
.image-manager-viewer img {
max-width: 100%;
max-height: 180px;
display: block;
- margin: 0 auto $-m auto;
+ margin: 0 auto vars.$m auto;
box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
}
.image-manager-viewer {
box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
}
.image-manager-viewer {
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.image-manager-sidebar {
border-inline-start: 0;
}
.image-manager-sidebar {
border-inline-start: 0;
}
.tab-container.bordered [role="tablist"] button[role="tab"] {
border-inline-end: 1px solid #DDD;
.tab-container.bordered [role="tablist"] button[role="tab"] {
border-inline-end: 1px solid #DDD;
- @include lightDark(border-inline-end-color, #DDD, #000);
+ @include mixins.lightDark(border-inline-end-color, #DDD, #000);
&:last-child {
border-inline-end: none;
}
&:last-child {
border-inline-end: none;
}
justify-items: start;
text-align: start;
border-bottom: 1px solid #DDD;
justify-items: start;
text-align: start;
border-bottom: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #444);
- margin-bottom: $-m;
+ @include mixins.lightDark(border-color, #ddd, #444);
+ margin-bottom: vars.$m;
}
.tab-container [role="tablist"] button[role="tab"] {
display: inline-block;
}
.tab-container [role="tablist"] button[role="tab"] {
display: inline-block;
- padding: $-s;
- @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
+ padding: vars.$s;
+ @include mixins.lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
outline: 0 !important;
}
&:hover, &:focus {
outline: 0 !important;
}
&:hover, &:focus {
- @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
- @include lightDark(border-bottom-color, rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
+ @include mixins.lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
+ @include mixins.lightDark(border-bottom-color, rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
}
&:focus {
outline: 1px dotted var(--color-primary);
}
&:focus {
outline: 1px dotted var(--color-primary);
.tab-container [role="tablist"].controls-card {
margin-bottom: 0;
border-bottom: 0;
.tab-container [role="tablist"].controls-card {
margin-bottom: 0;
border-bottom: 0;
.code-editor .lang-options button {
display: block;
.code-editor .lang-options button {
display: block;
+ padding: vars.$xs vars.$m;
border-bottom: 1px solid;
border-bottom: 1px solid;
- @include lightDark(color, #333, #AAA);
- @include lightDark(border-bottom-color, #EEE, #000);
+ @include mixins.lightDark(color, #333, #AAA);
+ @include mixins.lightDark(border-bottom-color, #EEE, #000);
cursor: pointer;
width: 100%;
text-align: left;
font-family: var(--font-code);
font-size: 0.7rem;
cursor: pointer;
width: 100%;
text-align: left;
font-family: var(--font-code);
font-size: 0.7rem;
- padding-left: 24px + $-xs;
+ padding-left: 24px + vars.$xs;
&:hover, &.active {
background-color: var(--color-primary-light);
color: var(--color-primary);
&:hover, &.active {
background-color: var(--color-primary-light);
color: var(--color-primary);
background-color: var(--color-primary-light);
width: 100%;
color: var(--color-primary);
background-color: var(--color-primary-light);
width: 100%;
color: var(--color-primary);
+ padding: vars.$xxs vars.$s;
border-radius: 0;
border: 0;
border-bottom: 1px solid #DDD;
border-radius: 0;
border: 0;
border-bottom: 1px solid #DDD;
+ padding: vars.$xs vars.$s;
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
.code-editor .lang-options {
display: none;
}
.code-editor .lang-options {
display: none;
}
- padding-inline: $-xl;
- @include smaller-than($m) {
- padding-inline: $-xs;
+ padding-inline: vars.$xl;
+ @include mixins.smaller-than(vars.$bp-m) {
+ padding-inline: vars.$xs;
}
}
.comment-box {
border-radius: 4px;
border: 1px solid #DDD;
}
}
.comment-box {
border-radius: 4px;
border: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #000);
- @include lightDark(background-color, #FFF, #222);
+ @include mixins.lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(background-color, #FFF, #222);
.content {
font-size: 0.666em;
.content {
font-size: 0.666em;
+ padding: vars.$xs vars.$s;
.actions button:focus {
outline: 1px dotted var(--color-primary);
}
.actions button:focus {
outline: 1px dotted var(--color-primary);
}
- @include smaller-than($m) {
+ @include mixins.smaller-than(vars.$bp-m) {
.comment-box .header {
border-bottom: 1px solid #DDD;
.comment-box .header {
border-bottom: 1px solid #DDD;
- padding: $-xs $-s;
- @include lightDark(border-color, #DDD, #000);
+ padding: vars.$xs vars.$s;
+ @include mixins.lightDark(border-color, #DDD, #000);
.comment-thread-indicator {
border-inline-start: 3px dotted #DDD;
.comment-thread-indicator {
border-inline-start: 3px dotted #DDD;
- @include lightDark(border-color, #DDD, #444);
- margin-inline-start: $-xs;
- width: $-l;
- height: calc(100% - $-m);
+ @include mixins.lightDark(border-color, #DDD, #444);
+ margin-inline-start: vars.$xs;
+ width: vars.$l;
+ height: calc(100% - vars.$m);
}
.comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
}
.comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
.comment-reply {
display: none;
margin: 0 !important;
.comment-reply {
display: none;
margin: 0 !important;
- margin-bottom: -$-xxs !important;
+ margin-bottom: -(vars.$xxs) !important;
}
.comment-branch .comment-branch .comment-branch .comment-branch .comment-reply {
}
.comment-branch .comment-branch .comment-branch .comment-branch .comment-reply {
font-size: 0.8rem;
}
.header {
font-size: 0.8rem;
}
.header {
}
.right-meta {
display: none;
}
.content {
}
.right-meta {
display: none;
}
.content {
+ padding: vars.$xs vars.$s;
}
}
.comment-container-compact .comment-thread-indicator {
}
}
.comment-container-compact .comment-thread-indicator {
}
#tag-manager .drag-card {
}
#tag-manager .drag-card {
display: flex;
flex-direction: column;
border-inline-start: 1px solid;
display: flex;
flex-direction: column;
border-inline-start: 1px solid;
- @include lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(border-color, #ddd, #000);
}
.template-item-actions button {
cursor: pointer;
flex: 1;
}
.template-item-actions button {
cursor: pointer;
flex: 1;
- @include lightDark(background-color, #FFF, #222);
+ @include mixins.lightDark(background-color, #FFF, #222);
border: 0;
border-top: 1px solid;
border: 0;
border-top: 1px solid;
- @include lightDark(border-color, #DDD, #000);
+ @include mixins.lightDark(border-color, #DDD, #000);
}
.template-item-actions button svg {
margin: 0;
}
.template-item-actions button svg {
margin: 0;
border: 1px solid transparent;
border-radius: 4px;
line-height: normal;
border: 1px solid transparent;
border-radius: 4px;
line-height: normal;
&:hover {
border-color: #DDD;
}
&:hover {
border-color: #DDD;
}
}
.dropdown-search-toggle-select {
display: flex;
}
.dropdown-search-toggle-select {
display: flex;
line-height: normal;
.svg-icon {
height: 26px;
line-height: normal;
.svg-icon {
height: 26px;
}
.dropdown-search-dropdown {
}
.dropdown-search-dropdown {
+ box-shadow: vars.$bs-med;
overflow: hidden;
min-height: 100px;
width: 240px;
overflow: hidden;
min-height: 100px;
width: 240px;
z-index: 80;
right: 0;
top: 0;
z-index: 80;
right: 0;
top: 0;
- margin-top: $-m;
- @include rtl {
+ margin-top: vars.$m;
+ @include mixins.rtl {
}
.dropdown-search-search .svg-icon {
position: absolute;
}
.dropdown-search-search .svg-icon {
position: absolute;
- left: $-s;
- @include rtl {
- right: $-s;
+ left: vars.$s;
+ @include mixins.rtl {
+ right: vars.$s;
text-align: start;
}
.dropdown-search-item {
text-align: start;
}
.dropdown-search-item {
+ padding: vars.$s vars.$m;
&:hover,&:focus {
background-color: #F2F2F2;
text-decoration: none;
}
}
input, input:focus {
&:hover,&:focus {
background-color: #F2F2F2;
text-decoration: none;
}
}
input, input:focus {
- padding-inline-start: $-xl;
+ padding-inline-start: vars.$xl;
border-radius: 0;
border: 0;
border-bottom: 1px solid #DDD;
border-radius: 0;
border: 0;
border-bottom: 1px solid #DDD;
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
.dropdown-search-dropdown {
.dropdown-search-dropdown {
- inset-inline: $-m auto;
+ inset-inline: vars.$m auto;
}
.dropdown-search-dropdown .dropdown-search-list {
max-height: 240px;
}
.dropdown-search-dropdown .dropdown-search-list {
max-height: 240px;
}
.item-list-row {
border: 1.5px solid;
}
.item-list-row {
border: 1.5px solid;
- @include lightDark(border-color, #E2E2E2, #444);
+ @include mixins.lightDark(border-color, #E2E2E2, #444);
border-bottom-width: 0;
label {
padding-bottom: 0;
}
&:hover {
border-bottom-width: 0;
label {
padding-bottom: 0;
}
&:hover {
- @include lightDark(background-color, #F6F6F6, #333);
+ @include mixins.lightDark(background-color, #F6F6F6, #333);
}
}
.item-list-row:first-child {
}
}
.item-list-row:first-child {
}
.shortcut-hint {
position: fixed;
}
.shortcut-hint {
position: fixed;
+ padding: vars.$xxs vars.$xxs;
font-size: .85rem;
font-weight: 700;
line-height: 1;
font-size: .85rem;
font-weight: 700;
line-height: 1;
.back-to-top {
background-color: var(--color-primary);
position: fixed;
.back-to-top {
background-color: var(--color-primary);
position: fixed;
- bottom: $-m;
- right: $-l;
+ bottom: vars.$m;
+ right: vars.$l;
padding: 5px 7px;
cursor: pointer;
color: #FFF;
padding: 5px 7px;
cursor: pointer;
color: #FFF;
max-height: 280px;
overflow-y: scroll;
border: 1px solid;
max-height: 280px;
overflow-y: scroll;
border: 1px solid;
- @include lightDark(border-color, #DDD, #000);
+ @include mixins.lightDark(border-color, #DDD, #000);
border-radius: 3px;
min-height: 20px;
border-radius: 3px;
min-height: 20px;
- @include lightDark(background-color, #EEE, #000);
+ @include mixins.lightDark(background-color, #EEE, #000);
}
.scroll-box-item {
border-bottom: 1px solid;
border-top: 1px solid;
}
.scroll-box-item {
border-bottom: 1px solid;
border-top: 1px solid;
- @include lightDark(border-color, #DDD, #000);
+ @include mixins.lightDark(border-color, #DDD, #000);
- @include lightDark(background-color, #FFF, #222);
+ @include mixins.lightDark(background-color, #FFF, #222);
display: flex;
align-items: flex-start;
padding: 1px;
display: flex;
align-items: flex-start;
padding: 1px;
}
&:hover {
cursor: pointer;
}
&:hover {
cursor: pointer;
- @include lightDark(background-color, #f8f8f8, #333);
+ @include mixins.lightDark(background-color, #f8f8f8, #333);
+ padding: vars.$xs vars.$m;
}
.handle + * {
padding-left: 0;
}
&:hover .handle {
}
.handle + * {
padding-left: 0;
}
&:hover .handle {
- @include lightDark(color, #444, #FFF);
+ @include mixins.lightDark(color, #444, #FFF);
}
&:hover button {
opacity: 1;
}
&:hover button {
opacity: 1;
input.scroll-box-search, .scroll-box-header-item {
font-size: 0.8rem;
border: 1px solid;
input.scroll-box-search, .scroll-box-header-item {
font-size: 0.8rem;
border: 1px solid;
- @include lightDark(border-color, #DDD, #000);
- @include lightDark(background-color, #FFF, #222);
+ @include mixins.lightDark(border-color, #DDD, #000);
+ @include mixins.lightDark(background-color, #FFF, #222);
margin-bottom: -1px;
border-radius: 3px 3px 0 0;
width: 100%;
margin-bottom: -1px;
border-radius: 3px 3px 0 0;
width: 100%;
+@use "mixins";
+@use "vars";
+
/**
* Page Content
* Styles specific to blocks used within page content.
/**
* Page Content
* Styles specific to blocks used within page content.
}
img.align-left, table.align-left, iframe.align-left, video.align-left {
float: left !important;
}
img.align-left, table.align-left, iframe.align-left, video.align-left {
float: left !important;
- margin: $-xs $-m $-m 0;
+ margin: vars.$xs vars.$m vars.$m 0;
}
.align-right {
text-align: right !important;
}
img.align-right, table.align-right, iframe.align-right, video.align-right {
float: right !important;
}
.align-right {
text-align: right !important;
}
img.align-right, table.align-right, iframe.align-right, video.align-right {
float: right !important;
- margin: $-xs 0 $-xs $-s;
+ margin: vars.$xs 0 vars.$xs vars.$s;
}
.align-center {
text-align: center;
}
.align-center {
text-align: center;
details {
border: 1px solid;
details {
border: 1px solid;
- @include lightDark(border-color, #DDD, #555);
+ @include mixins.lightDark(border-color, #DDD, #555);
- margin-top: -$-s;
- margin-left: -$-s;
- margin-right: -$-s;
- margin-bottom: -$-s;
+ margin-top: -(vars.$s);
+ margin-left: -(vars.$s);
+ margin-right: -(vars.$s);
+ margin-bottom: -(vars.$s);
- @include lightDark(background-color, #EEE, #333);
- padding: $-xs $-s;
+ @include mixins.lightDark(background-color, #EEE, #333);
+ padding: vars.$xs vars.$s;
}
details[open] > summary {
}
details[open] > summary {
+ margin-bottom: vars.$s;
border-bottom: 1px solid;
border-bottom: 1px solid;
- @include lightDark(border-color, #DDD, #555);
+ @include mixins.lightDark(border-color, #DDD, #555);
}
details > summary + * {
margin-top: .2em;
}
details > summary + * {
margin-top: .2em;
border-inline-start: 3px solid #BBB;
border-inline-end: none;
background-color: #EEE;
border-inline-start: 3px solid #BBB;
border-inline-end: none;
background-color: #EEE;
- padding: $-s;
- padding-left: $-xl;
- padding-inline-start: $-xl;
- padding-inline-end: $-s;
+ padding: vars.$s;
+ padding-left: vars.$xl;
+ padding-inline-start: vars.$xl;
+ padding-inline-end: vars.$s;
display: block;
position: relative;
overflow: auto;
display: block;
position: relative;
overflow: auto;
content: '';
width: 1.2em;
height: 1.2em;
content: '';
width: 1.2em;
height: 1.2em;
- left: $-xs + 2px;
- inset-inline-start: $-xs + 2px;
+ left: vars.$xs + 2px;
+ inset-inline-start: vars.$xs + 2px;
inset-inline-end: unset;
top: 50%;
margin-top: -9px;
inset-inline-end: unset;
top: 50%;
margin-top: -9px;
opacity: 0.8;
}
&.success {
opacity: 0.8;
}
&.success {
- @include lightDark(border-color, $positive, $positive-dark);
- @include lightDark(background-color, #eafdeb, #122913);
- @include lightDark(color, #063409, $positive-dark);
+ @include mixins.lightDark(border-color, vars.$positive, vars.$positive-dark);
+ @include mixins.lightDark(background-color, #eafdeb, #122913);
+ @include mixins.lightDark(color, #063409, vars.$positive-dark);
}
&.success:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
}
&.danger {
}
&.success:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
}
&.danger {
- @include lightDark(border-color, $negative, $negative-dark);
- @include lightDark(background-color, #fcdbdb, #250505);
- @include lightDark(color, #4d0706, $negative-dark);
+ @include mixins.lightDark(border-color, vars.$negative, vars.$negative-dark);
+ @include mixins.lightDark(background-color, #fcdbdb, #250505);
+ @include mixins.lightDark(color, #4d0706, vars.$negative-dark);
}
&.danger:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
}
&.info {
}
&.danger:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
}
&.info {
- @include lightDark(border-color, $info, $info-dark);
- @include lightDark(background-color, #d3efff, #001825);
- @include lightDark(color, #01466c, $info-dark);
+ @include mixins.lightDark(border-color, vars.$info, vars.$info-dark);
+ @include mixins.lightDark(background-color, #d3efff, #001825);
+ @include mixins.lightDark(color, #01466c, vars.$info-dark);
- @include lightDark(border-color, $warning, $warning-dark);
- @include lightDark(background-color, #fee3d3, #30170a);
- @include lightDark(color, #6a2802, $warning-dark);
+ @include mixins.lightDark(border-color, vars.$warning, vars.$warning-dark);
+ @include mixins.lightDark(background-color, #fee3d3, #30170a);
+ @include mixins.lightDark(color, #6a2802, vars.$warning-dark);
}
&.warning:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
}
&.warning:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
+@use "mixins";
+@use "vars";
+
// Common variables
:root {
--editor-color-primary: #206ea7;
// Common variables
:root {
--editor-color-primary: #206ea7;
color: #FFF;
}
.editor-modal-title {
color: #FFF;
}
.editor-modal-title {
}
.editor-modal-close {
color: #FFF;
}
.editor-modal-close {
color: #FFF;
align-items: center;
justify-content: center;
cursor: pointer;
align-items: center;
justify-content: center;
cursor: pointer;
}
// Specific UI elements
}
// Specific UI elements
.editor-form-actions {
display: flex;
justify-content: end;
.editor-form-actions {
display: flex;
justify-content: end;
- gap: $-s;
- margin-top: $-m;
+ gap: vars.$s;
+ margin-top: vars.$m;
}
.editor-form-actions > button {
display: block;
font-size: 0.85rem;
line-height: 1.4em;
}
.editor-form-actions > button {
display: block;
font-size: 0.85rem;
line-height: 1.4em;
+ padding: vars.$xs*1.3 vars.$m;
font-weight: 400;
border-radius: 4px;
cursor: pointer;
box-shadow: none;
&:focus {
outline: 1px dotted currentColor;
font-weight: 400;
border-radius: 4px;
cursor: pointer;
box-shadow: none;
&:focus {
outline: 1px dotted currentColor;
+ outline-offset: -(vars.$xs);
box-shadow: none;
filter: brightness(90%);
}
box-shadow: none;
filter: brightness(90%);
}
color: #FFF;
border: 1px solid var(--color-primary);
&:hover {
color: #FFF;
border: 1px solid var(--color-primary);
&:hover {
- @include lightDark(box-shadow, $bs-light, $bs-dark);
+ @include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
filter: brightness(110%);
}
}
.editor-form-action-secondary {
border: 1px solid;
filter: brightness(110%);
}
}
.editor-form-action-secondary {
border: 1px solid;
- @include lightDark(border-color, #CCC, #666);
- @include lightDark(color, #666, #AAA);
+ @include mixins.lightDark(border-color, #CCC, #666);
+ @include mixins.lightDark(color, #666, #AAA);
&:hover, &:focus, &:active {
&:hover, &:focus, &:active {
- @include lightDark(color, #444, #BBB);
+ @include mixins.lightDark(color, #444, #BBB);
border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2;
border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2;
- @include lightDark(background-color, #f8f8f8, #444);
+ @include mixins.lightDark(background-color, #f8f8f8, #444);
filter: none;
}
&:active {
filter: none;
}
&:active {
+@use "sass:math";
+
+@use "mixins";
+@use "vars";
+
.input-base {
border-radius: 3px;
border: 1px solid #D4D4D4;
.input-base {
border-radius: 3px;
border: 1px solid #D4D4D4;
- @include lightDark(background-color, #fff, #333);
- @include lightDark(border-color, #d4d4d4, #111);
- @include lightDark(color, #666, #AAA);
+ @include mixins.lightDark(background-color, #fff, #333);
+ @include mixins.lightDark(border-color, #d4d4d4, #111);
+ @include mixins.lightDark(color, #666, #AAA);
- font-size: $fs-m;
- padding: $-xs*1.8;
+ font-size: vars.$fs-m;
+ padding: vars.$xs*1.8;
height: 40px;
width: 250px;
max-width: 100%;
height: 40px;
width: 250px;
max-width: 100%;
#markdown-editor-input {
font-style: normal;
font-weight: 400;
#markdown-editor-input {
font-style: normal;
font-weight: 400;
+ padding: vars.$xs vars.$m;
color: #444;
border-radius: 0;
max-height: 100%;
color: #444;
border-radius: 0;
max-height: 100%;
.markdown-editor-wrap {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
.markdown-editor-wrap {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(border-color, #ddd, #000);
position: relative;
flex: 1;
min-width: 0;
position: relative;
flex: 1;
min-width: 0;
.markdown-panel-divider {
width: 2px;
.markdown-panel-divider {
width: 2px;
- @include lightDark(background-color, #ddd, #000);
+ @include mixins.lightDark(background-color, #ddd, #000);
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
#markdown-editor {
flex-direction: column;
}
#markdown-editor {
flex-direction: column;
}
}
.editor-toolbar-label {
float: none !important;
}
.editor-toolbar-label {
float: none !important;
- @include lightDark(border-color, #DDD, #555);
+ @include mixins.lightDark(border-color, #DDD, #555);
display: block;
}
.markdown-editor-wrap:not(.active) .editor-toolbar + div,
display: block;
}
.markdown-editor-wrap:not(.active) .editor-toolbar + div,
font-size: 11px;
line-height: 1.6;
border-bottom: 1px solid #CCC;
font-size: 11px;
line-height: 1.6;
border-bottom: 1px solid #CCC;
- @include lightDark(background-color, #FFF, #333);
- @include lightDark(border-color, #CCC, #000);
+ @include mixins.lightDark(background-color, #FFF, #333);
+ @include mixins.lightDark(border-color, #CCC, #000);
+ @include mixins.whenDark {
}
.editor-toolbar .buttons {
}
.editor-toolbar .buttons {
.dropdown-menu {
padding: 0;
}
.toggle-switch {
.dropdown-menu {
padding: 0;
}
.toggle-switch {
width: 2rem;
text-align: center;
border-left: 1px solid;
width: 2rem;
text-align: center;
border-left: 1px solid;
- @include lightDark(border-color, #DDD, #555);
+ @include mixins.lightDark(border-color, #DDD, #555);
svg {
margin-inline-end: 0;
}
&:hover {
svg {
margin-inline-end: 0;
}
&:hover {
- @include lightDark(background-color, #DDD, #222);
+ @include mixins.lightDark(background-color, #DDD, #222);
- @include lightDark(color, #666, #ddd);
+ @include mixins.lightDark(color, #666, #ddd);
display: block;
line-height: 1.4em;
font-size: 0.94em;
display: block;
line-height: 1.4em;
font-size: 0.94em;
font-weight: 400;
user-select: none;
input[type="radio"], input[type="checkbox"] {
font-weight: 400;
user-select: none;
input[type="radio"], input[type="checkbox"] {
- margin-inline-end: $-xs;
+ margin-inline-end: vars.$xs;
}
}
label.inline.checkbox {
}
}
label.inline.checkbox {
- margin-inline-end: $-m;
+ margin-inline-end: vars.$m;
max-width: 100%;
td {
overflow: hidden;
max-width: 100%;
td {
overflow: hidden;
- padding: math.div($-xxs, 2) 0;
+ padding: math.div(vars.$xxs, 2) 0;
background-position: calc(100% - 20px) 64%;
background-repeat: no-repeat;
background-position: calc(100% - 20px) 64%;
background-repeat: no-repeat;
background-position: 20px 70%;
}
}
background-position: 20px 70%;
}
}
.toggle-switch {
user-select: none;
display: inline-grid;
.toggle-switch {
user-select: none;
display: inline-grid;
- grid-template-columns: (16px + $-s) 1fr;
+ grid-template-columns: (16px + vars.$s) 1fr;
.custom-checkbox {
width: 16px;
height: 16px;
.custom-checkbox {
width: 16px;
height: 16px;
}
.toggle-switch-list {
.toggle-switch {
}
.toggle-switch-list {
.toggle-switch {
}
&.compact .toggle-switch {
margin: 1px 0;
}
&.compact .toggle-switch {
margin: 1px 0;
+ margin-bottom: vars.$s;
}
.setting-list > div {
border-bottom: 1px solid #DDD;
}
.setting-list > div {
border-bottom: 1px solid #DDD;
&:last-child {
border-bottom: none;
}
}
.setting-list-label {
&:last-child {
border-bottom: none;
}
}
.setting-list-label {
- @include lightDark(color, #222, #DDD);
+ @include mixins.lightDark(color, #222, #DDD);
color: #222;
font-size: 1rem;
}
color: #222;
font-size: 1rem;
}
margin-bottom: 0;
}
.setting-list-label + .grid {
margin-bottom: 0;
}
.setting-list-label + .grid {
}
.setting-list .grid, .stretch-inputs {
}
.setting-list .grid, .stretch-inputs {
.form-group {
div.text-pos, div.text-neg, p.text-post, p.text-neg {
.form-group {
div.text-pos, div.text-neg, p.text-post, p.text-neg {
}
}
.form-group.collapsible {
}
}
.form-group.collapsible {
- @include lightDark(border-color, #DDD, #000);
+ @include mixins.lightDark(border-color, #DDD, #000);
border-radius: 4px;
.collapse-title {
border-radius: 4px;
.collapse-title {
- margin-inline-start: -$-m;
- margin-inline-end: -$-m;
- padding: $-s $-m;
+ margin-inline-start: -(vars.$m);
+ margin-inline-end: -(vars.$m);
+ padding: vars.$s vars.$m;
display: block;
width: calc(100% + 32px);
text-align: start;
display: block;
width: calc(100% + 32px);
text-align: start;
.collapse-title label:before {
display: inline-block;
content: 'â–¸';
.collapse-title label:before {
display: inline-block;
content: 'â–¸';
- margin-inline-end: $-m;
+ margin-inline-end: vars.$m;
transition: all ease-in-out 400ms;
transform: rotate(0);
}
.collapse-content {
display: none;
transition: all ease-in-out 400ms;
transform: rotate(0);
}
.collapse-content {
display: none;
+ padding-bottom: vars.$m;
}
&.open .collapse-title label:before {
transform: rotate(90deg);
}
&.open .collapse-title label:before {
transform: rotate(90deg);
.title-input input[type="text"] {
display: block;
width: 100%;
.title-input input[type="text"] {
display: block;
width: 100%;
margin-top: 0;
font-size: 2em;
height: auto;
margin-top: 0;
font-size: 2em;
height: auto;
.description-input textarea {
display: block;
width: 100%;
.description-input textarea {
display: block;
width: 100%;
- padding: $-s;
- font-size: $fs-m;
+ padding: vars.$s;
+ font-size: vars.$fs-m;
color: #666;
height: auto;
}
.description-input > .tox-tinymce {
border: 1px solid #DDD !important;
color: #666;
height: auto;
}
.description-input > .tox-tinymce {
border: 1px solid #DDD !important;
- @include lightDark(border-color, #DDD !important, #000 !important);
+ @include mixins.lightDark(border-color, #DDD !important, #000 !important);
border-radius: 3px;
.tox-toolbar__primary {
justify-content: end;
border-radius: 3px;
.tox-toolbar__primary {
justify-content: end;
button[tabindex="-1"] {
background-color: transparent;
border: none;
button[tabindex="-1"] {
background-color: transparent;
border: none;
- @include lightDark(color, #666, #AAA);
+ @include mixins.lightDark(color, #666, #AAA);
padding: 0;
cursor: pointer;
position: absolute;
padding: 0;
cursor: pointer;
position: absolute;
}
input {
display: block;
}
input {
display: block;
- padding: $-xs * 1.5;
- padding-inline-start: $-l + 4px;
+ padding: vars.$xs * 1.5;
+ padding-inline-start: vars.$l + 4px;
width: 300px;
max-width: 100%;
height: auto;
width: 300px;
max-width: 100%;
height: auto;
height: 38px;
z-index: -1;
&.floating {
height: 38px;
z-index: -1;
&.floating {
+ box-shadow: vars.$bs-med;
border-radius: 4px;
overflow: hidden;
border-radius: 4px;
overflow: hidden;
+ @include mixins.whenDark {
border: 1px solid #000;
}
}
border: 1px solid #000;
}
}
height: 100%;
border-radius: 0;
border: 1px solid #ddd;
height: 100%;
border-radius: 0;
border: 1px solid #ddd;
- @include lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(border-color, #ddd, #000);
margin-inline-start: -1px;
&:last-child {
border-inline-end: 0;
margin-inline-start: -1px;
&:last-child {
border-inline-end: 0;
input {
border: 0;
flex: 5;
input {
border: 0;
flex: 5;
+ padding: vars.$xs vars.$s;
&:focus, &:active {
outline: 1px dotted var(--color-primary);
outline-offset: -2px;
&:focus, &:active {
outline: 1px dotted var(--color-primary);
outline-offset: -2px;
width: 48px;
border-inline-start: 1px solid #DDD;
background-color: #FFF;
width: 48px;
border-inline-start: 1px solid #DDD;
background-color: #FFF;
- @include lightDark(background-color, #FFF, #333);
- @include lightDark(color, #444, #AAA);
+ @include mixins.lightDark(background-color, #FFF, #333);
+ @include mixins.lightDark(color, #444, #AAA);
}
button:focus {
outline: 1px dotted var(--color-primary);
}
button:focus {
outline: 1px dotted var(--color-primary);
- @include smaller-than($s) {
+ @include mixins.smaller-than(vars.$bp-s) {
.custom-simple-file-input {
max-width: 100%;
border: 1px solid;
.custom-simple-file-input {
max-width: 100%;
border: 1px solid;
- @include lightDark(border-color, #DDD, #666);
+ @include mixins.lightDark(border-color, #DDD, #666);
+ padding: vars.$s vars.$m;
}
.custom-simple-file-input::file-selector-button {
background-color: transparent;
text-decoration: none;
font-size: 0.8rem;
line-height: 1.4em;
}
.custom-simple-file-input::file-selector-button {
background-color: transparent;
text-decoration: none;
font-size: 0.8rem;
line-height: 1.4em;
+ padding: vars.$xs vars.$s;
border: 1px solid;
font-weight: 400;
outline: 0;
border-radius: 4px;
cursor: pointer;
border: 1px solid;
font-weight: 400;
outline: 0;
border-radius: 4px;
cursor: pointer;
- margin-right: $-m;
- @include lightDark(color, #666, #AAA);
- @include lightDark(border-color, #CCC, #666);
+ margin-right: vars.$m;
+ @include mixins.lightDark(color, #666, #AAA);
+ @include mixins.lightDark(border-color, #CCC, #666);
&:hover, &:focus, &:active {
&:hover, &:focus, &:active {
- @include lightDark(color, #444, #BBB);
+ @include mixins.lightDark(color, #444, #BBB);
border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2;
border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2;
- @include lightDark(background-color, #f8f8f8, #444);
+ @include mixins.lightDark(background-color, #f8f8f8, #444);
filter: none;
}
&:active {
filter: none;
}
&:active {
+@use "mixins";
+@use "vars";
+
/**
* Includes the main navigation header and the faded toolbar.
*/
/**
* Includes the main navigation header and the faded toolbar.
*/
grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
}
grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
}
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
header.grid {
grid-template-columns: 1fr;
grid-row-gap: 0;
header.grid {
grid-template-columns: 1fr;
grid-row-gap: 0;
top: 0;
color: rgb(250, 250, 250);
border-bottom: 1px solid #DDD;
top: 0;
color: rgb(250, 250, 250);
border-bottom: 1px solid #DDD;
- box-shadow: $bs-card;
- @include lightDark(border-bottom-color, #DDD, #000);
+ box-shadow: vars.$bs-card;
+ @include mixins.lightDark(border-bottom-color, #DDD, #000);
.header-links {
display: flex;
align-items: center;
.header-links {
display: flex;
align-items: center;
}
.links a {
display: inline-block;
}
.links a {
display: inline-block;
color: #FFF;
border-radius: 3px;
}
color: #FFF;
border-radius: 3px;
}
background-color: rgba(255, 255, 255, .15);
}
.dropdown-container {
background-color: rgba(255, 255, 255, .15);
}
.dropdown-container {
- padding-inline-start: $-m;
+ padding-inline-start: vars.$m;
padding-inline-end: 0;
}
.avatar, .user-name {
padding-inline-end: 0;
}
.avatar, .user-name {
display: inline-flex;
align-items: center;
cursor: pointer;
display: inline-flex;
align-items: center;
cursor: pointer;
- padding: $-s;
- margin: 0 (-$-s);
+ padding: vars.$s;
+ margin: 0 (-(vars.$s));
- padding-inline-start: $-xs;
+ padding-inline-start: vars.$xs;
display: inline-block;
line-height: 1;
}
display: inline-block;
line-height: 1;
}
&:hover {
background-color: rgba(255, 255, 255, 0.15);
}
&:hover {
background-color: rgba(255, 255, 255, 0.15);
}
- @include between($l, $xl) {
- padding-inline-start: $-xs;
+ @include mixins.between(vars.$bp-l, vars.$bp-xl) {
+ padding-inline-start: vars.$xs;
color: #EEE;
z-index: 2;
height: auto;
color: #EEE;
z-index: 2;
height: auto;
padding-inline-start: 40px;
&:focus {
outline: none;
padding-inline-start: 40px;
&:focus {
outline: none;
color: #FFF;
opacity: 0.6;
}
color: #FFF;
opacity: 0.6;
}
- @include between($l, $xl) {
+ @include mixins.between(vars.$bp-l, vars.$bp-xl) {
max-width: 200px;
}
&:focus-within #header-search-box-button {
max-width: 200px;
}
&:focus-within #header-search-box-button {
top: 10px;
color: #FFF;
opacity: 0.6;
top: 10px;
color: #FFF;
opacity: 0.6;
- @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
+ @include mixins.lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
svg {
margin-inline-end: 0;
}
svg {
margin-inline-end: 0;
}
.global-search-suggestions {
display: none;
position: absolute;
.global-search-suggestions {
display: none;
position: absolute;
left: 0;
right: 0;
z-index: -1;
left: 0;
right: 0;
z-index: -1;
- margin-left: -$-xxl;
- margin-right: -$-xxl;
+ margin-left: -(vars.$xxl);
+ margin-right: -(vars.$xxl);
padding-top: 56px;
border-radius: 3px;
padding-top: 56px;
border-radius: 3px;
+ box-shadow: vars.$bs-hover;
transform-origin: top center;
opacity: .5;
transform: scale(0.9);
transform-origin: top center;
opacity: .5;
transform: scale(0.9);
display: block;
}
input {
display: block;
}
input {
- @include lightDark(background-color, #EEE, #333);
- @include lightDark(border-color, #DDD, #111);
+ @include mixins.lightDark(background-color, #EEE, #333);
+ @include mixins.lightDark(border-color, #DDD, #111);
}
#header-search-box-button, input {
}
#header-search-box-button, input {
- @include lightDark(color, #444, #AAA);
+ @include mixins.lightDark(color, #444, #AAA);
}
}
.logo {
display: inline-flex;
}
}
.logo {
display: inline-flex;
- padding: ($-s - 6px) $-s;
- margin: 6px (-$-s);
- gap: $-s;
+ padding: (vars.$s - 6px) vars.$s;
+ margin: 6px (-(vars.$s));
+ gap: vars.$s;
align-items: center;
border-radius: 4px;
&:hover {
align-items: center;
border-radius: 4px;
&:hover {
font-size: 2em;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 4px;
font-size: 2em;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 4px;
line-height: 1;
cursor: pointer;
user-select: none;
line-height: 1;
cursor: pointer;
user-select: none;
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
- @include lightDark(background-color, #fff, #333);
+ @include mixins.lightDark(background-color, #fff, #333);
display: none;
z-index: 10;
display: none;
z-index: 10;
+ inset-inline-end: vars.$m;
border-radius: 4px;
overflow: hidden;
position: absolute;
border-radius: 4px;
overflow: hidden;
position: absolute;
- box-shadow: $bs-hover;
- margin-top: $-m;
- padding: $-xs 0;
+ box-shadow: vars.$bs-hover;
+ margin-top: vars.$m;
+ padding: vars.$xs 0;
&.show {
display: block;
}
&.show {
display: block;
}
text-align: start;
display: grid;
align-items: center;
text-align: start;
display: grid;
align-items: center;
- padding: 8px $-m;
- gap: $-m;
- color: $text-dark;
+ padding: 8px vars.$m;
+ gap: vars.$m;
+ color: vars.$text-dark;
grid-template-columns: 16px auto;
line-height: 1.4;
grid-template-columns: 16px auto;
line-height: 1.4;
- @include lightDark(color, $text-dark, #eee);
+ @include mixins.lightDark(color, vars.$text-dark, #eee);
- margin-inline-end: $-s;
+ margin-inline-end: vars.$s;
text-decoration: none;
}
&:focus {
text-decoration: none;
}
&:focus {
- @include lightDark(background-color, #eee, #333);
+ @include mixins.lightDark(background-color, #eee, #333);
outline-color: var(--color-primary);
color: var(--color-primary);
}
outline-color: var(--color-primary);
color: var(--color-primary);
}
z-index: 5;
background-color: #FFF;
border-bottom: 1px solid #DDD;
z-index: 5;
background-color: #FFF;
border-bottom: 1px solid #DDD;
- @include lightDark(border-bottom-color, #DDD, #333);
- box-shadow: $bs-card;
+ @include mixins.lightDark(border-bottom-color, #DDD, #333);
+ box-shadow: vars.$bs-card;
}
.tri-layout-mobile-tab {
text-align: center;
border-bottom: 3px solid #BBB;
cursor: pointer;
margin: 0;
}
.tri-layout-mobile-tab {
text-align: center;
border-bottom: 3px solid #BBB;
cursor: pointer;
margin: 0;
- @include lightDark(background-color, #FFF, #222);
- @include lightDark(border-bottom-color, #BBB, #333);
+ @include mixins.lightDark(background-color, #FFF, #222);
+ @include mixins.lightDark(border-bottom-color, #BBB, #333);
&:first-child {
border-inline-end: 1px solid #DDD;
&:first-child {
border-inline-end: 1px solid #DDD;
- @include lightDark(border-inline-end-color, #DDD, #000);
+ @include mixins.lightDark(border-inline-end-color, #DDD, #000);
}
&[aria-selected="true"] {
border-bottom-color: currentColor !important;
}
&[aria-selected="true"] {
border-bottom-color: currentColor !important;
opacity: 0.7;
.icon-list-item {
width: auto;
opacity: 0.7;
.icon-list-item {
width: auto;
- padding-top: $-xs;
- padding-bottom: $-xs;
+ padding-top: vars.$xs;
+ padding-bottom: vars.$xs;
}
.separator {
display: inline-block;
}
.separator {
display: inline-block;
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
.breadcrumbs .icon-list-item {
.breadcrumbs .icon-list-item {
> span + span {
display: none;
}
> span + span {
display: none;
}
.faded span.faded-text {
display: inline-block;
.faded span.faded-text {
display: inline-block;
}
\ No newline at end of file
}
\ No newline at end of file
+@use "mixins";
+@use "vars";
+
* {
box-sizing: border-box;
outline-color: var(--color-primary);
* {
box-sizing: border-box;
outline-color: var(--color-primary);
- @include lightDark(color, #444, #AAA);
+ @include mixins.lightDark(color, #444, #AAA);
-webkit-font-smoothing: antialiased;
height: 100%;
display: flex;
-webkit-font-smoothing: antialiased;
height: 100%;
display: flex;
+@use "mixins";
+@use "vars";
+
/**
* Generic content container
*/
.container {
/**
* Generic content container
*/
.container {
+ max-width: vars.$bp-xxl;
margin-inline-start: auto;
margin-inline-end: auto;
margin-inline-start: auto;
margin-inline-end: auto;
- padding-inline-start: $-m;
- padding-inline-end: $-m;
+ padding-inline-start: vars.$m;
+ padding-inline-end: vars.$m;
&.medium {
max-width: 1100px;
}
&.medium {
max-width: 1100px;
}
*/
.grid {
display: grid;
*/
.grid {
display: grid;
- grid-column-gap: $-l;
- grid-row-gap: $-l;
+ grid-column-gap: vars.$l;
+ grid-row-gap: vars.$l;
grid-template-columns: 1fr 3fr;
}
&.gap-y-xs {
grid-template-columns: 1fr 3fr;
}
&.gap-y-xs {
+ grid-row-gap: vars.$xs;
- grid-column-gap: $-xl;
- grid-row-gap: $-xl;
+ grid-column-gap: vars.$xl;
+ grid-row-gap: vars.$xl;
- grid-column-gap: $-xxl;
- grid-row-gap: $-xxl;
+ grid-column-gap: vars.$xxl;
+ grid-row-gap: vars.$xxl;
}
&.v-center {
align-items: center;
}
&.v-center {
align-items: center;
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.grid.third:not(.no-break) {
grid-template-columns: 1fr 1fr;
}
.grid.third:not(.no-break) {
grid-template-columns: 1fr 1fr;
}
grid-template-columns: 1fr 1fr;
}
.grid.gap-xl {
grid-template-columns: 1fr 1fr;
}
.grid.gap-xl {
- grid-column-gap: $-m;
- grid-row-gap: $-m;
+ grid-column-gap: vars.$m;
+ grid-row-gap: vars.$m;
}
.grid.right-focus.reverse-collapse > *:nth-child(2) {
order: 0;
}
.grid.right-focus.reverse-collapse > *:nth-child(2) {
order: 0;
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
.grid.third:not(.no-break) {
grid-template-columns: 1fr;
}
}
.grid.third:not(.no-break) {
grid-template-columns: 1fr;
}
}
-@include smaller-than($xs) {
+@include mixins.smaller-than(vars.$bp-xs) {
.grid.half.collapse-xs {
grid-template-columns: 1fr;
}
.grid.half.collapse-xs {
grid-template-columns: 1fr;
}
.sticky-top-m {
position: sticky;
.sticky-top-m {
position: sticky;
-@each $sizeLetter, $size in $screen-sizes {
- @include smaller-than($size) {
+@each $sizeLetter, $size in vars.$screen-sizes {
+ @include mixins.smaller-than($size) {
.hide-under-#{$sizeLetter} {
display: none !important;
}
}
.hide-under-#{$sizeLetter} {
display: none !important;
}
}
- @include larger-than($size) {
+ @include mixins.larger-than($size) {
.hide-over-#{$sizeLetter} {
display: none !important;
}
.hide-over-#{$sizeLetter} {
display: none !important;
}
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.dual-column-content {
columns: 1;
}
.dual-column-content {
columns: 1;
}
*/
.tri-layout-container {
display: grid;
*/
.tri-layout-container {
display: grid;
- margin-inline-start: $-xl;
- margin-inline-end: $-xl;
+ margin-inline-start: vars.$xl;
+ margin-inline-end: vars.$xl;
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c";
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c";
+ grid-column-gap: vars.$xl;
position: relative;
}
.tri-layout-sides {
position: relative;
}
.tri-layout-sides {
}
.tri-layout-middle {
grid-area: b;
}
.tri-layout-middle {
grid-area: b;
min-width: 0;
z-index: 5;
}
min-width: 0;
z-index: 5;
}
-@include larger-than($xxl) {
+@include mixins.larger-than(vars.$bp-xxl) {
.tri-layout-left-contents, .tri-layout-right-contents {
.tri-layout-left-contents, .tri-layout-right-contents {
+ padding: vars.$xl vars.$m;
position: sticky;
top: 0;
max-height: 100vh;
position: sticky;
top: 0;
max-height: 100vh;
-@include between($xxl, $xxxl) {
+@include mixins.between(vars.$bp-xxl, vars.$bp-xxxl) {
.tri-layout-sides-content, .tri-layout-container {
.tri-layout-sides-content, .tri-layout-container {
- grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
+ grid-template-columns: 1fr calc(940px + (2 * vars.$m)) 1fr;
}
.tri-layout-container {
}
.tri-layout-container {
- grid-column-gap: $-s;
- margin-inline-start: $-m;
- margin-inline-end: $-m;
+ grid-column-gap: vars.$s;
+ margin-inline-start: vars.$m;
+ margin-inline-end: vars.$m;
-@include smaller-than($xxl) {
+@include mixins.smaller-than(vars.$bp-xxl) {
.tri-layout-container {
grid-template-areas: "a b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: min-content min-content 1fr;
.tri-layout-container {
grid-template-areas: "a b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: min-content min-content 1fr;
- padding-inline-end: $-l;
+ padding-inline-end: vars.$l;
}
.tri-layout-sides {
grid-column-start: a;
}
.tri-layout-sides {
grid-column-start: a;
-@include between($l, $xxl) {
+@include mixins.between(vars.$bp-l, vars.$bp-xxl) {
.tri-layout-sides-content {
position: sticky;
top: 0;
.tri-layout-sides-content {
position: sticky;
top: 0;
-@include larger-than($l) {
+@include mixins.larger-than(vars.$bp-l) {
.tri-layout-mobile-tabs {
display: none;
}
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
.tri-layout-mobile-tabs {
display: none;
}
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
- @include lightDark(opacity, 0.6, 0.75);
+ @include mixins.lightDark(opacity, 0.6, 0.75);
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
opacity: 1 !important;
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
opacity: 1 !important;
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
.tri-layout-container {
grid-template-areas: none;
grid-template-columns: 1fr;
grid-column-gap: 0;
.tri-layout-container {
grid-template-areas: none;
grid-template-columns: 1fr;
grid-column-gap: 0;
- padding-inline-end: $-xs;
- padding-inline-start: $-xs;
+ padding-inline-end: vars.$xs;
+ padding-inline-start: vars.$xs;
- padding-inline-start: $-m;
- padding-inline-end: $-m;
+ padding-inline-start: vars.$m;
+ padding-inline-end: vars.$m;
grid-column: 1/1;
}
.tri-layout-left > *, .tri-layout-right > * {
grid-column: 1/1;
}
.tri-layout-left > *, .tri-layout-right > * {
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.tri-layout-container {
margin-inline-start: 0;
margin-inline-end: 0;
.tri-layout-container {
margin-inline-start: 0;
margin-inline-end: 0;
+@use "mixins";
+@use "vars";
+
.book-contents .entity-list-item {
.icon {
.book-contents .entity-list-item {
.icon {
justify-self: stretch;
align-self: stretch;
height: auto;
justify-self: stretch;
align-self: stretch;
height: auto;
- margin-inline-end: $-xs;
+ margin-inline-end: vars.$xs;
}
.icon:after {
opacity: 0.5;
}
.icon:after {
opacity: 0.5;
.entity-list-item + .chapter-expansion {
display: flex;
.entity-list-item + .chapter-expansion {
display: flex;
- padding: 0 $-m $-m $-m;
+ padding: 0 vars.$m vars.$m vars.$m;
align-items: center;
border: 0;
width: 100%;
align-items: center;
border: 0;
width: 100%;
}
.chapter-contents-toggle {
border-radius: 0 4px 4px 0;
}
.chapter-contents-toggle {
border-radius: 0 4px 4px 0;
- padding: $-xs ($-m + $-xxs);
+ padding: vars.$xs (vars.$m + vars.$xxs);
width: 100%;
text-align: start;
}
width: 100%;
text-align: start;
}
- @include margin($-s, 0, $-m, $-xs);
+ @include mixins.margin(vars.$s, 0, vars.$m, vars.$xs);
position: relative;
&:after {
content: '';
display: block;
position: absolute;
left: 0;
position: relative;
&:after {
content: '';
display: block;
position: absolute;
left: 0;
- @include lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
width: 2px;
top: 5px;
bottom: 5px;
width: 2px;
top: 5px;
bottom: 5px;
font-weight: bold;
}
li:not(.current-heading) .sidebar-page-nav-bullet {
font-weight: bold;
}
li:not(.current-heading) .sidebar-page-nav-bullet {
- @include lightDark(background-color, #BBB, #666, true);
+ @include mixins.lightDark(background-color, #BBB, #666, true);
}
.sidebar-page-nav-bullet {
width: 6px;
}
.sidebar-page-nav-bullet {
width: 6px;
top: 30%;
border-radius: 50%;
box-shadow: 0 0 0 6px #F2F2F2;
top: 30%;
border-radius: 50%;
box-shadow: 0 0 0 6px #F2F2F2;
- @include lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);
+ @include mixins.lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);
left: auto;
right: -2px;
}
left: auto;
right: -2px;
}
// Sidebar list
.book-tree .sidebar-page-list {
list-style: none;
// Sidebar list
.book-tree .sidebar-page-list {
list-style: none;
- @include margin($-xs, -$-s, 0, -$-s);
+ @include mixins.margin(vars.$xs, -(vars.$s), 0, -(vars.$s));
padding-inline-start: 0;
padding-inline-end: 0;
padding-inline-start: 0;
padding-inline-end: 0;
padding-inline-end: 0;
.content {
width: 100%;
padding-inline-end: 0;
.content {
width: 100%;
- padding-top: $-xs;
- padding-bottom: $-xs;
+ padding-top: vars.$xs;
+ padding-bottom: vars.$xs;
max-width: calc(100% - 20px);
}
}
.entity-list-item.selected {
max-width: calc(100% - 20px);
}
}
.entity-list-item.selected {
- @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
}
.entity-list-item.no-hover {
}
.entity-list-item.no-hover {
+ margin-top: -(vars.$xs);
padding-inline-end: 0;
}
.entity-list-item-name {
font-size: 1em;
margin: 0;
padding-inline-end: 0;
}
.entity-list-item-name {
font-size: 1em;
margin: 0;
- margin-inline-end: $-m;
+ margin-inline-end: vars.$m;
}
.chapter-child-menu {
font-size: .8rem;
}
.chapter-child-menu {
font-size: .8rem;
display: block;
width: 100%;
text-align: start;
display: block;
width: 100%;
text-align: start;
- padding: $-xxs $-s ($-xxs * 2) $-s;
+ padding: vars.$xxs vars.$s (vars.$xxs * 2) vars.$s;
border-radius: 0 3px 3px 0;
line-height: 1;
border-radius: 0 3px 3px 0;
line-height: 1;
- margin-top: -$-xxs;
- margin-bottom: -$-xxs;
+ margin-top: -(vars.$xxs);
+ margin-bottom: -(vars.$xxs);
- @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
}
}
.entity-list-item .icon {
}
}
.entity-list-item .icon {
list-style: none;
}
.sort-box {
list-style: none;
}
.sort-box {
- margin-bottom: $-m;
- padding: $-m $-xl;
+ margin-bottom: vars.$m;
+ padding: vars.$m vars.$xl;
position: relative;
&::before {
pointer-events: none;
position: relative;
&::before {
pointer-events: none;
margin-inline-start: 0;
}
.sortable-page-sublist {
margin-inline-start: 0;
}
.sortable-page-sublist {
+ margin-bottom: vars.$m;
- padding-inline-start: $-m;
+ padding-inline-start: vars.$m;
- @include lightDark(background-color, #FFF, #222);
+ @include mixins.lightDark(background-color, #FFF, #222);
- @include lightDark(border-color, #DDD, #666);
+ @include mixins.lightDark(border-color, #DDD, #666);
margin-top: -1px;
min-height: 38px;
}
margin-top: -1px;
min-height: 38px;
}
border-inline-start: 2px solid currentColor;
}
li:first-child {
border-inline-start: 2px solid currentColor;
}
li:first-child {
}
}
.sortable-page-list li.placeholder {
}
}
.sortable-page-list li.placeholder {
display: grid;
grid-template-columns: min-content 1fr;
display: grid;
grid-template-columns: min-content 1fr;
+ grid-column-gap: vars.$m;
font-size: 0.9em;
}
.card .activity-list-item {
font-size: 0.9em;
}
.card .activity-list-item {
+ padding-block: vars.$s;
}
.user-list-item {
display: inline-grid;
}
.user-list-item {
display: inline-grid;
grid-template-columns: min-content 1fr;
grid-template-columns: min-content 1fr;
+ grid-column-gap: vars.$m;
font-size: 0.9em;
align-items: center;
> div:first-child {
font-size: 0.9em;
align-items: center;
> div:first-child {
ul.pagination {
display: inline-flex;
list-style: none;
ul.pagination {
display: inline-flex;
list-style: none;
padding-inline-start: 1px;
li:first-child {
a, span {
padding-inline-start: 1px;
li:first-child {
a, span {
}
a, span {
display: block;
}
a, span {
display: block;
+ padding: vars.$xxs vars.$s;
border: 1px solid #CCC;
margin-inline-start: -1px;
user-select: none;
border: 1px solid #CCC;
margin-inline-start: -1px;
user-select: none;
- @include lightDark(color, #555, #eee);
- @include lightDark(border-color, #ccc, #666);
+ @include mixins.lightDark(color, #555, #eee);
+ @include mixins.lightDark(border-color, #ccc, #666);
}
li.disabled {
cursor: not-allowed;
}
li.active span {
}
li.disabled {
cursor: not-allowed;
}
li.active span {
- @include lightDark(color, #111, #eee);
- @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
+ @include mixins.lightDark(color, #111, #eee);
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
}
.entity-list, .icon-list {
}
.entity-list, .icon-list {
+ margin: 0 (-(vars.$m));
.text-small.text-muted {
color: #AAA;
font-size: 0.75em;
.text-small.text-muted {
color: #AAA;
font-size: 0.75em;
}
.text-muted p.text-muted {
margin-top: 0;
}
.text-muted p.text-muted {
margin-top: 0;
+ margin: vars.$s vars.$m;
max-width: 140px;
opacity: 0.25;
height: 1.1px;
max-width: 140px;
opacity: 0.25;
height: 1.1px;
}
.entity-list-item, .icon-list-item {
}
.entity-list-item, .icon-list-item {
+ padding: vars.$s vars.$m;
display: flex;
align-items: center;
display: flex;
align-items: center;
background-color: transparent;
border: 0;
width: 100%;
background-color: transparent;
border: 0;
width: 100%;
cursor: pointer;
}
&:not(.no-hover):hover {
cursor: pointer;
}
&:not(.no-hover):hover {
- @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
text-decoration: none;
border-radius: 4px;
}
text-decoration: none;
border-radius: 4px;
}
background-color: transparent;
}
&:focus {
background-color: transparent;
}
&:focus {
- @include lightDark(background-color, #eee, #222);
+ @include mixins.lightDark(background-color, #eee, #222);
outline: 1px dotted #666;
outline-offset: -2px;
}
outline: 1px dotted #666;
outline-offset: -2px;
}
.split-icon-list-item {
display: flex;
align-items: center;
.split-icon-list-item {
display: flex;
align-items: center;
background-color: transparent;
border: 0;
width: 100%;
background-color: transparent;
border: 0;
width: 100%;
word-break: break-word;
border-radius: 4px;
> a {
word-break: break-word;
border-radius: 4px;
> a {
+ padding: vars.$s vars.$m;
display: flex;
align-items: center;
display: flex;
align-items: center;
- @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
visibility: visible;
}
.icon-list-item-dropdown-toggle {
visibility: visible;
}
.icon-list-item-dropdown-toggle {
display: flex;
align-items: center;
cursor: pointer;
display: flex;
align-items: center;
cursor: pointer;
- @include lightDark(color, #888, #999);
+ @include mixins.lightDark(color, #888, #999);
svg {
margin: 0;
}
&:hover {
svg {
margin: 0;
}
&:hover {
- @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
}
}
.card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
}
}
.card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
- @include lightDark(background-color, #F2F2F2, #2d2d2d);
+ @include mixins.lightDark(background-color, #F2F2F2, #2d2d2d);
border-radius: 0;
}
.card .entity-list-item .entity-list-item:hover {
border-radius: 0;
}
.card .entity-list-item .entity-list-item:hover {
}
.entity-list-item-children {
}
.entity-list-item-children {
+ padding: vars.$m vars.$l;
> div {
overflow: hidden;
> div {
overflow: hidden;
+ padding: 0 0 vars.$xs 0;
}
.entity-chip {
text-overflow: ellipsis;
}
.entity-chip {
text-overflow: ellipsis;
white-space: nowrap;
}
> .entity-list > .entity-list-item:last-child {
white-space: nowrap;
}
> .entity-list > .entity-list-item:last-child {
+ margin-bottom: -(vars.$xs);
background-position: 50% 50%;
border-radius: 3px;
position: relative;
background-position: 50% 50%;
border-radius: 3px;
position: relative;
- margin-inline-end: $-l;
+ margin-inline-end: vars.$l;
&.entity-list-item-image-wide {
width: 220px;
}
.svg-icon {
&.entity-list-item-image-wide {
width: 220px;
}
.svg-icon {
- @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
+ @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));
font-size: 1.66rem;
margin-inline-end: 0;
position: absolute;
font-size: 1.66rem;
margin-inline-end: 0;
position: absolute;
- bottom: $-xs;
- left: $-xs;
+ bottom: vars.$xs;
+ left: vars.$xs;
- @include smaller-than($m) {
+ @include mixins.smaller-than(vars.$bp-m) {
- font-size: 0.6 * $fs-m;
+ font-size: 0.6 * vars.$fs-m;
h4, a {
line-height: 1.2;
}
h4, a {
line-height: 1.2;
}
display: none;
}
.entity-list-item p {
display: none;
}
.entity-list-item p {
- font-size: $fs-m * 0.8;
- padding-top: $-xs;
+ font-size: vars.$fs-m * 0.8;
+ padding-top: vars.$xs;
}
.entity-list-item p:empty {
padding-top: 0;
}
.entity-list-item p:empty {
padding-top: 0;
}
> p.empty-text {
display: block;
}
> p.empty-text {
display: block;
- @include smaller-than($m) {
+ @include mixins.smaller-than(vars.$bp-m) {
h4 {
font-size: 1.666em;
}
h4 {
font-size: 1.666em;
}
top: 0;
list-style: none;
inset-inline-end: 0;
top: 0;
list-style: none;
inset-inline-end: 0;
- margin: $-m 0;
- @include lightDark(background-color, #fff, #333);
+ margin: vars.$m 0;
+ @include mixins.lightDark(background-color, #fff, #333);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px;
min-width: 180px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px;
min-width: 180px;
- padding: $-xs 0;
- @include lightDark(color, #555, #eee);
+ padding: vars.$xs 0;
+ @include mixins.lightDark(color, #555, #eee);
fill: currentColor;
text-align: start !important;
max-height: 500px;
fill: currentColor;
text-align: start !important;
max-height: 500px;
border-bottom: 1px solid #DDD;
}
li hr {
border-bottom: 1px solid #DDD;
}
li hr {
}
.icon-item, .text-item, .label-item {
}
.icon-item, .text-item, .label-item {
- padding: 8px $-m;
- @include lightDark(color, #555, #eee);
+ padding: 8px vars.$m;
+ @include mixins.lightDark(color, #555, #eee);
fill: currentColor;
white-space: nowrap;
line-height: 1.4;
fill: currentColor;
white-space: nowrap;
line-height: 1.4;
outline-offset: -2px;
}
svg {
outline-offset: -2px;
}
svg {
- margin-inline-end: $-s;
+ margin-inline-end: vars.$s;
display: inline-block;
width: 16px;
}
display: inline-block;
width: 16px;
}
display: grid;
align-items: center;
grid-template-columns: auto min-content;
display: grid;
align-items: center;
grid-template-columns: auto min-content;
}
.label-item > *:nth-child(2) {
opacity: 0.7;
}
.label-item > *:nth-child(2) {
opacity: 0.7;
display: grid;
align-items: start;
grid-template-columns: 16px auto;
display: grid;
align-items: start;
grid-template-columns: 16px auto;
svg {
margin-inline-end: 0;
margin-block-start: 1px;
svg {
margin-inline-end: 0;
margin-block-start: 1px;
// being cut by scrollable container.
.tri-layout-right .dropdown-menu,
.tri-layout-left .dropdown-menu {
// being cut by scrollable container.
.tri-layout-right .dropdown-menu,
.tri-layout-left .dropdown-menu {
- inset-inline-end: $-xs;
+ inset-inline-end: vars.$xs;
.featured-image-container-wrap {
position: relative;
.svg-icon {
.featured-image-container-wrap {
position: relative;
.svg-icon {
- @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
+ @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));
font-size: 2rem;
margin-inline-end: 0;
position: absolute;
font-size: 2rem;
margin-inline-end: 0;
position: absolute;
background: transparent;
border: none;
color: currentColor;
background: transparent;
border: none;
color: currentColor;
}
.active-link-list {
a {
display: inline-block;
}
.active-link-list {
a {
display: inline-block;
- @include lightDark(color, #444, #888);
+ @include mixins.lightDark(color, #444, #888);
- @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
border-radius: 4px;
text-decoration: none;
}
&.in-sidebar {
a {
display: block;
border-radius: 4px;
text-decoration: none;
}
&.in-sidebar {
a {
display: block;
+ margin-bottom: vars.$xs;
}
a.active {
border-radius: 4px;
}
a.active {
border-radius: 4px;
- @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
line-height: 1.2;
margin: 0.6em 0;
align-content: start;
line-height: 1.2;
margin: 0.6em 0;
align-content: start;
+@use "mixins";
+@use "vars";
+
.page-editor {
display: flex;
flex-direction: column;
.page-editor {
display: flex;
flex-direction: column;
.page-editor-page-area {
width: 100%;
border-radius: 8px;
.page-editor-page-area {
width: 100%;
border-radius: 8px;
- box-shadow: $bs-card;
- @include lightDark(background-color, #FFF, #333)
+ box-shadow: vars.$bs-card;
+ @include mixins.lightDark(background-color, #FFF, #333)
-@include larger-than($xxl) {
+@include mixins.larger-than(vars.$bp-xxl) {
.page-editor-wysiwyg2024 .page-edit-toolbar,
.page-editor-wysiwyg2024 .page-editor-page-area,
.page-editor-wysiwyg .page-edit-toolbar,
.page-editor-wysiwyg2024 .page-edit-toolbar,
.page-editor-wysiwyg2024 .page-editor-page-area,
.page-editor-wysiwyg .page-edit-toolbar,
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.page-edit-toolbar {
display: flex;
flex-direction: row;
.page-edit-toolbar {
display: flex;
flex-direction: row;
position: relative;
outline-offset: -1px;
outline: 1px dashed var(--color-primary);
position: relative;
outline-offset: -1px;
outline: 1px dashed var(--color-primary);
+ box-shadow: vars.$bs-card;
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
.page-edit-toolbar {
overflow-x: scroll;
overflow-y: visible;
.page-edit-toolbar {
overflow-x: scroll;
overflow-y: visible;
width: 52px;
height: 52px;
font-size: 26px;
width: 52px;
height: 52px;
font-size: 26px;
- inset-inline-end: $-xs;
- bottom: $-s;
- box-shadow: $bs-hover;
+ inset-inline-end: vars.$xs;
+ bottom: vars.$s;
+ box-shadow: vars.$bs-hover;
background-color: currentColor;
text-align: center;
svg {
background-color: currentColor;
text-align: center;
svg {
}
.pointer {
border: 1px solid #CCC;
}
.pointer {
border: 1px solid #CCC;
- @include lightDark(border-color, #ccc, #000);
+ @include mixins.lightDark(border-color, #ccc, #000);
border-radius: 4px;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
- @include lightDark(background-color, #fff, #333);
+ @include mixins.lightDark(background-color, #fff, #333);
width: 275px;
&.is-page-editable {
width: 275px;
&.is-page-editable {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
z-index: 56;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
z-index: 56;
- @include lightDark(background-color, #fff, #333);
- @include lightDark(border-color, #ccc, #000);
+ @include mixins.lightDark(background-color, #fff, #333);
+ @include mixins.lightDark(border-color, #ccc, #000);
}
input, button, a {
position: relative;
}
input, button, a {
position: relative;
input {
background-color: #FFF;
border: 1px solid #DDD;
input {
background-color: #FFF;
border: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(border-color, #ddd, #000);
color: #666;
width: 160px;
z-index: 40;
padding: 5px 10px;
}
.text-button {
color: #666;
width: 160px;
z-index: 40;
padding: 5px 10px;
}
.text-button {
- @include lightDark(color, #444, #AAA);
+ @include mixins.lightDark(color, #444, #AAA);
}
.input-group .button {
line-height: 1;
}
.input-group .button {
line-height: 1;
height: 1.2em;
}
.button {
height: 1.2em;
}
.button {
- @include lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(border-color, #ddd, #000);
}
}
// Page editor sidebar toolbox
.floating-toolbox {
}
}
// Page editor sidebar toolbox
.floating-toolbox {
- @include lightDark(background-color, #FFF, #222);
+ @include mixins.lightDark(background-color, #FFF, #222);
overflow: hidden;
align-items: stretch;
flex-direction: row;
display: flex;
max-height: 100%;
border-radius: 8px;
overflow: hidden;
align-items: stretch;
flex-direction: row;
display: flex;
max-height: 100%;
border-radius: 8px;
+ box-shadow: vars.$bs-card;
- margin-inline-start: $-l;
+ margin-inline-start: vars.$l;
position: relative;
&.open {
position: relative;
position: relative;
&.open {
position: relative;
}
.tabs {
border-inline-end: 1px solid #DDD;
}
.tabs {
border-inline-end: 1px solid #DDD;
- @include lightDark(border-inline-end-color, #DDD, #000);
+ @include mixins.lightDark(border-inline-end-color, #DDD, #000);
width: 40px;
flex: 0 1 auto;
margin-inline-end: -1px;
}
.tabs-inner {
width: 40px;
flex: 0 1 auto;
margin-inline-end: -1px;
}
.tabs-inner {
- @include lightDark(background-color, #FFFFFF, #222);
+ @include mixins.lightDark(background-color, #FFFFFF, #222);
}
.tabs svg {
padding: 0;
margin: 0;
}
.tabs-inner > button {
}
.tabs svg {
padding: 0;
margin: 0;
}
.tabs-inner > button {
- @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
+ @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
display: block;
cursor: pointer;
display: block;
cursor: pointer;
+ padding: 10px vars.$xs;
font-size: 18px;
line-height: 1.6;
}
font-size: 18px;
line-height: 1.6;
}
- margin: $-m 0 0 0;
- padding: 0 $-l $-s $-l;
+ margin: vars.$m 0 0 0;
+ padding: 0 vars.$l vars.$s vars.$l;
}
.tags input {
max-width: 100%;
}
.tags input {
max-width: 100%;
min-width: 50px;
}
.tags td, .inline-start-table > div > div > div {
min-width: 50px;
}
.tags td, .inline-start-table > div > div > div {
- padding-inline-end: $-s;
- padding-top: $-s;
+ padding-inline-end: vars.$s;
+ padding-top: vars.$s;
position: relative;
}
.handle {
position: relative;
}
.handle {
-@include smaller-than($xxl) {
+@include mixins.smaller-than(vars.$bp-xxl) {
- margin-inline-start: $-s;
+ margin-inline-start: vars.$s;
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
.page-editor-page-area-wrap {
margin: 4px !important;
}
.page-editor-page-area-wrap {
margin: 4px !important;
}
border-radius: 3px;
position: relative;
overflow: hidden;
border-radius: 3px;
position: relative;
overflow: hidden;
+ padding: vars.$xs vars.$s;
fill: currentColor;
opacity: 0.85;
transition: opacity ease-in-out 120ms;
fill: currentColor;
opacity: 0.85;
transition: opacity ease-in-out 120ms;
// 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) {
// 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 {
+ @each $sizeLetter, $size in vars.$spacing {
.#{$propLetter}-#{$sizeLetter} {
#{$prop}: $size !important;
}
.#{$propLetter}-#{$sizeLetter} {
#{$prop}: $size !important;
}
@include spacing('margin', 'm');
@include spacing('padding', 'p');
@include spacing('margin', 'm');
@include spacing('padding', 'p');
-@each $sizeLetter, $size in $spacing {
+@each $sizeLetter, $size in vars.$spacing {
.gap-#{$sizeLetter} {
gap: $size !important;
}
.gap-#{$sizeLetter} {
gap: $size !important;
}
+@use "mixins";
+@use "vars";
+
table {
min-width: 100px;
max-width: 100%;
thead {
table {
min-width: 100px;
max-width: 100%;
thead {
- @include lightDark(background-color, #f8f8f8, #333);
+ @include mixins.lightDark(background-color, #f8f8f8, #333);
font-weight: 500;
}
td, th {
font-weight: 500;
}
td, th {
th, td {
text-align: start;
border: none;
th, td {
text-align: start;
border: none;
+ padding: vars.$s vars.$s;
vertical-align: middle;
margin: 0;
overflow: visible;
vertical-align: middle;
margin: 0;
overflow: visible;
font-weight: bold;
}
tr:hover {
font-weight: bold;
}
tr:hover {
- @include lightDark(background-color, #F2F2F2, #333);
+ @include mixins.lightDark(background-color, #F2F2F2, #333);
}
.text-right {
text-align: end;
}
.text-right {
text-align: end;
display: inline-block;
}
&.expand-to-padding {
display: inline-block;
}
&.expand-to-padding {
- margin-left: -$-s;
- margin-right: -$-s;
- width: calc(100% + (2*#{$-s}));
- max-width: calc(100% + (2*#{$-s}));
+ margin-left: -(vars.$s);
+ margin-right: -(vars.$s);
+ width: calc(100% + (2*#{vars.$s}));
+ max-width: calc(100% + (2*#{vars.$s}));
+ margin: 0 (-(vars.$xs));
td {
border: 0;
vertical-align: middle;
td {
border: 0;
vertical-align: middle;
}
}
\ No newline at end of file
}
}
\ No newline at end of file
+@use "mixins";
+@use "vars";
+
position: relative;
display: block;
font-family: var(--font-heading, var(--font-body));
position: relative;
display: block;
font-family: var(--font-heading, var(--font-body));
- @include lightDark(color, #222, #BBB);
+ @include mixins.lightDark(color, #222, #BBB);
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
h1 {
font-size: 2.8275em;
}
h1 {
font-size: 2.8275em;
}
hr {
border: 0;
height: 1px;
hr {
border: 0;
height: 1px;
- @include lightDark(background, #eaeaea, #555);
- margin-bottom: $-l;
+ @include mixins.lightDark(background, #eaeaea, #555);
+ margin-bottom: vars.$l;
&.faded {
background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
}
&.darker {
&.faded {
background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
}
&.darker {
- @include lightDark(background, #DDD, #666);
+ @include mixins.lightDark(background, #DDD, #666);
pre {
font-size: 12px;
border: 1px solid #DDD;
pre {
font-size: 12px;
border: 1px solid #DDD;
- @include lightDark(background-color, #FFF, #2B2B2B);
- @include lightDark(border-color, #DDD, #111);
+ @include mixins.lightDark(background-color, #FFF, #2B2B2B);
+ @include mixins.lightDark(border-color, #DDD, #111);
border-radius: 4px;
padding-inline-start: 26px;
position: relative;
border-radius: 4px;
padding-inline-start: 26px;
position: relative;
width: 22.4px;
inset-inline-start: 0;
height: 100%;
width: 22.4px;
inset-inline-start: 0;
height: 100%;
- @include lightDark(background-color, #f5f5f5, #313335);
- @include lightDark(border-inline-end, 1px solid #DDD, none);
+ @include mixins.lightDark(background-color, #f5f5f5, #313335);
+ @include mixins.lightDark(border-inline-end, 1px solid #DDD, none);
position: relative;
border-left: 4px solid transparent;
border-left-color: var(--color-primary);
position: relative;
border-left: 4px solid transparent;
border-left-color: var(--color-primary);
- @include lightDark(background-color, #f8f8f8, #333);
- padding: $-s $-m $-s $-xl;
+ @include mixins.lightDark(background-color, #f8f8f8, #333);
+ padding: vars.$s vars.$m vars.$s vars.$xl;
overflow: auto;
&:before {
content: "\201C";
font-size: 2em;
font-weight: bold;
position: absolute;
overflow: auto;
&:before {
content: "\201C";
font-size: 2em;
font-weight: bold;
position: absolute;
+ top: vars.$s;
+ left: vars.$s;
font-size: 0.84em;
border: 1px solid #DDD;
border-radius: 3px;
font-size: 0.84em;
border: 1px solid #DDD;
border-radius: 3px;
- @include lightDark(background-color, #f8f8f8, #2b2b2b);
- @include lightDark(border-color, #DDD, #444);
+ @include mixins.lightDark(background-color, #f8f8f8, #2b2b2b);
+ @include mixins.lightDark(border-color, #DDD, #444);
span.code {
@extend .code-base;
span.code {
@extend .code-base;
- padding-left: $-m * 2.0;
- padding-right: $-m * 2.0;
+ padding-left: vars.$m * 2.0;
+ padding-right: vars.$m * 2.0;
display: flow-root;
p {
margin: 0;
display: flow-root;
p {
margin: 0;
margin-block-start: 0;
padding-block-end: 0;
padding-block-start: 0;
margin-block-start: 0;
padding-block-end: 0;
padding-block-start: 0;
- padding-left: $-m * 1.2;
- padding-right: $-m * 1.2;
+ padding-left: vars.$m * 1.2;
+ padding-right: vars.$m * 1.2;
li.checkbox-item, li.task-list-item {
display: list-item;
list-style: none;
li.checkbox-item, li.task-list-item {
display: list-item;
list-style: none;
- margin-left: -($-m * 1.2);
- margin-inline-start: -($-m * 1.2);
+ margin-left: -(vars.$m * 1.2);
+ margin-inline-start: -(vars.$m * 1.2);
margin-inline-end: 0;
input[type="checkbox"] {
margin-inline-end: 0;
input[type="checkbox"] {
- margin-right: $-xs;
- margin-inline-end: $-xs;
+ margin-right: vars.$xs;
+ margin-inline-end: vars.$xs;
margin-inline-start: 0;
}
li.checkbox-item, li.task-list-item {
margin-inline-start: 0;
}
li.checkbox-item, li.task-list-item {
- margin-left: $-xs;
- margin-inline-start: $-xs;
+ margin-left: vars.$xs;
+ margin-inline-start: vars.$xs;
margin-inline-end: 0;
}
}
margin-inline-end: 0;
}
}
-@each $sizeLetter, $size in $screen-sizes {
- @include larger-than($size) {
+@each $sizeLetter, $size in vars.$screen-sizes {
+ @include mixins.larger-than($size) {
.text-#{$sizeLetter}-center {
text-align: center;
}
.text-#{$sizeLetter}-center {
text-align: center;
}
* Grouping
*/
.header-group {
* Grouping
*/
.header-group {
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
display: inline-block;
position: relative;
bottom: -0.105em;
display: inline-block;
position: relative;
bottom: -0.105em;
- margin-inline-end: $-xs;
+ margin-inline-end: vars.$xs;
pointer-events: none;
fill: currentColor;
}
pointer-events: none;
fill: currentColor;
}
+@use "mixins";
+@use "vars";
+
// Custom full screen mode
.tox.tox-fullscreen {
// Custom full screen mode
.tox.tox-fullscreen {
padding: 1rem;
top: 4px;
font-style: italic;
padding: 1rem;
top: 4px;
font-style: italic;
- @include lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5))
+ @include mixins.lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5))
}
// Default styles for our custom root nodes
}
// Default styles for our custom root nodes
pointer-events: none;
}
.page-content.mce-content-body details doc-root {
pointer-events: none;
}
.page-content.mce-content-body details doc-root {
- padding: $-s;
- margin-left: (2px - $-s);
- margin-right: (2px - $-s);
- margin-bottom: (2px - $-s);
- margin-top: (2px - $-s);
+ padding: vars.$s;
+ margin-left: (2px - vars.$s);
+ margin-right: (2px - vars.$s);
+ margin-bottom: (2px - vars.$s);
+ margin-top: (2px - vars.$s);
overflow: hidden;
}
// Allow alignment to be reflected in media embed wrappers
.page-content.mce-content-body .mce-preview-object.align-right {
float: right !important;
overflow: hidden;
}
// Allow alignment to be reflected in media embed wrappers
.page-content.mce-content-body .mce-preview-object.align-right {
float: right !important;
- margin: $-xs 0 $-xs $-s;
+ margin: vars.$xs 0 vars.$xs vars.$s;
}
.page-content.mce-content-body .mce-preview-object.align-left {
float: left !important;
}
.page-content.mce-content-body .mce-preview-object.align-left {
float: left !important;
- margin: $-xs $-m $-m 0;
+ margin: vars.$xs vars.$m vars.$m 0;
}
.page-content.mce-content-body .mce-preview-object.align-center {
}
.page-content.mce-content-body .mce-preview-object.align-center {
///////////////
// Screen breakpoints
///////////////
// Screen breakpoints
-$xxxl: 1700px;
-$xxl: 1400px;
-$xl: 1100px;
-$l: 1000px;
-$m: 880px;
-$s: 600px;
-$xs: 400px;
-$xxs: 360px;
+$bp-xxxl: 1700px;
+$bp-xxl: 1400px;
+$bp-xl: 1100px;
+$bp-l: 1000px;
+$bp-m: 880px;
+$bp-s: 600px;
+$bp-xs: 400px;
+$bp-xxs: 360px;
-$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));
+$screen-sizes: (('xxs', $bp-xxs), ('xs', $bp-xs), ('s', $bp-s), ('m', $bp-m), ('l', $bp-l), ('xl', $bp-xl));
// Spacing (Margins+Padding)
// Spacing (Margins+Padding)
-$-xxxl: 64px;
-$-xxl: 48px;
-$-xl: 32px;
-$-l: 24px;
-$-m: 16px;
-$-s: 12px;
-$-xs: 6px;
-$-xxs: 3px;
+$xxxl: 64px;
+$xxl: 48px;
+$xl: 32px;
+$l: 24px;
+$m: 16px;
+$s: 12px;
+$xs: 6px;
+$xxs: 3px;
// List of our spacing sizes
// List of our spacing sizes
-$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto));
+$spacing: (('none', 0), ('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl), ('xxl', $xxl), ('auto', auto));
// Fonts
$font-body: -apple-system, BlinkMacSystemFont,
// Fonts
$font-body: -apple-system, BlinkMacSystemFont,
-@import "variables";
-@import "mixins";
-@import "html";
-@import "text";
-@import "tables";
-@import "content";
+
+@use "vars";
+@use "mixins";
+@use "html";
+@use "text";
+@use "tables";
+@use "content";
html, body {
background-color: #FFF;
html, body {
background-color: #FFF;
-@import "reset";
-@import "variables";
-@import "mixins";
-@import "spacing";
-@import "opacity";
-@import "html";
-@import "text";
-@import "colors";
-@import "layout";
-@import "blocks";
-@import "buttons";
-@import "tables";
-@import "forms";
-@import "animations";
-@import "tinymce";
-@import "editor";
-@import "codemirror";
-@import "components";
-@import "header";
-@import "footer";
-@import "lists";
-@import "pages";
-@import "content";
+@use "reset";
+@use "vars";
+@use "mixins";
+@use "spacing";
+@use "opacity";
+@use "html";
+@use "text";
+@use "colors";
+@use "layout";
+@use "blocks";
+@use "buttons";
+@use "tables";
+@use "forms";
+@use "animations";
+@use "tinymce";
+@use "editor";
+@use "codemirror";
+@use "components";
+@use "header";
+@use "footer";
+@use "lists";
+@use "pages";
+@use "content";
+ @include meta.load-css("print");
}
// Jquery Sortable Styles
}
// Jquery Sortable Styles
// User Avatar Images
.avatar {
border-radius: 100%;
// User Avatar Images
.avatar {
border-radius: 100%;
- @include lightDark(background-color, #eee, #000);
+ @include mixins.lightDark(background-color, #eee, #000);
width: 30px;
height: 30px;
&.med {
width: 30px;
height: 30px;
&.med {
border-radius: 3px;
}
&[src$="user_avatar.png"] {
border-radius: 3px;
}
&[src$="user_avatar.png"] {
+ @include mixins.whenDark {
.loading-container {
position: relative;
display: block;
.loading-container {
position: relative;
display: block;
> div {
width: $loadingSize;
height: $loadingSize;
> div {
width: $loadingSize;
height: $loadingSize;
display: inline-block;
vertical-align: top;
transform: translate3d(-10px, 0, 0);
display: inline-block;
vertical-align: top;
transform: translate3d(-10px, 0, 0);
animation-name: loadingBob;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-name: loadingBob;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-delay: -300ms;
}
> div:first-child {
animation-delay: -300ms;
}
> div:first-child {
- left: -($loadingSize+$-xs);
+ left: -($loadingSize+vars.$xs);
background-color: var(--color-book);
animation-delay: -600ms;
}
> div:last-of-type {
background-color: var(--color-book);
animation-delay: -600ms;
}
> div:last-of-type {
- left: $loadingSize+$-xs;
+ left: $loadingSize+vars.$xs;
background-color: var(--color-chapter);
animation-delay: 0ms;
}
> span {
background-color: var(--color-chapter);
animation-delay: 0ms;
}
> span {
- margin-inline-start: $-s;
+ margin-inline-start: vars.$s;
font-style: italic;
color: #888;
vertical-align: top;
font-style: italic;
color: #888;
vertical-align: top;
}
.inline.block .loading-container {
}
.inline.block .loading-container {
+ margin: vars.$xs vars.$s;
}
.skip-to-content-link {
}
.skip-to-content-link {
z-index: 15;
border-radius: 0 4px 4px 0;
display: block;
z-index: 15;
border-radius: 0 4px 4px 0;
display: block;
+ box-shadow: vars.$bs-dark;
font-weight: bold;
&:focus {
font-weight: bold;
&:focus {
outline-offset: -10px;
outline: 2px dotted var(--color-link);
}
outline-offset: -10px;
outline: 2px dotted var(--color-link);
}
.entity-selector {
border: 1px solid #DDD;
.entity-selector {
border: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #111);
+ @include mixins.lightDark(border-color, #ddd, #111);
border-radius: 3px;
overflow: hidden;
font-size: 0.8em;
border-radius: 3px;
overflow: hidden;
font-size: 0.8em;
border: 0;
border-bottom: 1px solid #DDD;
font-size: 16px;
border: 0;
border-bottom: 1px solid #DDD;
font-size: 16px;
+ padding: vars.$s vars.$m;
}
input[type="text"]:focus {
outline: 1px solid var(--color-primary);
}
input[type="text"]:focus {
outline: 1px solid var(--color-primary);
.entity-list {
overflow-y: scroll;
height: 400px;
.entity-list {
overflow-y: scroll;
height: 400px;
- @include lightDark(background-color, #eee, #222);
+ @include mixins.lightDark(background-color, #eee, #222);
margin-inline-end: 0;
margin-inline-start: 0;
}
.entity-list-item {
margin-inline-end: 0;
margin-inline-start: 0;
}
.entity-list-item {
- @include lightDark(background-color, #fff, #222);
+ @include mixins.lightDark(background-color, #fff, #222);
}
.entity-list-item p {
margin-bottom: 0;
}
.entity-list-item p {
margin-bottom: 0;
outline-offset: -4px;
}
.entity-list-item.selected {
outline-offset: -4px;
}
.entity-list-item.selected {
- @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+ @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
}
.loading {
height: 400px;
}
.loading {
height: 400px;
}
&.compact {
font-size: 10px;
}
&.compact {
font-size: 10px;
}
&.small {
.entity-list-item {
}
&.small {
.entity-list-item {
+ padding: vars.$xs vars.$m;
}
.entity-list, .loading {
height: 300px;
}
input[type="text"] {
font-size: 13px;
}
.entity-list, .loading {
height: 300px;
}
input[type="text"] {
font-size: 13px;
+ padding: vars.$xs vars.$m;
-@include between($s, $m) {
+@include mixins.between(vars.$bp-s, vars.$bp-m) {
#home-default > .grid.third {
display: block;
columns: 2;
#home-default > .grid.third {
display: block;
columns: 2;
- column-gap: $-l !important;
+ column-gap: vars.$l !important;
}
.list-sort {
display: inline-grid;
}
.list-sort {
display: inline-grid;
- margin-inline-start: $-s;
+ margin-inline-start: vars.$s;
grid-template-columns: minmax(120px, max-content) 40px;
font-size: 0.9rem;
border: 2px solid #DDD;
grid-template-columns: minmax(120px, max-content) 40px;
font-size: 0.9rem;
border: 2px solid #DDD;
- @include lightDark(border-color, #ddd, #444);
+ @include mixins.lightDark(border-color, #ddd, #444);
border-radius: 4px;
}
.list-sort-label {
font-weight: bold;
display: inline-block;
border-radius: 4px;
}
.list-sort-label {
font-weight: bold;
display: inline-block;
- @include lightDark(color, #555, #888);
+ @include mixins.lightDark(color, #555, #888);
}
.list-sort-type {
text-align: start;
}
.list-sort-type, .list-sort-dir {
}
.list-sort-type {
text-align: start;
}
.list-sort-type, .list-sort-dir {
+ padding: vars.$xs vars.$s;
cursor: pointer;
}
.list-sort-dir {
border-inline-start: 2px solid #DDD;
color: #888;
cursor: pointer;
}
.list-sort-dir {
border-inline-start: 2px solid #DDD;
color: #888;
- @include lightDark(border-color, #ddd, #444);
+ @include mixins.lightDark(border-color, #ddd, #444);
.svg-icon {
transition: transform ease-in-out 120ms;
}
.svg-icon {
transition: transform ease-in-out 120ms;
}
.import-item {
border-inline-start: 2px solid currentColor;
.import-item {
border-inline-start: 2px solid currentColor;
- padding-inline-start: $-xs;
+ padding-inline-start: vars.$xs;
}
\ No newline at end of file
}
\ No newline at end of file
projects / bookstack / commitdiff