Skip to content

Commit

Permalink
SASS: Updated to use modules and address deprecations
Browse files Browse the repository at this point in the history 
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'
  • Loading branch information
@ssddanbrown
ssddanbrown committed Dec 9, 2024
1 parent 617b2ed commit 8ec26e8
Show file tree
Hide file tree
Showing 20 changed files with 649 additions and 595 deletions.
97 changes: 50 additions & 47 deletions resources/sass/_blocks.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
@use "mixins";
@use "vars";

/**
* 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 {
padding-block: $-m;
padding-block: vars.$m;
}
a, p {
word-wrap: break-word;
Expand All @@ -17,9 +20,9 @@
}

.card-title {
padding: $-m $-m $-xs;
padding: vars.$m vars.$m vars.$xs;
margin: 0;
font-size: $fs-m;
font-size: vars.$fs-m;
color: #222;
fill: #222;
font-weight: 400;
Expand All @@ -29,39 +32,39 @@
}
.card-footer-link, button.card-footer-link {
display: block;
padding: $-s $-m;
padding: vars.$s vars.$m;
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;
margin-top: $-xs;
margin-top: vars.$xs;
&:hover {
text-decoration: none;
@include lightDark(background-color, #f2f2f2, #2d2d2d);
@include mixins.lightDark(background-color, #f2f2f2, #2d2d2d);
}
&:focus {
@include lightDark(background-color, #eee, #222);
@include mixins.lightDark(background-color, #eee, #222);
outline: 1px dotted #666;
outline-offset: -2px;
}
}

.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;
@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;
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;
Expand All @@ -73,30 +76,30 @@
justify-content: center;
width: 28px;
flex-grow: 0;
padding: 0 $-xs;
padding: 0 vars.$xs;
&:hover {
@include lightDark(background-color, #eee, #2d2d2d);
@include mixins.lightDark(background-color, #eee, #2d2d2d);
}
.svg-icon {
margin-inline-end: 0px;
}
}
.outline input {
margin: $-s 0;
margin: vars.$s 0;
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 {
padding: 0 $-s;
padding: 0 vars.$s;
max-width: 80%;
flex: 1;
}
Expand All @@ -106,17 +109,17 @@
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;
color: $text-dark;
color: vars.$text-dark;
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
&:hover {
color: $text-dark;
color: vars.$text-dark;
text-decoration: none;
@include lightDark(box-shadow, $bs-card, $bs-card-dark);
@include mixins.lightDark(box-shadow, vars.$bs-card, vars.$bs-card-dark);
}
h2 {
width: 100%;
Expand All @@ -134,7 +137,7 @@
border-bottom-width: 2px;
}
.grid-card-content, .grid-card-footer {
padding: $-l;
padding: vars.$l;
}
.grid-card-content + .grid-card-footer {
padding-top: 0;
Expand All @@ -149,10 +152,10 @@
}

.content-wrap.card {
padding: $-m $-xxl;
padding: vars.$m vars.$xxl;
margin-inline-start: auto;
margin-inline-end: auto;
margin-bottom: $-l;
margin-bottom: vars.$l;
overflow: initial;
min-height: 60vh;
border-radius: 8px;
Expand All @@ -163,26 +166,26 @@
width: 100%;
}
}
@include smaller-than($xxl) {
@include mixins.smaller-than(vars.$bp-xxl) {
.content-wrap.card {
padding: $-m $-xl;
padding: vars.$m vars.$xl;
}
}
@include smaller-than($m) {
@include mixins.smaller-than(vars.$bp-m) {
.content-wrap.card {
padding: $-m $-l;
padding: vars.$m vars.$l;
}
}
@include smaller-than($s) {
@include mixins.smaller-than(vars.$bp-s) {
.content-wrap.card {
padding: $-m $-m;
padding: vars.$m vars.$m;
}
}

.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);
border-radius: 4px;
}

Expand All @@ -194,7 +197,7 @@
}

.fade-in-when-active {
@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;
Expand All @@ -209,29 +212,29 @@
*/
.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;
@include lightDark(border-color, #CCC, #666);
@include mixins.lightDark(border-color, #CCC, #666);
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 {
@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));
}
svg {
@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;
@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))
}
}

Expand All @@ -253,7 +256,7 @@
.api-method {
font-size: 0.75rem;
background-color: #888;
padding: $-xs;
padding: vars.$xs;
line-height: 1.3;
opacity: 0.7;
vertical-align: top;
Expand All @@ -271,7 +274,7 @@

.sticky-sidebar {
position: sticky;
top: $-m;
max-height: calc(100vh - #{$-m});
top: vars.$m;
max-height: calc(100vh - #{vars.$m});
overflow-y: auto;
}
33 changes: 18 additions & 15 deletions resources/sass/_buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@use "mixins";
@use "vars";

button {
background-color: transparent;
border: 0;
Expand All @@ -8,9 +11,9 @@ button {
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;
Expand All @@ -30,12 +33,12 @@ button {
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;
outline-offset: -$-xs;
outline-offset: -(vars.$xs);
box-shadow: none;
filter: brightness(90%);
}
Expand All @@ -46,16 +49,16 @@ button {

.button.outline {
background-color: transparent;
@include lightDark(color, #666, #AAA);
@include mixins.lightDark(color, #666, #AAA);
fill: currentColor;
border: 1px solid;
@include lightDark(border-color, #CCC, #666);
@include mixins.lightDark(border-color, #CCC, #666);
&: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;
@include lightDark(background-color, #f8f8f8, #444);
@include mixins.lightDark(background-color, #f8f8f8, #444);
filter: none;
}
&:active {
Expand All @@ -67,12 +70,12 @@ button {
}

.button + .button {
margin-inline-start: $-s;
margin-inline-start: vars.$s;
}

.button.small {
font-size: 0.75rem;
padding: $-xs*1.2 $-s;
padding: vars.$xs*1.2 vars.$s;
}

.text-button {
Expand Down Expand Up @@ -119,22 +122,22 @@ button {
.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;
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;
margin-inline-end: $-m;
margin-inline-end: vars.$m;
}
}

Expand Down
11 changes: 7 additions & 4 deletions resources/sass/_codemirror.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@use "mixins";
@use "vars";

/**
* Custom CodeMirror BookStack overrides
*/
Expand All @@ -6,7 +9,7 @@
font-size: 12px;
border: 1px solid #ddd;
line-height: 1.4;
margin-bottom: $-l;
margin-bottom: vars.$l;
}

.page-content .cm-editor,
Expand Down Expand Up @@ -42,9 +45,9 @@
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;
Expand Down
Loading

0 comments on commit 8ec26e8

Please sign in to comment.