Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change import to use in sass files #3316

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Change import to use in sass files #3316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c0fea51
run sass-migrator module --migrate-deps filename
colinxfleming Dec 1, 2024
635558e
manually migrate entrypoint
colinxfleming Dec 1, 2024
54671d2
manual adjustments to get scss to build again and look ok
colinxfleming Dec 1, 2024
af433ea
prefer relative assets
colinxfleming Dec 1, 2024
b975d56
fix spacing on dashboard
colinxfleming Dec 1, 2024
86308c8
move up spacing rather than having it on every header on patient edit…
colinxfleming Dec 1, 2024
b4f332f
fix header and footer
colinxfleming Dec 1, 2024
2a04f23
fix color of clinic finder and spacing on practical support updates
colinxfleming Dec 1, 2024
257a1a1
fix doofy html mistake
colinxfleming Dec 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions app/assets/stylesheets/application.bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
// Major library config
@import './styles/bootstrap';
@import './styles/vendor/jquery-ui';
@use './styles/bootstrap';
@use './styles/vendor/jquery-ui';

// Custom styling
@import './styles/globals';
@import './styles/call_list';
@import './styles/devise';
@import './styles/users';
@import './styles/budget_bar';
@import './styles/clinic_finder';
@import './styles/calls';
@import './styles/pagination';
@import './styles/events';
@import './styles/patient_menu';
@import './styles/patient_edit';
@import './styles/tables';
@import './styles/footer';
@import './styles/modals';
@import './styles/navbar';
@import './styles/tooltips';
@import './styles/lines';
@import './styles/flash';
@import './styles/forms';
@import './styles/buttons';
@use './styles/globals';
@use './styles/call_list';
@use './styles/devise';
@use './styles/users';
@use './styles/budget_bar';
@use './styles/clinic_finder';
@use './styles/calls';
@use './styles/pagination';
@use './styles/events';
@use './styles/patient_menu';
@use './styles/patient_edit';
@use './styles/tables';
@use './styles/footer';
@use './styles/modals';
@use './styles/navbar';
@use './styles/tooltips';
@use './styles/lines';
@use './styles/flash';
@use './styles/forms';
@use './styles/buttons';
3 changes: 2 additions & 1 deletion app/assets/stylesheets/styles/bootstrap_config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
@use "sass:map";
$spacer: .5rem !default;

