Skip to content

Commit

Permalink
Update bourbon from 4 to 7
Browse files Browse the repository at this point in the history 
Bourbon version is severly outdated. This updates to the
latest version, and also replaces deprecated mixins with
native browser CSS.

Also requires updating bourbon-neat, which also required
updating deprecated mixins. As there was no migration
guide for neat this purely a best effort guess based on their
documentation and source code.
  • Loading branch information
@Arnei
Arnei committed Sep 12, 2023
1 parent 3a99e5d commit b2210fa
Show file tree
Hide file tree
Showing 42 changed files with 232 additions and 191 deletions.
28 changes: 14 additions & 14 deletions app/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
"@testing-library/react": "^12.1.5",
"array-move": "^4.0.0",
"axios": "^1.4.0",
"bourbon": "^4.3.4",
"bourbon-neat": "1.7.1",
"bourbon": "^7.3.0",
"bourbon-neat": "4.0.0",
"classnames": "^2.3.2",
"date-fns": "^2.30.0",
"font-awesome": "^4.7.0",
Expand Down
2 changes: 1 addition & 1 deletion app/src/styles/components/_alerts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@
right: 10px;
font-size: 20px;
margin-top: 9px;
@include transition($alert-transition);
transition: $alert-transition;
text-decoration: none;
color: inherit;
}
Expand Down
2 changes: 1 addition & 1 deletion app/src/styles/components/_cal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
text-align: center;
margin: -1px -1px 0px -1px;
border: $thin-border-stroke darken($l-blue, 10%);
@include linear-gradient(top, #388ed6, #2b77b9);
background: linear-gradient(to bottom, #388ed6, #2b77b9);

a {
display: block;
Expand Down
18 changes: 9 additions & 9 deletions app/src/styles/components/_dropdowns.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@
cursor: pointer;
position: relative;
vertical-align: middle;
@include user-select(none);
user-select: none;

// Pulled from Button Mixin (keep in sync with those styles)
@include linear-gradient(#fff, #f7f7f7);
background: linear-gradient(#fff, #f7f7f7);
border: $thin-border-stroke $main-border-color;
box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05);
outline: none;
Expand All @@ -44,7 +44,7 @@

&:hover {
border: $thin-border-stroke darken($main-border-color, 2%);
@include linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%));
background: linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%));
color: $medium-prim-color;
}

Expand Down Expand Up @@ -86,7 +86,7 @@