$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
$spacers: map.merge(
(
0: 0,
1: ($spacer * .25), //.125 rem
Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/styles/budget_bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// Styling related to the budget bar utility.

@import './_variables';
@use './_variables';

$budget-bar-font-size: 14px;

.expenditure-block {
border-right: 1px solid $black;
color: $black !important;
border-right: 1px solid variables.$black;
color: variables.$black !important;
font-size: $budget-bar-font-size;
}
61 changes: 31 additions & 30 deletions app/assets/stylesheets/styles/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,70 @@
// Button styling.
@import './_variables';
@use "sass:color";
@use './_variables';

// btn-primary
.btn-primary {
@extend .btn-primary;
background-color: $daria-color;
background-color: variables.$daria-color;
border: none;
color: $white;
color: variables.$white;
margin-bottom: 2px;
font-size: $font-size;
font-size: variables.$font-size;
}

.btn-primary:hover {
background-color: lighten($daria-color,15%);
background-color: color.adjust(variables.$daria-color,$lightness: 15%);
}

.btn-primary:focus {
background-color: lighten($daria-color,15%);
color: $white;
background-color: color.adjust(variables.$daria-color,$lightness: 15%);
color: variables.$white;
text-decoration: none;
}

// btn-danger
.btn-danger {
background-color: $dark-red !important;
border-color: $dark-red !important;
background-color: variables.$dark-red !important;
border-color: variables.$dark-red !important;
}

// btn-warning
.btn-warning {
color: $black;
border-color: $daria-color;
background-color: $white;
color: variables.$black;
border-color: variables.$daria-color;
background-color: variables.$white;

&:hover {
background-color: $daria-color-lt;
border-color: $daria-color;
background-color: variables.$daria-color-lt;
border-color: variables.$daria-color;
}
&:active {
background-color: $soft-blue !important;
background-color: variables.$soft-blue !important;
}
&:focus {
background-color: $daria-color;
background-color: variables.$daria-color;
&:hover {
background-color: $daria-color-lt;
background-color: variables.$daria-color-lt;
}
}
}

// btn-success
.btn-success {
background-color: $daria-color;
border-color: $daria-color;
background-color: variables.$daria-color;
border-color: variables.$daria-color;

&:hover {
background-color: $daria-color-lt;
border-color: $daria-color;
background-color: variables.$daria-color-lt;
border-color: variables.$daria-color;
}
&:active {
background-color: $soft-blue !important;
background-color: variables.$soft-blue !important;
}
&:focus {
background-color: $daria-color;
background-color: variables.$daria-color;
&:hover {
background-color: $daria-color-lt;
background-color: variables.$daria-color-lt;
}
}
}
Expand All @@ -76,19 +77,19 @@

// Disabled button styling
@mixin disabled-button {
color: $white;
color: variables.$white;
background-color: gray;
border-color: $daria-color;
border-color: variables.$daria-color;
&:hover {
background-color: gray;
border-color: $daria-color;
border-color: variables.$daria-color;
}
&:focus {
background-color: gray;
border-color: $daria-color;
border-color: variables.$daria-color;
&:hover {
background-color: gray;
border-color: $daria-color;
border-color: variables.$daria-color;
}
}
}
Expand All @@ -103,5 +104,5 @@

// Styling for the cancel button on pledge modal
.btn[data-orientation='cancel'] {
color: $red;
color: variables.$red;
}
10 changes: 5 additions & 5 deletions app/assets/stylesheets/styles/call_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// Styling related to the call list and patient search.

@import './_variables';
@use './_variables';

.call-icon {
color: $white;
background-color: $phone-icon-blue;
color: variables.$white;
background-color: variables.$phone-icon-blue;
padding: 5px;
border-radius: 50%;
}
Expand All @@ -29,7 +29,7 @@
// Drag and drop functionality/stylings
// Activated when dragging around
.ui-state-highlight {
background-color: $lavendar !important;
background-color: variables.$lavendar !important;
}
.active-item-shadow {
-webkit-box-shadow: rgba(133,133,133,0.1) 0 0 5px 2px,rgba(133,133,133,0.3) 0 0 2px;
Expand All @@ -38,5 +38,5 @@
}
// Keeps the rows white when dragging around
#call_list tr {
background-color: $white;
background-color: variables.$white;
}
10 changes: 5 additions & 5 deletions app/assets/stylesheets/styles/calls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
// Styling related to log-a-call modals.

@import './_variables';
@use './_variables';

// Core new call modal
.calls-layout {
padding: 1rem .5rem 1rem 2rem;

.calls-request {
font-size: $font-size-large;
font-size: variables.$font-size-large;
}

.calls-phone {
font-size: $font-size-xlarge;
font-size: variables.$font-size-xlarge;
font-weight: 900;
}

.calls-response {
font-size: $font-size;
font-size: variables.$font-size;
text-decoration: underline;
}

.calls-btn {
font-size: $font-size;
font-size: variables.$font-size;
padding: 10px 40px;
}
}
6 changes: 3 additions & 3 deletions app/assets/stylesheets/styles/clinic_finder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// Styling related to the clinic finder utility.

@import './_variables';
@use './_variables';

.clinic_finder_container {
background-color: $grey-color;
background-color: variables.$light-gray;
border-style: solid;
border-color: black;
border-color: variables.$grey-color;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

meaningful change (it winds up a darker shade of gray), but I think it's more one of those 'how was this ever working' kinda things

border-width: thin;

.button-right {
Expand Down
5 changes: 3 additions & 2 deletions app/assets/stylesheets/styles/devise.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
// Styles pertaining to the login form or other devise-related views.

@import './_variables';
@use 'bootstrap/scss/bootstrap';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a few cases where we're importing bootstrap in a place we weren't before, and it's generally because we're extending some bootstrap class (here, card-header).

@use './_variables';

.authform {
@extend .card-header;
@extend .mx-auto;
padding-top: 20px;
border: 1px solid $light-gray;
border: 1px solid variables.$light-gray;
border-radius: 6px;
margin: 0 auto;
}
Expand Down
7 changes: 4 additions & 3 deletions app/assets/stylesheets/styles/events.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
// Styling for the events log on the patient dashboard.

@import './_variables';
@use 'bootstrap/scss/bootstrap';
@use './_variables';

svg.event-item {
border-radius: 50%;
margin-right: 1em;
color: white;
padding: 4px;
background-color: $teal;
background-color: variables.$teal;
font-size: 1.25em;

&.fa-thumbs-up {
background-color: green;
}

&.fa-comment {
background-color: $light-gray;
background-color: variables.$light-gray;
color: black;
}
}
Expand Down
4 changes: 3 additions & 1 deletion app/assets/stylesheets/styles/flash.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// Styling around flash messages.
@import './_variables';

@use 'bootstrap/scss/bootstrap';
@use './_variables';

#flash {
position: fixed;
Expand Down
4 changes: 3 additions & 1 deletion app/assets/stylesheets/styles/forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// Styling around forms.

@use './variables';

// Override rails_bootstrap_forms checkbox styling
.form-check label {
min-height: 20px;
Expand All @@ -13,7 +15,7 @@

// Override rails bootstrap form-text for accessible color contrast
.form-text {
color: $grey-color !important;
color: variables.$grey-color !important;
}

// On date inputs, don't do the annoying
Expand Down
16 changes: 8 additions & 8 deletions app/assets/stylesheets/styles/globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
// Global styling patterns.

@import "./_variables";
@import "./vendor/googleapis_source_sans_pro";
@use 'bootstrap/scss/bootstrap';
@use "vendor/googleapis_source_sans_pro";
@use "./_variables";

@charset "utf-8";

html {
font-size: $font-size;
font-size: variables.$font-size;
}

body {
font-family: "Source Sans Pro", sans-serif;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is being applied wrong with use, and popping it out makes it match what's happening in sandbox

font-size: $font-size;
font-size: variables.$font-size;
}

main {
Expand Down Expand Up @@ -65,20 +65,20 @@ label {

// Links
a {
color: $link-blue;
color: variables.$link-blue;
text-decoration: none;
}

a:hover,
a:active,
a:visited,
a:focus {
color: $dark-blue;
color: variables.$dark-blue;
text-decoration: underline;
}

.border-bottom {
border-bottom: 1px solid $black;
border-bottom: 1px solid variables.$black;
padding-bottom: 10px;
}

Expand Down
Loading