> ul {
position: absolute;
@include transition(all 200ms);
transition: all 200ms;
background: $off-white;
list-style: none;
@include border-bottom-radius($main-border-radius);
Expand All @@ -103,7 +103,7 @@
text-shadow: 0 1px 0 $white;
display: block;
position: relative;
@include transition(all 200ms);
transition: all 200ms;

button {
display: block;
Expand Down Expand Up @@ -154,7 +154,7 @@
cursor: pointer;
position: relative;
vertical-align: middle;
@include user-select(none);
user-select: none;
background-repeat: repeat-x;

&:focus {
Expand All @@ -169,7 +169,7 @@

> ul {
position: absolute;
@include transition(all 200ms);
transition: all 200ms;
background: $off-white;
list-style: none;
@include border-bottom-radius($main-border-radius);
Expand All @@ -188,7 +188,7 @@
cursor: default;
display: block;
position: relative;
@include transition(all 200ms);
transition: all 200ms;

span {
padding: 3px 15px 3px 45px;
Expand Down Expand Up @@ -245,7 +245,7 @@
@include border-bottom-radius(0);

&:after {
@include transform(rotate(180deg));
transform: rotate(180deg);
}

> ul {
Expand Down
2 changes: 1 addition & 1 deletion app/src/styles/components/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ $footer-background-color: darken($body-background, 5%);
right: 0;

a {
@include transition(all .2s);
transition: all .2s;
@include footer-component-padding();
border-left: 1px solid $footer-border-color;
text-align: center;
Expand Down
6 changes: 3 additions & 3 deletions app/src/styles/components/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
box-shadow: 0 1px 3px 1px rgba($black, 0.3);
position: relative;
border-bottom: 1px solid #1d3041;
@include linear-gradient(top, #388ed6, #2075b1);
background: linear-gradient(to bottom, #388ed6, #2075b1);

.header-branding {
float: left;
Expand Down Expand Up @@ -413,11 +413,11 @@
text-shadow: 0 1px 0 rgba($black, 0.2);
border: 1px solid $l-blue;

@include linear-gradient(top, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
box-shadow: inset 0 1px 0 0 rgba($white, 0.2), 0 2px 3px 1px rgba($black, 0.05);

&:hover {
@include linear-gradient(top, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
}

&:active {
Expand Down
23 changes: 13 additions & 10 deletions app/src/styles/components/_inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ textarea {
font-weight: 600;
color: $medium-prim-color;

@include placeholder {
&::placeholder {
color: $light-prim-color;
}

Expand All @@ -71,29 +71,32 @@ textarea {
// ----------------------------------------

&#email {
@include retina-image("#{$img-path}user-input-icon", 23px 20px);
background-image: url("#{$img-path}user-input-icon.png");
background-size: 23px 20px;
background-repeat: no-repeat;
background-position: 14px center;
}

&#password {
@include retina-image("#{$img-path}key-icon", 16px 20px);
background-image: url("#{$img-path}key-icon.png");
background-size: 16px 20px;
background-repeat: no-repeat;
background-position: 19px center;
}

&.search,
&#search {
@include appearance(none);
@include retina-image("#{$img-path}search", 13px 13px);
appearance: none;
background-image: url("#{$img-path}search.png");
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: 14px center;
vertical-align: top;
padding: 0 20px 0 40px !important;
height: 40px;

&.expand {
@include transition(width 0.2s ease-in);
transition: width 0.2s ease-in;

&:focus {
width: 200px;
Expand Down Expand Up @@ -142,7 +145,7 @@ input[type="radio"].ios {
cursor: pointer;
height: 28px;
position: relative;
@include transition(border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration);
transition: border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration;
width: 44px;
vertical-align: top;

Expand All @@ -158,20 +161,20 @@ input[type="radio"].ios {
position: absolute;
right: 16px;
top: 0;
@include transition(border 250ms 150ms, left 250ms 100ms, right 150ms 175ms);
transition: border 250ms 150ms, left 250ms 100ms, right 150ms 175ms;
}

&:checked {
border-color: $green;
box-shadow: inset 0 0 0 13px $green;
padding-left: 18px;
@include transition(border 250ms, box-shadow 250ms, padding 250ms 150ms);
transition: border 250ms, box-shadow 250ms, padding 250ms 150ms;

&:after {
border-color: $green;
left: 16px;
right: 0;
@include transition(border 250ms, left 150ms 250ms, right 250ms 175ms);
transition: border 250ms, left 150ms 250ms, right 250ms 175ms;
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions app/src/styles/components/_menu-dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@
overflow: visible;
display: block;
padding: $link-padding;
@include transition-property($link-transition-property);
@include transition-duration(250ms);
@include transition-timing-function(ease-in);
transition-property: $link-transition-property;
transition-duration: 250ms;
transition-timing-function: ease-in;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: $weight-semibold;
Expand Down
2 changes: 1 addition & 1 deletion app/src/styles/components/_menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
vertical-align: middle;
position: relative;
line-height: 50px;
@include transition(all .2s);
transition: all .2s;
color: #c6c6c6;
}

Expand Down
4 changes: 2 additions & 2 deletions app/src/styles/components/_progress-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
text-align: center;
background-color: $progress-bar-color;
@include linear-gradient(top, #388ed6, #2b77b9);
background: linear-gradient(to bottom, #388ed6, #2b77b9);
border-right: 1px solid darken(#388ed6, 15%);
@include transition(width 600ms ease);
transition: width 600ms ease;

&[aria-valuenow="1"],
&[aria-valuenow="2"] {
Expand Down
2 changes: 1 addition & 1 deletion app/src/styles/components/_statistics-graph.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
> input[type="radio"]:checked + label {
cursor: pointer;
border: $thin-border-stroke darken($main-border-color, 2%);
@include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
color: $medium-prim-color;
box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1);
}
Expand Down
8 changes: 4 additions & 4 deletions app/src/styles/components/_steps.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
width: 100%;
height: 1px;
background: $main-border-color;
@include linear-gradient(
background: linear-gradient(
left,
rgba($modal-nav-border-color, 0) 5%,
rgba($modal-nav-border-color, 1) 25%,
Expand All @@ -59,7 +59,7 @@
margin: 0 10px;
position: relative;
line-height: $height + 30;
@include user-select(none);
user-select: none;

// Dot
&:after {
Expand All @@ -76,12 +76,12 @@

// First line
&:first-child:before {
@include linear-gradient(left, $modal-nav-bg-color, $modal-nav-border-color);
background: linear-gradient(to right, $modal-nav-bg-color, $modal-nav-border-color);
}

// Last line
&:last-child:before {
@include linear-gradient(left, $modal-nav-border-color, $modal-nav-bg-color);
background: linear-gradient(to right, $modal-nav-border-color, $modal-nav-bg-color);
}

// Active step
Expand Down
10 changes: 5 additions & 5 deletions app/src/styles/components/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
&.sortable {
cursor: pointer;
&:hover {
@include linear-gradient(top, $off-white, darken(#f1f3f5, 3%));
background: linear-gradient(to bottom, $off-white, darken(#f1f3f5, 3%));
}
&:active {
box-shadow: inset 0 3px 10px 2px rgba($black, 0.05);
Expand Down Expand Up @@ -82,8 +82,8 @@
border-right: 1px solid #c9d0d6;
border-left: 1px solid #fff;
border-bottom: 1px solid $border-color;
@include user-select(none);
@include linear-gradient(top, darken($off-white, 1%), darken(#f1f3f5, 3%));
user-select: none;
background: linear-gradient(to bottom, darken($off-white, 1%), darken(#f1f3f5, 3%));

// Typography
line-height: 35px;
Expand Down Expand Up @@ -415,7 +415,7 @@
opacity: 0;
visibility: hidden;
float: right;
@include transition(all .2s);
transition: all .2s;
}

&.js-active:after {
Expand Down Expand Up @@ -456,7 +456,7 @@
padding-left: 3px;

&.open {
@include transform(rotate(90deg));
transform: rotate(90deg);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion app/src/styles/components/_toggle-buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
border: 1px solid $l-blue;
border-right: 1px solid darken($l-blue, 10%);
@include linear-gradient(top, lighten(#2b77b9, 5%), #388ed6);
background: linear-gradient(to bottom, lighten(#2b77b9, 5%), #388ed6);
box-shadow: 0px 2px 3px 1px rgba(0,0,0,.05);
}
}
Expand Down
Loading

0 comments on commit b2210fa

Please sign in to comment.