From daa97738965a167031a36a133001b1259875aa65 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 10:48:32 +0100 Subject: [PATCH 01/18] Convert sass variables in to css variables. --- .../funds/includes/review_sidebar_item.html | 2 +- hypha/static_src/sass/abstracts/_mixins.scss | 79 ++---------- .../static_src/sass/abstracts/_variables.scss | 116 +++++++++++++----- hypha/static_src/sass/base/_base.scss | 4 +- hypha/static_src/sass/base/_typography.scss | 39 +----- .../sass/components/_actions-bar.scss | 2 +- .../components/_activity-notifications.scss | 2 +- .../sass/components/_admin-bar.scss | 4 +- .../sass/components/_all-reviews-table.scss | 2 +- .../components/_all-submissions-table.scss | 10 +- hypha/static_src/sass/components/_button.scss | 18 +-- .../sass/components/_cookieconsent.scss | 4 +- .../sass/components/_data-block.scss | 14 +-- .../sass/components/_docs-block.scss | 4 +- hypha/static_src/sass/components/_feed.scss | 8 +- .../static_src/sass/components/_filters.scss | 4 +- hypha/static_src/sass/components/_form.scss | 14 +-- .../static_src/sass/components/_heading.scss | 4 +- .../sass/components/_invoice-block.scss | 2 +- .../sass/components/_list-reveal.scss | 4 +- hypha/static_src/sass/components/_list.scss | 4 +- .../static_src/sass/components/_messages.scss | 6 +- hypha/static_src/sass/components/_modal.scss | 4 +- hypha/static_src/sass/components/_nav.scss | 2 +- .../sass/components/_projects-table.scss | 2 +- .../sass/components/_reviews-list.scss | 2 +- .../sass/components/_reviews-sidebar.scss | 8 +- .../sass/components/_round-block.scss | 6 +- .../static_src/sass/components/_select2.scss | 8 +- .../static_src/sass/components/_sidebar.scss | 2 +- .../sass/components/_stat-block.scss | 2 +- .../sass/components/_status-bar.scss | 6 +- .../sass/components/_submission-meta.scss | 2 +- hypha/static_src/sass/components/_table.scss | 2 +- hypha/static_src/sass/components/_tabs.scss | 4 +- .../static_src/sass/components/_tooltip.scss | 2 +- .../static_src/sass/components/_wrapper.scss | 2 +- 37 files changed, 179 insertions(+), 221 deletions(-) diff --git a/hypha/apply/funds/templates/funds/includes/review_sidebar_item.html b/hypha/apply/funds/templates/funds/includes/review_sidebar_item.html index b029b08728..8d3fa7c570 100644 --- a/hypha/apply/funds/templates/funds/includes/review_sidebar_item.html +++ b/hypha/apply/funds/templates/funds/includes/review_sidebar_item.html @@ -32,7 +32,7 @@ {% if reviewer.role %}{% image reviewer.role.icon max-12x12 %}{% endif %} -
{{ reviewer.review.created_at|date:"SHORT_DATE_FORMAT" }}
+
{{ reviewer.review.created_at|date:"SHORT_DATE_FORMAT" }}
{% else %}
diff --git a/hypha/static_src/sass/abstracts/_mixins.scss b/hypha/static_src/sass/abstracts/_mixins.scss index 26374f09f9..13acd5b61b 100644 --- a/hypha/static_src/sass/abstracts/_mixins.scss +++ b/hypha/static_src/sass/abstracts/_mixins.scss @@ -23,78 +23,15 @@ } } -// Placeholder text -@mixin placeholder-text { - &.placeholder { - @content; - } - &:-moz-placeholder { - @content; - } - &::-moz-placeholder { - @content; - } - &:-ms-input-placeholder { - @content; - } - &::-webkit-input-placeholder { - @content; - } -} - -// Hide text -@mixin hidden { - position: absolute; - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - width: 1px; - overflow: hidden; - white-space: nowrap; -} - -// Output a rem value for the given property -@mixin rem($property, $values) { - $rem: (); - - @each $value in $values { - @if $value == 0 or $value == auto or $value == inherit { - $rem: list.append($rem, $value); - } @else { - $rem: list.append( - $rem, - functions.rem(functions.strip-unit($value)) - ); - } - } - #{$property}: $rem; -} - -// Output a `font-size: [x]rem;` declaration for the given px value -@mixin rem-font-size($font-size) { - @include rem(font-size, $font-size); -} - -// Font sizes -@mixin font-size($keyword) { - $size: map.get(variables.$font-sizes, $keyword); - - @if $size == null { - @warn 'Font size '#{$keyword}' does not exist'; - } @else { - @include rem-font-size($size); - } -} - // Button mixin @mixin button($bg, $hover-bg) { padding: 0.5em 2rem; - font-weight: variables.$weight--bold; - color: variables.$color--white; + font-weight: var(--weight-bold); + color: var(--color-white); text-align: center; background: $bg; - border: 1px solid variables.$color--white; - transition: color, background, border, variables.$transition; + border: 1px solid var(--color-white); + transition: color, background, border, var(--transition); display: flex; align-items: center; justify-content: center; @@ -159,7 +96,7 @@ // @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left` // @param {Color} $color [currentcolor] - Triangle color // @param {Length} $size [1em] - Triangle size -@mixin triangle($direction, $color: currentcolor, $size: 1em) { +@mixin triangle($direction, $color: currentcolor, $size: 0.33rem) { @if not list.index(top right bottom left, $direction) { @error 'Direction must be either `top`, `right`, `bottom` or `left`.'; } @@ -188,7 +125,7 @@ &.desc, &.asc { position: relative; - color: variables.$color--dark-grey; + color: var(--color-dark-grey); &::after { position: absolute; @@ -203,13 +140,13 @@ &.desc { &::after { - @include triangle(top, variables.$color--default, 5px); + @include triangle(top); } } &.asc { &::after { - @include triangle(bottom, variables.$color--default, 5px); + @include triangle(bottom); } } } diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index 538da7727f..636a4f6d84 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -1,8 +1,92 @@ @use "sass:color"; // stylelint-disable color-function-notation, color-no-hex, alpha-value-notation, value-keyword-case -// Set via JS :root { - --last-listing-item-height: 0; + // Default + --color-white: #fff; + --color-black: #1f2328; + --color-light-grey: #f7f7f7; + --color-light-mid-grey: #e8e8e8; + --color-mid-grey: #cfcfcf; + --color-mid-dark-grey: #919191; + --color-dark-grey: #404041; + + // Brand + --color-lightest-blue: #24aae1; + --color-light-blue: #1d79a8; + --color-light-blue-90: rgba(29, 121, 168, 0.1); + --color-lighter-blue: #7ab8d4; + --color-dark-blue: #0c72a0; + --color-darkest-blue: #3d6bdb; + --color-mustard: #e6ab32; + --color-purple: #8c0bbf; + --color-pink: #d02a85; + --color-light-pink: #ffe1df; + --color-light-green: #e1fae1; + --color-cream: #f5f7e7; + --color-tomato: #f05e54; + --color-mint: #40c2ad; + --color-grass: #7dc588; + --color-ocean: #1888b1; + --color-sky-blue: #e7f2f6; + --color-marine: #14729a; + --color-mist: #f3fafe; + --color-green: #7dc558; + --color-pastel-red: #f1a9a9; + --color-pastel-green: #afe6af; + --color-fog: #eff2f5; + + // Transparent + --color-black-60: rgba(0, 0, 0, 0.6); + --color-black-50: rgba(0, 0, 0, 0.5); + --color-black-40: rgba(0, 0, 0, 0.4); + --color-black-25: rgba(0, 0, 0, 0.25); + --color-black-20: rgba(0, 0, 0, 0.2); + --color-black-10: rgba(0, 0, 0, 0.1); + --color-white-50: rgba(255, 255, 255, 0.5); + --color-white-40: rgba(255, 255, 255, 0.4); + --color-white-25: rgba(255, 255, 255, 0.25); + --color-white-20: rgba(255, 255, 255, 0.2); + --color-white-10: rgba(255, 255, 255, 0.1); + + // Assignment + --color-default: var(--color-black); + --color-primary: var(--color-light-blue); + --color-error: var(--color-tomato); + --color-correct: var(--color-mint); + --color-button-disabled: var(--color-lighter-blue); + + // Font weights + --weight-black: 800; + --weight-bold: 700; + --weight-semibold: 600; + --weight-normal: 400; + --weight-light: 200; + + // Font sizes + --base-font-size: 16px; + --base-font-size-large: 18px; + --base-line-height: 24px; + --base-line-height-large: 28px; + + // Wrappers + --site-width: 1280px; + --wrapper-medium: 1020px; + --wrapper-small: 790px; + + // Text line length + --max-text-line-length: 50em; + + // Transition + --transition: 0.25s ease-out; + --quick-transition: 0.15s ease; + + // Spacing + --mobile-gutter: 1.25rem; + --gutters: calc(5px + 1.5625vw); + --gutters-reverse: calc(0px - (5px + 1.5625vw)); + + // Dropdown height + --dropdown-height: 45px; } // Default @@ -64,19 +148,6 @@ $color--error: $color--tomato; $color--correct: $color--mint; $color--button-disabled: $color--lighter-blue; -// Fonts -$font--primary: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", - Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -$font--headings: $font--primary; - -// Font weights -$weight--black: 800; -$weight--bold: 700; -$weight--semibold: 600; -$weight--normal: 400; -$weight--light: 200; - // Font sizes $base-font-size: 16px; $base-font-size-large: 18px; @@ -93,7 +164,6 @@ $font-sizes: ( ); // Wrappers -$site-width: 1280px; $wrapper--medium: 1020px; $wrapper--small: 790px; @@ -115,23 +185,9 @@ $breakpoints: ( // Transition $transition: 0.25s ease-out; $quick-transition: 0.15s ease; -$medium-transition: 0.5s ease; - -// Delays -$base-delay: 30ms; // Spacing $mobile-gutter: 1.25rem; // Filters $filter-dropdown: ".select2 .select2-selection.select2-selection--single"; - -// Dropdown height -$dropdown-height: 45px; - -// Border radius -$rounded-sm: 0.125rem; -$rounded: 0.25rem; -$rounded-md: 0.375rem; -$rounded-lg: 0.5rem; -$rounded-full: 9999px; diff --git a/hypha/static_src/sass/base/_base.scss b/hypha/static_src/sass/base/_base.scss index 28547c7b0a..428b141c2d 100644 --- a/hypha/static_src/sass/base/_base.scss +++ b/hypha/static_src/sass/base/_base.scss @@ -37,14 +37,14 @@ details > summary { %is-invisible { z-index: -1; opacity: 0; - transition: opacity, z-index, variables.$transition; + transition: opacity, z-index, var(--transition); } .is-visible, %is-visible { z-index: 5; opacity: 1; - transition: opacity, z-index, variables.$transition; + transition: opacity, z-index, var(--transition); } .is-hidden, diff --git a/hypha/static_src/sass/base/_typography.scss b/hypha/static_src/sass/base/_typography.scss index 862864e7d6..925938b7c4 100644 --- a/hypha/static_src/sass/base/_typography.scss +++ b/hypha/static_src/sass/base/_typography.scss @@ -1,30 +1,4 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; -@use "sass:math"; - // $TYPOGRAPHY -// Base font -html { - color: variables.$color--default; -} - -/* ============================================ - Families – one mixin per typeface - :: For each font mixin defined here, make sure each property is negated (set - :: to its default value, usually `inherit`) in all other font mixins. -*/ -@mixin heading-text { - margin: 0 0 1rem; - font-style: inherit; - font-weight: variables.$weight--semibold; -} - -@mixin body-text { - font-family: variables.$font--primary; - font-style: inherit; - font-weight: inherit; - text-transform: inherit; -} h1, h2, @@ -33,14 +7,9 @@ h4, h5, h6, .heading-text { - @include heading-text; -} - -.body-text { - @include mixins.responsive-font-sizes( - variables.$base-font-size, - variables.$base-font-size-large - ); + margin-block: 0 1rem; + font-style: inherit; + font-weight: var(--weight-semibold); } // Default sizes @@ -85,7 +54,7 @@ h5, h6, %h6, .zeta { - @include mixins.font-size(zeta); + font-size: 1rem; } small, diff --git a/hypha/static_src/sass/components/_actions-bar.scss b/hypha/static_src/sass/components/_actions-bar.scss index 098bb7425a..cca8b354a3 100644 --- a/hypha/static_src/sass/components/_actions-bar.scss +++ b/hypha/static_src/sass/components/_actions-bar.scss @@ -61,6 +61,6 @@ border-radius: 30px; min-width: 120px; text-align: center; - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); } } diff --git a/hypha/static_src/sass/components/_activity-notifications.scss b/hypha/static_src/sass/components/_activity-notifications.scss index baf6ea061f..ec94fb239e 100644 --- a/hypha/static_src/sass/components/_activity-notifications.scss +++ b/hypha/static_src/sass/components/_activity-notifications.scss @@ -19,7 +19,7 @@ justify-content: space-between; label { - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); padding-inline-end: 1em; } diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss index c62d970299..ab4eda02a2 100644 --- a/hypha/static_src/sass/components/_admin-bar.scss +++ b/hypha/static_src/sass/components/_admin-bar.scss @@ -14,7 +14,7 @@ } &__inner { - max-width: variables.$site-width; + max-width: var(--site-width); margin: 0 auto; &--with-button { @@ -43,7 +43,7 @@ display: inline-flex; align-items: center; color: variables.$color--lightest-blue; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); &::before { @include mixins.triangle(top, currentColor, 5px); diff --git a/hypha/static_src/sass/components/_all-reviews-table.scss b/hypha/static_src/sass/components/_all-reviews-table.scss index 98088050b2..12d216acc2 100644 --- a/hypha/static_src/sass/components/_all-reviews-table.scss +++ b/hypha/static_src/sass/components/_all-reviews-table.scss @@ -29,7 +29,7 @@ position: relative; padding-block-start: 15px; padding-inline-start: 10px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); @include mixins.media-query(lg) { display: flex; diff --git a/hypha/static_src/sass/components/_all-submissions-table.scss b/hypha/static_src/sass/components/_all-submissions-table.scss index 457fb9b161..29e717bafc 100644 --- a/hypha/static_src/sass/components/_all-submissions-table.scss +++ b/hypha/static_src/sass/components/_all-submissions-table.scss @@ -84,7 +84,7 @@ &.title { position: relative; padding-block-start: 15px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); @include mixins.media-query(lg) { display: flex; @@ -102,7 +102,7 @@ display: inline-block; padding: 5px; font-size: 13px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); color: variables.$color--marine; text-align: center; background-color: variables.$color--sky-blue; @@ -170,7 +170,7 @@ position: relative; display: inline-block; transform: rotate(0); - transition: transform variables.$transition; + transition: transform var(--transition); &:hover { cursor: pointer; @@ -237,7 +237,7 @@ p { margin: 0; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); color: variables.$color--default; } @@ -278,7 +278,7 @@ a { margin: 0; flex-basis: auto; - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); } } } diff --git a/hypha/static_src/sass/components/_button.scss b/hypha/static_src/sass/components/_button.scss index 7515097022..574ad0d5ac 100644 --- a/hypha/static_src/sass/components/_button.scss +++ b/hypha/static_src/sass/components/_button.scss @@ -9,7 +9,7 @@ background-image: none; border: 0; box-shadow: none; - border-radius: variables.$rounded-sm; + border-radius: 0.125rem; &:hover { cursor: pointer; @@ -154,7 +154,7 @@ justify-content: space-between; max-width: 300px; padding: 15px 20px; - font-weight: variables.$weight--normal; + font-weight: var(--weight-normal); color: variables.$color--default; border: 1px solid variables.$color--light-mid-grey; transition: none; @@ -267,7 +267,7 @@ padding: 3px; margin-block-start: 10px; font-size: 12px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); text-align: center; text-transform: uppercase; border: 1px solid currentcolor; @@ -301,8 +301,8 @@ display: flex; color: variables.$color--default; align-items: center; - transition: opacity variables.$transition; - font-weight: variables.$weight--semibold; + transition: opacity var(--transition); + font-weight: var(--weight-semibold); position: relative; &:hover { @@ -322,11 +322,11 @@ width: 200px; padding: 12px; font-size: 12px; - font-weight: variables.$weight--normal; + font-weight: var(--weight-normal); white-space: normal; background: variables.$color--light-blue; opacity: 0; - transition: opacity variables.$transition; + transition: opacity var(--transition); inset-block-end: 45px; inset-inline-start: 50%; transform: translateX(-50%); @@ -334,7 +334,7 @@ text-align: left; line-height: 1rem; border: 1px solid variables.$color--white; - border-radius: variables.$rounded-sm; + border-radius: 0.125rem; } &::after { @@ -348,7 +348,7 @@ inset-inline-start: 50%; transform: translateX(-50%); opacity: 0; - transition: opacity variables.$transition; + transition: opacity var(--transition); z-index: 10; } diff --git a/hypha/static_src/sass/components/_cookieconsent.scss b/hypha/static_src/sass/components/_cookieconsent.scss index ed309dd173..e5fcb9a94d 100644 --- a/hypha/static_src/sass/components/_cookieconsent.scss +++ b/hypha/static_src/sass/components/_cookieconsent.scss @@ -8,7 +8,7 @@ background-color: variables.$color--dark-blue; border-block-start: 4px solid variables.$color--light-blue; transform: translateY(100vh); - transition: all variables.$transition; + transition: all var(--transition); overflow: hidden; max-height: 37.5rem; @@ -24,7 +24,7 @@ &__content { width: 200%; margin-left: 0; - transition: all variables.$transition; + transition: all var(--transition); } &__content > div { diff --git a/hypha/static_src/sass/components/_data-block.scss b/hypha/static_src/sass/components/_data-block.scss index d79ca2fb57..5834c5d169 100644 --- a/hypha/static_src/sass/components/_data-block.scss +++ b/hypha/static_src/sass/components/_data-block.scss @@ -29,7 +29,7 @@ &__title { font-size: variables.$base-font-size-large; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); margin: 0 0 1rem; @include mixins.media-query(sm) { @@ -66,7 +66,7 @@ @include mixins.media-query(lg) { display: block; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); } } @@ -77,12 +77,12 @@ &__pagination-link, &__rejected-link { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); } &__mobile-label { display: inline-block; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); white-space: pre; @include mixins.media-query(lg) { @@ -153,7 +153,7 @@ &__action-link { font-size: map.get(variables.$font-sizes, zeta); - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); display: inline-block; margin-inline-end: 1rem; text-decoration: underline; @@ -173,7 +173,7 @@ &__action-icon-link { font-size: map.get(variables.$font-sizes, zeta); - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); display: flex; align-items: center; margin-inline-end: 1rem; @@ -264,6 +264,6 @@ } &__card-title { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); } } diff --git a/hypha/static_src/sass/components/_docs-block.scss b/hypha/static_src/sass/components/_docs-block.scss index 11921de999..295d55e97e 100644 --- a/hypha/static_src/sass/components/_docs-block.scss +++ b/hypha/static_src/sass/components/_docs-block.scss @@ -83,7 +83,7 @@ } &__link { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); margin-inline-end: 1rem; &:disabled, @@ -98,7 +98,7 @@ } &__icon-link { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); display: flex; align-items: center; margin-inline-end: 1rem; diff --git a/hypha/static_src/sass/components/_feed.scss b/hypha/static_src/sass/components/_feed.scss index 24081b8808..42aae53afc 100644 --- a/hypha/static_src/sass/components/_feed.scss +++ b/hypha/static_src/sass/components/_feed.scss @@ -94,7 +94,7 @@ margin: 0 10px 0 0; span { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); } @include mixins.media-query(sm) { @@ -110,7 +110,7 @@ color: variables.$color--mid-dark-grey; span { - font-weight: variables.$weight--normal; + font-weight: var(--weight-normal); } } @@ -118,7 +118,7 @@ margin-inline-start: auto; span { - font-weight: variables.$weight--normal; + font-weight: var(--weight-normal); } } @@ -179,7 +179,7 @@ &__heading-status { padding: 3px 10px; font-size: map.get(variables.$font-sizes, milli); - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); color: variables.$color--marine; text-align: center; text-transform: uppercase; diff --git a/hypha/static_src/sass/components/_filters.scss b/hypha/static_src/sass/components/_filters.scss index cf18a5d53f..6c27290ec3 100644 --- a/hypha/static_src/sass/components/_filters.scss +++ b/hypha/static_src/sass/components/_filters.scss @@ -20,8 +20,8 @@ @include mixins.media-query(lg) { display: block; max-height: 0; - transition: max-height variables.$medium-transition; - transition-delay: variables.$base-delay; + transition: max-height var(--transition); + transition-delay: 30ms; pointer-events: none; &.filters-open { diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss index b8a8160d4e..ee23cd77ea 100644 --- a/hypha/static_src/sass/components/_form.scss +++ b/hypha/static_src/sass/components/_form.scss @@ -17,7 +17,7 @@ label { display: block; margin-block-end: 0.5em; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); } } @@ -100,7 +100,7 @@ &__question { display: block; - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); font-size: 1rem; line-height: 1.25rem; @@ -154,7 +154,7 @@ color: variables.$color--mid-grey; padding: 25px; font-size: 17px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); text-align: center; border: 2px dashed variables.$color--mid-grey; border-radius: 5px; @@ -166,7 +166,7 @@ border-block-start: 1px solid variables.$color--mid-grey; &.is-active { - font-weight: variables.$weight--normal; + font-weight: var(--weight-normal); background-color: color.adjust( variables.$color--primary, $alpha: -0.9 @@ -184,11 +184,11 @@ align-items: flex-start; padding: 10px 0 30px; opacity: 0; - transition: opacity variables.$transition; + transition: opacity var(--transition); .filters-open & { opacity: 1; - transition-delay: variables.$base-delay * 10; + transition-delay: 300ms; } .filters--dates & { @@ -343,7 +343,7 @@ max-width: 100%; select { - height: variables.$dropdown-height; + height: var(--dropdown-height); } } } diff --git a/hypha/static_src/sass/components/_heading.scss b/hypha/static_src/sass/components/_heading.scss index de65f853d8..a528aea86c 100644 --- a/hypha/static_src/sass/components/_heading.scss +++ b/hypha/static_src/sass/components/_heading.scss @@ -31,7 +31,7 @@ display: flex; flex-direction: column; margin-block-start: 20px; - font-weight: variables.$weight--normal; + font-weight: var(--weight-normal); color: color.adjust(variables.$color--dark-grey, $alpha: -0.5); @include mixins.media-query(lg) { @@ -64,7 +64,7 @@ } &--bold { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); } &--activity-feed { diff --git a/hypha/static_src/sass/components/_invoice-block.scss b/hypha/static_src/sass/components/_invoice-block.scss index 881dc60a96..6c6848fee1 100644 --- a/hypha/static_src/sass/components/_invoice-block.scss +++ b/hypha/static_src/sass/components/_invoice-block.scss @@ -25,7 +25,7 @@ } &__title { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); margin: 0 0 0.2rem; } diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index 4679499530..de67b6de5c 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -24,7 +24,7 @@ &--meta { color: variables.$color--dark-blue; - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); display: flex; justify-content: space-between; margin: 0 -24px; @@ -43,7 +43,7 @@ padding: 0; border-block-end: 2px solid variables.$color--light-mid-grey; box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; - transition: max-height variables.$transition; + transition: max-height var(--transition); &--determination { border-inline-start: 1px solid variables.$color--light-mid-grey; diff --git a/hypha/static_src/sass/components/_list.scss b/hypha/static_src/sass/components/_list.scss index 7ec40c4b8b..e9d7746bdb 100644 --- a/hypha/static_src/sass/components/_list.scss +++ b/hypha/static_src/sass/components/_list.scss @@ -52,7 +52,7 @@ &--reviewer-name { max-width: 190px; overflow: hidden; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); text-overflow: ellipsis; display: flex; align-items: center; @@ -75,7 +75,7 @@ } #{$root}__item--opinion & { - font-weight: variables.$weight--normal; + font-weight: var(--weight-normal); } } diff --git a/hypha/static_src/sass/components/_messages.scss b/hypha/static_src/sass/components/_messages.scss index 13f9971217..4c1a0d58f3 100644 --- a/hypha/static_src/sass/components/_messages.scss +++ b/hypha/static_src/sass/components/_messages.scss @@ -27,7 +27,7 @@ color: variables.$color--white; font-size: 14px; opacity: 1; - transition: opacity, max-height, variables.$transition; + transition: opacity, max-height, var(--transition); pointer-events: all; max-height: 1000px; background: variables.$color--dark-blue; @@ -54,7 +54,7 @@ &__inner { display: flex; align-items: center; - max-width: variables.$site-width; + max-width: var(--site-width); margin: 0 auto; } @@ -70,7 +70,7 @@ color: variables.$color--dark-blue; background-color: variables.$color--white; display: inline-block; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); padding: 2px 20px; } } diff --git a/hypha/static_src/sass/components/_modal.scss b/hypha/static_src/sass/components/_modal.scss index 55d70fe91b..b8ffc27110 100644 --- a/hypha/static_src/sass/components/_modal.scss +++ b/hypha/static_src/sass/components/_modal.scss @@ -44,7 +44,7 @@ padding: 0; border-block-end: 2px solid variables.$color--light-mid-grey; box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; - transition: max-height variables.$transition; + transition: max-height var(--transition); &.is-closed { max-height: 0; @@ -62,7 +62,7 @@ &--meta { color: variables.$color--dark-blue; - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); display: flex; justify-content: space-between; margin: 0 -24px; diff --git a/hypha/static_src/sass/components/_nav.scss b/hypha/static_src/sass/components/_nav.scss index 8dfe8070fa..d3a85e6f7c 100644 --- a/hypha/static_src/sass/components/_nav.scss +++ b/hypha/static_src/sass/components/_nav.scss @@ -11,7 +11,7 @@ position: relative; padding-block: 0.5rem; color: variables.$color--default; - transition: color variables.$transition; + transition: color var(--transition); &:focus, &:hover { diff --git a/hypha/static_src/sass/components/_projects-table.scss b/hypha/static_src/sass/components/_projects-table.scss index 160a6c5c8b..fcf4480fd8 100644 --- a/hypha/static_src/sass/components/_projects-table.scss +++ b/hypha/static_src/sass/components/_projects-table.scss @@ -96,7 +96,7 @@ display: inline-block; padding: 5px; font-size: 13px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); color: variables.$color--white; text-align: center; background-color: variables.$color--dark-blue; diff --git a/hypha/static_src/sass/components/_reviews-list.scss b/hypha/static_src/sass/components/_reviews-list.scss index a36006a6c3..20a7ab4c19 100644 --- a/hypha/static_src/sass/components/_reviews-list.scss +++ b/hypha/static_src/sass/components/_reviews-list.scss @@ -15,7 +15,7 @@ } &:first-child { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); } } diff --git a/hypha/static_src/sass/components/_reviews-sidebar.scss b/hypha/static_src/sass/components/_reviews-sidebar.scss index fa4b30391e..28f235cff2 100644 --- a/hypha/static_src/sass/components/_reviews-sidebar.scss +++ b/hypha/static_src/sass/components/_reviews-sidebar.scss @@ -6,7 +6,7 @@ .reviews-sidebar { $root: &; margin-block-end: 20px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); &__decision { position: relative; @@ -30,7 +30,7 @@ &--decision { margin-block-end: 10px; - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); &:first-child { #{$root}__outcome { @@ -82,10 +82,6 @@ } } - &__date { - @include mixins.font-size(milli); - } - &__no-reviews { color: variables.$color--mid-grey; } diff --git a/hypha/static_src/sass/components/_round-block.scss b/hypha/static_src/sass/components/_round-block.scss index ef6d95d1e9..e9f0cfd87b 100644 --- a/hypha/static_src/sass/components/_round-block.scss +++ b/hypha/static_src/sass/components/_round-block.scss @@ -50,7 +50,7 @@ a { margin: 0; flex-basis: auto; - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); } } } @@ -58,7 +58,7 @@ &__view { margin: 0 0 0 auto; transition: color variables.$quick-transition; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); text-transform: uppercase; @include mixins.media-query(lg) { @@ -77,7 +77,7 @@ &__title { color: variables.$color--default; font-size: map.get(variables.$font-sizes, epsilon); - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); } &__not-found { diff --git a/hypha/static_src/sass/components/_select2.scss b/hypha/static_src/sass/components/_select2.scss index 4d121f27b7..c1278fceb1 100644 --- a/hypha/static_src/sass/components/_select2.scss +++ b/hypha/static_src/sass/components/_select2.scss @@ -15,12 +15,12 @@ width: 100% !important; .select2-selection--single { - height: variables.$dropdown-height; + height: var(--dropdown-height); border: 1px solid variables.$color--mid-grey; border-radius: 0; &.is-active { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); border-color: variables.$color--primary; } @@ -31,12 +31,12 @@ .select2-selection__rendered { padding-inline-start: 15px; padding-inline-end: 30px; - line-height: variables.$dropdown-height; + line-height: var(--dropdown-height); } .select2-selection__arrow { inset-inline-end: 15px; - height: variables.$dropdown-height; + height: var(--dropdown-height); pointer-events: none; background: url("./../images/dropdown.svg") transparent no-repeat 95% center; diff --git a/hypha/static_src/sass/components/_sidebar.scss b/hypha/static_src/sass/components/_sidebar.scss index 15eb00f1ca..b3b180b44d 100644 --- a/hypha/static_src/sass/components/_sidebar.scss +++ b/hypha/static_src/sass/components/_sidebar.scss @@ -55,7 +55,7 @@ &__separator { position: relative; font-size: 12px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); color: variables.$color--black-40; text-transform: uppercase; diff --git a/hypha/static_src/sass/components/_stat-block.scss b/hypha/static_src/sass/components/_stat-block.scss index d9577d1d05..b6ffa0d258 100644 --- a/hypha/static_src/sass/components/_stat-block.scss +++ b/hypha/static_src/sass/components/_stat-block.scss @@ -52,7 +52,7 @@ &__view { text-transform: uppercase; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); transition: opacity variables.$quick-transition; @include mixins.media-query(md) { diff --git a/hypha/static_src/sass/components/_status-bar.scss b/hypha/static_src/sass/components/_status-bar.scss index 00f5873e2e..6441bc62b9 100644 --- a/hypha/static_src/sass/components/_status-bar.scss +++ b/hypha/static_src/sass/components/_status-bar.scss @@ -42,7 +42,7 @@ &__text { font-size: map.get(variables.$font-sizes, milli); - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); } &__item { @@ -89,7 +89,7 @@ &::before { font-size: map.get(variables.$font-sizes, milli); - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); color: variables.$color--white; background: variables.$color--primary; border-color: variables.$color--primary; @@ -139,7 +139,7 @@ color: variables.$color--white; background-color: variables.$color--tomato; padding-inline: var(--tooltip-padding); - border-radius: variables.$rounded-sm; + border-radius: 0.125rem; } &::before { diff --git a/hypha/static_src/sass/components/_submission-meta.scss b/hypha/static_src/sass/components/_submission-meta.scss index 5b7f2fdd65..2e5fccc25f 100644 --- a/hypha/static_src/sass/components/_submission-meta.scss +++ b/hypha/static_src/sass/components/_submission-meta.scss @@ -11,7 +11,7 @@ display: inline-block; padding: 10px; font-size: 13px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); color: variables.$color--mid-dark-grey; text-align: center; background-color: transparent; diff --git a/hypha/static_src/sass/components/_table.scss b/hypha/static_src/sass/components/_table.scss index 9ada233f5b..b39d1b7531 100644 --- a/hypha/static_src/sass/components/_table.scss +++ b/hypha/static_src/sass/components/_table.scss @@ -103,7 +103,7 @@ &.title { a { - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); text-decoration: underline; } } diff --git a/hypha/static_src/sass/components/_tabs.scss b/hypha/static_src/sass/components/_tabs.scss index d756ca9739..ec8cb6d917 100644 --- a/hypha/static_src/sass/components/_tabs.scss +++ b/hypha/static_src/sass/components/_tabs.scss @@ -24,7 +24,7 @@ position: relative; padding: 10px; - font-weight: variables.$weight--bold; + font-weight: var(--weight-bold); hyphens: auto; color: variables.$color--mid-grey; text-transform: uppercase; @@ -55,7 +55,7 @@ &--alt { font-size: map.get(variables.$font-sizes, zeta); - font-weight: variables.$weight--semibold; + font-weight: var(--weight-semibold); padding: 0.5rem 1rem; text-transform: none; display: inline-block; diff --git a/hypha/static_src/sass/components/_tooltip.scss b/hypha/static_src/sass/components/_tooltip.scss index 2377d763ba..0015e72abc 100644 --- a/hypha/static_src/sass/components/_tooltip.scss +++ b/hypha/static_src/sass/components/_tooltip.scss @@ -13,7 +13,7 @@ visibility: hidden; opacity: 0; pointer-events: none; - transition: opacity, bottom, variables.$transition; + transition: opacity, bottom, var(--transition); position: absolute; inset-block-end: 110%; margin-block-end: 5px; diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss index 3260a6e8e9..362d00f3f2 100644 --- a/hypha/static_src/sass/components/_wrapper.scss +++ b/hypha/static_src/sass/components/_wrapper.scss @@ -17,7 +17,7 @@ } &--large { - max-width: variables.$site-width; + max-width: var(--site-width); margin-inline-start: auto; margin-inline-end: auto; } From 1afcc4fe95c16ad1e366e189893a73bdbcda03a9 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 15:15:44 +0100 Subject: [PATCH 02/18] Convert sass variable quick-transition in to css variables. --- hypha/static_src/sass/abstracts/_variables.scss | 4 ---- hypha/static_src/sass/components/_actions-bar.scss | 2 +- hypha/static_src/sass/components/_button.scss | 2 +- hypha/static_src/sass/components/_list-reveal.scss | 2 +- hypha/static_src/sass/components/_modal.scss | 2 +- hypha/static_src/sass/components/_round-block.scss | 4 ++-- hypha/static_src/sass/components/_stat-block.scss | 2 +- hypha/static_src/sass/components/_status-block.scss | 2 +- 8 files changed, 8 insertions(+), 12 deletions(-) diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index 636a4f6d84..6f0bac10ca 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -182,10 +182,6 @@ $breakpoints: ( "2xl" "(min-width: 1536px)" ); -// Transition -$transition: 0.25s ease-out; -$quick-transition: 0.15s ease; - // Spacing $mobile-gutter: 1.25rem; diff --git a/hypha/static_src/sass/components/_actions-bar.scss b/hypha/static_src/sass/components/_actions-bar.scss index cca8b354a3..bb14c42b6d 100644 --- a/hypha/static_src/sass/components/_actions-bar.scss +++ b/hypha/static_src/sass/components/_actions-bar.scss @@ -44,7 +44,7 @@ display: flex; opacity: 0; pointer-events: none; - transition: opacity variables.$quick-transition; + transition: opacity var(--quick-transition); .batch-actions-enabled & { opacity: 1; diff --git a/hypha/static_src/sass/components/_button.scss b/hypha/static_src/sass/components/_button.scss index 574ad0d5ac..13d1870ee8 100644 --- a/hypha/static_src/sass/components/_button.scss +++ b/hypha/static_src/sass/components/_button.scss @@ -271,7 +271,7 @@ text-align: center; text-transform: uppercase; border: 1px solid currentcolor; - transition: background-color, color, border, variables.$quick-transition; + transition: background-color, color, border, var(--quick-transition); @include mixins.media-query(md) { margin-block-start: 0; diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index de67b6de5c..ca04ce00a3 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -66,7 +66,7 @@ height: 20px; fill: variables.$color--dark-grey; opacity: 0; - transition: opacity variables.$quick-transition; + transition: opacity var(--quick-transition); pointer-events: none; #{$root}__item:hover & { diff --git a/hypha/static_src/sass/components/_modal.scss b/hypha/static_src/sass/components/_modal.scss index b8ffc27110..fa01123c83 100644 --- a/hypha/static_src/sass/components/_modal.scss +++ b/hypha/static_src/sass/components/_modal.scss @@ -78,7 +78,7 @@ height: 20px; fill: variables.$color--dark-grey; opacity: 0; - transition: opacity variables.$quick-transition; + transition: opacity var(--quick-transition); pointer-events: none; #{$root}__list-item:hover & { diff --git a/hypha/static_src/sass/components/_round-block.scss b/hypha/static_src/sass/components/_round-block.scss index e9f0cfd87b..78b9686214 100644 --- a/hypha/static_src/sass/components/_round-block.scss +++ b/hypha/static_src/sass/components/_round-block.scss @@ -15,7 +15,7 @@ border: 1px solid variables.$color--light-mid-grey; border-block-end: 0; padding: 25px; - transition: background-color variables.$quick-transition; + transition: background-color var(--quick-transition); min-height: 80px; &:last-child { @@ -57,7 +57,7 @@ &__view { margin: 0 0 0 auto; - transition: color variables.$quick-transition; + transition: color var(--quick-transition); font-weight: var(--weight-bold); text-transform: uppercase; diff --git a/hypha/static_src/sass/components/_stat-block.scss b/hypha/static_src/sass/components/_stat-block.scss index b6ffa0d258..cac11d8de3 100644 --- a/hypha/static_src/sass/components/_stat-block.scss +++ b/hypha/static_src/sass/components/_stat-block.scss @@ -53,7 +53,7 @@ &__view { text-transform: uppercase; font-weight: var(--weight-bold); - transition: opacity variables.$quick-transition; + transition: opacity var(--quick-transition); @include mixins.media-query(md) { position: absolute; diff --git a/hypha/static_src/sass/components/_status-block.scss b/hypha/static_src/sass/components/_status-block.scss index 456edef7c5..f97df3312a 100644 --- a/hypha/static_src/sass/components/_status-block.scss +++ b/hypha/static_src/sass/components/_status-block.scss @@ -15,7 +15,7 @@ padding: 10px 20px; border-block-end: 1px solid variables.$color--light-mid-grey; background-color: variables.$color--white; - transition: background-color variables.$quick-transition; + transition: background-color var(--quick-transition); @include mixins.media-query(lg) { border-block-end: 0; From 5c86d7be268b6c616681fc1e6524049934073f6e Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 15:27:08 +0100 Subject: [PATCH 03/18] Remove need for base-font-* and base-line-*. --- hypha/static_src/sass/abstracts/_variables.scss | 16 ---------------- .../static_src/sass/components/_data-block.scss | 2 +- hypha/static_src/sass/components/_feed.scss | 2 +- hypha/static_src/sass/components/_form.scss | 4 ---- hypha/static_src/sass/components/_rich-text.scss | 2 +- hypha/static_src/sass/components/_wrapper.scss | 4 ++-- 6 files changed, 5 insertions(+), 25 deletions(-) diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index 6f0bac10ca..57333f78ad 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -62,12 +62,6 @@ --weight-normal: 400; --weight-light: 200; - // Font sizes - --base-font-size: 16px; - --base-font-size-large: 18px; - --base-line-height: 24px; - --base-line-height-large: 28px; - // Wrappers --site-width: 1280px; --wrapper-medium: 1020px; @@ -150,9 +144,6 @@ $color--button-disabled: $color--lighter-blue; // Font sizes $base-font-size: 16px; -$base-font-size-large: 18px; -$base-line-height: 24px; -$base-line-height-large: 28px; $font-sizes: ( alpha: 36px, beta: 30px, @@ -163,13 +154,6 @@ $font-sizes: ( milli: 12px, ); -// Wrappers -$wrapper--medium: 1020px; -$wrapper--small: 790px; - -// Text line length -$max-text-line-length: 50em; - // The custom width of 465px allow the buttons to scale with the input field $input-box-max-width: 465px; diff --git a/hypha/static_src/sass/components/_data-block.scss b/hypha/static_src/sass/components/_data-block.scss index 5834c5d169..693393e381 100644 --- a/hypha/static_src/sass/components/_data-block.scss +++ b/hypha/static_src/sass/components/_data-block.scss @@ -28,7 +28,7 @@ } &__title { - font-size: variables.$base-font-size-large; + font-size: map.get(variables.$font-sizes, epsilon); font-weight: var(--weight-bold); margin: 0 0 1rem; diff --git a/hypha/static_src/sass/components/_feed.scss b/hypha/static_src/sass/components/_feed.scss index 42aae53afc..3f3b368df1 100644 --- a/hypha/static_src/sass/components/_feed.scss +++ b/hypha/static_src/sass/components/_feed.scss @@ -152,7 +152,7 @@ &__comment { word-break: break-word; - max-width: variables.$max-text-line-length; + max-width: var(--max-text-line-length); } &__related-item { diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss index ee23cd77ea..7e24edc4de 100644 --- a/hypha/static_src/sass/components/_form.scss +++ b/hypha/static_src/sass/components/_form.scss @@ -447,10 +447,6 @@ width: 100%; padding: 0.4em; border: 1px solid variables.$color--mid-grey; - line-height: math.div( - variables.$base-line-height, - variables.$base-font-size - ); } .wmd-preview { diff --git a/hypha/static_src/sass/components/_rich-text.scss b/hypha/static_src/sass/components/_rich-text.scss index c86e491923..354b89a6ee 100644 --- a/hypha/static_src/sass/components/_rich-text.scss +++ b/hypha/static_src/sass/components/_rich-text.scss @@ -3,7 +3,7 @@ .rich-text { margin-block-end: 2rem; word-break: break-word; - max-width: variables.$max-text-line-length; + max-width: var(--max-text-line-length); &--answers { > section { diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss index 362d00f3f2..79d81425a7 100644 --- a/hypha/static_src/sass/components/_wrapper.scss +++ b/hypha/static_src/sass/components/_wrapper.scss @@ -5,13 +5,13 @@ width: 100%; &--small { - max-width: variables.$wrapper--small; + max-width: var(--wrapper-small); margin-inline-start: auto; margin-inline-end: auto; } &--medium { - max-width: variables.$wrapper--medium; + max-width: var(--wrapper-medium); margin-inline-start: auto; margin-inline-end: auto; } From b7fda1f918af5526b17247909f96e58d8741d998 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 15:29:20 +0100 Subject: [PATCH 04/18] Remove unused colours. --- hypha/static_src/sass/abstracts/_variables.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index 57333f78ad..5c31940ae7 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -33,7 +33,6 @@ --color-green: #7dc558; --color-pastel-red: #f1a9a9; --color-pastel-green: #afe6af; - --color-fog: #eff2f5; // Transparent --color-black-60: rgba(0, 0, 0, 0.6); @@ -115,12 +114,6 @@ $color--mist: #f3fafe; $color--green: #7dc558; $color--pastel-red: #f1a9a9; $color--pastel-green: #afe6af; -$color--fog: #eff2f5; - -// Social -$color--twitter: #1da6f6; -$color--linkedin: #137ab8; -$color--facebook: #396ab5; // Transparent $color--black-60: rgba(0, 0, 0, 0.6); From fd9db79a307d826fffed169f1eea21d568ca3c72 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 15:41:37 +0100 Subject: [PATCH 05/18] Redo gutters and font-size. --- hypha/static_src/sass/abstracts/_mixins.scss | 1 - .../static_src/sass/abstracts/_variables.scss | 22 ++++++++----------- .../sass/components/_admin-bar.scss | 4 ++-- hypha/static_src/sass/components/_button.scss | 5 ++--- .../sass/components/_data-block.scss | 9 ++++---- hypha/static_src/sass/components/_feed.scss | 5 ++--- .../sass/components/_list-reveal.scss | 7 +++--- hypha/static_src/sass/components/_modal.scss | 3 +-- .../sass/components/_round-block.scss | 3 +-- .../sass/components/_status-bar.scss | 5 ++--- hypha/static_src/sass/components/_tabs.scss | 3 +-- .../static_src/sass/components/_wrapper.scss | 2 +- hypha/static_src/sass/layout/_header.scss | 6 ++--- 13 files changed, 31 insertions(+), 44 deletions(-) diff --git a/hypha/static_src/sass/abstracts/_mixins.scss b/hypha/static_src/sass/abstracts/_mixins.scss index 13acd5b61b..e2ae446475 100644 --- a/hypha/static_src/sass/abstracts/_mixins.scss +++ b/hypha/static_src/sass/abstracts/_mixins.scss @@ -1,5 +1,4 @@ @use "sass:list"; -@use "sass:map"; @use "functions"; @use "variables"; diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index 5c31940ae7..9372514c14 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -54,6 +54,15 @@ --color-correct: var(--color-mint); --color-button-disabled: var(--color-lighter-blue); + // Font sizes + --font-size-alpha: 36px; + --font-size-beta: 30px; + --font-size-gamma: 28px; + --font-size-delta: 24px; + --font-size-epsilon: 18px; + --font-size-zeta: 14px; + --font-size-milli: 12px; + // Font weights --weight-black: 800; --weight-bold: 700; @@ -74,7 +83,6 @@ --quick-transition: 0.15s ease; // Spacing - --mobile-gutter: 1.25rem; --gutters: calc(5px + 1.5625vw); --gutters-reverse: calc(0px - (5px + 1.5625vw)); @@ -137,15 +145,6 @@ $color--button-disabled: $color--lighter-blue; // Font sizes $base-font-size: 16px; -$font-sizes: ( - alpha: 36px, - beta: 30px, - gamma: 28px, - delta: 24px, - epsilon: 18px, - zeta: 14px, - milli: 12px, -); // The custom width of 465px allow the buttons to scale with the input field $input-box-max-width: 465px; @@ -159,8 +158,5 @@ $breakpoints: ( "2xl" "(min-width: 1536px)" ); -// Spacing -$mobile-gutter: 1.25rem; - // Filters $filter-dropdown: ".select2 .select2-selection.select2-selection--single"; diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss index ab4eda02a2..145579b872 100644 --- a/hypha/static_src/sass/components/_admin-bar.scss +++ b/hypha/static_src/sass/components/_admin-bar.scss @@ -3,8 +3,8 @@ .admin-bar { position: relative; - padding: variables.$mobile-gutter; - margin-inline: calc(0px - variables.$mobile-gutter); + padding: var(--gutters); + margin-inline: var(--gutters-reverse); color: variables.$color--white; background-color: variables.$color--dark-grey; diff --git a/hypha/static_src/sass/components/_button.scss b/hypha/static_src/sass/components/_button.scss index 13d1870ee8..0cc820679b 100644 --- a/hypha/static_src/sass/components/_button.scss +++ b/hypha/static_src/sass/components/_button.scss @@ -1,4 +1,3 @@ -@use "sass:map"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -411,7 +410,7 @@ position: absolute; inset-block-start: 4px; padding-inline-start: 5px; - font-size: map.get(variables.$font-sizes, delta); + font-size: var(--font-size-delta); line-height: 1; } } @@ -437,7 +436,7 @@ &::after { inset-block-start: 2px; padding-inline-start: 3px; - font-size: map.get(variables.$font-sizes, zeta); + font-size: var(--font-size-zeta); } } } diff --git a/hypha/static_src/sass/components/_data-block.scss b/hypha/static_src/sass/components/_data-block.scss index 693393e381..b5227a9b86 100644 --- a/hypha/static_src/sass/components/_data-block.scss +++ b/hypha/static_src/sass/components/_data-block.scss @@ -1,4 +1,3 @@ -@use "sass:map"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -28,7 +27,7 @@ } &__title { - font-size: map.get(variables.$font-sizes, epsilon); + font-size: var(--font-size-epsilon); font-weight: var(--weight-bold); margin: 0 0 1rem; @@ -114,7 +113,7 @@ } tbody { - font-size: map.get(variables.$font-sizes, zeta); + font-size: var(--font-size-zeta); } tr { @@ -152,7 +151,7 @@ } &__action-link { - font-size: map.get(variables.$font-sizes, zeta); + font-size: var(--font-size-zeta); font-weight: var(--weight-bold); display: inline-block; margin-inline-end: 1rem; @@ -172,7 +171,7 @@ } &__action-icon-link { - font-size: map.get(variables.$font-sizes, zeta); + font-size: var(--font-size-zeta); font-weight: var(--weight-bold); display: flex; align-items: center; diff --git a/hypha/static_src/sass/components/_feed.scss b/hypha/static_src/sass/components/_feed.scss index 3f3b368df1..3a5b193fb0 100644 --- a/hypha/static_src/sass/components/_feed.scss +++ b/hypha/static_src/sass/components/_feed.scss @@ -1,4 +1,3 @@ -@use "sass:map"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @use "../base/typography"; @@ -125,7 +124,7 @@ &--progress { width: 100%; margin: 5px 0 0; - font-size: map.get(variables.$font-sizes, milli); + font-size: var(--font-size-milli); color: variables.$color--black-50; @include mixins.media-query(sm) { @@ -178,7 +177,7 @@ &__heading-status { padding: 3px 10px; - font-size: map.get(variables.$font-sizes, milli); + font-size: var(--font-size-milli); font-weight: var(--weight-bold); color: variables.$color--marine; text-align: center; diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index ca04ce00a3..de341ff87f 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -1,4 +1,3 @@ -@use "sass:map"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -7,7 +6,7 @@ &--determination { background-color: variables.$color--white; - margin-block-end: variables.$mobile-gutter; + margin-block-end: var(--gutters); @include mixins.media-query(md) { max-width: 70%; @@ -16,7 +15,7 @@ &__item { display: block; - font-size: map.get(variables.$font-sizes, zeta); + font-size: var(--font-size-zeta); padding: 0.75em 1em; border-block-end: 2px solid variables.$color--light-mid-grey; margin: 0; @@ -39,7 +38,7 @@ &__list { max-height: 200px; overflow: scroll; - margin: 0 -24px variables.$mobile-gutter; + margin: 0 -24px var(--gutters); padding: 0; border-block-end: 2px solid variables.$color--light-mid-grey; box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; diff --git a/hypha/static_src/sass/components/_modal.scss b/hypha/static_src/sass/components/_modal.scss index fa01123c83..97e3aebc28 100644 --- a/hypha/static_src/sass/components/_modal.scss +++ b/hypha/static_src/sass/components/_modal.scss @@ -1,4 +1,3 @@ -@use "sass:map"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -54,7 +53,7 @@ &__list-item { display: block; - font-size: map.get(variables.$font-sizes, zeta); + font-size: var(--font-size-zeta); padding: 12px 28px; border-block-end: 2px solid variables.$color--light-mid-grey; margin: 0; diff --git a/hypha/static_src/sass/components/_round-block.scss b/hypha/static_src/sass/components/_round-block.scss index 78b9686214..1c69a60014 100644 --- a/hypha/static_src/sass/components/_round-block.scss +++ b/hypha/static_src/sass/components/_round-block.scss @@ -1,4 +1,3 @@ -@use "sass:map"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -76,7 +75,7 @@ &__title { color: variables.$color--default; - font-size: map.get(variables.$font-sizes, epsilon); + font-size: var(--font-size-epsilon); font-weight: var(--weight-semibold); } diff --git a/hypha/static_src/sass/components/_status-bar.scss b/hypha/static_src/sass/components/_status-bar.scss index 6441bc62b9..244cb9a9a0 100644 --- a/hypha/static_src/sass/components/_status-bar.scss +++ b/hypha/static_src/sass/components/_status-bar.scss @@ -1,4 +1,3 @@ -@use "sass:map"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -41,7 +40,7 @@ } &__text { - font-size: map.get(variables.$font-sizes, milli); + font-size: var(--font-size-milli); font-weight: var(--weight-bold); } @@ -88,7 +87,7 @@ border-color: variables.$color--primary; &::before { - font-size: map.get(variables.$font-sizes, milli); + font-size: var(--font-size-milli); font-weight: var(--weight-bold); color: variables.$color--white; background: variables.$color--primary; diff --git a/hypha/static_src/sass/components/_tabs.scss b/hypha/static_src/sass/components/_tabs.scss index ec8cb6d917..2930f782f0 100644 --- a/hypha/static_src/sass/components/_tabs.scss +++ b/hypha/static_src/sass/components/_tabs.scss @@ -1,4 +1,3 @@ -@use "sass:map"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -54,7 +53,7 @@ } &--alt { - font-size: map.get(variables.$font-sizes, zeta); + font-size: var(--font-size-zeta); font-weight: var(--weight-semibold); padding: 0.5rem 1rem; text-transform: none; diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss index 79d81425a7..73330eec65 100644 --- a/hypha/static_src/sass/components/_wrapper.scss +++ b/hypha/static_src/sass/components/_wrapper.scss @@ -23,7 +23,7 @@ } &--main { - padding: 0 variables.$mobile-gutter; + padding: 0 var(--gutters); min-height: calc(100vh - 260px - 160px); // viewport - (header + footer) @include mixins.media-query(xl) { diff --git a/hypha/static_src/sass/layout/_header.scss b/hypha/static_src/sass/layout/_header.scss index 1a712b9eca..12b15bbc93 100644 --- a/hypha/static_src/sass/layout/_header.scss +++ b/hypha/static_src/sass/layout/_header.scss @@ -2,12 +2,12 @@ @use "../abstracts/variables"; .header { - padding: variables.$mobile-gutter; + padding: var(--gutters); background-color: var(--color-header-bg); border-block-end: 1px solid rgb(136 146 171 / 10%); @include mixins.media-query(md) { - padding: 0 variables.$mobile-gutter; + padding: 0 var(--gutters); } @include mixins.media-query(xl) { @@ -15,7 +15,7 @@ } &--nomenu { - padding-block: variables.$mobile-gutter; + padding-block: var(--gutters); } &__inner { From 0a6917470d353e8e8560a8798078c0595b75dbd8 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 17:42:16 +0100 Subject: [PATCH 06/18] Remove most use of color.adjust(). --- .../application_projects/includes/report_line.html | 2 +- .../application_projects/partials/invoice_status_table.html | 2 +- hypha/static_src/sass/abstracts/_mixins.scss | 6 +++--- hypha/static_src/sass/abstracts/_variables.scss | 4 ++++ .../static_src/sass/components/_all-submissions-table.scss | 5 ----- hypha/static_src/sass/components/_data-block.scss | 4 ---- hypha/static_src/sass/components/_form.scss | 6 +----- hypha/static_src/sass/components/_heading.scss | 5 ++--- hypha/static_src/sass/components/_messages.scss | 5 ++--- hypha/static_src/sass/components/_select2.scss | 6 +----- 10 files changed, 15 insertions(+), 30 deletions(-) diff --git a/hypha/apply/projects/templates/application_projects/includes/report_line.html b/hypha/apply/projects/templates/application_projects/includes/report_line.html index 4429166301..8a63accf33 100644 --- a/hypha/apply/projects/templates/application_projects/includes/report_line.html +++ b/hypha/apply/projects/templates/application_projects/includes/report_line.html @@ -15,7 +15,7 @@
{% if report.can_submit %} {% if report.draft %}{% trans "Continue Editing" %}{% else %}{% trans "Add Report" %}{% endif %} diff --git a/hypha/apply/projects/templates/application_projects/partials/invoice_status_table.html b/hypha/apply/projects/templates/application_projects/partials/invoice_status_table.html index 6a9f192f60..b281b4a420 100644 --- a/hypha/apply/projects/templates/application_projects/partials/invoice_status_table.html +++ b/hypha/apply/projects/templates/application_projects/partials/invoice_status_table.html @@ -30,7 +30,7 @@ {% endif %} {% can_change_status invoice user as can_change_invoice_status %} {% if can_change_invoice_status %} - {% endif %} diff --git a/hypha/static_src/sass/abstracts/_mixins.scss b/hypha/static_src/sass/abstracts/_mixins.scss index e2ae446475..41ce4b0608 100644 --- a/hypha/static_src/sass/abstracts/_mixins.scss +++ b/hypha/static_src/sass/abstracts/_mixins.scss @@ -26,10 +26,10 @@ @mixin button($bg, $hover-bg) { padding: 0.5em 2rem; font-weight: var(--weight-bold); - color: var(--color-white); + color: variables.$color--white; text-align: center; background: $bg; - border: 1px solid var(--color-white); + border: 1px solid variables.$color--white; transition: color, background, border, var(--transition); display: flex; align-items: center; @@ -124,7 +124,7 @@ &.desc, &.asc { position: relative; - color: var(--color-dark-grey); + color: variables.$color--dark-grey; &::after { position: absolute; diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index 9372514c14..fc8b77ddf5 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -19,10 +19,12 @@ --color-darkest-blue: #3d6bdb; --color-mustard: #e6ab32; --color-purple: #8c0bbf; + --color-dark-pink: #511034; --color-pink: #d02a85; --color-light-pink: #ffe1df; --color-light-green: #e1fae1; --color-cream: #f5f7e7; + --color-dark-tomato: #cc1e12; --color-tomato: #f05e54; --color-mint: #40c2ad; --color-grass: #7dc588; @@ -108,10 +110,12 @@ $color--dark-blue: #0c72a0; $color--darkest-blue: #3d6bdb; $color--mustard: #e6ab32; $color--purple: #8c0bbf; +$color--dark-pink: #511034; $color--pink: #d02a85; $color--light-pink: #ffe1df; $color--light-green: #e1fae1; $color--cream: #f5f7e7; +$color--dark-tomato: #cc1e12; $color--tomato: #f05e54; $color--mint: #40c2ad; $color--grass: #7dc588; diff --git a/hypha/static_src/sass/components/_all-submissions-table.scss b/hypha/static_src/sass/components/_all-submissions-table.scss index 29e717bafc..811649ecb2 100644 --- a/hypha/static_src/sass/components/_all-submissions-table.scss +++ b/hypha/static_src/sass/components/_all-submissions-table.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -210,10 +209,6 @@ } .arrow { - border-right-color: color.adjust( - variables.$color--dark-blue, - $lightness: -10% - ); transform: rotate(90deg); } } diff --git a/hypha/static_src/sass/components/_data-block.scss b/hypha/static_src/sass/components/_data-block.scss index b5227a9b86..dceb889b0e 100644 --- a/hypha/static_src/sass/components/_data-block.scss +++ b/hypha/static_src/sass/components/_data-block.scss @@ -37,10 +37,6 @@ } &__button { - @include mixins.button( - variables.$color--light-blue, - variables.$color--dark-blue - ); display: inline-block; padding: 0.5rem 1.2rem; diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss index 7e24edc4de..d87cc83e48 100644 --- a/hypha/static_src/sass/components/_form.scss +++ b/hypha/static_src/sass/components/_form.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/base"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -167,10 +166,7 @@ &.is-active { font-weight: var(--weight-normal); - background-color: color.adjust( - variables.$color--primary, - $alpha: -0.9 - ); + background-color: variables.$color--light-blue-90; border-color: variables.$color--mid-grey; } diff --git a/hypha/static_src/sass/components/_heading.scss b/hypha/static_src/sass/components/_heading.scss index a528aea86c..e9c80aecea 100644 --- a/hypha/static_src/sass/components/_heading.scss +++ b/hypha/static_src/sass/components/_heading.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -32,7 +31,7 @@ flex-direction: column; margin-block-start: 20px; font-weight: var(--weight-normal); - color: color.adjust(variables.$color--dark-grey, $alpha: -0.5); + color: variables.$color--black-40; @include mixins.media-query(lg) { flex-direction: row; @@ -49,7 +48,7 @@ } &--light-grey { - color: color.adjust(variables.$color--dark-grey, $alpha: -0.5); + color: variables.$color--black-40; } &--uppercase { diff --git a/hypha/static_src/sass/components/_messages.scss b/hypha/static_src/sass/components/_messages.scss index 4c1a0d58f3..c226922a1f 100644 --- a/hypha/static_src/sass/components/_messages.scss +++ b/hypha/static_src/sass/components/_messages.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -43,11 +42,11 @@ &--error, &--warning { - background: color.adjust(variables.$color--error, $lightness: -20%); + background: variables.$color--dark-tomato; } &--debug { - background: color.adjust(variables.$color--pink, $lightness: -30%); + background: variables.$color--dark-pink; } } diff --git a/hypha/static_src/sass/components/_select2.scss b/hypha/static_src/sass/components/_select2.scss index c1278fceb1..fd7468618a 100644 --- a/hypha/static_src/sass/components/_select2.scss +++ b/hypha/static_src/sass/components/_select2.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../abstracts/mixins"; @use "../abstracts/variables"; @@ -62,10 +61,7 @@ // stylelint-disable-next-line declaration-no-important color: variables.$color--default !important; // stylelint-disable declaration-no-important, max-line-length - background-color: color.adjust( - variables.$color--primary, - $alpha: -0.9 - ) !important; + background-color: variables.$color--light-blue-90 !important; } } From 1a2f337eb82d81ba13200a8a47a6c1a6147f3a90 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 18:20:19 +0100 Subject: [PATCH 07/18] Use css var colours. --- hypha/static_src/sass/abstracts/_mixins.scss | 6 +- .../static_src/sass/abstracts/_variables.scss | 55 ------- hypha/static_src/sass/base/_base.scss | 5 +- .../sass/components/_actions-bar.scss | 5 +- .../components/_activity-notifications.scss | 4 +- .../sass/components/_admin-bar.scss | 7 +- hypha/static_src/sass/components/_alert.scss | 8 +- .../sass/components/_all-reviews-table.scss | 3 +- .../components/_all-submissions-table.scss | 37 ++--- hypha/static_src/sass/components/_button.scss | 138 +++++++----------- hypha/static_src/sass/components/_card.scss | 5 +- .../sass/components/_cookieconsent.scss | 7 +- .../sass/components/_dashboard-table.scss | 5 +- .../sass/components/_data-block.scss | 23 ++- .../sass/components/_docs-block.scss | 15 +- .../static_src/sass/components/_dropdown.scss | 10 +- hypha/static_src/sass/components/_editor.scss | 12 +- hypha/static_src/sass/components/_feed.scss | 31 ++-- .../static_src/sass/components/_filters.scss | 7 +- hypha/static_src/sass/components/_form.scss | 53 ++++--- .../static_src/sass/components/_heading.scss | 5 +- .../sass/components/_invoice-block.scss | 3 +- .../sass/components/_list-reveal.scss | 21 ++- hypha/static_src/sass/components/_list.scss | 19 +-- .../static_src/sass/components/_messages.scss | 19 ++- hypha/static_src/sass/components/_modal.scss | 21 ++- hypha/static_src/sass/components/_nav.scss | 7 +- .../sass/components/_nprogress.scss | 12 +- .../sass/components/_pagination.scss | 11 +- .../sass/components/_projects-table.scss | 7 +- .../sass/components/_reviews-list.scss | 8 +- .../sass/components/_reviews-sidebar.scss | 29 ++-- .../sass/components/_reviews-summary.scss | 3 +- .../sass/components/_revisions.scss | 6 +- .../sass/components/_rich-text.scss | 8 +- .../sass/components/_round-block.scss | 21 ++- .../static_src/sass/components/_select2.scss | 25 ++-- .../static_src/sass/components/_sidebar.scss | 13 +- .../sass/components/_stat-block.scss | 5 +- .../sass/components/_status-bar.scss | 39 +++-- .../sass/components/_status-block.scss | 13 +- .../sass/components/_submission-meta.scss | 10 +- hypha/static_src/sass/components/_table.scss | 17 +-- hypha/static_src/sass/components/_tabs.scss | 15 +- .../static_src/sass/components/_tooltip.scss | 6 +- .../sass/components/_traffic-light.scss | 8 +- .../static_src/sass/components/_wrapper.scss | 15 +- hypha/static_src/sass/custom/_extra.scss | 1 - hypha/static_src/sass/layout/_header.scss | 1 - hypha/static_src/sass/main.scss | 8 - 50 files changed, 324 insertions(+), 488 deletions(-) delete mode 100644 hypha/static_src/sass/custom/_extra.scss diff --git a/hypha/static_src/sass/abstracts/_mixins.scss b/hypha/static_src/sass/abstracts/_mixins.scss index 41ce4b0608..e2ae446475 100644 --- a/hypha/static_src/sass/abstracts/_mixins.scss +++ b/hypha/static_src/sass/abstracts/_mixins.scss @@ -26,10 +26,10 @@ @mixin button($bg, $hover-bg) { padding: 0.5em 2rem; font-weight: var(--weight-bold); - color: variables.$color--white; + color: var(--color-white); text-align: center; background: $bg; - border: 1px solid variables.$color--white; + border: 1px solid var(--color-white); transition: color, background, border, var(--transition); display: flex; align-items: center; @@ -124,7 +124,7 @@ &.desc, &.asc { position: relative; - color: variables.$color--dark-grey; + color: var(--color-dark-grey); &::after { position: absolute; diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index fc8b77ddf5..4c38629240 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -92,61 +92,6 @@ --dropdown-height: 45px; } -// Default -$color--white: #fff; -$color--black: #1f2328; -$color--light-grey: #f7f7f7; -$color--light-mid-grey: #e8e8e8; -$color--mid-grey: #cfcfcf; -$color--mid-dark-grey: #919191; -$color--dark-grey: #404041; - -// Brand -$color--lightest-blue: #24aae1; -$color--light-blue: #1d79a8; -$color--light-blue-90: color.adjust($color--light-blue, $alpha: -0.9); -$color--lighter-blue: #7ab8d4; -$color--dark-blue: #0c72a0; -$color--darkest-blue: #3d6bdb; -$color--mustard: #e6ab32; -$color--purple: #8c0bbf; -$color--dark-pink: #511034; -$color--pink: #d02a85; -$color--light-pink: #ffe1df; -$color--light-green: #e1fae1; -$color--cream: #f5f7e7; -$color--dark-tomato: #cc1e12; -$color--tomato: #f05e54; -$color--mint: #40c2ad; -$color--grass: #7dc588; -$color--ocean: #1888b1; -$color--sky-blue: #e7f2f6; -$color--marine: #14729a; -$color--mist: #f3fafe; -$color--green: #7dc558; -$color--pastel-red: #f1a9a9; -$color--pastel-green: #afe6af; - -// Transparent -$color--black-60: rgba(0, 0, 0, 0.6); -$color--black-50: rgba(0, 0, 0, 0.5); -$color--black-40: rgba(0, 0, 0, 0.4); -$color--black-25: rgba(0, 0, 0, 0.25); -$color--black-20: rgba(0, 0, 0, 0.2); -$color--black-10: rgba(0, 0, 0, 0.1); -$color--white-50: rgba(255, 255, 255, 0.5); -$color--white-40: rgba(255, 255, 255, 0.4); -$color--white-25: rgba(255, 255, 255, 0.25); -$color--white-20: rgba(255, 255, 255, 0.2); -$color--white-10: rgba(255, 255, 255, 0.1); - -// Assignment -$color--default: $color--black; -$color--primary: $color--light-blue; -$color--error: $color--tomato; -$color--correct: $color--mint; -$color--button-disabled: $color--lighter-blue; - // Font sizes $base-font-size: 16px; diff --git a/hypha/static_src/sass/base/_base.scss b/hypha/static_src/sass/base/_base.scss index 428b141c2d..1c4a4ef91d 100644 --- a/hypha/static_src/sass/base/_base.scss +++ b/hypha/static_src/sass/base/_base.scss @@ -1,6 +1,3 @@ -@use "../abstracts/variables"; - -// stylelint-disable property-no-vendor-prefix body { overflow-x: hidden; @@ -16,7 +13,7 @@ svg { } a { - color: variables.$color--primary; + color: var(--color-primary); text-decoration: none; &:hover { diff --git a/hypha/static_src/sass/components/_actions-bar.scss b/hypha/static_src/sass/components/_actions-bar.scss index bb14c42b6d..cf21fb7eec 100644 --- a/hypha/static_src/sass/components/_actions-bar.scss +++ b/hypha/static_src/sass/components/_actions-bar.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .actions-bar { width: 100%; @@ -55,8 +54,8 @@ } &__total { - background-color: variables.$color--light-blue; - color: variables.$color--white; + background-color: var(--color-light-blue); + color: var(--color-white); padding: 6px 16px; border-radius: 30px; min-width: 120px; diff --git a/hypha/static_src/sass/components/_activity-notifications.scss b/hypha/static_src/sass/components/_activity-notifications.scss index ec94fb239e..88acad898a 100644 --- a/hypha/static_src/sass/components/_activity-notifications.scss +++ b/hypha/static_src/sass/components/_activity-notifications.scss @@ -1,10 +1,8 @@ -@use "../abstracts/variables"; - .notifications { &__item { margin: 0; padding: 0.75rem 1rem; - border-block-end: 1px solid variables.$color--light-grey; + border-block-end: 1px solid var(--color-light-grey); &:last-child { margin-block-end: 0; diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss index 145579b872..631d50eac9 100644 --- a/hypha/static_src/sass/components/_admin-bar.scss +++ b/hypha/static_src/sass/components/_admin-bar.scss @@ -1,12 +1,11 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .admin-bar { position: relative; padding: var(--gutters); margin-inline: var(--gutters-reverse); - color: variables.$color--white; - background-color: variables.$color--dark-grey; + color: var(--color-white); + background-color: var(--color-dark-grey); @include mixins.media-query(xl) { padding-inline: 0; @@ -42,7 +41,7 @@ &__back-link { display: inline-flex; align-items: center; - color: variables.$color--lightest-blue; + color: var(--color-lightest-blue); font-weight: var(--weight-bold); &::before { diff --git a/hypha/static_src/sass/components/_alert.scss b/hypha/static_src/sass/components/_alert.scss index b23fcb51e7..01ad40dbe2 100644 --- a/hypha/static_src/sass/components/_alert.scss +++ b/hypha/static_src/sass/components/_alert.scss @@ -1,17 +1,15 @@ -@use "../abstracts/variables"; - .alert { - border: 2px solid variables.$color--lighter-blue; + border: 2px solid var(--color-lighter-blue); padding: 1rem; margin: 0 0 2rem; - background-color: variables.$color--light-blue-90; + background-color: var(--color-light-blue-90); display: flex; align-items: center; &__icon { width: 25px; height: 25px; - fill: variables.$color--light-blue; + fill: var(--color-light-blue); margin-inline-end: 0.8rem; } diff --git a/hypha/static_src/sass/components/_all-reviews-table.scss b/hypha/static_src/sass/components/_all-reviews-table.scss index 12d216acc2..47db6e0f94 100644 --- a/hypha/static_src/sass/components/_all-reviews-table.scss +++ b/hypha/static_src/sass/components/_all-reviews-table.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors @@ -41,7 +40,7 @@ } a { - color: variables.$color--primary; + color: var(--color-primary); } } } diff --git a/hypha/static_src/sass/components/_all-submissions-table.scss b/hypha/static_src/sass/components/_all-submissions-table.scss index 811649ecb2..d251da783f 100644 --- a/hypha/static_src/sass/components/_all-submissions-table.scss +++ b/hypha/static_src/sass/components/_all-submissions-table.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; // stylelint-disable selector-class-pattern,selector-max-compound-selectors @@ -18,7 +17,7 @@ th { &.reviews_stats { - color: variables.$color--black-60; + color: var(--color-black-60); div { font-size: 0.75rem; @@ -74,7 +73,7 @@ tbody { tr { &[data-archived="True"] { - background-color: variables.$color--light-mid-grey; + background-color: var(--color-light-mid-grey); } } @@ -102,9 +101,9 @@ padding: 5px; font-size: 13px; font-weight: var(--weight-bold); - color: variables.$color--marine; + color: var(--color-marine); text-align: center; - background-color: variables.$color--sky-blue; + background-color: var(--color-sky-blue); @include mixins.media-query(lg) { width: 100%; @@ -161,11 +160,7 @@ // arrow to toggle project info - added via js @include mixins.media-query(lg) { .arrow { - @include mixins.triangle( - right, - variables.$color--primary, - 6px - ); + @include mixins.triangle(right, var(--color-primary), 6px); position: relative; display: inline-block; transform: rotate(0); @@ -196,11 +191,11 @@ &__parent { &.is-expanded { - background-color: variables.$color--mist; - border-block-end: 1px solid variables.$color--light-mid-grey; + background-color: var(--color-mist); + border-block-end: 1px solid var(--color-light-mid-grey); + #{$root}__child { - border-block-end: 1px solid variables.$color--light-mid-grey; + border-block-end: 1px solid var(--color-light-mid-grey); } + #{$root}__child, @@ -216,11 +211,11 @@ &__child { display: none; - color: variables.$color--mid-dark-grey; + color: var(--color-mid-dark-grey); vertical-align: top; - background-color: variables.$color--mist; + background-color: var(--color-mist); border: 0; - border-block-end: 2px solid variables.$color--light-grey; + border-block-end: 2px solid var(--color-light-grey); &:hover { box-shadow: none; @@ -233,7 +228,7 @@ p { margin: 0; font-weight: var(--weight-bold); - color: variables.$color--default; + color: var(--color-default); } .title { @@ -263,12 +258,12 @@ &__more { display: flex; justify-content: center; - background-color: variables.$color--white; + background-color: var(--color-white); padding: 20px 25px; min-height: auto; - border-block-end: 1px solid variables.$color--light-mid-grey; - border-inline-start: 1px solid variables.$color--light-mid-grey; - border-inline-end: 1px solid variables.$color--light-mid-grey; + border-block-end: 1px solid var(--color-light-mid-grey); + border-inline-start: 1px solid var(--color-light-mid-grey); + border-inline-end: 1px solid var(--color-light-mid-grey); a { margin: 0; diff --git a/hypha/static_src/sass/components/_button.scss b/hypha/static_src/sass/components/_button.scss index 0cc820679b..ff8a8bc4f4 100644 --- a/hypha/static_src/sass/components/_button.scss +++ b/hypha/static_src/sass/components/_button.scss @@ -21,12 +21,9 @@ } &--primary { - @include mixins.button( - variables.$color--light-blue, - variables.$color--dark-blue - ); + @include mixins.button(var(--color-light-blue), var(--color-dark-blue)); display: inline-block; - border: 1px solid variables.$color--light-blue; + border: 1px solid var(--color-light-blue); .form--filters & { width: 100%; @@ -36,27 +33,21 @@ } &--project-action { - @include mixins.button( - variables.$color--light-blue, - variables.$color--dark-blue - ); + @include mixins.button(var(--color-light-blue), var(--color-dark-blue)); display: inline-block; padding: 0.5rem 1.2rem; &--white { - @include mixins.button( - variables.$color--white, - variables.$color--light-blue - ); + @include mixins.button(var(--color-white), var(--color-light-blue)); display: inline-block; - color: variables.$color--light-blue; - border: 1px solid variables.$color--mid-grey; + color: var(--color-light-blue); + border: 1px solid var(--color-mid-grey); padding: 0.5rem 1.2rem; &:active, &:focus, &:hover { - color: variables.$color--white; + color: var(--color-white); } } } @@ -69,20 +60,20 @@ } &--transparent { - @include mixins.button(transparent, variables.$color--black); - color: variables.$color--black; - border: 1px solid variables.$color--black; + @include mixins.button(transparent, var(--color-black)); + color: var(--color-black); + border: 1px solid var(--color-black); &:active, &:focus, &:hover { - color: variables.$color--white; + color: var(--color-white); } } &--mobile-standout { - color: variables.$color--white; - border-color: variables.$color--white; + color: var(--color-white); + border-color: var(--color-white); max-width: 250px; margin: 1rem auto 0; @@ -92,59 +83,50 @@ } &--cookieconsent { - @include mixins.button(transparent, variables.$color--white); + @include mixins.button(transparent, var(--color-white)); display: inline; &:focus, &:hover { - color: variables.$color--dark-blue; + color: var(--color-dark-blue); } } &--secondary, &--white { - @include mixins.button( - variables.$color--white, - variables.$color--light-blue - ); + @include mixins.button(var(--color-white), var(--color-light-blue)); display: inline-block; - color: variables.$color--light-blue; - border: 1px solid variables.$color--mid-grey; + color: var(--color-light-blue); + border: 1px solid var(--color-mid-grey); &:active, &:focus, &:hover { - color: variables.$color--white; + color: var(--color-white); } } &--blue-white { - @include mixins.button( - variables.$color--white, - variables.$color--light-blue - ); + @include mixins.button(var(--color-white), var(--color-light-blue)); display: inline-block; - color: variables.$color--light-blue; - border: 1px solid variables.$color--light-blue; + color: var(--color-light-blue); + border: 1px solid var(--color-light-blue); &:focus { - color: variables.$color--light-blue; + color: var(--color-light-blue); } &:hover { - color: variables.$color--white; + color: var(--color-white); } } &-danger, &--warning { - @include mixins.button( - variables.$color--error, - variables.$color--error - ); + @include mixins.button(var(--color-error), var(--color-error)); &:focus { - background-color: variables.$color--pastel-red; + background-color: var(--color-pastel-red); } } @@ -154,8 +136,8 @@ max-width: 300px; padding: 15px 20px; font-weight: var(--weight-normal); - color: variables.$color--default; - border: 1px solid variables.$color--light-mid-grey; + color: var(--color-default); + border: 1px solid var(--color-light-mid-grey); transition: none; width: 100%; @@ -178,7 +160,7 @@ inset-inline-end: 10px; svg { - fill: variables.$color--primary; + fill: var(--color-primary); height: 24px; } } @@ -221,10 +203,10 @@ &--actions { position: relative; display: block; - background-color: variables.$color--white; + background-color: var(--color-white); &:active { - background: variables.$color--light-blue-90; + background: var(--color-light-blue-90); } &::after { @@ -237,8 +219,8 @@ } &.is-active { - color: variables.$color--dark-blue; - background: variables.$color--light-blue-90; + color: var(--color-dark-blue); + background: var(--color-light-blue-90); &::after { inset-block-start: -12px; @@ -278,9 +260,9 @@ &:focus, &:hover { - color: variables.$color--white; - background-color: variables.$color--light-blue; - border: 1px solid variables.$color--light-blue; + color: var(--color-white); + background-color: var(--color-light-blue); + border: 1px solid var(--color-light-blue); } } @@ -292,13 +274,13 @@ width: 10px; height: 14px; margin-inline-start: 10px; - fill: variables.$color--white; + fill: var(--color-white); } } &--action { display: flex; - color: variables.$color--default; + color: var(--color-default); align-items: center; transition: opacity var(--transition); font-weight: var(--weight-semibold); @@ -309,7 +291,7 @@ } &:disabled { - color: variables.$color--mid-dark-grey; + color: var(--color-mid-dark-grey); cursor: not-allowed; pointer-events: all; // to show the tooltip on hover @@ -323,25 +305,21 @@ font-size: 12px; font-weight: var(--weight-normal); white-space: normal; - background: variables.$color--light-blue; + background: var(--color-light-blue); opacity: 0; transition: opacity var(--transition); inset-block-end: 45px; inset-inline-start: 50%; transform: translateX(-50%); - color: variables.$color--white; + color: var(--color-white); text-align: left; line-height: 1rem; - border: 1px solid variables.$color--white; + border: 1px solid var(--color-white); border-radius: 0.125rem; } &::after { - @include mixins.triangle( - bottom, - variables.$color--primary, - 7px - ); + @include mixins.triangle(bottom, var(--color-primary), 7px); position: absolute; inset-block-start: -22px; inset-inline-start: 50%; @@ -352,7 +330,7 @@ } svg { - fill: variables.$color--mid-dark-grey; + fill: var(--color-mid-dark-grey); } &:hover { @@ -372,7 +350,7 @@ } svg { - fill: variables.$color--light-blue; + fill: var(--color-light-blue); width: 1em; height: 1em; margin-inline-end: 0.5rem; @@ -381,22 +359,22 @@ } &--link { - color: variables.$color--primary; + color: var(--color-primary); } &--remove { - color: variables.$color--tomato; + color: var(--color-tomato); } &--tooltip-disabled { - background-color: variables.$color--button-disabled; - border: 1px solid variables.$color--button-disabled; + background-color: var(--color-button-disabled); + border: 1px solid var(--color-button-disabled); &:hover, &:active, &:focus { cursor: default; - background-color: variables.$color--button-disabled; + background-color: var(--color-button-disabled); } } @@ -406,7 +384,7 @@ &::after { content: "\2691"; - color: variables.$color--tomato; + color: var(--color-tomato); position: absolute; inset-block-start: 4px; padding-inline-start: 5px; @@ -417,10 +395,7 @@ } &--unflag { - @include mixins.button( - variables.$color--light-blue, - variables.$color--dark-blue - ); + @include mixins.button(var(--color-light-blue), var(--color-dark-blue)); @include mixins.button--small; /* stylelint-disable-next-line no-duplicate-selectors */ @@ -444,23 +419,20 @@ // Two-factor &-info, &-link { - @include mixins.button( - variables.$color--light-blue, - variables.$color--dark-blue - ); + @include mixins.button(var(--color-light-blue), var(--color-dark-blue)); display: inline-block; line-height: 1.15; } &--like-active { svg { - fill: variables.$color--dark-blue; + fill: var(--color-dark-blue); } } &--dislike-active { svg { - fill: variables.$color--tomato; + fill: var(--color-tomato); } } } diff --git a/hypha/static_src/sass/components/_card.scss b/hypha/static_src/sass/components/_card.scss index 3ace299c47..db47b8363d 100644 --- a/hypha/static_src/sass/components/_card.scss +++ b/hypha/static_src/sass/components/_card.scss @@ -1,13 +1,12 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .card { padding: 20px; margin-block-end: 20px; - border: 1px solid variables.$color--mid-grey; + border: 1px solid var(--color-mid-grey); &--solid { - background-color: variables.$color--white; + background-color: var(--color-white); } &__text { diff --git a/hypha/static_src/sass/components/_cookieconsent.scss b/hypha/static_src/sass/components/_cookieconsent.scss index e5fcb9a94d..06b5679ff4 100644 --- a/hypha/static_src/sass/components/_cookieconsent.scss +++ b/hypha/static_src/sass/components/_cookieconsent.scss @@ -1,12 +1,11 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .cookieconsent { position: fixed; inset-block-end: 0; - color: variables.$color--white; - background-color: variables.$color--dark-blue; - border-block-start: 4px solid variables.$color--light-blue; + color: var(--color-white); + background-color: var(--color-dark-blue); + border-block-start: 4px solid var(--color-light-blue); transform: translateY(100vh); transition: all var(--transition); overflow: hidden; diff --git a/hypha/static_src/sass/components/_dashboard-table.scss b/hypha/static_src/sass/components/_dashboard-table.scss index c11ac8cd27..4afc1c74cd 100644 --- a/hypha/static_src/sass/components/_dashboard-table.scss +++ b/hypha/static_src/sass/components/_dashboard-table.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors @@ -17,7 +16,7 @@ // ordering - adjust alignment &.desc { position: relative; - color: variables.$color--dark-grey; + color: var(--color-dark-grey); &::after { position: absolute; @@ -28,7 +27,7 @@ &.asc { position: relative; - color: variables.$color--dark-grey; + color: var(--color-dark-grey); &::after { position: absolute; diff --git a/hypha/static_src/sass/components/_data-block.scss b/hypha/static_src/sass/components/_data-block.scss index dceb889b0e..9d45eb5859 100644 --- a/hypha/static_src/sass/components/_data-block.scss +++ b/hypha/static_src/sass/components/_data-block.scss @@ -1,14 +1,13 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .data-block { $root: &; margin-block-end: 1rem; - border: 1px solid variables.$color--light-blue; + border: 1px solid var(--color-light-blue); &__header { padding: 1rem; - background-color: variables.$color--light-blue-90; + background-color: var(--color-light-blue-90); @include mixins.media-query(sm) { padding: 1rem 2rem; @@ -43,7 +42,7 @@ #{$root}__header & { &:hover, &:focus { - background-color: variables.$color--white; + background-color: var(--color-white); } } @@ -88,14 +87,14 @@ &__table { thead { display: none; - border-block-start: 2px solid variables.$color--light-mid-grey; + border-block-start: 2px solid var(--color-light-mid-grey); @include mixins.media-query(lg) { display: table-header-group; } th { - color: variables.$color--mid-dark-grey; + color: var(--color-mid-dark-grey); padding: 10px; @include mixins.media-query(lg) { @@ -104,7 +103,7 @@ } tr { - border-color: variables.$color--light-mid-grey; + border-color: var(--color-light-mid-grey); } } @@ -114,7 +113,7 @@ tr { border: 0; - border-block-end: 2px solid variables.$color--light-grey; + border-block-end: 2px solid var(--color-light-grey); &:hover { box-shadow: none; @@ -152,7 +151,7 @@ display: inline-block; margin-inline-end: 1rem; text-decoration: underline; - color: variables.$color--primary; + color: var(--color-primary); word-break: normal; transition-property: opacity; transition-duration: 150ms; @@ -186,12 +185,12 @@ } &--remove { - color: variables.$color--tomato; + color: var(--color-tomato); } } &__list-item { - border-block-end: 2px solid variables.$color--light-grey; + border-block-end: 2px solid var(--color-light-grey); padding: 1rem 0; @include mixins.media-query(lg) { @@ -242,7 +241,7 @@ position: absolute; height: 2px; display: block; - background: variables.$color--mid-grey; + background: var(--color-mid-grey); inset-inline-start: -1rem; inset-block-end: 0; diff --git a/hypha/static_src/sass/components/_docs-block.scss b/hypha/static_src/sass/components/_docs-block.scss index 295d55e97e..607e7a0cca 100644 --- a/hypha/static_src/sass/components/_docs-block.scss +++ b/hypha/static_src/sass/components/_docs-block.scss @@ -1,11 +1,10 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .docs-block { - border: 1px solid variables.$color--light-blue; + border: 1px solid var(--color-light-blue); &__header { - background-color: variables.$color--light-blue-90; + background-color: var(--color-light-blue-90); padding: 0.5rem 0.75rem; display: flex; justify-content: space-between; @@ -26,7 +25,7 @@ &__row { padding-block-end: 1rem; margin-block-end: 1rem; - border-block-end: 1px solid variables.$color--mid-grey; + border-block-end: 1px solid var(--color-mid-grey); @include mixins.media-query(md) { display: flex; @@ -58,7 +57,7 @@ } &__contract-upload-row { - border: 1px solid variables.$color--light-blue; + border: 1px solid var(--color-light-blue); } } @@ -73,7 +72,7 @@ &__icon { width: 20px; height: 20px; - stroke: variables.$color--mid-grey; + stroke: var(--color-mid-grey); fill: transparent; margin-inline-end: 0.5rem; @@ -88,7 +87,7 @@ &:disabled, &.is-disabled { - color: variables.$color--mid-grey; + color: var(--color-mid-grey); cursor: default; } @@ -105,7 +104,7 @@ &:disabled, &.is-disabled { - color: variables.$color--mid-grey; + color: var(--color-mid-grey); cursor: default; } diff --git a/hypha/static_src/sass/components/_dropdown.scss b/hypha/static_src/sass/components/_dropdown.scss index 91fa6772b4..a0327d21bd 100644 --- a/hypha/static_src/sass/components/_dropdown.scss +++ b/hypha/static_src/sass/components/_dropdown.scss @@ -1,26 +1,24 @@ -@use "../abstracts/variables"; - .dropdown { position: relative; display: inline-block; &__content { position: absolute; - background-color: variables.$color--light-grey; + background-color: var(--color-light-grey); min-width: 160px; - box-shadow: 1px 8px 16px 1px variables.$color--mid-dark-grey; + box-shadow: 1px 8px 16px 1px var(--color-mid-dark-grey); z-index: 1; /* Links inside the dropdown */ a { - color: variables.$color--black; + color: var(--color-black); padding: 12px 16px; text-decoration: none; display: block; /* Change color of dropdown links on hover */ &:hover { - background-color: variables.$color--mid-grey; + background-color: var(--color-mid-grey); } } } diff --git a/hypha/static_src/sass/components/_editor.scss b/hypha/static_src/sass/components/_editor.scss index 6c61d6636b..4ac055dcac 100644 --- a/hypha/static_src/sass/components/_editor.scss +++ b/hypha/static_src/sass/components/_editor.scss @@ -1,5 +1,3 @@ -@use "../abstracts/variables"; - .wmd-preview { background-color: #f3f4f6; padding: 0 10px; @@ -18,12 +16,12 @@ .wmd-button-row { display: flex; - background-color: variables.$color--white; + background-color: var(--color-white); padding: 4px; } .wmd-spacer { - background-color: variables.$color--mid-grey; + background-color: var(--color-mid-grey); width: 1px; height: 20px; margin: 0 14px; @@ -48,11 +46,11 @@ } .wmd-prompt-background { - background-color: variables.$color--black; + background-color: var(--color-black); } .wmd-prompt-dialog { - background-color: variables.$color--light-grey; + background-color: var(--color-light-grey); padding: 0.5em; - border: 4px solid variables.$color--primary; + border: 4px solid var(--color-primary); } diff --git a/hypha/static_src/sass/components/_feed.scss b/hypha/static_src/sass/components/_feed.scss index 3a5b193fb0..cf06c7571a 100644 --- a/hypha/static_src/sass/components/_feed.scss +++ b/hypha/static_src/sass/components/_feed.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; @use "../base/typography"; .feed { @@ -30,33 +29,33 @@ &__label { margin: 0; - color: variables.$color--white; + color: var(--color-white); text-align: center; &--note { - background-color: variables.$color--error; + background-color: var(--color-error); } &--determination { - background-color: variables.$color--ocean; + background-color: var(--color-ocean); } &--comment, &--message { - background-color: variables.$color--grass; + background-color: var(--color-grass); } &--activity, &--action { - background-color: variables.$color--mint; + background-color: var(--color-mint); } &--submission { - background-color: variables.$color--green; + background-color: var(--color-green); } &--project { - background-color: variables.$color--mint; + background-color: var(--color-mint); } &--mobile { @@ -106,7 +105,7 @@ &--last-edited { margin-inline-end: 5px; - color: variables.$color--mid-dark-grey; + color: var(--color-mid-dark-grey); span { font-weight: var(--weight-normal); @@ -125,7 +124,7 @@ width: 100%; margin: 5px 0 0; font-size: var(--font-size-milli); - color: variables.$color--black-50; + color: var(--color-black-50); @include mixins.media-query(sm) { width: auto; @@ -138,7 +137,7 @@ &::after { @include mixins.triangle( right, - variables.$color--black-50, + var(--color-black-50), 4px ); display: inline-block; @@ -162,7 +161,7 @@ height: 14px; margin-inline-start: 10px; margin-block-start: 0.35em; - fill: variables.$color--dark-blue; + fill: var(--color-dark-blue); } } @@ -179,10 +178,10 @@ padding: 3px 10px; font-size: var(--font-size-milli); font-weight: var(--weight-bold); - color: variables.$color--marine; + color: var(--color-marine); text-align: center; text-transform: uppercase; - background-color: variables.$color--sky-blue; + background-color: var(--color-sky-blue); } &__company { @@ -199,8 +198,8 @@ padding: 3em 0 0.5em; background-image: linear-gradient( to bottom, - variables.$color--white-10, - variables.$color--white + var(--color-white-10), + var(--color-white) ); } } diff --git a/hypha/static_src/sass/components/_filters.scss b/hypha/static_src/sass/components/_filters.scss index 6c27290ec3..5ac6c62b3c 100644 --- a/hypha/static_src/sass/components/_filters.scss +++ b/hypha/static_src/sass/components/_filters.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .filters { display: none; @@ -14,7 +13,7 @@ display: block; width: 100%; height: 100vh; - background: variables.$color--white; + background: var(--color-white); } @include mixins.media-query(lg) { @@ -48,7 +47,7 @@ } > div[class^="js-"] { - color: variables.$color--primary; + color: var(--color-primary); &:hover { cursor: pointer; @@ -60,7 +59,7 @@ appearance: none; -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix border: 0; - color: variables.$color--primary; + color: var(--color-primary); background: transparent; } } diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss index d87cc83e48..225ba04e06 100644 --- a/hypha/static_src/sass/components/_form.scss +++ b/hypha/static_src/sass/components/_form.scss @@ -108,20 +108,17 @@ &--multi_file_field, &--single_file_field, &--file_field { - @include mixins.button( - variables.$color--white, - variables.$color--light-blue - ); + @include mixins.button(var(--color-white), var(--color-light-blue)); display: inline-block; - color: variables.$color--light-blue; - border: 1px solid variables.$color--mid-grey; + color: var(--color-light-blue); + border: 1px solid var(--color-mid-grey); &:focus { - color: variables.$color--light-blue; + color: var(--color-light-blue); } &:hover { - color: variables.$color--white; + color: var(--color-white); } max-width: 15rem; @@ -150,28 +147,28 @@ } &__file-drop-zone { - color: variables.$color--mid-grey; + color: var(--color-mid-grey); padding: 25px; font-size: 17px; font-weight: var(--weight-bold); text-align: center; - border: 2px dashed variables.$color--mid-grey; + border: 2px dashed var(--color-mid-grey); border-radius: 5px; } &__filters { #{variables.$filter-dropdown} { border: 0; - border-block-start: 1px solid variables.$color--mid-grey; + border-block-start: 1px solid var(--color-mid-grey); &.is-active { font-weight: var(--weight-normal); - background-color: variables.$color--light-blue-90; - border-color: variables.$color--mid-grey; + background-color: var(--color-light-blue-90); + border-color: var(--color-mid-grey); } @include mixins.media-query(lg) { - border: 1px solid variables.$color--mid-grey; + border: 1px solid var(--color-mid-grey); } } @@ -285,7 +282,7 @@ } &__required { - color: variables.$color--purple; + color: var(--color-purple); } &__help { @@ -306,7 +303,7 @@ a { &:hover { cursor: pointer; - color: variables.$color--darkest-blue; + color: var(--color-darkest-blue); } } } @@ -315,7 +312,7 @@ display: inline; width: 20px; height: 20px; - fill: variables.$color--dark-grey; + fill: var(--color-dark-grey); } &__item { @@ -350,7 +347,7 @@ select { option { - background-color: variables.$color--white; + background-color: var(--color-white); } } @@ -372,7 +369,7 @@ max-width: 385px; &.invalid { - border: 2px solid variables.$color--error; + border: 2px solid var(--color-error); outline: none; } } @@ -388,7 +385,7 @@ input[type="number"], input[type="password"], input[type="datetime-local"] { - border: 2px solid variables.$color--error; + border: 2px solid var(--color-error); } } @@ -396,8 +393,8 @@ max-width: 200px; padding: 5px; margin: 20px 0 0; - color: variables.$color--white; - background: variables.$color--error; + color: var(--color-white); + background: var(--color-error); z-index: 2; @include mixins.media-query(lg) { @@ -411,7 +408,7 @@ position: absolute; inset-block-start: 12px; inset-inline-start: -10px; - border-color: transparent variables.$color--error transparent + border-color: transparent var(--color-error) transparent transparent; border-style: solid; border-width: 5px 10px 5px 0; @@ -442,7 +439,7 @@ display: block; width: 100%; padding: 0.4em; - border: 1px solid variables.$color--mid-grey; + border: 1px solid var(--color-mid-grey); } .wmd-preview { @@ -481,8 +478,8 @@ .errorlist { padding: 5px; margin-block-end: 0.2em; - background: variables.$color--light-pink; - border: 1px solid variables.$color--tomato; + background: var(--color-light-pink); + border: 1px solid var(--color-tomato); } .address { @@ -512,7 +509,7 @@ } &__info-box { - background-color: variables.$color--light-blue-90; + background-color: var(--color-light-blue-90); padding: 1rem; p { @@ -531,6 +528,6 @@ @keyframes flash { 50% { - background-color: variables.$color--mustard; + background-color: var(--color-mustard); } } diff --git a/hypha/static_src/sass/components/_heading.scss b/hypha/static_src/sass/components/_heading.scss index e9c80aecea..68842c6b0d 100644 --- a/hypha/static_src/sass/components/_heading.scss +++ b/hypha/static_src/sass/components/_heading.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .heading { &--no-margin { @@ -31,7 +30,7 @@ flex-direction: column; margin-block-start: 20px; font-weight: var(--weight-normal); - color: variables.$color--black-40; + color: var(--color-black-40); @include mixins.media-query(lg) { flex-direction: row; @@ -48,7 +47,7 @@ } &--light-grey { - color: variables.$color--black-40; + color: var(--color-black-40); } &--uppercase { diff --git a/hypha/static_src/sass/components/_invoice-block.scss b/hypha/static_src/sass/components/_invoice-block.scss index 6c6848fee1..ecc6e494ce 100644 --- a/hypha/static_src/sass/components/_invoice-block.scss +++ b/hypha/static_src/sass/components/_invoice-block.scss @@ -1,10 +1,9 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .invoice-block { padding: 1rem; margin-block-end: 1rem; - border: 1px solid variables.$color--dark-blue; + border: 1px solid var(--color-dark-blue); @include mixins.media-query(sm) { display: flex; diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index de341ff87f..6ad09e8836 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -1,11 +1,10 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .list-reveal { $root: &; &--determination { - background-color: variables.$color--white; + background-color: var(--color-white); margin-block-end: var(--gutters); @include mixins.media-query(md) { @@ -17,12 +16,12 @@ display: block; font-size: var(--font-size-zeta); padding: 0.75em 1em; - border-block-end: 2px solid variables.$color--light-mid-grey; + border-block-end: 2px solid var(--color-light-mid-grey); margin: 0; - color: variables.$color--default; + color: var(--color-default); &--meta { - color: variables.$color--dark-blue; + color: var(--color-dark-blue); font-weight: var(--weight-semibold); display: flex; justify-content: space-between; @@ -30,7 +29,7 @@ } &--determination { - border: 1px solid variables.$color--light-mid-grey; + border: 1px solid var(--color-light-mid-grey); margin: 0; } } @@ -40,13 +39,13 @@ overflow: scroll; margin: 0 -24px var(--gutters); padding: 0; - border-block-end: 2px solid variables.$color--light-mid-grey; - box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; + border-block-end: 2px solid var(--color-light-mid-grey); + box-shadow: inset 0 -10px 20px -10px var(--color-mid-grey); transition: max-height var(--transition); &--determination { - border-inline-start: 1px solid variables.$color--light-mid-grey; - border-inline-end: 1px solid variables.$color--light-mid-grey; + border-inline-start: 1px solid var(--color-light-mid-grey); + border-inline-end: 1px solid var(--color-light-mid-grey); margin: 0; } @@ -63,7 +62,7 @@ &__open-icon { width: 20px; height: 20px; - fill: variables.$color--dark-grey; + fill: var(--color-dark-grey); opacity: 0; transition: opacity var(--quick-transition); pointer-events: none; diff --git a/hypha/static_src/sass/components/_list.scss b/hypha/static_src/sass/components/_list.scss index e9d7746bdb..da9d7600f9 100644 --- a/hypha/static_src/sass/components/_list.scss +++ b/hypha/static_src/sass/components/_list.scss @@ -1,6 +1,5 @@ @use "../base/typography"; @use "../abstracts/mixins"; -@use "../abstracts/variables"; .list { $root: &; @@ -13,8 +12,8 @@ &--opinion { position: relative; font-size: 14px; - border-block-start: 1px solid variables.$color--mid-grey; - border-block-end: 1px solid variables.$color--mid-grey; + border-block-start: 1px solid var(--color-mid-grey); + border-block-end: 1px solid var(--color-mid-grey); margin: 10px 0; padding: 5px 0; @@ -28,16 +27,12 @@ } &::after { - @include mixins.triangle(top, variables.$color--mist, 6px); + @include mixins.triangle(top, var(--color-mist), 6px); inset-block-start: -13px; } &::before { - @include mixins.triangle( - top, - variables.$color--mid-grey, - 6px - ); + @include mixins.triangle(top, var(--color-mid-grey), 6px); } } } @@ -66,7 +61,7 @@ position: absolute; max-width: initial; overflow: visible; - background-color: variables.$color--mist; + background-color: var(--color-mist); + #{$root}__item--reviewer-outcome { width: 100%; @@ -80,11 +75,11 @@ } &--reviewer-outcome { - color: variables.$color--tomato; + color: var(--color-tomato); position: relative; &.agree { - color: variables.$color--green; + color: var(--color-green); } } } diff --git a/hypha/static_src/sass/components/_messages.scss b/hypha/static_src/sass/components/_messages.scss index c226922a1f..bcbcdb5db3 100644 --- a/hypha/static_src/sass/components/_messages.scss +++ b/hypha/static_src/sass/components/_messages.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .messages { position: fixed; @@ -14,22 +13,22 @@ align-items: center; max-width: 450px; margin: 0 auto; - color: variables.$color--black; + color: var(--color-black); pointer-events: all; max-height: 1000px; - background: variables.$color--cream; + background: var(--color-cream); } &__text { position: relative; padding: 15px 20px; - color: variables.$color--white; + color: var(--color-white); font-size: 14px; opacity: 1; transition: opacity, max-height, var(--transition); pointer-events: all; max-height: 1000px; - background: variables.$color--dark-blue; + background: var(--color-dark-blue); @include mixins.media-query(xl) { padding: 15px 30px; @@ -37,16 +36,16 @@ &--info, &--success { - background: variables.$color--dark-blue; + background: var(--color-dark-blue); } &--error, &--warning { - background: variables.$color--dark-tomato; + background: var(--color-dark-tomato); } &--debug { - background: variables.$color--dark-pink; + background: var(--color-dark-pink); } } @@ -66,8 +65,8 @@ &__button { margin-inline-start: auto; - color: variables.$color--dark-blue; - background-color: variables.$color--white; + color: var(--color-dark-blue); + background-color: var(--color-white); display: inline-block; font-weight: var(--weight-bold); padding: 2px 20px; diff --git a/hypha/static_src/sass/components/_modal.scss b/hypha/static_src/sass/components/_modal.scss index 97e3aebc28..7b3185fc7e 100644 --- a/hypha/static_src/sass/components/_modal.scss +++ b/hypha/static_src/sass/components/_modal.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .modal { $root: &; @@ -13,8 +12,8 @@ } &__header-bar { - color: variables.$color--white; - background-color: variables.$color--dark-blue; + color: var(--color-white); + background-color: var(--color-dark-blue); margin: -24px -24px 20px; padding: 15px; text-align: center; @@ -25,8 +24,8 @@ } &__project-header-bar { - color: variables.$color--white; - background-color: variables.$color--dark-blue; + color: var(--color-white); + background-color: var(--color-dark-blue); margin: -24px -24px 20px; padding: 15px 24px; text-align: left; @@ -41,8 +40,8 @@ overflow: scroll; margin: 0 -24px 20px; padding: 0; - border-block-end: 2px solid variables.$color--light-mid-grey; - box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; + border-block-end: 2px solid var(--color-light-mid-grey); + box-shadow: inset 0 -10px 20px -10px var(--color-mid-grey); transition: max-height var(--transition); &.is-closed { @@ -55,12 +54,12 @@ display: block; font-size: var(--font-size-zeta); padding: 12px 28px; - border-block-end: 2px solid variables.$color--light-mid-grey; + border-block-end: 2px solid var(--color-light-mid-grey); margin: 0; - color: variables.$color--default; + color: var(--color-default); &--meta { - color: variables.$color--dark-blue; + color: var(--color-dark-blue); font-weight: var(--weight-semibold); display: flex; justify-content: space-between; @@ -75,7 +74,7 @@ &__open-link-icon { width: 20px; height: 20px; - fill: variables.$color--dark-grey; + fill: var(--color-dark-grey); opacity: 0; transition: opacity var(--quick-transition); pointer-events: none; diff --git a/hypha/static_src/sass/components/_nav.scss b/hypha/static_src/sass/components/_nav.scss index d3a85e6f7c..6a7ce99e76 100644 --- a/hypha/static_src/sass/components/_nav.scss +++ b/hypha/static_src/sass/components/_nav.scss @@ -1,6 +1,5 @@ @use "../base/typography"; @use "../abstracts/mixins"; -@use "../abstracts/variables"; .nav { background-color: var(--color-bg-default); @@ -10,12 +9,12 @@ display: flex; position: relative; padding-block: 0.5rem; - color: variables.$color--default; + color: var(--color-default); transition: color var(--transition); &:focus, &:hover { - color: variables.$color--light-blue; + color: var(--color-light-blue); } @include mixins.media-query(md) { @@ -25,7 +24,7 @@ inset-inline-start: 0; width: 100%; height: 5px; - background-color: variables.$color--dark-blue; + background-color: var(--color-dark-blue); content: ""; opacity: 0; transition: opacity 0.5s cubic-bezier(0.2, 1.4, 0.67, 1.13); diff --git a/hypha/static_src/sass/components/_nprogress.scss b/hypha/static_src/sass/components/_nprogress.scss index 34456331e2..227feb2ccd 100644 --- a/hypha/static_src/sass/components/_nprogress.scss +++ b/hypha/static_src/sass/components/_nprogress.scss @@ -1,12 +1,10 @@ -@use "../abstracts/variables"; - /* stylelint-disable selector-max-id, length-zero-no-unit -- CSS from https://github.com/rstacruz/nprogress */ #nprogress { /* Make clicks pass-through */ pointer-events: none; .bar { - background: variables.$color--dark-blue; + background: var(--color-dark-blue); position: fixed; z-index: 1031; @@ -25,8 +23,8 @@ width: 100px; height: 100%; box-shadow: - 0 0 10px variables.$color--dark-blue, - 0 0 5px variables.$color--dark-blue; + 0 0 10px var(--color-dark-blue), + 0 0 5px var(--color-dark-blue); opacity: 1; transform: rotate(3deg) translate(0px, -4px); @@ -47,8 +45,8 @@ box-sizing: border-box; border: solid 2px transparent; - border-top-color: variables.$color--dark-blue; - border-left-color: variables.$color--dark-blue; + border-top-color: var(--color-dark-blue); + border-left-color: var(--color-dark-blue); border-radius: 50%; animation: nprogress-spinner 400ms linear infinite; diff --git a/hypha/static_src/sass/components/_pagination.scss b/hypha/static_src/sass/components/_pagination.scss index f402834b6e..e2414c8f58 100644 --- a/hypha/static_src/sass/components/_pagination.scss +++ b/hypha/static_src/sass/components/_pagination.scss @@ -1,6 +1,5 @@ @use "../base/typography"; @use "../abstracts/mixins"; -@use "../abstracts/variables"; .pagination--wrapper { display: flex; @@ -40,9 +39,9 @@ width: 55px; height: 55px; font-size: 0; - color: variables.$color--white; - background: variables.$color--white; - border: 1px solid variables.$color--mid-grey; + color: var(--color-white); + background: var(--color-white); + border: 1px solid var(--color-mid-grey); &::after { position: absolute; @@ -55,7 +54,7 @@ .previous { a { &::after { - @include mixins.triangle(left, variables.$color--primary, 7px); + @include mixins.triangle(left, var(--color-primary), 7px); } } } @@ -63,7 +62,7 @@ .next { a { &::after { - @include mixins.triangle(right, variables.$color--primary, 7px); + @include mixins.triangle(right, var(--color-primary), 7px); } } } diff --git a/hypha/static_src/sass/components/_projects-table.scss b/hypha/static_src/sass/components/_projects-table.scss index fcf4480fd8..eb19d36df0 100644 --- a/hypha/static_src/sass/components/_projects-table.scss +++ b/hypha/static_src/sass/components/_projects-table.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors @@ -33,7 +32,7 @@ margin-inline-end: 0.3rem; width: 25px; height: 25px; - fill: variables.$color--tomato; + fill: var(--color-tomato); } } } @@ -97,9 +96,9 @@ padding: 5px; font-size: 13px; font-weight: var(--weight-bold); - color: variables.$color--white; + color: var(--color-white); text-align: center; - background-color: variables.$color--dark-blue; + background-color: var(--color-dark-blue); } } } diff --git a/hypha/static_src/sass/components/_reviews-list.scss b/hypha/static_src/sass/components/_reviews-list.scss index 20a7ab4c19..58cf93fab3 100644 --- a/hypha/static_src/sass/components/_reviews-list.scss +++ b/hypha/static_src/sass/components/_reviews-list.scss @@ -1,5 +1,3 @@ -@use "../abstracts/variables"; - .reviews-list { position: relative; margin-block-start: 40px; @@ -21,7 +19,7 @@ &__tr { border-block-start: 0; - border-block-end: 2px solid variables.$color--light-grey; + border-block-end: 2px solid var(--color-light-grey); } &__td { @@ -49,13 +47,13 @@ &:first-child { width: 160px; - background-color: variables.$color--light-mid-grey; + background-color: var(--color-light-mid-grey); } } &__th--author { position: sticky; inset-block-start: 0; - background-color: variables.$color--white; + background-color: var(--color-white); } } diff --git a/hypha/static_src/sass/components/_reviews-sidebar.scss b/hypha/static_src/sass/components/_reviews-sidebar.scss index 28f235cff2..75c3a2482f 100644 --- a/hypha/static_src/sass/components/_reviews-sidebar.scss +++ b/hypha/static_src/sass/components/_reviews-sidebar.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; // stylelint-disable max-nesting-depth @@ -11,8 +10,8 @@ &__decision { position: relative; font-size: 14px; - border-block-start: 1px solid variables.$color--mid-grey; - border-block-end: 1px solid variables.$color--mid-grey; + border-block-start: 1px solid var(--color-mid-grey); + border-block-end: 1px solid var(--color-mid-grey); margin-block-end: 20px; padding-block-start: 10px; } @@ -42,18 +41,14 @@ } &::after { - @include mixins.triangle( - top, - variables.$color--white, - 8px - ); + @include mixins.triangle(top, var(--color-white), 8px); inset-block-start: -21px; } &::before { @include mixins.triangle( top, - variables.$color--mid-grey, + var(--color-mid-grey), 8px ); } @@ -66,24 +61,24 @@ } &.no-response { - color: variables.$color--black-20; + color: var(--color-black-20); } .yes { - color: variables.$color--green; + color: var(--color-green); } .maybe { - color: variables.$color--mustard; + color: var(--color-mustard); } .no { - color: variables.$color--tomato; + color: var(--color-tomato); } } &__no-reviews { - color: variables.$color--mid-grey; + color: var(--color-mid-grey); } &__name { @@ -92,7 +87,7 @@ align-items: center; overflow: hidden; text-overflow: ellipsis; - background: variables.$color--white; + background: var(--color-white); &:hover { display: inline-flex; @@ -108,11 +103,11 @@ position: relative; &.agree { - color: variables.$color--green; + color: var(--color-green); } &.disagree { - color: variables.$color--tomato; + color: var(--color-tomato); } } diff --git a/hypha/static_src/sass/components/_reviews-summary.scss b/hypha/static_src/sass/components/_reviews-summary.scss index 3c7fd2696d..3c5469764f 100644 --- a/hypha/static_src/sass/components/_reviews-summary.scss +++ b/hypha/static_src/sass/components/_reviews-summary.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .reviews-summary { display: none; @@ -26,5 +25,5 @@ } .counts-separator { - color: variables.$color--mid-grey; + color: var(--color-mid-grey); } diff --git a/hypha/static_src/sass/components/_revisions.scss b/hypha/static_src/sass/components/_revisions.scss index 57bb83c1a2..35ecb5a004 100644 --- a/hypha/static_src/sass/components/_revisions.scss +++ b/hypha/static_src/sass/components/_revisions.scss @@ -1,8 +1,6 @@ -@use "../abstracts/variables"; - .diff { &__deleted { - background-color: variables.$color--light-pink; + background-color: var(--color-light-pink); a { background-color: inherit; @@ -10,7 +8,7 @@ } &__added { - background-color: variables.$color--light-green; + background-color: var(--color-light-green); a { background-color: inherit; diff --git a/hypha/static_src/sass/components/_rich-text.scss b/hypha/static_src/sass/components/_rich-text.scss index 354b89a6ee..73e081e74d 100644 --- a/hypha/static_src/sass/components/_rich-text.scss +++ b/hypha/static_src/sass/components/_rich-text.scss @@ -1,5 +1,3 @@ -@use "../abstracts/variables"; - .rich-text { margin-block-end: 2rem; word-break: break-word; @@ -95,14 +93,14 @@ &.word-count-warning, &.word-count-warning-2 { - background-color: variables.$color--pastel-red; + background-color: var(--color-pastel-red); font-weight: bold; text-shadow: none; - color: variables.$color--black; + color: var(--color-black); } &.word-count-warning-2 { - background-color: variables.$color--tomato; + background-color: var(--color-tomato); } } } diff --git a/hypha/static_src/sass/components/_round-block.scss b/hypha/static_src/sass/components/_round-block.scss index 1c69a60014..aad5d5bfdd 100644 --- a/hypha/static_src/sass/components/_round-block.scss +++ b/hypha/static_src/sass/components/_round-block.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .round-block { $root: &; @@ -10,22 +9,22 @@ &__item { align-items: center; - background-color: variables.$color--white; - border: 1px solid variables.$color--light-mid-grey; + background-color: var(--color-white); + border: 1px solid var(--color-light-mid-grey); border-block-end: 0; padding: 25px; transition: background-color var(--quick-transition); min-height: 80px; &:last-child { - border-block-end: 1px solid variables.$color--light-mid-grey; + border-block-end: 1px solid var(--color-light-mid-grey); } @include mixins.media-query(lg) { display: flex; &:hover { - background-color: variables.$color--light-grey; + background-color: var(--color-light-grey); } // item spacing @@ -38,11 +37,11 @@ &--more { padding: 20px 25px; justify-content: center; - border-block-end: 1px solid variables.$color--light-mid-grey; + border-block-end: 1px solid var(--color-light-mid-grey); min-height: auto; &:hover { - background-color: variables.$color--white; + background-color: var(--color-white); } // show more link @@ -68,13 +67,13 @@ &:focus, #{$root}__item:hover & { - color: variables.$color--primary; + color: var(--color-primary); pointer-events: all; } } &__title { - color: variables.$color--default; + color: var(--color-default); font-size: var(--font-size-epsilon); font-weight: var(--weight-semibold); } @@ -82,8 +81,8 @@ &__not-found { margin: 0; padding: 20px; - background-color: variables.$color--white; - border: 1px solid variables.$color--light-mid-grey; + background-color: var(--color-white); + border: 1px solid var(--color-light-mid-grey); } @include mixins.media-query(lg) { diff --git a/hypha/static_src/sass/components/_select2.scss b/hypha/static_src/sass/components/_select2.scss index fd7468618a..79f9f39b0b 100644 --- a/hypha/static_src/sass/components/_select2.scss +++ b/hypha/static_src/sass/components/_select2.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors, selector-class-pattern @@ -15,12 +14,12 @@ .select2-selection--single { height: var(--dropdown-height); - border: 1px solid variables.$color--mid-grey; + border: 1px solid var(--color-mid-grey); border-radius: 0; &.is-active { font-weight: var(--weight-bold); - border-color: variables.$color--primary; + border-color: var(--color-primary); } .select2-selection__clear { @@ -48,7 +47,7 @@ } .select2-selection__placeholder { - color: variables.$color--default; + color: var(--color-default); } } } @@ -59,19 +58,19 @@ &--default { .select2-results__option--highlighted[aria-selected] { // stylelint-disable-next-line declaration-no-important - color: variables.$color--default !important; + color: var(--color-default) !important; // stylelint-disable declaration-no-important, max-line-length - background-color: variables.$color--light-blue-90 !important; + background-color: var(--color-light-blue-90) !important; } } .select2-dropdown { border: 0; - border-block-end: 1px solid variables.$color--mid-grey; + border-block-end: 1px solid var(--color-mid-grey); border-radius: 0; @include mixins.media-query(sm) { - border: 1px solid variables.$color--mid-grey; + border: 1px solid var(--color-mid-grey); } } @@ -84,17 +83,17 @@ min-width: 20px; height: 20px; margin-inline-end: 10px; - background: variables.$color--white; - border: 1px solid variables.$color--mid-grey; + background: var(--color-white); + border: 1px solid var(--color-mid-grey); content: ""; } &[aria-selected="true"] { &::before { - background: url("./../images/tick.svg") - variables.$color--dark-blue center no-repeat; + background: url("./../images/tick.svg") var(--color-dark-blue) + center no-repeat; background-size: 12px; - border: 1px solid variables.$color--dark-blue; + border: 1px solid var(--color-dark-blue); content: ""; } } diff --git a/hypha/static_src/sass/components/_sidebar.scss b/hypha/static_src/sass/components/_sidebar.scss index b3b180b44d..741a9536d5 100644 --- a/hypha/static_src/sass/components/_sidebar.scss +++ b/hypha/static_src/sass/components/_sidebar.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .sidebar { @include mixins.media-query(md) { @@ -9,10 +8,10 @@ &__inner { padding: 20px; margin-block-end: 20px; - border: 1px solid variables.$color--mid-grey; + border: 1px solid var(--color-mid-grey); &--light-blue { - background-color: variables.$color--light-blue-90; + background-color: var(--color-light-blue-90); } &--actions { @@ -44,11 +43,11 @@ &__paf-approvals { &--pending { - color: variables.$color--mid-grey; + color: var(--color-mid-grey); } &--approved { - color: variables.$color--black; + color: var(--color-black); } } @@ -56,7 +55,7 @@ position: relative; font-size: 12px; font-weight: var(--weight-bold); - color: variables.$color--black-40; + color: var(--color-black-40); text-transform: uppercase; &::after { @@ -65,7 +64,7 @@ inset-inline-end: 0; width: calc(100% - 60px); height: 1px; - background-color: variables.$color--black-20; + background-color: var(--color-black-20); content: ""; } diff --git a/hypha/static_src/sass/components/_stat-block.scss b/hypha/static_src/sass/components/_stat-block.scss index cac11d8de3..e7a45e56f5 100644 --- a/hypha/static_src/sass/components/_stat-block.scss +++ b/hypha/static_src/sass/components/_stat-block.scss @@ -1,6 +1,5 @@ @use "../base/typography"; @use "../abstracts/mixins"; -@use "../abstracts/variables"; .stat-block { $root: &; @@ -12,7 +11,7 @@ &__item { position: relative; padding: 1rem; - background-color: variables.$color--white; + background-color: var(--color-white); flex: 1; display: block; margin: 0 0 1rem; @@ -37,7 +36,7 @@ @extend %h3; line-height: 1; margin: 0; - color: variables.$color--marine; + color: var(--color-marine); } &__text { diff --git a/hypha/static_src/sass/components/_status-bar.scss b/hypha/static_src/sass/components/_status-bar.scss index 244cb9a9a0..3653f6ae68 100644 --- a/hypha/static_src/sass/components/_status-bar.scss +++ b/hypha/static_src/sass/components/_status-bar.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; // stylelint-disable selector-class-pattern @@ -35,8 +34,8 @@ &__subheading { display: inline-block; padding: 5px 10px; - color: variables.$color--white; - background-color: variables.$color--tomato; + color: var(--color-white); + background-color: var(--color-tomato); } &__text { @@ -50,7 +49,7 @@ padding-block-start: var(--tooltip-margin-top); // The bar for each item. - border-block-start: var(--bar) solid variables.$color--mid-grey; + border-block-start: var(--bar) solid var(--color-mid-grey); // The dot for each item. &::before { @@ -61,41 +60,41 @@ inset-inline-start: calc(-1 * var(--dot) / 2); width: var(--dot); height: var(--dot); - background: variables.$color--dark-grey; - border: calc(var(--dot) / 4) solid variables.$color--mid-grey; + background: var(--color-dark-grey); + border: calc(var(--dot) / 4) solid var(--color-mid-grey); border-radius: 50%; content: ""; #{$root}--small & { - background: variables.$color--white; + background: var(--color-white); } } &--is-current { &::before { - background: variables.$color--white; - border-color: variables.$color--tomato; + background: var(--color-white); + border-color: var(--color-tomato); } // Fill the bar all the way on accepted/declined. &:last-of-type { - border-color: variables.$color--primary; + border-color: var(--color-primary); } } &--is-complete { - border-color: variables.$color--primary; + border-color: var(--color-primary); &::before { font-size: var(--font-size-milli); font-weight: var(--weight-bold); - color: variables.$color--white; - background: variables.$color--primary; - border-color: variables.$color--primary; + color: var(--color-white); + background: var(--color-primary); + border-color: var(--color-primary); content: "✓"; #{$root}--small & { - background: variables.$color--primary; + background: var(--color-primary); } } } @@ -126,24 +125,24 @@ margin-inline-start: calc(-1 * var(--tooltip-width) / 2 - 5px); text-align: center; padding-block: var(--tooltip-padding); - color: variables.$color--mid-grey; + color: var(--color-mid-grey); #{$root}__item--is-complete & { - color: variables.$color--primary; + color: var(--color-primary); } #{$root}__item--is-current & { width: calc(var(--tooltip-width) + var(--tooltip-padding)); position: relative; - color: variables.$color--white; - background-color: variables.$color--tomato; + color: var(--color-white); + background-color: var(--color-tomato); padding-inline: var(--tooltip-padding); border-radius: 0.125rem; } &::before { #{$root}__item--is-current & { - @include mixins.triangle(top, variables.$color--tomato, 5px); + @include mixins.triangle(top, var(--color-tomato), 5px); position: absolute; inset-block-start: calc(-1 * var(--triangle) - 2px); inset-inline-start: calc(50% - var(--triangle)); diff --git a/hypha/static_src/sass/components/_status-block.scss b/hypha/static_src/sass/components/_status-block.scss index f97df3312a..beaf59bfa3 100644 --- a/hypha/static_src/sass/components/_status-block.scss +++ b/hypha/static_src/sass/components/_status-block.scss @@ -1,10 +1,9 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .status-block { $root: &; - background-color: variables.$color--white; - border: 1px solid variables.$color--light-mid-grey; + background-color: var(--color-white); + border: 1px solid var(--color-light-mid-grey); @include mixins.media-query(lg) { display: flex; @@ -13,13 +12,13 @@ &__item { display: block; padding: 10px 20px; - border-block-end: 1px solid variables.$color--light-mid-grey; - background-color: variables.$color--white; + border-block-end: 1px solid var(--color-light-mid-grey); + background-color: var(--color-white); transition: background-color var(--quick-transition); @include mixins.media-query(lg) { border-block-end: 0; - border-inline-end: 1px solid variables.$color--light-mid-grey; + border-inline-end: 1px solid var(--color-light-mid-grey); width: 100%; padding: 10px; display: flex; @@ -36,7 +35,7 @@ } &:hover { - background-color: variables.$color--light-grey; + background-color: var(--color-light-grey); } &:last-child { diff --git a/hypha/static_src/sass/components/_submission-meta.scss b/hypha/static_src/sass/components/_submission-meta.scss index 2e5fccc25f..ad2b950d23 100644 --- a/hypha/static_src/sass/components/_submission-meta.scss +++ b/hypha/static_src/sass/components/_submission-meta.scss @@ -1,5 +1,3 @@ -@use "../abstracts/variables"; - .submission-meta { background-color: transparent; @@ -12,10 +10,10 @@ padding: 10px; font-size: 13px; font-weight: var(--weight-bold); - color: variables.$color--mid-dark-grey; + color: var(--color-mid-dark-grey); text-align: center; background-color: transparent; - border: 1px solid variables.$color--mid-dark-grey; + border: 1px solid var(--color-mid-dark-grey); } } } @@ -29,7 +27,7 @@ } &--black { - color: variables.$color--default; + color: var(--color-default); } th, @@ -40,7 +38,7 @@ td { &.lead { span { - background: variables.$color--mist; + background: var(--color-mist); } } } diff --git a/hypha/static_src/sass/components/_table.scss b/hypha/static_src/sass/components/_table.scss index b39d1b7531..9fbbdc16fe 100644 --- a/hypha/static_src/sass/components/_table.scss +++ b/hypha/static_src/sass/components/_table.scss @@ -1,17 +1,16 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors,max-nesting-depth .table-container { > table { - border: 1px solid variables.$color--light-mid-grey; + border: 1px solid var(--color-light-mid-grey); } // base table styles - specific ones in their own scss partial table:not(.reviews-summary) { width: 100%; - background-color: variables.$color--white; + background-color: var(--color-white); border-collapse: collapse; table-layout: fixed; @@ -19,7 +18,7 @@ @include mixins.media-query(lg) { tr { &:hover { - background-color: variables.$color--light-grey; + background-color: var(--color-light-grey); } } } @@ -32,28 +31,28 @@ text-align: left; a { - color: variables.$color--black-60; + color: var(--color-black-60); transition: color 0.25s ease-out; } } // table rows tr { - border: 1px solid variables.$color--light-mid-grey; + border: 1px solid var(--color-light-mid-grey); transition: box-shadow 0.15s ease; @include mixins.media-query(lg) { border-block-start: 0; border-inline-end: 0; - border-block-end: 1px solid variables.$color--light-mid-grey; + border-block-end: 1px solid var(--color-light-mid-grey); border-inline-start: 0; &.is-expanded { - border-block-end: 1px solid variables.$color--light-grey; + border-block-end: 1px solid var(--color-light-grey); .lead { span { - background-color: variables.$color--mist; + background-color: var(--color-mist); } } } diff --git a/hypha/static_src/sass/components/_tabs.scss b/hypha/static_src/sass/components/_tabs.scss index 2930f782f0..a1527b7b44 100644 --- a/hypha/static_src/sass/components/_tabs.scss +++ b/hypha/static_src/sass/components/_tabs.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .tabs { margin: 1.5rem 0 -20px; @@ -25,7 +24,7 @@ padding: 10px; font-weight: var(--weight-bold); hyphens: auto; - color: variables.$color--mid-grey; + color: var(--color-mid-grey); text-transform: uppercase; transition: color, @@ -45,7 +44,7 @@ } &:hover { - color: variables.$color--light-blue; + color: var(--color-light-blue); background-color: rgba( #fff, 0.8 @@ -59,26 +58,26 @@ text-transform: none; display: inline-block; border-block-end: 3px solid transparent; - color: variables.$color--mid-dark-grey; + color: var(--color-mid-dark-grey); width: auto; &:hover { - color: variables.$color--default; + color: var(--color-default); } &#{$root}--active { background-color: transparent; - border-block-end: 3px solid variables.$color--primary; + border-block-end: 3px solid var(--color-primary); &:hover { - color: variables.$color--default; + color: var(--color-default); background-color: transparent; } } } &--active { - color: variables.$color--default; + color: var(--color-default); cursor: default; background-color: var(--color-bg-default); diff --git a/hypha/static_src/sass/components/_tooltip.scss b/hypha/static_src/sass/components/_tooltip.scss index 0015e72abc..b82dd5d24d 100644 --- a/hypha/static_src/sass/components/_tooltip.scss +++ b/hypha/static_src/sass/components/_tooltip.scss @@ -1,5 +1,3 @@ -@use "../abstracts/variables"; - [data-tooltip] { position: relative; z-index: 2; @@ -18,8 +16,8 @@ inset-block-end: 110%; margin-block-end: 5px; padding: 7px; - background-color: variables.$color--dark-grey; - color: variables.$color--white; + background-color: var(--color-dark-grey); + color: var(--color-white); content: attr(data-tooltip); text-align: center; font-size: 14px; diff --git a/hypha/static_src/sass/components/_traffic-light.scss b/hypha/static_src/sass/components/_traffic-light.scss index 592aca2d12..b14bb3cf2a 100644 --- a/hypha/static_src/sass/components/_traffic-light.scss +++ b/hypha/static_src/sass/components/_traffic-light.scss @@ -1,5 +1,3 @@ -@use "../abstracts/variables"; - .traffic-light { display: block; width: 1em; @@ -8,19 +6,19 @@ &--no, &--red { - background-color: variables.$color--tomato; + background-color: var(--color-tomato); clip-path: polygon(100% 0, 0 0, 50% 100%); } &--maybe, &--amber { - background-color: variables.$color--mustard; + background-color: var(--color-mustard); border-radius: 50%; } &--yes, &--green { - background-color: variables.$color--green; + background-color: var(--color-green); clip-path: polygon(50% 0, 0 100%, 100% 100%); } } diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss index 73330eec65..5cd2506167 100644 --- a/hypha/static_src/sass/components/_wrapper.scss +++ b/hypha/static_src/sass/components/_wrapper.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .wrapper { width: 100%; @@ -75,8 +74,8 @@ max-width: 830px; padding: 10px; margin: 0 auto 2rem; - background: variables.$color--light-pink; - border: 1px solid variables.$color--tomato; + background: var(--color-light-pink); + border: 1px solid var(--color-tomato); .feed & { margin: 0 0 1rem; @@ -190,8 +189,8 @@ &--cta-box { width: 500px; padding: 20px; - color: variables.$color--default; - background-color: variables.$color--white; + color: var(--color-default); + background-color: var(--color-white); } &--applicant-dashboard { @@ -202,8 +201,8 @@ &--status-bar-outer { padding: 20px 0; - background-color: variables.$color--white; - border-block-end: 3px solid variables.$color--light-grey; + background-color: var(--color-white); + border-block-end: 3px solid var(--color-light-grey); } &--status-bar-inner { @@ -232,7 +231,7 @@ &--comments { margin-block-end: 1rem; - border-block-end: 1px solid variables.$color--mid-grey; + border-block-end: 1px solid var(--color-mid-grey); .helptext { font-size: 15px; diff --git a/hypha/static_src/sass/custom/_extra.scss b/hypha/static_src/sass/custom/_extra.scss deleted file mode 100644 index 061b3d43d2..0000000000 --- a/hypha/static_src/sass/custom/_extra.scss +++ /dev/null @@ -1 +0,0 @@ -// stylelint-disable no-empty-source diff --git a/hypha/static_src/sass/layout/_header.scss b/hypha/static_src/sass/layout/_header.scss index 12b15bbc93..30b223ba4b 100644 --- a/hypha/static_src/sass/layout/_header.scss +++ b/hypha/static_src/sass/layout/_header.scss @@ -1,5 +1,4 @@ @use "../abstracts/mixins"; -@use "../abstracts/variables"; .header { padding: var(--gutters); diff --git a/hypha/static_src/sass/main.scss b/hypha/static_src/sass/main.scss index 0cdb9db644..9b15709c84 100644 --- a/hypha/static_src/sass/main.scss +++ b/hypha/static_src/sass/main.scss @@ -1,11 +1,3 @@ -// Abstracts -@use "abstracts/functions"; -@use "abstracts/mixins"; -@use "abstracts/variables"; - -// Custom overrides -@use "custom/extra"; - // Base @use "base/base"; @use "base/typography"; From 3f8a0e366ac03d33099ec4b36f231ebb1d79901d Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 19:04:04 +0100 Subject: [PATCH 08/18] Seperate gutters and spacing. --- hypha/static_src/sass/abstracts/_variables.scss | 2 +- hypha/static_src/sass/components/_admin-bar.scss | 3 ++- hypha/static_src/sass/components/_list-reveal.scss | 2 +- hypha/static_src/sass/layout/_header.scss | 3 ++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index 4c38629240..bd2e8b35e3 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -1,4 +1,3 @@ -@use "sass:color"; // stylelint-disable color-function-notation, color-no-hex, alpha-value-notation, value-keyword-case :root { // Default @@ -87,6 +86,7 @@ // Spacing --gutters: calc(5px + 1.5625vw); --gutters-reverse: calc(0px - (5px + 1.5625vw)); + --spacing: 1.25rem; // Dropdown height --dropdown-height: 45px; diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss index 631d50eac9..d791aed3a0 100644 --- a/hypha/static_src/sass/components/_admin-bar.scss +++ b/hypha/static_src/sass/components/_admin-bar.scss @@ -2,7 +2,8 @@ .admin-bar { position: relative; - padding: var(--gutters); + padding-inline: var(--gutters); + padding-block: var(--spacing); margin-inline: var(--gutters-reverse); color: var(--color-white); background-color: var(--color-dark-grey); diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index 6ad09e8836..8d2e5790c6 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -5,7 +5,7 @@ &--determination { background-color: var(--color-white); - margin-block-end: var(--gutters); + margin-block-end: var(--spacing); @include mixins.media-query(md) { max-width: 70%; diff --git a/hypha/static_src/sass/layout/_header.scss b/hypha/static_src/sass/layout/_header.scss index 30b223ba4b..3f1d69b424 100644 --- a/hypha/static_src/sass/layout/_header.scss +++ b/hypha/static_src/sass/layout/_header.scss @@ -1,7 +1,8 @@ @use "../abstracts/mixins"; .header { - padding: var(--gutters); + padding-inline: var(--gutters); + padding-block: var(--spacing); background-color: var(--color-header-bg); border-block-end: 1px solid rgb(136 146 171 / 10%); From 89b5d491d843cf36e06c3cb6da23e8d8778ed72c Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 20:24:36 +0100 Subject: [PATCH 09/18] Fix bug in submission-form-copy.js. --- hypha/static_src/javascript/submission-form-copy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hypha/static_src/javascript/submission-form-copy.js b/hypha/static_src/javascript/submission-form-copy.js index 6a24b8ee43..95b5631790 100644 --- a/hypha/static_src/javascript/submission-form-copy.js +++ b/hypha/static_src/javascript/submission-form-copy.js @@ -16,7 +16,7 @@ function get_questions() { var questions_text = []; var i = 1; - questions_text.push("# " + $(".header__title").html()); + questions_text.push("# " + $("h1:first").html()); $(".application-form") .find(".form__group, .rich-text, h2, h3") .each(function () { From 900885cbbfb512bb7c853b3425c23fa0f039559d Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 20:25:31 +0100 Subject: [PATCH 10/18] Adjust header styles. --- hypha/static_src/sass/layout/_header.scss | 34 ----------------------- hypha/templates/base-apply.html | 2 +- 2 files changed, 1 insertion(+), 35 deletions(-) diff --git a/hypha/static_src/sass/layout/_header.scss b/hypha/static_src/sass/layout/_header.scss index 3f1d69b424..0c0814d514 100644 --- a/hypha/static_src/sass/layout/_header.scss +++ b/hypha/static_src/sass/layout/_header.scss @@ -3,35 +3,11 @@ .header { padding-inline: var(--gutters); padding-block: var(--spacing); - background-color: var(--color-header-bg); - border-block-end: 1px solid rgb(136 146 171 / 10%); - - @include mixins.media-query(md) { - padding: 0 var(--gutters); - } @include mixins.media-query(xl) { padding: 0; } - &--nomenu { - padding-block: var(--gutters); - } - - &__inner { - z-index: 10; - display: flex; - gap: 1rem; - flex-direction: column; - align-items: center; - justify-content: space-between; - width: 100%; - - @include mixins.media-query(md) { - flex-direction: row; - } - } - &__logo { max-width: none; @@ -52,14 +28,4 @@ } } } - - &__buttons { - } - - &__menus { - display: flex; - flex-grow: 1; - align-items: center; - justify-content: center; - } } diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html index 79d57f36e3..15fdb8a6ae 100644 --- a/hypha/templates/base-apply.html +++ b/hypha/templates/base-apply.html @@ -3,7 +3,7 @@ {% block header %}
From b85dd649cf91012487e1ba5987ad9b6bcd462804 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 20:30:15 +0100 Subject: [PATCH 11/18] Move root css variables to seperate file. --- hypha/static_src/sass/abstracts/_root.scss | 92 ++++++++++++++++++ .../static_src/sass/abstracts/_variables.scss | 94 ------------------- .../static_src/sass/components/_wrapper.scss | 14 +-- hypha/static_src/sass/layout/_header.scss | 3 +- hypha/static_src/sass/main.scss | 3 + hypha/static_src/sass/print.scss | 3 - 6 files changed, 101 insertions(+), 108 deletions(-) create mode 100644 hypha/static_src/sass/abstracts/_root.scss diff --git a/hypha/static_src/sass/abstracts/_root.scss b/hypha/static_src/sass/abstracts/_root.scss new file mode 100644 index 0000000000..9936020d19 --- /dev/null +++ b/hypha/static_src/sass/abstracts/_root.scss @@ -0,0 +1,92 @@ +:root { + // Default + --color-white: #fff; + --color-black: #1f2328; + --color-light-grey: #f7f7f7; + --color-light-mid-grey: #e8e8e8; + --color-mid-grey: #cfcfcf; + --color-mid-dark-grey: #919191; + --color-dark-grey: #404041; + + // Brand + --color-lightest-blue: #24aae1; + --color-light-blue: #1d79a8; + --color-light-blue-90: rgb(29 121 168 / 10%); + --color-lighter-blue: #7ab8d4; + --color-dark-blue: #0c72a0; + --color-darkest-blue: #3d6bdb; + --color-mustard: #e6ab32; + --color-purple: #8c0bbf; + --color-dark-pink: #511034; + --color-pink: #d02a85; + --color-light-pink: #ffe1df; + --color-light-green: #e1fae1; + --color-cream: #f5f7e7; + --color-dark-tomato: #cc1e12; + --color-tomato: #f05e54; + --color-mint: #40c2ad; + --color-grass: #7dc588; + --color-ocean: #1888b1; + --color-sky-blue: #e7f2f6; + --color-marine: #14729a; + --color-mist: #f3fafe; + --color-green: #7dc558; + --color-pastel-red: #f1a9a9; + --color-pastel-green: #afe6af; + + // Transparent + --color-black-60: rgb(0 0 0 / 60%); + --color-black-50: rgb(0 0 0 / 50%); + --color-black-40: rgb(0 0 0 / 40%); + --color-black-25: rgb(0 0 0 / 25%); + --color-black-20: rgb(0 0 0 / 20%); + --color-black-10: rgb(0 0 0 / 10%); + --color-white-50: rgb(255 255 255 / 50%); + --color-white-40: rgb(255 255 255 / 40%); + --color-white-25: rgb(255 255 255 / 25%); + --color-white-20: rgb(255 255 255 / 20%); + --color-white-10: rgb(255 255 255 / 10%); + + // Assignment + --color-default: var(--color-black); + --color-primary: var(--color-light-blue); + --color-error: var(--color-tomato); + --color-correct: var(--color-mint); + --color-button-disabled: var(--color-lighter-blue); + + // Font sizes + --font-size-alpha: 36px; + --font-size-beta: 30px; + --font-size-gamma: 28px; + --font-size-delta: 24px; + --font-size-epsilon: 18px; + --font-size-zeta: 14px; + --font-size-milli: 12px; + + // Font weights + --weight-black: 800; + --weight-bold: 700; + --weight-semibold: 600; + --weight-normal: 400; + --weight-light: 200; + + // Wrappers + --site-width: 1280px; + --wrapper-medium: 1020px; + --wrapper-small: 790px; + + // Text line length + --max-text-line-length: 50em; + + // Transition + --transition: 0.25s ease-out; + --quick-transition: 0.15s ease; + + // Spacing + --gutters: calc(5px + 1.5625vw); + --gutters-reverse: calc(0px - (5px + 1.5625vw)); + --spacing: 1.25rem; + + // Dropdown height + --dropdown-height: 45px; +} diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index bd2e8b35e3..c4c8738867 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -1,97 +1,3 @@ -// stylelint-disable color-function-notation, color-no-hex, alpha-value-notation, value-keyword-case -:root { - // Default - --color-white: #fff; - --color-black: #1f2328; - --color-light-grey: #f7f7f7; - --color-light-mid-grey: #e8e8e8; - --color-mid-grey: #cfcfcf; - --color-mid-dark-grey: #919191; - --color-dark-grey: #404041; - - // Brand - --color-lightest-blue: #24aae1; - --color-light-blue: #1d79a8; - --color-light-blue-90: rgba(29, 121, 168, 0.1); - --color-lighter-blue: #7ab8d4; - --color-dark-blue: #0c72a0; - --color-darkest-blue: #3d6bdb; - --color-mustard: #e6ab32; - --color-purple: #8c0bbf; - --color-dark-pink: #511034; - --color-pink: #d02a85; - --color-light-pink: #ffe1df; - --color-light-green: #e1fae1; - --color-cream: #f5f7e7; - --color-dark-tomato: #cc1e12; - --color-tomato: #f05e54; - --color-mint: #40c2ad; - --color-grass: #7dc588; - --color-ocean: #1888b1; - --color-sky-blue: #e7f2f6; - --color-marine: #14729a; - --color-mist: #f3fafe; - --color-green: #7dc558; - --color-pastel-red: #f1a9a9; - --color-pastel-green: #afe6af; - - // Transparent - --color-black-60: rgba(0, 0, 0, 0.6); - --color-black-50: rgba(0, 0, 0, 0.5); - --color-black-40: rgba(0, 0, 0, 0.4); - --color-black-25: rgba(0, 0, 0, 0.25); - --color-black-20: rgba(0, 0, 0, 0.2); - --color-black-10: rgba(0, 0, 0, 0.1); - --color-white-50: rgba(255, 255, 255, 0.5); - --color-white-40: rgba(255, 255, 255, 0.4); - --color-white-25: rgba(255, 255, 255, 0.25); - --color-white-20: rgba(255, 255, 255, 0.2); - --color-white-10: rgba(255, 255, 255, 0.1); - - // Assignment - --color-default: var(--color-black); - --color-primary: var(--color-light-blue); - --color-error: var(--color-tomato); - --color-correct: var(--color-mint); - --color-button-disabled: var(--color-lighter-blue); - - // Font sizes - --font-size-alpha: 36px; - --font-size-beta: 30px; - --font-size-gamma: 28px; - --font-size-delta: 24px; - --font-size-epsilon: 18px; - --font-size-zeta: 14px; - --font-size-milli: 12px; - - // Font weights - --weight-black: 800; - --weight-bold: 700; - --weight-semibold: 600; - --weight-normal: 400; - --weight-light: 200; - - // Wrappers - --site-width: 1280px; - --wrapper-medium: 1020px; - --wrapper-small: 790px; - - // Text line length - --max-text-line-length: 50em; - - // Transition - --transition: 0.25s ease-out; - --quick-transition: 0.15s ease; - - // Spacing - --gutters: calc(5px + 1.5625vw); - --gutters-reverse: calc(0px - (5px + 1.5625vw)); - --spacing: 1.25rem; - - // Dropdown height - --dropdown-height: 45px; -} - // Font sizes $base-font-size: 16px; diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss index 5cd2506167..77eaf7001d 100644 --- a/hypha/static_src/sass/components/_wrapper.scss +++ b/hypha/static_src/sass/components/_wrapper.scss @@ -5,28 +5,24 @@ &--small { max-width: var(--wrapper-small); - margin-inline-start: auto; - margin-inline-end: auto; + margin-inline: auto; } &--medium { max-width: var(--wrapper-medium); - margin-inline-start: auto; - margin-inline-end: auto; + margin-inline: auto; } &--large { max-width: var(--site-width); - margin-inline-start: auto; - margin-inline-end: auto; + margin-inline: auto; } &--main { - padding: 0 var(--gutters); - min-height: calc(100vh - 260px - 160px); // viewport - (header + footer) + padding-inline: var(--gutters); @include mixins.media-query(xl) { - padding: 0; + padding-inline: 0; } } diff --git a/hypha/static_src/sass/layout/_header.scss b/hypha/static_src/sass/layout/_header.scss index 0c0814d514..4339077ea8 100644 --- a/hypha/static_src/sass/layout/_header.scss +++ b/hypha/static_src/sass/layout/_header.scss @@ -2,10 +2,9 @@ .header { padding-inline: var(--gutters); - padding-block: var(--spacing); @include mixins.media-query(xl) { - padding: 0; + padding-inline: 0; } &__logo { diff --git a/hypha/static_src/sass/main.scss b/hypha/static_src/sass/main.scss index 9b15709c84..c8182edc8f 100644 --- a/hypha/static_src/sass/main.scss +++ b/hypha/static_src/sass/main.scss @@ -1,3 +1,6 @@ +// Variables +@use "abstracts/root"; + // Base @use "base/base"; @use "base/typography"; diff --git a/hypha/static_src/sass/print.scss b/hypha/static_src/sass/print.scss index 69cf2863e2..f415f904d9 100644 --- a/hypha/static_src/sass/print.scss +++ b/hypha/static_src/sass/print.scss @@ -89,9 +89,6 @@ aside, footer, .icon, .card__icon, -.header__icon, -.header__menus, -.header__button-container, .status-bar, .tabs__container, .js-actions-toggle, From 8afd3d79150f046715b569266fc52f0774f6f2b2 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 21:03:58 +0100 Subject: [PATCH 12/18] Implement spacing-reverse. --- hypha/static_src/sass/abstracts/_root.scss | 1 + hypha/static_src/sass/components/_list-reveal.scss | 2 +- hypha/static_src/sass/components/_tabs.scss | 3 ++- hypha/templates/base-apply.html | 2 +- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/hypha/static_src/sass/abstracts/_root.scss b/hypha/static_src/sass/abstracts/_root.scss index 9936020d19..4d2ccbd249 100644 --- a/hypha/static_src/sass/abstracts/_root.scss +++ b/hypha/static_src/sass/abstracts/_root.scss @@ -86,6 +86,7 @@ --gutters: calc(5px + 1.5625vw); --gutters-reverse: calc(0px - (5px + 1.5625vw)); --spacing: 1.25rem; + --spacing-reverse: -1.25rem; // Dropdown height --dropdown-height: 45px; diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index 8d2e5790c6..8e2a09ea00 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -5,7 +5,7 @@ &--determination { background-color: var(--color-white); - margin-block-end: var(--spacing); + margin-block-end: 1.5rem; @include mixins.media-query(md) { max-width: 70%; diff --git a/hypha/static_src/sass/components/_tabs.scss b/hypha/static_src/sass/components/_tabs.scss index a1527b7b44..61f5cf4f89 100644 --- a/hypha/static_src/sass/components/_tabs.scss +++ b/hypha/static_src/sass/components/_tabs.scss @@ -1,7 +1,8 @@ @use "../abstracts/mixins"; .tabs { - margin: 1.5rem 0 -20px; + margin-block-start: var(--spacing); + margin-block-end: var(--spacing-reverse); &__container { display: flex; diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html index 15fdb8a6ae..965597d1b1 100644 --- a/hypha/templates/base-apply.html +++ b/hypha/templates/base-apply.html @@ -3,7 +3,7 @@ {% block header %}
From a68993007bc8457734b6e95edbbb7e41c01faa0b Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 21:29:51 +0100 Subject: [PATCH 13/18] Revert "Use css var colours." This reverts commit 1a2f337eb82d81ba13200a8a47a6c1a6147f3a90. --- hypha/static_src/sass/abstracts/_mixins.scss | 6 +- .../static_src/sass/abstracts/_variables.scss | 55 +++++++ hypha/static_src/sass/base/_base.scss | 5 +- .../sass/components/_actions-bar.scss | 5 +- .../components/_activity-notifications.scss | 4 +- .../sass/components/_admin-bar.scss | 7 +- hypha/static_src/sass/components/_alert.scss | 8 +- .../sass/components/_all-reviews-table.scss | 3 +- .../components/_all-submissions-table.scss | 37 +++-- hypha/static_src/sass/components/_button.scss | 138 +++++++++++------- hypha/static_src/sass/components/_card.scss | 5 +- .../sass/components/_cookieconsent.scss | 7 +- .../sass/components/_dashboard-table.scss | 5 +- .../sass/components/_data-block.scss | 23 +-- .../sass/components/_docs-block.scss | 15 +- .../static_src/sass/components/_dropdown.scss | 10 +- hypha/static_src/sass/components/_editor.scss | 12 +- hypha/static_src/sass/components/_feed.scss | 31 ++-- .../static_src/sass/components/_filters.scss | 7 +- hypha/static_src/sass/components/_form.scss | 53 +++---- .../static_src/sass/components/_heading.scss | 5 +- .../sass/components/_invoice-block.scss | 3 +- .../sass/components/_list-reveal.scss | 21 +-- hypha/static_src/sass/components/_list.scss | 19 ++- .../static_src/sass/components/_messages.scss | 19 +-- hypha/static_src/sass/components/_modal.scss | 21 +-- hypha/static_src/sass/components/_nav.scss | 7 +- .../sass/components/_nprogress.scss | 12 +- .../sass/components/_pagination.scss | 11 +- .../sass/components/_projects-table.scss | 7 +- .../sass/components/_reviews-list.scss | 8 +- .../sass/components/_reviews-sidebar.scss | 29 ++-- .../sass/components/_reviews-summary.scss | 3 +- .../sass/components/_revisions.scss | 6 +- .../sass/components/_rich-text.scss | 8 +- .../sass/components/_round-block.scss | 21 +-- .../static_src/sass/components/_select2.scss | 25 ++-- .../static_src/sass/components/_sidebar.scss | 13 +- .../sass/components/_stat-block.scss | 5 +- .../sass/components/_status-bar.scss | 39 ++--- .../sass/components/_status-block.scss | 13 +- .../sass/components/_submission-meta.scss | 10 +- hypha/static_src/sass/components/_table.scss | 17 ++- hypha/static_src/sass/components/_tabs.scss | 15 +- .../static_src/sass/components/_tooltip.scss | 6 +- .../sass/components/_traffic-light.scss | 8 +- .../static_src/sass/components/_wrapper.scss | 15 +- hypha/static_src/sass/custom/_extra.scss | 1 + hypha/static_src/sass/layout/_header.scss | 1 + 49 files changed, 480 insertions(+), 324 deletions(-) create mode 100644 hypha/static_src/sass/custom/_extra.scss diff --git a/hypha/static_src/sass/abstracts/_mixins.scss b/hypha/static_src/sass/abstracts/_mixins.scss index e2ae446475..41ce4b0608 100644 --- a/hypha/static_src/sass/abstracts/_mixins.scss +++ b/hypha/static_src/sass/abstracts/_mixins.scss @@ -26,10 +26,10 @@ @mixin button($bg, $hover-bg) { padding: 0.5em 2rem; font-weight: var(--weight-bold); - color: var(--color-white); + color: variables.$color--white; text-align: center; background: $bg; - border: 1px solid var(--color-white); + border: 1px solid variables.$color--white; transition: color, background, border, var(--transition); display: flex; align-items: center; @@ -124,7 +124,7 @@ &.desc, &.asc { position: relative; - color: var(--color-dark-grey); + color: variables.$color--dark-grey; &::after { position: absolute; diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index c4c8738867..5c588d3280 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -1,3 +1,58 @@ +// Default +$color--white: #fff; +$color--black: #1f2328; +$color--light-grey: #f7f7f7; +$color--light-mid-grey: #e8e8e8; +$color--mid-grey: #cfcfcf; +$color--mid-dark-grey: #919191; +$color--dark-grey: #404041; + +// Brand +$color--lightest-blue: #24aae1; +$color--light-blue: #1d79a8; +$color--light-blue-90: color.adjust($color--light-blue, $alpha: -0.9); +$color--lighter-blue: #7ab8d4; +$color--dark-blue: #0c72a0; +$color--darkest-blue: #3d6bdb; +$color--mustard: #e6ab32; +$color--purple: #8c0bbf; +$color--dark-pink: #511034; +$color--pink: #d02a85; +$color--light-pink: #ffe1df; +$color--light-green: #e1fae1; +$color--cream: #f5f7e7; +$color--dark-tomato: #cc1e12; +$color--tomato: #f05e54; +$color--mint: #40c2ad; +$color--grass: #7dc588; +$color--ocean: #1888b1; +$color--sky-blue: #e7f2f6; +$color--marine: #14729a; +$color--mist: #f3fafe; +$color--green: #7dc558; +$color--pastel-red: #f1a9a9; +$color--pastel-green: #afe6af; + +// Transparent +$color--black-60: rgb(0 0 0 / 60%); +$color--black-50: rgb(0 0 0 / 50%); +$color--black-40: rgb(0 0 0 / 40%); +$color--black-25: rgb(0 0 0 / 25%); +$color--black-20: rgb(0 0 0 / 20%); +$color--black-10: rgb(0 0 0 / 10%); +$color--white-50: rgb(255 255 255 / 50%); +$color--white-40: rgb(255 255 255 / 40%); +$color--white-25: rgb(255 255 255 / 25%); +$color--white-20: rgb(255 255 255 / 20%); +$color--white-10: rgb(255 255 255 / 10%); + +// Assignment +$color--default: $color--black; +$color--primary: $color--light-blue; +$color--error: $color--tomato; +$color--correct: $color--mint; +$color--button-disabled: $color--lighter-blue; + // Font sizes $base-font-size: 16px; diff --git a/hypha/static_src/sass/base/_base.scss b/hypha/static_src/sass/base/_base.scss index 1c4a4ef91d..428b141c2d 100644 --- a/hypha/static_src/sass/base/_base.scss +++ b/hypha/static_src/sass/base/_base.scss @@ -1,3 +1,6 @@ +@use "../abstracts/variables"; + +// stylelint-disable property-no-vendor-prefix body { overflow-x: hidden; @@ -13,7 +16,7 @@ svg { } a { - color: var(--color-primary); + color: variables.$color--primary; text-decoration: none; &:hover { diff --git a/hypha/static_src/sass/components/_actions-bar.scss b/hypha/static_src/sass/components/_actions-bar.scss index cf21fb7eec..bb14c42b6d 100644 --- a/hypha/static_src/sass/components/_actions-bar.scss +++ b/hypha/static_src/sass/components/_actions-bar.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .actions-bar { width: 100%; @@ -54,8 +55,8 @@ } &__total { - background-color: var(--color-light-blue); - color: var(--color-white); + background-color: variables.$color--light-blue; + color: variables.$color--white; padding: 6px 16px; border-radius: 30px; min-width: 120px; diff --git a/hypha/static_src/sass/components/_activity-notifications.scss b/hypha/static_src/sass/components/_activity-notifications.scss index 88acad898a..ec94fb239e 100644 --- a/hypha/static_src/sass/components/_activity-notifications.scss +++ b/hypha/static_src/sass/components/_activity-notifications.scss @@ -1,8 +1,10 @@ +@use "../abstracts/variables"; + .notifications { &__item { margin: 0; padding: 0.75rem 1rem; - border-block-end: 1px solid var(--color-light-grey); + border-block-end: 1px solid variables.$color--light-grey; &:last-child { margin-block-end: 0; diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss index d791aed3a0..9cba61890d 100644 --- a/hypha/static_src/sass/components/_admin-bar.scss +++ b/hypha/static_src/sass/components/_admin-bar.scss @@ -1,12 +1,13 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .admin-bar { position: relative; padding-inline: var(--gutters); padding-block: var(--spacing); margin-inline: var(--gutters-reverse); - color: var(--color-white); - background-color: var(--color-dark-grey); + color: variables.$color--white; + background-color: variables.$color--dark-grey; @include mixins.media-query(xl) { padding-inline: 0; @@ -42,7 +43,7 @@ &__back-link { display: inline-flex; align-items: center; - color: var(--color-lightest-blue); + color: variables.$color--lightest-blue; font-weight: var(--weight-bold); &::before { diff --git a/hypha/static_src/sass/components/_alert.scss b/hypha/static_src/sass/components/_alert.scss index 01ad40dbe2..b23fcb51e7 100644 --- a/hypha/static_src/sass/components/_alert.scss +++ b/hypha/static_src/sass/components/_alert.scss @@ -1,15 +1,17 @@ +@use "../abstracts/variables"; + .alert { - border: 2px solid var(--color-lighter-blue); + border: 2px solid variables.$color--lighter-blue; padding: 1rem; margin: 0 0 2rem; - background-color: var(--color-light-blue-90); + background-color: variables.$color--light-blue-90; display: flex; align-items: center; &__icon { width: 25px; height: 25px; - fill: var(--color-light-blue); + fill: variables.$color--light-blue; margin-inline-end: 0.8rem; } diff --git a/hypha/static_src/sass/components/_all-reviews-table.scss b/hypha/static_src/sass/components/_all-reviews-table.scss index 47db6e0f94..12d216acc2 100644 --- a/hypha/static_src/sass/components/_all-reviews-table.scss +++ b/hypha/static_src/sass/components/_all-reviews-table.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors @@ -40,7 +41,7 @@ } a { - color: var(--color-primary); + color: variables.$color--primary; } } } diff --git a/hypha/static_src/sass/components/_all-submissions-table.scss b/hypha/static_src/sass/components/_all-submissions-table.scss index d251da783f..811649ecb2 100644 --- a/hypha/static_src/sass/components/_all-submissions-table.scss +++ b/hypha/static_src/sass/components/_all-submissions-table.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; // stylelint-disable selector-class-pattern,selector-max-compound-selectors @@ -17,7 +18,7 @@ th { &.reviews_stats { - color: var(--color-black-60); + color: variables.$color--black-60; div { font-size: 0.75rem; @@ -73,7 +74,7 @@ tbody { tr { &[data-archived="True"] { - background-color: var(--color-light-mid-grey); + background-color: variables.$color--light-mid-grey; } } @@ -101,9 +102,9 @@ padding: 5px; font-size: 13px; font-weight: var(--weight-bold); - color: var(--color-marine); + color: variables.$color--marine; text-align: center; - background-color: var(--color-sky-blue); + background-color: variables.$color--sky-blue; @include mixins.media-query(lg) { width: 100%; @@ -160,7 +161,11 @@ // arrow to toggle project info - added via js @include mixins.media-query(lg) { .arrow { - @include mixins.triangle(right, var(--color-primary), 6px); + @include mixins.triangle( + right, + variables.$color--primary, + 6px + ); position: relative; display: inline-block; transform: rotate(0); @@ -191,11 +196,11 @@ &__parent { &.is-expanded { - background-color: var(--color-mist); - border-block-end: 1px solid var(--color-light-mid-grey); + background-color: variables.$color--mist; + border-block-end: 1px solid variables.$color--light-mid-grey; + #{$root}__child { - border-block-end: 1px solid var(--color-light-mid-grey); + border-block-end: 1px solid variables.$color--light-mid-grey; } + #{$root}__child, @@ -211,11 +216,11 @@ &__child { display: none; - color: var(--color-mid-dark-grey); + color: variables.$color--mid-dark-grey; vertical-align: top; - background-color: var(--color-mist); + background-color: variables.$color--mist; border: 0; - border-block-end: 2px solid var(--color-light-grey); + border-block-end: 2px solid variables.$color--light-grey; &:hover { box-shadow: none; @@ -228,7 +233,7 @@ p { margin: 0; font-weight: var(--weight-bold); - color: var(--color-default); + color: variables.$color--default; } .title { @@ -258,12 +263,12 @@ &__more { display: flex; justify-content: center; - background-color: var(--color-white); + background-color: variables.$color--white; padding: 20px 25px; min-height: auto; - border-block-end: 1px solid var(--color-light-mid-grey); - border-inline-start: 1px solid var(--color-light-mid-grey); - border-inline-end: 1px solid var(--color-light-mid-grey); + border-block-end: 1px solid variables.$color--light-mid-grey; + border-inline-start: 1px solid variables.$color--light-mid-grey; + border-inline-end: 1px solid variables.$color--light-mid-grey; a { margin: 0; diff --git a/hypha/static_src/sass/components/_button.scss b/hypha/static_src/sass/components/_button.scss index ff8a8bc4f4..0cc820679b 100644 --- a/hypha/static_src/sass/components/_button.scss +++ b/hypha/static_src/sass/components/_button.scss @@ -21,9 +21,12 @@ } &--primary { - @include mixins.button(var(--color-light-blue), var(--color-dark-blue)); + @include mixins.button( + variables.$color--light-blue, + variables.$color--dark-blue + ); display: inline-block; - border: 1px solid var(--color-light-blue); + border: 1px solid variables.$color--light-blue; .form--filters & { width: 100%; @@ -33,21 +36,27 @@ } &--project-action { - @include mixins.button(var(--color-light-blue), var(--color-dark-blue)); + @include mixins.button( + variables.$color--light-blue, + variables.$color--dark-blue + ); display: inline-block; padding: 0.5rem 1.2rem; &--white { - @include mixins.button(var(--color-white), var(--color-light-blue)); + @include mixins.button( + variables.$color--white, + variables.$color--light-blue + ); display: inline-block; - color: var(--color-light-blue); - border: 1px solid var(--color-mid-grey); + color: variables.$color--light-blue; + border: 1px solid variables.$color--mid-grey; padding: 0.5rem 1.2rem; &:active, &:focus, &:hover { - color: var(--color-white); + color: variables.$color--white; } } } @@ -60,20 +69,20 @@ } &--transparent { - @include mixins.button(transparent, var(--color-black)); - color: var(--color-black); - border: 1px solid var(--color-black); + @include mixins.button(transparent, variables.$color--black); + color: variables.$color--black; + border: 1px solid variables.$color--black; &:active, &:focus, &:hover { - color: var(--color-white); + color: variables.$color--white; } } &--mobile-standout { - color: var(--color-white); - border-color: var(--color-white); + color: variables.$color--white; + border-color: variables.$color--white; max-width: 250px; margin: 1rem auto 0; @@ -83,50 +92,59 @@ } &--cookieconsent { - @include mixins.button(transparent, var(--color-white)); + @include mixins.button(transparent, variables.$color--white); display: inline; &:focus, &:hover { - color: var(--color-dark-blue); + color: variables.$color--dark-blue; } } &--secondary, &--white { - @include mixins.button(var(--color-white), var(--color-light-blue)); + @include mixins.button( + variables.$color--white, + variables.$color--light-blue + ); display: inline-block; - color: var(--color-light-blue); - border: 1px solid var(--color-mid-grey); + color: variables.$color--light-blue; + border: 1px solid variables.$color--mid-grey; &:active, &:focus, &:hover { - color: var(--color-white); + color: variables.$color--white; } } &--blue-white { - @include mixins.button(var(--color-white), var(--color-light-blue)); + @include mixins.button( + variables.$color--white, + variables.$color--light-blue + ); display: inline-block; - color: var(--color-light-blue); - border: 1px solid var(--color-light-blue); + color: variables.$color--light-blue; + border: 1px solid variables.$color--light-blue; &:focus { - color: var(--color-light-blue); + color: variables.$color--light-blue; } &:hover { - color: var(--color-white); + color: variables.$color--white; } } &-danger, &--warning { - @include mixins.button(var(--color-error), var(--color-error)); + @include mixins.button( + variables.$color--error, + variables.$color--error + ); &:focus { - background-color: var(--color-pastel-red); + background-color: variables.$color--pastel-red; } } @@ -136,8 +154,8 @@ max-width: 300px; padding: 15px 20px; font-weight: var(--weight-normal); - color: var(--color-default); - border: 1px solid var(--color-light-mid-grey); + color: variables.$color--default; + border: 1px solid variables.$color--light-mid-grey; transition: none; width: 100%; @@ -160,7 +178,7 @@ inset-inline-end: 10px; svg { - fill: var(--color-primary); + fill: variables.$color--primary; height: 24px; } } @@ -203,10 +221,10 @@ &--actions { position: relative; display: block; - background-color: var(--color-white); + background-color: variables.$color--white; &:active { - background: var(--color-light-blue-90); + background: variables.$color--light-blue-90; } &::after { @@ -219,8 +237,8 @@ } &.is-active { - color: var(--color-dark-blue); - background: var(--color-light-blue-90); + color: variables.$color--dark-blue; + background: variables.$color--light-blue-90; &::after { inset-block-start: -12px; @@ -260,9 +278,9 @@ &:focus, &:hover { - color: var(--color-white); - background-color: var(--color-light-blue); - border: 1px solid var(--color-light-blue); + color: variables.$color--white; + background-color: variables.$color--light-blue; + border: 1px solid variables.$color--light-blue; } } @@ -274,13 +292,13 @@ width: 10px; height: 14px; margin-inline-start: 10px; - fill: var(--color-white); + fill: variables.$color--white; } } &--action { display: flex; - color: var(--color-default); + color: variables.$color--default; align-items: center; transition: opacity var(--transition); font-weight: var(--weight-semibold); @@ -291,7 +309,7 @@ } &:disabled { - color: var(--color-mid-dark-grey); + color: variables.$color--mid-dark-grey; cursor: not-allowed; pointer-events: all; // to show the tooltip on hover @@ -305,21 +323,25 @@ font-size: 12px; font-weight: var(--weight-normal); white-space: normal; - background: var(--color-light-blue); + background: variables.$color--light-blue; opacity: 0; transition: opacity var(--transition); inset-block-end: 45px; inset-inline-start: 50%; transform: translateX(-50%); - color: var(--color-white); + color: variables.$color--white; text-align: left; line-height: 1rem; - border: 1px solid var(--color-white); + border: 1px solid variables.$color--white; border-radius: 0.125rem; } &::after { - @include mixins.triangle(bottom, var(--color-primary), 7px); + @include mixins.triangle( + bottom, + variables.$color--primary, + 7px + ); position: absolute; inset-block-start: -22px; inset-inline-start: 50%; @@ -330,7 +352,7 @@ } svg { - fill: var(--color-mid-dark-grey); + fill: variables.$color--mid-dark-grey; } &:hover { @@ -350,7 +372,7 @@ } svg { - fill: var(--color-light-blue); + fill: variables.$color--light-blue; width: 1em; height: 1em; margin-inline-end: 0.5rem; @@ -359,22 +381,22 @@ } &--link { - color: var(--color-primary); + color: variables.$color--primary; } &--remove { - color: var(--color-tomato); + color: variables.$color--tomato; } &--tooltip-disabled { - background-color: var(--color-button-disabled); - border: 1px solid var(--color-button-disabled); + background-color: variables.$color--button-disabled; + border: 1px solid variables.$color--button-disabled; &:hover, &:active, &:focus { cursor: default; - background-color: var(--color-button-disabled); + background-color: variables.$color--button-disabled; } } @@ -384,7 +406,7 @@ &::after { content: "\2691"; - color: var(--color-tomato); + color: variables.$color--tomato; position: absolute; inset-block-start: 4px; padding-inline-start: 5px; @@ -395,7 +417,10 @@ } &--unflag { - @include mixins.button(var(--color-light-blue), var(--color-dark-blue)); + @include mixins.button( + variables.$color--light-blue, + variables.$color--dark-blue + ); @include mixins.button--small; /* stylelint-disable-next-line no-duplicate-selectors */ @@ -419,20 +444,23 @@ // Two-factor &-info, &-link { - @include mixins.button(var(--color-light-blue), var(--color-dark-blue)); + @include mixins.button( + variables.$color--light-blue, + variables.$color--dark-blue + ); display: inline-block; line-height: 1.15; } &--like-active { svg { - fill: var(--color-dark-blue); + fill: variables.$color--dark-blue; } } &--dislike-active { svg { - fill: var(--color-tomato); + fill: variables.$color--tomato; } } } diff --git a/hypha/static_src/sass/components/_card.scss b/hypha/static_src/sass/components/_card.scss index db47b8363d..3ace299c47 100644 --- a/hypha/static_src/sass/components/_card.scss +++ b/hypha/static_src/sass/components/_card.scss @@ -1,12 +1,13 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .card { padding: 20px; margin-block-end: 20px; - border: 1px solid var(--color-mid-grey); + border: 1px solid variables.$color--mid-grey; &--solid { - background-color: var(--color-white); + background-color: variables.$color--white; } &__text { diff --git a/hypha/static_src/sass/components/_cookieconsent.scss b/hypha/static_src/sass/components/_cookieconsent.scss index 06b5679ff4..e5fcb9a94d 100644 --- a/hypha/static_src/sass/components/_cookieconsent.scss +++ b/hypha/static_src/sass/components/_cookieconsent.scss @@ -1,11 +1,12 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .cookieconsent { position: fixed; inset-block-end: 0; - color: var(--color-white); - background-color: var(--color-dark-blue); - border-block-start: 4px solid var(--color-light-blue); + color: variables.$color--white; + background-color: variables.$color--dark-blue; + border-block-start: 4px solid variables.$color--light-blue; transform: translateY(100vh); transition: all var(--transition); overflow: hidden; diff --git a/hypha/static_src/sass/components/_dashboard-table.scss b/hypha/static_src/sass/components/_dashboard-table.scss index 4afc1c74cd..c11ac8cd27 100644 --- a/hypha/static_src/sass/components/_dashboard-table.scss +++ b/hypha/static_src/sass/components/_dashboard-table.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors @@ -16,7 +17,7 @@ // ordering - adjust alignment &.desc { position: relative; - color: var(--color-dark-grey); + color: variables.$color--dark-grey; &::after { position: absolute; @@ -27,7 +28,7 @@ &.asc { position: relative; - color: var(--color-dark-grey); + color: variables.$color--dark-grey; &::after { position: absolute; diff --git a/hypha/static_src/sass/components/_data-block.scss b/hypha/static_src/sass/components/_data-block.scss index 9d45eb5859..dceb889b0e 100644 --- a/hypha/static_src/sass/components/_data-block.scss +++ b/hypha/static_src/sass/components/_data-block.scss @@ -1,13 +1,14 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .data-block { $root: &; margin-block-end: 1rem; - border: 1px solid var(--color-light-blue); + border: 1px solid variables.$color--light-blue; &__header { padding: 1rem; - background-color: var(--color-light-blue-90); + background-color: variables.$color--light-blue-90; @include mixins.media-query(sm) { padding: 1rem 2rem; @@ -42,7 +43,7 @@ #{$root}__header & { &:hover, &:focus { - background-color: var(--color-white); + background-color: variables.$color--white; } } @@ -87,14 +88,14 @@ &__table { thead { display: none; - border-block-start: 2px solid var(--color-light-mid-grey); + border-block-start: 2px solid variables.$color--light-mid-grey; @include mixins.media-query(lg) { display: table-header-group; } th { - color: var(--color-mid-dark-grey); + color: variables.$color--mid-dark-grey; padding: 10px; @include mixins.media-query(lg) { @@ -103,7 +104,7 @@ } tr { - border-color: var(--color-light-mid-grey); + border-color: variables.$color--light-mid-grey; } } @@ -113,7 +114,7 @@ tr { border: 0; - border-block-end: 2px solid var(--color-light-grey); + border-block-end: 2px solid variables.$color--light-grey; &:hover { box-shadow: none; @@ -151,7 +152,7 @@ display: inline-block; margin-inline-end: 1rem; text-decoration: underline; - color: var(--color-primary); + color: variables.$color--primary; word-break: normal; transition-property: opacity; transition-duration: 150ms; @@ -185,12 +186,12 @@ } &--remove { - color: var(--color-tomato); + color: variables.$color--tomato; } } &__list-item { - border-block-end: 2px solid var(--color-light-grey); + border-block-end: 2px solid variables.$color--light-grey; padding: 1rem 0; @include mixins.media-query(lg) { @@ -241,7 +242,7 @@ position: absolute; height: 2px; display: block; - background: var(--color-mid-grey); + background: variables.$color--mid-grey; inset-inline-start: -1rem; inset-block-end: 0; diff --git a/hypha/static_src/sass/components/_docs-block.scss b/hypha/static_src/sass/components/_docs-block.scss index 607e7a0cca..295d55e97e 100644 --- a/hypha/static_src/sass/components/_docs-block.scss +++ b/hypha/static_src/sass/components/_docs-block.scss @@ -1,10 +1,11 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .docs-block { - border: 1px solid var(--color-light-blue); + border: 1px solid variables.$color--light-blue; &__header { - background-color: var(--color-light-blue-90); + background-color: variables.$color--light-blue-90; padding: 0.5rem 0.75rem; display: flex; justify-content: space-between; @@ -25,7 +26,7 @@ &__row { padding-block-end: 1rem; margin-block-end: 1rem; - border-block-end: 1px solid var(--color-mid-grey); + border-block-end: 1px solid variables.$color--mid-grey; @include mixins.media-query(md) { display: flex; @@ -57,7 +58,7 @@ } &__contract-upload-row { - border: 1px solid var(--color-light-blue); + border: 1px solid variables.$color--light-blue; } } @@ -72,7 +73,7 @@ &__icon { width: 20px; height: 20px; - stroke: var(--color-mid-grey); + stroke: variables.$color--mid-grey; fill: transparent; margin-inline-end: 0.5rem; @@ -87,7 +88,7 @@ &:disabled, &.is-disabled { - color: var(--color-mid-grey); + color: variables.$color--mid-grey; cursor: default; } @@ -104,7 +105,7 @@ &:disabled, &.is-disabled { - color: var(--color-mid-grey); + color: variables.$color--mid-grey; cursor: default; } diff --git a/hypha/static_src/sass/components/_dropdown.scss b/hypha/static_src/sass/components/_dropdown.scss index a0327d21bd..91fa6772b4 100644 --- a/hypha/static_src/sass/components/_dropdown.scss +++ b/hypha/static_src/sass/components/_dropdown.scss @@ -1,24 +1,26 @@ +@use "../abstracts/variables"; + .dropdown { position: relative; display: inline-block; &__content { position: absolute; - background-color: var(--color-light-grey); + background-color: variables.$color--light-grey; min-width: 160px; - box-shadow: 1px 8px 16px 1px var(--color-mid-dark-grey); + box-shadow: 1px 8px 16px 1px variables.$color--mid-dark-grey; z-index: 1; /* Links inside the dropdown */ a { - color: var(--color-black); + color: variables.$color--black; padding: 12px 16px; text-decoration: none; display: block; /* Change color of dropdown links on hover */ &:hover { - background-color: var(--color-mid-grey); + background-color: variables.$color--mid-grey; } } } diff --git a/hypha/static_src/sass/components/_editor.scss b/hypha/static_src/sass/components/_editor.scss index 4ac055dcac..6c61d6636b 100644 --- a/hypha/static_src/sass/components/_editor.scss +++ b/hypha/static_src/sass/components/_editor.scss @@ -1,3 +1,5 @@ +@use "../abstracts/variables"; + .wmd-preview { background-color: #f3f4f6; padding: 0 10px; @@ -16,12 +18,12 @@ .wmd-button-row { display: flex; - background-color: var(--color-white); + background-color: variables.$color--white; padding: 4px; } .wmd-spacer { - background-color: var(--color-mid-grey); + background-color: variables.$color--mid-grey; width: 1px; height: 20px; margin: 0 14px; @@ -46,11 +48,11 @@ } .wmd-prompt-background { - background-color: var(--color-black); + background-color: variables.$color--black; } .wmd-prompt-dialog { - background-color: var(--color-light-grey); + background-color: variables.$color--light-grey; padding: 0.5em; - border: 4px solid var(--color-primary); + border: 4px solid variables.$color--primary; } diff --git a/hypha/static_src/sass/components/_feed.scss b/hypha/static_src/sass/components/_feed.scss index cf06c7571a..3a5b193fb0 100644 --- a/hypha/static_src/sass/components/_feed.scss +++ b/hypha/static_src/sass/components/_feed.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; @use "../base/typography"; .feed { @@ -29,33 +30,33 @@ &__label { margin: 0; - color: var(--color-white); + color: variables.$color--white; text-align: center; &--note { - background-color: var(--color-error); + background-color: variables.$color--error; } &--determination { - background-color: var(--color-ocean); + background-color: variables.$color--ocean; } &--comment, &--message { - background-color: var(--color-grass); + background-color: variables.$color--grass; } &--activity, &--action { - background-color: var(--color-mint); + background-color: variables.$color--mint; } &--submission { - background-color: var(--color-green); + background-color: variables.$color--green; } &--project { - background-color: var(--color-mint); + background-color: variables.$color--mint; } &--mobile { @@ -105,7 +106,7 @@ &--last-edited { margin-inline-end: 5px; - color: var(--color-mid-dark-grey); + color: variables.$color--mid-dark-grey; span { font-weight: var(--weight-normal); @@ -124,7 +125,7 @@ width: 100%; margin: 5px 0 0; font-size: var(--font-size-milli); - color: var(--color-black-50); + color: variables.$color--black-50; @include mixins.media-query(sm) { width: auto; @@ -137,7 +138,7 @@ &::after { @include mixins.triangle( right, - var(--color-black-50), + variables.$color--black-50, 4px ); display: inline-block; @@ -161,7 +162,7 @@ height: 14px; margin-inline-start: 10px; margin-block-start: 0.35em; - fill: var(--color-dark-blue); + fill: variables.$color--dark-blue; } } @@ -178,10 +179,10 @@ padding: 3px 10px; font-size: var(--font-size-milli); font-weight: var(--weight-bold); - color: var(--color-marine); + color: variables.$color--marine; text-align: center; text-transform: uppercase; - background-color: var(--color-sky-blue); + background-color: variables.$color--sky-blue; } &__company { @@ -198,8 +199,8 @@ padding: 3em 0 0.5em; background-image: linear-gradient( to bottom, - var(--color-white-10), - var(--color-white) + variables.$color--white-10, + variables.$color--white ); } } diff --git a/hypha/static_src/sass/components/_filters.scss b/hypha/static_src/sass/components/_filters.scss index 5ac6c62b3c..6c27290ec3 100644 --- a/hypha/static_src/sass/components/_filters.scss +++ b/hypha/static_src/sass/components/_filters.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .filters { display: none; @@ -13,7 +14,7 @@ display: block; width: 100%; height: 100vh; - background: var(--color-white); + background: variables.$color--white; } @include mixins.media-query(lg) { @@ -47,7 +48,7 @@ } > div[class^="js-"] { - color: var(--color-primary); + color: variables.$color--primary; &:hover { cursor: pointer; @@ -59,7 +60,7 @@ appearance: none; -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix border: 0; - color: var(--color-primary); + color: variables.$color--primary; background: transparent; } } diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss index 225ba04e06..d87cc83e48 100644 --- a/hypha/static_src/sass/components/_form.scss +++ b/hypha/static_src/sass/components/_form.scss @@ -108,17 +108,20 @@ &--multi_file_field, &--single_file_field, &--file_field { - @include mixins.button(var(--color-white), var(--color-light-blue)); + @include mixins.button( + variables.$color--white, + variables.$color--light-blue + ); display: inline-block; - color: var(--color-light-blue); - border: 1px solid var(--color-mid-grey); + color: variables.$color--light-blue; + border: 1px solid variables.$color--mid-grey; &:focus { - color: var(--color-light-blue); + color: variables.$color--light-blue; } &:hover { - color: var(--color-white); + color: variables.$color--white; } max-width: 15rem; @@ -147,28 +150,28 @@ } &__file-drop-zone { - color: var(--color-mid-grey); + color: variables.$color--mid-grey; padding: 25px; font-size: 17px; font-weight: var(--weight-bold); text-align: center; - border: 2px dashed var(--color-mid-grey); + border: 2px dashed variables.$color--mid-grey; border-radius: 5px; } &__filters { #{variables.$filter-dropdown} { border: 0; - border-block-start: 1px solid var(--color-mid-grey); + border-block-start: 1px solid variables.$color--mid-grey; &.is-active { font-weight: var(--weight-normal); - background-color: var(--color-light-blue-90); - border-color: var(--color-mid-grey); + background-color: variables.$color--light-blue-90; + border-color: variables.$color--mid-grey; } @include mixins.media-query(lg) { - border: 1px solid var(--color-mid-grey); + border: 1px solid variables.$color--mid-grey; } } @@ -282,7 +285,7 @@ } &__required { - color: var(--color-purple); + color: variables.$color--purple; } &__help { @@ -303,7 +306,7 @@ a { &:hover { cursor: pointer; - color: var(--color-darkest-blue); + color: variables.$color--darkest-blue; } } } @@ -312,7 +315,7 @@ display: inline; width: 20px; height: 20px; - fill: var(--color-dark-grey); + fill: variables.$color--dark-grey; } &__item { @@ -347,7 +350,7 @@ select { option { - background-color: var(--color-white); + background-color: variables.$color--white; } } @@ -369,7 +372,7 @@ max-width: 385px; &.invalid { - border: 2px solid var(--color-error); + border: 2px solid variables.$color--error; outline: none; } } @@ -385,7 +388,7 @@ input[type="number"], input[type="password"], input[type="datetime-local"] { - border: 2px solid var(--color-error); + border: 2px solid variables.$color--error; } } @@ -393,8 +396,8 @@ max-width: 200px; padding: 5px; margin: 20px 0 0; - color: var(--color-white); - background: var(--color-error); + color: variables.$color--white; + background: variables.$color--error; z-index: 2; @include mixins.media-query(lg) { @@ -408,7 +411,7 @@ position: absolute; inset-block-start: 12px; inset-inline-start: -10px; - border-color: transparent var(--color-error) transparent + border-color: transparent variables.$color--error transparent transparent; border-style: solid; border-width: 5px 10px 5px 0; @@ -439,7 +442,7 @@ display: block; width: 100%; padding: 0.4em; - border: 1px solid var(--color-mid-grey); + border: 1px solid variables.$color--mid-grey; } .wmd-preview { @@ -478,8 +481,8 @@ .errorlist { padding: 5px; margin-block-end: 0.2em; - background: var(--color-light-pink); - border: 1px solid var(--color-tomato); + background: variables.$color--light-pink; + border: 1px solid variables.$color--tomato; } .address { @@ -509,7 +512,7 @@ } &__info-box { - background-color: var(--color-light-blue-90); + background-color: variables.$color--light-blue-90; padding: 1rem; p { @@ -528,6 +531,6 @@ @keyframes flash { 50% { - background-color: var(--color-mustard); + background-color: variables.$color--mustard; } } diff --git a/hypha/static_src/sass/components/_heading.scss b/hypha/static_src/sass/components/_heading.scss index 68842c6b0d..e9c80aecea 100644 --- a/hypha/static_src/sass/components/_heading.scss +++ b/hypha/static_src/sass/components/_heading.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .heading { &--no-margin { @@ -30,7 +31,7 @@ flex-direction: column; margin-block-start: 20px; font-weight: var(--weight-normal); - color: var(--color-black-40); + color: variables.$color--black-40; @include mixins.media-query(lg) { flex-direction: row; @@ -47,7 +48,7 @@ } &--light-grey { - color: var(--color-black-40); + color: variables.$color--black-40; } &--uppercase { diff --git a/hypha/static_src/sass/components/_invoice-block.scss b/hypha/static_src/sass/components/_invoice-block.scss index ecc6e494ce..6c6848fee1 100644 --- a/hypha/static_src/sass/components/_invoice-block.scss +++ b/hypha/static_src/sass/components/_invoice-block.scss @@ -1,9 +1,10 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .invoice-block { padding: 1rem; margin-block-end: 1rem; - border: 1px solid var(--color-dark-blue); + border: 1px solid variables.$color--dark-blue; @include mixins.media-query(sm) { display: flex; diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index 8e2a09ea00..d4133e4388 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -1,10 +1,11 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .list-reveal { $root: &; &--determination { - background-color: var(--color-white); + background-color: variables.$color--white; margin-block-end: 1.5rem; @include mixins.media-query(md) { @@ -16,12 +17,12 @@ display: block; font-size: var(--font-size-zeta); padding: 0.75em 1em; - border-block-end: 2px solid var(--color-light-mid-grey); + border-block-end: 2px solid variables.$color--light-mid-grey; margin: 0; - color: var(--color-default); + color: variables.$color--default; &--meta { - color: var(--color-dark-blue); + color: variables.$color--dark-blue; font-weight: var(--weight-semibold); display: flex; justify-content: space-between; @@ -29,7 +30,7 @@ } &--determination { - border: 1px solid var(--color-light-mid-grey); + border: 1px solid variables.$color--light-mid-grey; margin: 0; } } @@ -39,13 +40,13 @@ overflow: scroll; margin: 0 -24px var(--gutters); padding: 0; - border-block-end: 2px solid var(--color-light-mid-grey); - box-shadow: inset 0 -10px 20px -10px var(--color-mid-grey); + border-block-end: 2px solid variables.$color--light-mid-grey; + box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; transition: max-height var(--transition); &--determination { - border-inline-start: 1px solid var(--color-light-mid-grey); - border-inline-end: 1px solid var(--color-light-mid-grey); + border-inline-start: 1px solid variables.$color--light-mid-grey; + border-inline-end: 1px solid variables.$color--light-mid-grey; margin: 0; } @@ -62,7 +63,7 @@ &__open-icon { width: 20px; height: 20px; - fill: var(--color-dark-grey); + fill: variables.$color--dark-grey; opacity: 0; transition: opacity var(--quick-transition); pointer-events: none; diff --git a/hypha/static_src/sass/components/_list.scss b/hypha/static_src/sass/components/_list.scss index da9d7600f9..e9d7746bdb 100644 --- a/hypha/static_src/sass/components/_list.scss +++ b/hypha/static_src/sass/components/_list.scss @@ -1,5 +1,6 @@ @use "../base/typography"; @use "../abstracts/mixins"; +@use "../abstracts/variables"; .list { $root: &; @@ -12,8 +13,8 @@ &--opinion { position: relative; font-size: 14px; - border-block-start: 1px solid var(--color-mid-grey); - border-block-end: 1px solid var(--color-mid-grey); + border-block-start: 1px solid variables.$color--mid-grey; + border-block-end: 1px solid variables.$color--mid-grey; margin: 10px 0; padding: 5px 0; @@ -27,12 +28,16 @@ } &::after { - @include mixins.triangle(top, var(--color-mist), 6px); + @include mixins.triangle(top, variables.$color--mist, 6px); inset-block-start: -13px; } &::before { - @include mixins.triangle(top, var(--color-mid-grey), 6px); + @include mixins.triangle( + top, + variables.$color--mid-grey, + 6px + ); } } } @@ -61,7 +66,7 @@ position: absolute; max-width: initial; overflow: visible; - background-color: var(--color-mist); + background-color: variables.$color--mist; + #{$root}__item--reviewer-outcome { width: 100%; @@ -75,11 +80,11 @@ } &--reviewer-outcome { - color: var(--color-tomato); + color: variables.$color--tomato; position: relative; &.agree { - color: var(--color-green); + color: variables.$color--green; } } } diff --git a/hypha/static_src/sass/components/_messages.scss b/hypha/static_src/sass/components/_messages.scss index bcbcdb5db3..c226922a1f 100644 --- a/hypha/static_src/sass/components/_messages.scss +++ b/hypha/static_src/sass/components/_messages.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .messages { position: fixed; @@ -13,22 +14,22 @@ align-items: center; max-width: 450px; margin: 0 auto; - color: var(--color-black); + color: variables.$color--black; pointer-events: all; max-height: 1000px; - background: var(--color-cream); + background: variables.$color--cream; } &__text { position: relative; padding: 15px 20px; - color: var(--color-white); + color: variables.$color--white; font-size: 14px; opacity: 1; transition: opacity, max-height, var(--transition); pointer-events: all; max-height: 1000px; - background: var(--color-dark-blue); + background: variables.$color--dark-blue; @include mixins.media-query(xl) { padding: 15px 30px; @@ -36,16 +37,16 @@ &--info, &--success { - background: var(--color-dark-blue); + background: variables.$color--dark-blue; } &--error, &--warning { - background: var(--color-dark-tomato); + background: variables.$color--dark-tomato; } &--debug { - background: var(--color-dark-pink); + background: variables.$color--dark-pink; } } @@ -65,8 +66,8 @@ &__button { margin-inline-start: auto; - color: var(--color-dark-blue); - background-color: var(--color-white); + color: variables.$color--dark-blue; + background-color: variables.$color--white; display: inline-block; font-weight: var(--weight-bold); padding: 2px 20px; diff --git a/hypha/static_src/sass/components/_modal.scss b/hypha/static_src/sass/components/_modal.scss index 7b3185fc7e..97e3aebc28 100644 --- a/hypha/static_src/sass/components/_modal.scss +++ b/hypha/static_src/sass/components/_modal.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .modal { $root: &; @@ -12,8 +13,8 @@ } &__header-bar { - color: var(--color-white); - background-color: var(--color-dark-blue); + color: variables.$color--white; + background-color: variables.$color--dark-blue; margin: -24px -24px 20px; padding: 15px; text-align: center; @@ -24,8 +25,8 @@ } &__project-header-bar { - color: var(--color-white); - background-color: var(--color-dark-blue); + color: variables.$color--white; + background-color: variables.$color--dark-blue; margin: -24px -24px 20px; padding: 15px 24px; text-align: left; @@ -40,8 +41,8 @@ overflow: scroll; margin: 0 -24px 20px; padding: 0; - border-block-end: 2px solid var(--color-light-mid-grey); - box-shadow: inset 0 -10px 20px -10px var(--color-mid-grey); + border-block-end: 2px solid variables.$color--light-mid-grey; + box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; transition: max-height var(--transition); &.is-closed { @@ -54,12 +55,12 @@ display: block; font-size: var(--font-size-zeta); padding: 12px 28px; - border-block-end: 2px solid var(--color-light-mid-grey); + border-block-end: 2px solid variables.$color--light-mid-grey; margin: 0; - color: var(--color-default); + color: variables.$color--default; &--meta { - color: var(--color-dark-blue); + color: variables.$color--dark-blue; font-weight: var(--weight-semibold); display: flex; justify-content: space-between; @@ -74,7 +75,7 @@ &__open-link-icon { width: 20px; height: 20px; - fill: var(--color-dark-grey); + fill: variables.$color--dark-grey; opacity: 0; transition: opacity var(--quick-transition); pointer-events: none; diff --git a/hypha/static_src/sass/components/_nav.scss b/hypha/static_src/sass/components/_nav.scss index 6a7ce99e76..d3a85e6f7c 100644 --- a/hypha/static_src/sass/components/_nav.scss +++ b/hypha/static_src/sass/components/_nav.scss @@ -1,5 +1,6 @@ @use "../base/typography"; @use "../abstracts/mixins"; +@use "../abstracts/variables"; .nav { background-color: var(--color-bg-default); @@ -9,12 +10,12 @@ display: flex; position: relative; padding-block: 0.5rem; - color: var(--color-default); + color: variables.$color--default; transition: color var(--transition); &:focus, &:hover { - color: var(--color-light-blue); + color: variables.$color--light-blue; } @include mixins.media-query(md) { @@ -24,7 +25,7 @@ inset-inline-start: 0; width: 100%; height: 5px; - background-color: var(--color-dark-blue); + background-color: variables.$color--dark-blue; content: ""; opacity: 0; transition: opacity 0.5s cubic-bezier(0.2, 1.4, 0.67, 1.13); diff --git a/hypha/static_src/sass/components/_nprogress.scss b/hypha/static_src/sass/components/_nprogress.scss index 227feb2ccd..34456331e2 100644 --- a/hypha/static_src/sass/components/_nprogress.scss +++ b/hypha/static_src/sass/components/_nprogress.scss @@ -1,10 +1,12 @@ +@use "../abstracts/variables"; + /* stylelint-disable selector-max-id, length-zero-no-unit -- CSS from https://github.com/rstacruz/nprogress */ #nprogress { /* Make clicks pass-through */ pointer-events: none; .bar { - background: var(--color-dark-blue); + background: variables.$color--dark-blue; position: fixed; z-index: 1031; @@ -23,8 +25,8 @@ width: 100px; height: 100%; box-shadow: - 0 0 10px var(--color-dark-blue), - 0 0 5px var(--color-dark-blue); + 0 0 10px variables.$color--dark-blue, + 0 0 5px variables.$color--dark-blue; opacity: 1; transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +47,8 @@ box-sizing: border-box; border: solid 2px transparent; - border-top-color: var(--color-dark-blue); - border-left-color: var(--color-dark-blue); + border-top-color: variables.$color--dark-blue; + border-left-color: variables.$color--dark-blue; border-radius: 50%; animation: nprogress-spinner 400ms linear infinite; diff --git a/hypha/static_src/sass/components/_pagination.scss b/hypha/static_src/sass/components/_pagination.scss index e2414c8f58..f402834b6e 100644 --- a/hypha/static_src/sass/components/_pagination.scss +++ b/hypha/static_src/sass/components/_pagination.scss @@ -1,5 +1,6 @@ @use "../base/typography"; @use "../abstracts/mixins"; +@use "../abstracts/variables"; .pagination--wrapper { display: flex; @@ -39,9 +40,9 @@ width: 55px; height: 55px; font-size: 0; - color: var(--color-white); - background: var(--color-white); - border: 1px solid var(--color-mid-grey); + color: variables.$color--white; + background: variables.$color--white; + border: 1px solid variables.$color--mid-grey; &::after { position: absolute; @@ -54,7 +55,7 @@ .previous { a { &::after { - @include mixins.triangle(left, var(--color-primary), 7px); + @include mixins.triangle(left, variables.$color--primary, 7px); } } } @@ -62,7 +63,7 @@ .next { a { &::after { - @include mixins.triangle(right, var(--color-primary), 7px); + @include mixins.triangle(right, variables.$color--primary, 7px); } } } diff --git a/hypha/static_src/sass/components/_projects-table.scss b/hypha/static_src/sass/components/_projects-table.scss index eb19d36df0..fcf4480fd8 100644 --- a/hypha/static_src/sass/components/_projects-table.scss +++ b/hypha/static_src/sass/components/_projects-table.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors @@ -32,7 +33,7 @@ margin-inline-end: 0.3rem; width: 25px; height: 25px; - fill: var(--color-tomato); + fill: variables.$color--tomato; } } } @@ -96,9 +97,9 @@ padding: 5px; font-size: 13px; font-weight: var(--weight-bold); - color: var(--color-white); + color: variables.$color--white; text-align: center; - background-color: var(--color-dark-blue); + background-color: variables.$color--dark-blue; } } } diff --git a/hypha/static_src/sass/components/_reviews-list.scss b/hypha/static_src/sass/components/_reviews-list.scss index 58cf93fab3..20a7ab4c19 100644 --- a/hypha/static_src/sass/components/_reviews-list.scss +++ b/hypha/static_src/sass/components/_reviews-list.scss @@ -1,3 +1,5 @@ +@use "../abstracts/variables"; + .reviews-list { position: relative; margin-block-start: 40px; @@ -19,7 +21,7 @@ &__tr { border-block-start: 0; - border-block-end: 2px solid var(--color-light-grey); + border-block-end: 2px solid variables.$color--light-grey; } &__td { @@ -47,13 +49,13 @@ &:first-child { width: 160px; - background-color: var(--color-light-mid-grey); + background-color: variables.$color--light-mid-grey; } } &__th--author { position: sticky; inset-block-start: 0; - background-color: var(--color-white); + background-color: variables.$color--white; } } diff --git a/hypha/static_src/sass/components/_reviews-sidebar.scss b/hypha/static_src/sass/components/_reviews-sidebar.scss index 75c3a2482f..28f235cff2 100644 --- a/hypha/static_src/sass/components/_reviews-sidebar.scss +++ b/hypha/static_src/sass/components/_reviews-sidebar.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; // stylelint-disable max-nesting-depth @@ -10,8 +11,8 @@ &__decision { position: relative; font-size: 14px; - border-block-start: 1px solid var(--color-mid-grey); - border-block-end: 1px solid var(--color-mid-grey); + border-block-start: 1px solid variables.$color--mid-grey; + border-block-end: 1px solid variables.$color--mid-grey; margin-block-end: 20px; padding-block-start: 10px; } @@ -41,14 +42,18 @@ } &::after { - @include mixins.triangle(top, var(--color-white), 8px); + @include mixins.triangle( + top, + variables.$color--white, + 8px + ); inset-block-start: -21px; } &::before { @include mixins.triangle( top, - var(--color-mid-grey), + variables.$color--mid-grey, 8px ); } @@ -61,24 +66,24 @@ } &.no-response { - color: var(--color-black-20); + color: variables.$color--black-20; } .yes { - color: var(--color-green); + color: variables.$color--green; } .maybe { - color: var(--color-mustard); + color: variables.$color--mustard; } .no { - color: var(--color-tomato); + color: variables.$color--tomato; } } &__no-reviews { - color: var(--color-mid-grey); + color: variables.$color--mid-grey; } &__name { @@ -87,7 +92,7 @@ align-items: center; overflow: hidden; text-overflow: ellipsis; - background: var(--color-white); + background: variables.$color--white; &:hover { display: inline-flex; @@ -103,11 +108,11 @@ position: relative; &.agree { - color: var(--color-green); + color: variables.$color--green; } &.disagree { - color: var(--color-tomato); + color: variables.$color--tomato; } } diff --git a/hypha/static_src/sass/components/_reviews-summary.scss b/hypha/static_src/sass/components/_reviews-summary.scss index 3c5469764f..3c7fd2696d 100644 --- a/hypha/static_src/sass/components/_reviews-summary.scss +++ b/hypha/static_src/sass/components/_reviews-summary.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .reviews-summary { display: none; @@ -25,5 +26,5 @@ } .counts-separator { - color: var(--color-mid-grey); + color: variables.$color--mid-grey; } diff --git a/hypha/static_src/sass/components/_revisions.scss b/hypha/static_src/sass/components/_revisions.scss index 35ecb5a004..57bb83c1a2 100644 --- a/hypha/static_src/sass/components/_revisions.scss +++ b/hypha/static_src/sass/components/_revisions.scss @@ -1,6 +1,8 @@ +@use "../abstracts/variables"; + .diff { &__deleted { - background-color: var(--color-light-pink); + background-color: variables.$color--light-pink; a { background-color: inherit; @@ -8,7 +10,7 @@ } &__added { - background-color: var(--color-light-green); + background-color: variables.$color--light-green; a { background-color: inherit; diff --git a/hypha/static_src/sass/components/_rich-text.scss b/hypha/static_src/sass/components/_rich-text.scss index 73e081e74d..354b89a6ee 100644 --- a/hypha/static_src/sass/components/_rich-text.scss +++ b/hypha/static_src/sass/components/_rich-text.scss @@ -1,3 +1,5 @@ +@use "../abstracts/variables"; + .rich-text { margin-block-end: 2rem; word-break: break-word; @@ -93,14 +95,14 @@ &.word-count-warning, &.word-count-warning-2 { - background-color: var(--color-pastel-red); + background-color: variables.$color--pastel-red; font-weight: bold; text-shadow: none; - color: var(--color-black); + color: variables.$color--black; } &.word-count-warning-2 { - background-color: var(--color-tomato); + background-color: variables.$color--tomato; } } } diff --git a/hypha/static_src/sass/components/_round-block.scss b/hypha/static_src/sass/components/_round-block.scss index aad5d5bfdd..1c69a60014 100644 --- a/hypha/static_src/sass/components/_round-block.scss +++ b/hypha/static_src/sass/components/_round-block.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .round-block { $root: &; @@ -9,22 +10,22 @@ &__item { align-items: center; - background-color: var(--color-white); - border: 1px solid var(--color-light-mid-grey); + background-color: variables.$color--white; + border: 1px solid variables.$color--light-mid-grey; border-block-end: 0; padding: 25px; transition: background-color var(--quick-transition); min-height: 80px; &:last-child { - border-block-end: 1px solid var(--color-light-mid-grey); + border-block-end: 1px solid variables.$color--light-mid-grey; } @include mixins.media-query(lg) { display: flex; &:hover { - background-color: var(--color-light-grey); + background-color: variables.$color--light-grey; } // item spacing @@ -37,11 +38,11 @@ &--more { padding: 20px 25px; justify-content: center; - border-block-end: 1px solid var(--color-light-mid-grey); + border-block-end: 1px solid variables.$color--light-mid-grey; min-height: auto; &:hover { - background-color: var(--color-white); + background-color: variables.$color--white; } // show more link @@ -67,13 +68,13 @@ &:focus, #{$root}__item:hover & { - color: var(--color-primary); + color: variables.$color--primary; pointer-events: all; } } &__title { - color: var(--color-default); + color: variables.$color--default; font-size: var(--font-size-epsilon); font-weight: var(--weight-semibold); } @@ -81,8 +82,8 @@ &__not-found { margin: 0; padding: 20px; - background-color: var(--color-white); - border: 1px solid var(--color-light-mid-grey); + background-color: variables.$color--white; + border: 1px solid variables.$color--light-mid-grey; } @include mixins.media-query(lg) { diff --git a/hypha/static_src/sass/components/_select2.scss b/hypha/static_src/sass/components/_select2.scss index 79f9f39b0b..fd7468618a 100644 --- a/hypha/static_src/sass/components/_select2.scss +++ b/hypha/static_src/sass/components/_select2.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors, selector-class-pattern @@ -14,12 +15,12 @@ .select2-selection--single { height: var(--dropdown-height); - border: 1px solid var(--color-mid-grey); + border: 1px solid variables.$color--mid-grey; border-radius: 0; &.is-active { font-weight: var(--weight-bold); - border-color: var(--color-primary); + border-color: variables.$color--primary; } .select2-selection__clear { @@ -47,7 +48,7 @@ } .select2-selection__placeholder { - color: var(--color-default); + color: variables.$color--default; } } } @@ -58,19 +59,19 @@ &--default { .select2-results__option--highlighted[aria-selected] { // stylelint-disable-next-line declaration-no-important - color: var(--color-default) !important; + color: variables.$color--default !important; // stylelint-disable declaration-no-important, max-line-length - background-color: var(--color-light-blue-90) !important; + background-color: variables.$color--light-blue-90 !important; } } .select2-dropdown { border: 0; - border-block-end: 1px solid var(--color-mid-grey); + border-block-end: 1px solid variables.$color--mid-grey; border-radius: 0; @include mixins.media-query(sm) { - border: 1px solid var(--color-mid-grey); + border: 1px solid variables.$color--mid-grey; } } @@ -83,17 +84,17 @@ min-width: 20px; height: 20px; margin-inline-end: 10px; - background: var(--color-white); - border: 1px solid var(--color-mid-grey); + background: variables.$color--white; + border: 1px solid variables.$color--mid-grey; content: ""; } &[aria-selected="true"] { &::before { - background: url("./../images/tick.svg") var(--color-dark-blue) - center no-repeat; + background: url("./../images/tick.svg") + variables.$color--dark-blue center no-repeat; background-size: 12px; - border: 1px solid var(--color-dark-blue); + border: 1px solid variables.$color--dark-blue; content: ""; } } diff --git a/hypha/static_src/sass/components/_sidebar.scss b/hypha/static_src/sass/components/_sidebar.scss index 741a9536d5..b3b180b44d 100644 --- a/hypha/static_src/sass/components/_sidebar.scss +++ b/hypha/static_src/sass/components/_sidebar.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .sidebar { @include mixins.media-query(md) { @@ -8,10 +9,10 @@ &__inner { padding: 20px; margin-block-end: 20px; - border: 1px solid var(--color-mid-grey); + border: 1px solid variables.$color--mid-grey; &--light-blue { - background-color: var(--color-light-blue-90); + background-color: variables.$color--light-blue-90; } &--actions { @@ -43,11 +44,11 @@ &__paf-approvals { &--pending { - color: var(--color-mid-grey); + color: variables.$color--mid-grey; } &--approved { - color: var(--color-black); + color: variables.$color--black; } } @@ -55,7 +56,7 @@ position: relative; font-size: 12px; font-weight: var(--weight-bold); - color: var(--color-black-40); + color: variables.$color--black-40; text-transform: uppercase; &::after { @@ -64,7 +65,7 @@ inset-inline-end: 0; width: calc(100% - 60px); height: 1px; - background-color: var(--color-black-20); + background-color: variables.$color--black-20; content: ""; } diff --git a/hypha/static_src/sass/components/_stat-block.scss b/hypha/static_src/sass/components/_stat-block.scss index e7a45e56f5..cac11d8de3 100644 --- a/hypha/static_src/sass/components/_stat-block.scss +++ b/hypha/static_src/sass/components/_stat-block.scss @@ -1,5 +1,6 @@ @use "../base/typography"; @use "../abstracts/mixins"; +@use "../abstracts/variables"; .stat-block { $root: &; @@ -11,7 +12,7 @@ &__item { position: relative; padding: 1rem; - background-color: var(--color-white); + background-color: variables.$color--white; flex: 1; display: block; margin: 0 0 1rem; @@ -36,7 +37,7 @@ @extend %h3; line-height: 1; margin: 0; - color: var(--color-marine); + color: variables.$color--marine; } &__text { diff --git a/hypha/static_src/sass/components/_status-bar.scss b/hypha/static_src/sass/components/_status-bar.scss index 3653f6ae68..244cb9a9a0 100644 --- a/hypha/static_src/sass/components/_status-bar.scss +++ b/hypha/static_src/sass/components/_status-bar.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; // stylelint-disable selector-class-pattern @@ -34,8 +35,8 @@ &__subheading { display: inline-block; padding: 5px 10px; - color: var(--color-white); - background-color: var(--color-tomato); + color: variables.$color--white; + background-color: variables.$color--tomato; } &__text { @@ -49,7 +50,7 @@ padding-block-start: var(--tooltip-margin-top); // The bar for each item. - border-block-start: var(--bar) solid var(--color-mid-grey); + border-block-start: var(--bar) solid variables.$color--mid-grey; // The dot for each item. &::before { @@ -60,41 +61,41 @@ inset-inline-start: calc(-1 * var(--dot) / 2); width: var(--dot); height: var(--dot); - background: var(--color-dark-grey); - border: calc(var(--dot) / 4) solid var(--color-mid-grey); + background: variables.$color--dark-grey; + border: calc(var(--dot) / 4) solid variables.$color--mid-grey; border-radius: 50%; content: ""; #{$root}--small & { - background: var(--color-white); + background: variables.$color--white; } } &--is-current { &::before { - background: var(--color-white); - border-color: var(--color-tomato); + background: variables.$color--white; + border-color: variables.$color--tomato; } // Fill the bar all the way on accepted/declined. &:last-of-type { - border-color: var(--color-primary); + border-color: variables.$color--primary; } } &--is-complete { - border-color: var(--color-primary); + border-color: variables.$color--primary; &::before { font-size: var(--font-size-milli); font-weight: var(--weight-bold); - color: var(--color-white); - background: var(--color-primary); - border-color: var(--color-primary); + color: variables.$color--white; + background: variables.$color--primary; + border-color: variables.$color--primary; content: "✓"; #{$root}--small & { - background: var(--color-primary); + background: variables.$color--primary; } } } @@ -125,24 +126,24 @@ margin-inline-start: calc(-1 * var(--tooltip-width) / 2 - 5px); text-align: center; padding-block: var(--tooltip-padding); - color: var(--color-mid-grey); + color: variables.$color--mid-grey; #{$root}__item--is-complete & { - color: var(--color-primary); + color: variables.$color--primary; } #{$root}__item--is-current & { width: calc(var(--tooltip-width) + var(--tooltip-padding)); position: relative; - color: var(--color-white); - background-color: var(--color-tomato); + color: variables.$color--white; + background-color: variables.$color--tomato; padding-inline: var(--tooltip-padding); border-radius: 0.125rem; } &::before { #{$root}__item--is-current & { - @include mixins.triangle(top, var(--color-tomato), 5px); + @include mixins.triangle(top, variables.$color--tomato, 5px); position: absolute; inset-block-start: calc(-1 * var(--triangle) - 2px); inset-inline-start: calc(50% - var(--triangle)); diff --git a/hypha/static_src/sass/components/_status-block.scss b/hypha/static_src/sass/components/_status-block.scss index beaf59bfa3..f97df3312a 100644 --- a/hypha/static_src/sass/components/_status-block.scss +++ b/hypha/static_src/sass/components/_status-block.scss @@ -1,9 +1,10 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .status-block { $root: &; - background-color: var(--color-white); - border: 1px solid var(--color-light-mid-grey); + background-color: variables.$color--white; + border: 1px solid variables.$color--light-mid-grey; @include mixins.media-query(lg) { display: flex; @@ -12,13 +13,13 @@ &__item { display: block; padding: 10px 20px; - border-block-end: 1px solid var(--color-light-mid-grey); - background-color: var(--color-white); + border-block-end: 1px solid variables.$color--light-mid-grey; + background-color: variables.$color--white; transition: background-color var(--quick-transition); @include mixins.media-query(lg) { border-block-end: 0; - border-inline-end: 1px solid var(--color-light-mid-grey); + border-inline-end: 1px solid variables.$color--light-mid-grey; width: 100%; padding: 10px; display: flex; @@ -35,7 +36,7 @@ } &:hover { - background-color: var(--color-light-grey); + background-color: variables.$color--light-grey; } &:last-child { diff --git a/hypha/static_src/sass/components/_submission-meta.scss b/hypha/static_src/sass/components/_submission-meta.scss index ad2b950d23..2e5fccc25f 100644 --- a/hypha/static_src/sass/components/_submission-meta.scss +++ b/hypha/static_src/sass/components/_submission-meta.scss @@ -1,3 +1,5 @@ +@use "../abstracts/variables"; + .submission-meta { background-color: transparent; @@ -10,10 +12,10 @@ padding: 10px; font-size: 13px; font-weight: var(--weight-bold); - color: var(--color-mid-dark-grey); + color: variables.$color--mid-dark-grey; text-align: center; background-color: transparent; - border: 1px solid var(--color-mid-dark-grey); + border: 1px solid variables.$color--mid-dark-grey; } } } @@ -27,7 +29,7 @@ } &--black { - color: var(--color-default); + color: variables.$color--default; } th, @@ -38,7 +40,7 @@ td { &.lead { span { - background: var(--color-mist); + background: variables.$color--mist; } } } diff --git a/hypha/static_src/sass/components/_table.scss b/hypha/static_src/sass/components/_table.scss index 9fbbdc16fe..b39d1b7531 100644 --- a/hypha/static_src/sass/components/_table.scss +++ b/hypha/static_src/sass/components/_table.scss @@ -1,16 +1,17 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; // stylelint-disable selector-max-compound-selectors,max-nesting-depth .table-container { > table { - border: 1px solid var(--color-light-mid-grey); + border: 1px solid variables.$color--light-mid-grey; } // base table styles - specific ones in their own scss partial table:not(.reviews-summary) { width: 100%; - background-color: var(--color-white); + background-color: variables.$color--white; border-collapse: collapse; table-layout: fixed; @@ -18,7 +19,7 @@ @include mixins.media-query(lg) { tr { &:hover { - background-color: var(--color-light-grey); + background-color: variables.$color--light-grey; } } } @@ -31,28 +32,28 @@ text-align: left; a { - color: var(--color-black-60); + color: variables.$color--black-60; transition: color 0.25s ease-out; } } // table rows tr { - border: 1px solid var(--color-light-mid-grey); + border: 1px solid variables.$color--light-mid-grey; transition: box-shadow 0.15s ease; @include mixins.media-query(lg) { border-block-start: 0; border-inline-end: 0; - border-block-end: 1px solid var(--color-light-mid-grey); + border-block-end: 1px solid variables.$color--light-mid-grey; border-inline-start: 0; &.is-expanded { - border-block-end: 1px solid var(--color-light-grey); + border-block-end: 1px solid variables.$color--light-grey; .lead { span { - background-color: var(--color-mist); + background-color: variables.$color--mist; } } } diff --git a/hypha/static_src/sass/components/_tabs.scss b/hypha/static_src/sass/components/_tabs.scss index 61f5cf4f89..16d1f0741c 100644 --- a/hypha/static_src/sass/components/_tabs.scss +++ b/hypha/static_src/sass/components/_tabs.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .tabs { margin-block-start: var(--spacing); @@ -25,7 +26,7 @@ padding: 10px; font-weight: var(--weight-bold); hyphens: auto; - color: var(--color-mid-grey); + color: variables.$color--mid-grey; text-transform: uppercase; transition: color, @@ -45,7 +46,7 @@ } &:hover { - color: var(--color-light-blue); + color: variables.$color--light-blue; background-color: rgba( #fff, 0.8 @@ -59,26 +60,26 @@ text-transform: none; display: inline-block; border-block-end: 3px solid transparent; - color: var(--color-mid-dark-grey); + color: variables.$color--mid-dark-grey; width: auto; &:hover { - color: var(--color-default); + color: variables.$color--default; } &#{$root}--active { background-color: transparent; - border-block-end: 3px solid var(--color-primary); + border-block-end: 3px solid variables.$color--primary; &:hover { - color: var(--color-default); + color: variables.$color--default; background-color: transparent; } } } &--active { - color: var(--color-default); + color: variables.$color--default; cursor: default; background-color: var(--color-bg-default); diff --git a/hypha/static_src/sass/components/_tooltip.scss b/hypha/static_src/sass/components/_tooltip.scss index b82dd5d24d..0015e72abc 100644 --- a/hypha/static_src/sass/components/_tooltip.scss +++ b/hypha/static_src/sass/components/_tooltip.scss @@ -1,3 +1,5 @@ +@use "../abstracts/variables"; + [data-tooltip] { position: relative; z-index: 2; @@ -16,8 +18,8 @@ inset-block-end: 110%; margin-block-end: 5px; padding: 7px; - background-color: var(--color-dark-grey); - color: var(--color-white); + background-color: variables.$color--dark-grey; + color: variables.$color--white; content: attr(data-tooltip); text-align: center; font-size: 14px; diff --git a/hypha/static_src/sass/components/_traffic-light.scss b/hypha/static_src/sass/components/_traffic-light.scss index b14bb3cf2a..592aca2d12 100644 --- a/hypha/static_src/sass/components/_traffic-light.scss +++ b/hypha/static_src/sass/components/_traffic-light.scss @@ -1,3 +1,5 @@ +@use "../abstracts/variables"; + .traffic-light { display: block; width: 1em; @@ -6,19 +8,19 @@ &--no, &--red { - background-color: var(--color-tomato); + background-color: variables.$color--tomato; clip-path: polygon(100% 0, 0 0, 50% 100%); } &--maybe, &--amber { - background-color: var(--color-mustard); + background-color: variables.$color--mustard; border-radius: 50%; } &--yes, &--green { - background-color: var(--color-green); + background-color: variables.$color--green; clip-path: polygon(50% 0, 0 100%, 100% 100%); } } diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss index 77eaf7001d..74aeab2b71 100644 --- a/hypha/static_src/sass/components/_wrapper.scss +++ b/hypha/static_src/sass/components/_wrapper.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .wrapper { width: 100%; @@ -70,8 +71,8 @@ max-width: 830px; padding: 10px; margin: 0 auto 2rem; - background: var(--color-light-pink); - border: 1px solid var(--color-tomato); + background: variables.$color--light-pink; + border: 1px solid variables.$color--tomato; .feed & { margin: 0 0 1rem; @@ -185,8 +186,8 @@ &--cta-box { width: 500px; padding: 20px; - color: var(--color-default); - background-color: var(--color-white); + color: variables.$color--default; + background-color: variables.$color--white; } &--applicant-dashboard { @@ -197,8 +198,8 @@ &--status-bar-outer { padding: 20px 0; - background-color: var(--color-white); - border-block-end: 3px solid var(--color-light-grey); + background-color: variables.$color--white; + border-block-end: 3px solid variables.$color--light-grey; } &--status-bar-inner { @@ -227,7 +228,7 @@ &--comments { margin-block-end: 1rem; - border-block-end: 1px solid var(--color-mid-grey); + border-block-end: 1px solid variables.$color--mid-grey; .helptext { font-size: 15px; diff --git a/hypha/static_src/sass/custom/_extra.scss b/hypha/static_src/sass/custom/_extra.scss new file mode 100644 index 0000000000..061b3d43d2 --- /dev/null +++ b/hypha/static_src/sass/custom/_extra.scss @@ -0,0 +1 @@ +// stylelint-disable no-empty-source diff --git a/hypha/static_src/sass/layout/_header.scss b/hypha/static_src/sass/layout/_header.scss index 4339077ea8..2b981355cb 100644 --- a/hypha/static_src/sass/layout/_header.scss +++ b/hypha/static_src/sass/layout/_header.scss @@ -1,4 +1,5 @@ @use "../abstracts/mixins"; +@use "../abstracts/variables"; .header { padding-inline: var(--gutters); From 0a36b87795e255123aa7d492a7e31c69e0f50ece Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 21:52:03 +0100 Subject: [PATCH 14/18] Set sass var via css var to ease overriding the values. --- .../static_src/sass/abstracts/_variables.scss | 131 +++++++++++------- 1 file changed, 84 insertions(+), 47 deletions(-) diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index 5c588d3280..d5a1eb1de7 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -1,60 +1,97 @@ +// Most variables are set from css variables defined in _root.scss so they are easy to override. + // Default -$color--white: #fff; -$color--black: #1f2328; -$color--light-grey: #f7f7f7; -$color--light-mid-grey: #e8e8e8; -$color--mid-grey: #cfcfcf; -$color--mid-dark-grey: #919191; -$color--dark-grey: #404041; +$color--white: var(--color-white); +$color--black: var(--color-black); +$color--light-grey: var(--color-light-grey); +$color--light-mid-grey: var(--color-light-mid-grey); +$color--mid-grey: var(--color-mid-grey); +$color--mid-dark-grey: var(--color-mid-dark-grey); +$color--dark-grey: var(--color-dark-grey); // Brand -$color--lightest-blue: #24aae1; -$color--light-blue: #1d79a8; -$color--light-blue-90: color.adjust($color--light-blue, $alpha: -0.9); -$color--lighter-blue: #7ab8d4; -$color--dark-blue: #0c72a0; -$color--darkest-blue: #3d6bdb; -$color--mustard: #e6ab32; -$color--purple: #8c0bbf; -$color--dark-pink: #511034; -$color--pink: #d02a85; -$color--light-pink: #ffe1df; -$color--light-green: #e1fae1; -$color--cream: #f5f7e7; -$color--dark-tomato: #cc1e12; -$color--tomato: #f05e54; -$color--mint: #40c2ad; -$color--grass: #7dc588; -$color--ocean: #1888b1; -$color--sky-blue: #e7f2f6; -$color--marine: #14729a; -$color--mist: #f3fafe; -$color--green: #7dc558; -$color--pastel-red: #f1a9a9; -$color--pastel-green: #afe6af; +$color--lightest-blue: var(--color-lightest-blue); +$color--light-blue: var(--color-light-blue); +$color--light-blue-90: var(--color-light-blue-90); +$color--lighter-blue: var(--color-lighter-blue); +$color--dark-blue: var(--color-dark-blue); +$color--darkest-blue: var(--color-darkest-blue); +$color--mustard: var(--color-mustard); +$color--purple: var(--color-purple); +$color--dark-pink: var(--color-dark-pink); +$color--pink: var(--color-pink); +$color--light-pink: var(--color-light-pink); +$color--light-green: var(--color-light-green); +$color--cream: var(--color-cream); +$color--dark-tomato: var(--color-dark-tomato); +$color--tomato: var(--color-tomato); +$color--mint: var(--color-mint); +$color--grass: var(--color-grass); +$color--ocean: var(--color-ocean); +$color--sky-blue: var(--color-sky-blue); +$color--marine: var(--color-marine); +$color--mist: var(--color-mist); +$color--green: var(--color-green); +$color--pastel-red: var(--color-pastel-red); +$color--pastel-green: var(--color-pastel-green); // Transparent -$color--black-60: rgb(0 0 0 / 60%); -$color--black-50: rgb(0 0 0 / 50%); -$color--black-40: rgb(0 0 0 / 40%); -$color--black-25: rgb(0 0 0 / 25%); -$color--black-20: rgb(0 0 0 / 20%); -$color--black-10: rgb(0 0 0 / 10%); -$color--white-50: rgb(255 255 255 / 50%); -$color--white-40: rgb(255 255 255 / 40%); -$color--white-25: rgb(255 255 255 / 25%); -$color--white-20: rgb(255 255 255 / 20%); -$color--white-10: rgb(255 255 255 / 10%); +$color--black-60: var(--color-black-60); +$color--black-50: var(--color-black-50); +$color--black-40: var(--color-black-40); +$color--black-25: var(--color-black-25); +$color--black-20: var(--color-black-20); +$color--black-10: var(--color-black-10); +$color--white-50: var(--color-white-50); +$color--white-40: var(--color-white-40); +$color--white-25: var(--color-white-25); +$color--white-20: var(--color-white-20); +$color--white-10: var(--color-white-10); // Assignment -$color--default: $color--black; -$color--primary: $color--light-blue; -$color--error: $color--tomato; -$color--correct: $color--mint; -$color--button-disabled: $color--lighter-blue; +$color--default: var(--color-default); +$color--primary: var(--color-primary); +$color--error: var(--color-error); +$color--correct: var(--color-correct); +$color--button-disabled: var(--color-button-disabled); // Font sizes $base-font-size: 16px; +$font-size-alpha: var(--font-size-alpha); +$font-size-beta: var(--font-size-beta); +$font-size-gamma: var(--font-size-gamma); +$font-size-delta: var(--font-size-delta); +$font-size-epsilon: var(--font-size-epsilon); +$font-size-zeta: var(--font-size-zeta); +$font-size-milli: var(--font-size-milli); + +// Font weights +$weight-black: var(--weight-black); +$weight-bold: var(--weight-bold); +$weight-semibold: var(--weight-semibold); +$weight-normal: var(--weight-normal); +$weight-light: var(--weight-light); + +// Wrappers +$site-width: var(--site-width); +$wrapper-medium: var(--wrapper-medium); +$wrapper-small: var(--wrapper-small); + +// Text line length +$max-text-line-length: var(--max-text-line-length); + +// Transition +$transition: var(--transition); +$quick-transition: var(--quick-transition); + +// Spacing +$gutters: var(--gutters); +$gutters-reverse: var(--gutters-reverse); +$spacing: var(--spacing); +$spacing-reverse: var(--spacing-reverse); + +// Dropdown height +$dropdown-height: var(--dropdown-height); // The custom width of 465px allow the buttons to scale with the input field $input-box-max-width: 465px; From 61af24ef8695fffec15ff6498080bf2095edb920 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 22:08:48 +0100 Subject: [PATCH 15/18] Use sass variables set by css variables. --- hypha/static_src/sass/abstracts/_mixins.scss | 4 +-- hypha/static_src/sass/abstracts/_root.scss | 2 +- .../static_src/sass/abstracts/_variables.scss | 30 +++++++++---------- hypha/static_src/sass/base/_base.scss | 4 +-- hypha/static_src/sass/base/_typography.scss | 4 ++- .../sass/components/_actions-bar.scss | 4 +-- .../components/_activity-notifications.scss | 2 +- .../sass/components/_admin-bar.scss | 4 +-- .../sass/components/_all-reviews-table.scss | 2 +- .../components/_all-submissions-table.scss | 10 +++---- hypha/static_src/sass/components/_button.scss | 21 ++++++------- .../sass/components/_cookieconsent.scss | 4 +-- .../sass/components/_data-block.scss | 22 +++++++------- .../sass/components/_docs-block.scss | 4 +-- hypha/static_src/sass/components/_feed.scss | 12 ++++---- .../static_src/sass/components/_filters.scss | 2 +- hypha/static_src/sass/components/_form.scss | 12 ++++---- .../static_src/sass/components/_heading.scss | 4 +-- .../sass/components/_invoice-block.scss | 2 +- .../sass/components/_list-reveal.scss | 8 ++--- hypha/static_src/sass/components/_list.scss | 4 +-- .../static_src/sass/components/_messages.scss | 6 ++-- hypha/static_src/sass/components/_modal.scss | 8 ++--- hypha/static_src/sass/components/_nav.scss | 2 +- .../sass/components/_projects-table.scss | 2 +- .../sass/components/_reviews-list.scss | 2 +- .../sass/components/_reviews-sidebar.scss | 4 +-- .../sass/components/_round-block.scss | 12 ++++---- .../static_src/sass/components/_select2.scss | 8 ++--- .../static_src/sass/components/_sidebar.scss | 2 +- .../sass/components/_stat-block.scss | 4 +-- .../sass/components/_status-bar.scss | 8 ++--- .../sass/components/_status-block.scss | 2 +- .../sass/components/_submission-meta.scss | 2 +- hypha/static_src/sass/components/_table.scss | 2 +- hypha/static_src/sass/components/_tabs.scss | 6 ++-- .../static_src/sass/components/_tooltip.scss | 2 +- .../static_src/sass/components/_wrapper.scss | 6 ++-- 38 files changed, 121 insertions(+), 118 deletions(-) diff --git a/hypha/static_src/sass/abstracts/_mixins.scss b/hypha/static_src/sass/abstracts/_mixins.scss index 41ce4b0608..b1c5e4e07b 100644 --- a/hypha/static_src/sass/abstracts/_mixins.scss +++ b/hypha/static_src/sass/abstracts/_mixins.scss @@ -25,12 +25,12 @@ // Button mixin @mixin button($bg, $hover-bg) { padding: 0.5em 2rem; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; color: variables.$color--white; text-align: center; background: $bg; border: 1px solid variables.$color--white; - transition: color, background, border, var(--transition); + transition: color, background, border, variables.$transition; display: flex; align-items: center; justify-content: center; diff --git a/hypha/static_src/sass/abstracts/_root.scss b/hypha/static_src/sass/abstracts/_root.scss index 4d2ccbd249..ff72c35ccf 100644 --- a/hypha/static_src/sass/abstracts/_root.scss +++ b/hypha/static_src/sass/abstracts/_root.scss @@ -80,7 +80,7 @@ // Transition --transition: 0.25s ease-out; - --quick-transition: 0.15s ease; + --transition-quick: 0.15s ease; // Spacing --gutters: calc(5px + 1.5625vw); diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index d5a1eb1de7..e52706f757 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -57,32 +57,32 @@ $color--button-disabled: var(--color-button-disabled); // Font sizes $base-font-size: 16px; -$font-size-alpha: var(--font-size-alpha); -$font-size-beta: var(--font-size-beta); -$font-size-gamma: var(--font-size-gamma); -$font-size-delta: var(--font-size-delta); -$font-size-epsilon: var(--font-size-epsilon); -$font-size-zeta: var(--font-size-zeta); -$font-size-milli: var(--font-size-milli); +$font-size--alpha: var(--font-size-alpha); +$font-size--beta: var(--font-size-beta); +$font-size--gamma: var(--font-size-gamma); +$font-size--delta: var(--font-size-delta); +$font-size--epsilon: var(--font-size-epsilon); +$font-size--zeta: var(--font-size-zeta); +$font-size--milli: var(--font-size-milli); // Font weights -$weight-black: var(--weight-black); -$weight-bold: var(--weight-bold); -$weight-semibold: var(--weight-semibold); -$weight-normal: var(--weight-normal); -$weight-light: var(--weight-light); +$weight--black: var(--weight-black); +$weight--bold: var(--weight-bold); +$weight--semibold: var(--weight-semibold); +$weight--normal: var(--weight-normal); +$weight--light: var(--weight-light); // Wrappers $site-width: var(--site-width); -$wrapper-medium: var(--wrapper-medium); -$wrapper-small: var(--wrapper-small); +$wrapper--medium: var(--wrapper-medium); +$wrapper--small: var(--wrapper-small); // Text line length $max-text-line-length: var(--max-text-line-length); // Transition $transition: var(--transition); -$quick-transition: var(--quick-transition); +$transition--quick: var(--transition-quick); // Spacing $gutters: var(--gutters); diff --git a/hypha/static_src/sass/base/_base.scss b/hypha/static_src/sass/base/_base.scss index 428b141c2d..28547c7b0a 100644 --- a/hypha/static_src/sass/base/_base.scss +++ b/hypha/static_src/sass/base/_base.scss @@ -37,14 +37,14 @@ details > summary { %is-invisible { z-index: -1; opacity: 0; - transition: opacity, z-index, var(--transition); + transition: opacity, z-index, variables.$transition; } .is-visible, %is-visible { z-index: 5; opacity: 1; - transition: opacity, z-index, var(--transition); + transition: opacity, z-index, variables.$transition; } .is-hidden, diff --git a/hypha/static_src/sass/base/_typography.scss b/hypha/static_src/sass/base/_typography.scss index 925938b7c4..80de327921 100644 --- a/hypha/static_src/sass/base/_typography.scss +++ b/hypha/static_src/sass/base/_typography.scss @@ -1,3 +1,5 @@ +@use "../abstracts/variables"; + // $TYPOGRAPHY h1, @@ -9,7 +11,7 @@ h6, .heading-text { margin-block: 0 1rem; font-style: inherit; - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; } // Default sizes diff --git a/hypha/static_src/sass/components/_actions-bar.scss b/hypha/static_src/sass/components/_actions-bar.scss index bb14c42b6d..f950385512 100644 --- a/hypha/static_src/sass/components/_actions-bar.scss +++ b/hypha/static_src/sass/components/_actions-bar.scss @@ -44,7 +44,7 @@ display: flex; opacity: 0; pointer-events: none; - transition: opacity var(--quick-transition); + transition: opacity variables.$transition--quick; .batch-actions-enabled & { opacity: 1; @@ -61,6 +61,6 @@ border-radius: 30px; min-width: 120px; text-align: center; - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; } } diff --git a/hypha/static_src/sass/components/_activity-notifications.scss b/hypha/static_src/sass/components/_activity-notifications.scss index ec94fb239e..baf6ea061f 100644 --- a/hypha/static_src/sass/components/_activity-notifications.scss +++ b/hypha/static_src/sass/components/_activity-notifications.scss @@ -19,7 +19,7 @@ justify-content: space-between; label { - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; padding-inline-end: 1em; } diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss index 9cba61890d..d8201e2c6c 100644 --- a/hypha/static_src/sass/components/_admin-bar.scss +++ b/hypha/static_src/sass/components/_admin-bar.scss @@ -15,7 +15,7 @@ } &__inner { - max-width: var(--site-width); + max-width: variables.$site-width; margin: 0 auto; &--with-button { @@ -44,7 +44,7 @@ display: inline-flex; align-items: center; color: variables.$color--lightest-blue; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; &::before { @include mixins.triangle(top, currentColor, 5px); diff --git a/hypha/static_src/sass/components/_all-reviews-table.scss b/hypha/static_src/sass/components/_all-reviews-table.scss index 12d216acc2..98088050b2 100644 --- a/hypha/static_src/sass/components/_all-reviews-table.scss +++ b/hypha/static_src/sass/components/_all-reviews-table.scss @@ -29,7 +29,7 @@ position: relative; padding-block-start: 15px; padding-inline-start: 10px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; @include mixins.media-query(lg) { display: flex; diff --git a/hypha/static_src/sass/components/_all-submissions-table.scss b/hypha/static_src/sass/components/_all-submissions-table.scss index 811649ecb2..c55a76b4eb 100644 --- a/hypha/static_src/sass/components/_all-submissions-table.scss +++ b/hypha/static_src/sass/components/_all-submissions-table.scss @@ -83,7 +83,7 @@ &.title { position: relative; padding-block-start: 15px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; @include mixins.media-query(lg) { display: flex; @@ -101,7 +101,7 @@ display: inline-block; padding: 5px; font-size: 13px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; color: variables.$color--marine; text-align: center; background-color: variables.$color--sky-blue; @@ -169,7 +169,7 @@ position: relative; display: inline-block; transform: rotate(0); - transition: transform var(--transition); + transition: transform variables.$transition; &:hover { cursor: pointer; @@ -232,7 +232,7 @@ p { margin: 0; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; color: variables.$color--default; } @@ -273,7 +273,7 @@ a { margin: 0; flex-basis: auto; - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; } } } diff --git a/hypha/static_src/sass/components/_button.scss b/hypha/static_src/sass/components/_button.scss index 0cc820679b..147a6fbbf8 100644 --- a/hypha/static_src/sass/components/_button.scss +++ b/hypha/static_src/sass/components/_button.scss @@ -153,7 +153,7 @@ justify-content: space-between; max-width: 300px; padding: 15px 20px; - font-weight: var(--weight-normal); + font-weight: variables.$weight--normal; color: variables.$color--default; border: 1px solid variables.$color--light-mid-grey; transition: none; @@ -266,11 +266,12 @@ padding: 3px; margin-block-start: 10px; font-size: 12px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; text-align: center; text-transform: uppercase; border: 1px solid currentcolor; - transition: background-color, color, border, var(--quick-transition); + transition: background-color, color, border, + variables.$transition--quick; @include mixins.media-query(md) { margin-block-start: 0; @@ -300,8 +301,8 @@ display: flex; color: variables.$color--default; align-items: center; - transition: opacity var(--transition); - font-weight: var(--weight-semibold); + transition: opacity variables.$transition; + font-weight: variables.$weight--semibold; position: relative; &:hover { @@ -321,11 +322,11 @@ width: 200px; padding: 12px; font-size: 12px; - font-weight: var(--weight-normal); + font-weight: variables.$weight--normal; white-space: normal; background: variables.$color--light-blue; opacity: 0; - transition: opacity var(--transition); + transition: opacity variables.$transition; inset-block-end: 45px; inset-inline-start: 50%; transform: translateX(-50%); @@ -347,7 +348,7 @@ inset-inline-start: 50%; transform: translateX(-50%); opacity: 0; - transition: opacity var(--transition); + transition: opacity variables.$transition; z-index: 10; } @@ -410,7 +411,7 @@ position: absolute; inset-block-start: 4px; padding-inline-start: 5px; - font-size: var(--font-size-delta); + font-size: variables.$font-size--delta; line-height: 1; } } @@ -436,7 +437,7 @@ &::after { inset-block-start: 2px; padding-inline-start: 3px; - font-size: var(--font-size-zeta); + font-size: variables.$font-size--zeta; } } } diff --git a/hypha/static_src/sass/components/_cookieconsent.scss b/hypha/static_src/sass/components/_cookieconsent.scss index e5fcb9a94d..ed309dd173 100644 --- a/hypha/static_src/sass/components/_cookieconsent.scss +++ b/hypha/static_src/sass/components/_cookieconsent.scss @@ -8,7 +8,7 @@ background-color: variables.$color--dark-blue; border-block-start: 4px solid variables.$color--light-blue; transform: translateY(100vh); - transition: all var(--transition); + transition: all variables.$transition; overflow: hidden; max-height: 37.5rem; @@ -24,7 +24,7 @@ &__content { width: 200%; margin-left: 0; - transition: all var(--transition); + transition: all variables.$transition; } &__content > div { diff --git a/hypha/static_src/sass/components/_data-block.scss b/hypha/static_src/sass/components/_data-block.scss index dceb889b0e..e0d89202a4 100644 --- a/hypha/static_src/sass/components/_data-block.scss +++ b/hypha/static_src/sass/components/_data-block.scss @@ -27,8 +27,8 @@ } &__title { - font-size: var(--font-size-epsilon); - font-weight: var(--weight-bold); + font-size: variables.$font-size--epsilon; + font-weight: variables.$weight--bold; margin: 0 0 1rem; @include mixins.media-query(sm) { @@ -61,7 +61,7 @@ @include mixins.media-query(lg) { display: block; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; } } @@ -72,12 +72,12 @@ &__pagination-link, &__rejected-link { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; } &__mobile-label { display: inline-block; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; white-space: pre; @include mixins.media-query(lg) { @@ -109,7 +109,7 @@ } tbody { - font-size: var(--font-size-zeta); + font-size: variables.$font-size--zeta; } tr { @@ -147,8 +147,8 @@ } &__action-link { - font-size: var(--font-size-zeta); - font-weight: var(--weight-bold); + font-size: variables.$font-size--zeta; + font-weight: variables.$weight--bold; display: inline-block; margin-inline-end: 1rem; text-decoration: underline; @@ -167,8 +167,8 @@ } &__action-icon-link { - font-size: var(--font-size-zeta); - font-weight: var(--weight-bold); + font-size: variables.$font-size--zeta; + font-weight: variables.$weight--bold; display: flex; align-items: center; margin-inline-end: 1rem; @@ -259,6 +259,6 @@ } &__card-title { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; } } diff --git a/hypha/static_src/sass/components/_docs-block.scss b/hypha/static_src/sass/components/_docs-block.scss index 295d55e97e..11921de999 100644 --- a/hypha/static_src/sass/components/_docs-block.scss +++ b/hypha/static_src/sass/components/_docs-block.scss @@ -83,7 +83,7 @@ } &__link { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; margin-inline-end: 1rem; &:disabled, @@ -98,7 +98,7 @@ } &__icon-link { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; display: flex; align-items: center; margin-inline-end: 1rem; diff --git a/hypha/static_src/sass/components/_feed.scss b/hypha/static_src/sass/components/_feed.scss index 3a5b193fb0..06883879d3 100644 --- a/hypha/static_src/sass/components/_feed.scss +++ b/hypha/static_src/sass/components/_feed.scss @@ -93,7 +93,7 @@ margin: 0 10px 0 0; span { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; } @include mixins.media-query(sm) { @@ -109,7 +109,7 @@ color: variables.$color--mid-dark-grey; span { - font-weight: var(--weight-normal); + font-weight: variables.$weight--normal; } } @@ -117,14 +117,14 @@ margin-inline-start: auto; span { - font-weight: var(--weight-normal); + font-weight: variables.$weight--normal; } } &--progress { width: 100%; margin: 5px 0 0; - font-size: var(--font-size-milli); + font-size: variables.$font-size--milli; color: variables.$color--black-50; @include mixins.media-query(sm) { @@ -177,8 +177,8 @@ &__heading-status { padding: 3px 10px; - font-size: var(--font-size-milli); - font-weight: var(--weight-bold); + font-size: variables.$font-size--milli; + font-weight: variables.$weight--bold; color: variables.$color--marine; text-align: center; text-transform: uppercase; diff --git a/hypha/static_src/sass/components/_filters.scss b/hypha/static_src/sass/components/_filters.scss index 6c27290ec3..01c4792f0b 100644 --- a/hypha/static_src/sass/components/_filters.scss +++ b/hypha/static_src/sass/components/_filters.scss @@ -20,7 +20,7 @@ @include mixins.media-query(lg) { display: block; max-height: 0; - transition: max-height var(--transition); + transition: max-height variables.$transition; transition-delay: 30ms; pointer-events: none; diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss index d87cc83e48..13f01753ae 100644 --- a/hypha/static_src/sass/components/_form.scss +++ b/hypha/static_src/sass/components/_form.scss @@ -16,7 +16,7 @@ label { display: block; margin-block-end: 0.5em; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; } } @@ -99,7 +99,7 @@ &__question { display: block; - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; font-size: 1rem; line-height: 1.25rem; @@ -153,7 +153,7 @@ color: variables.$color--mid-grey; padding: 25px; font-size: 17px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; text-align: center; border: 2px dashed variables.$color--mid-grey; border-radius: 5px; @@ -165,7 +165,7 @@ border-block-start: 1px solid variables.$color--mid-grey; &.is-active { - font-weight: var(--weight-normal); + font-weight: variables.$weight--normal; background-color: variables.$color--light-blue-90; border-color: variables.$color--mid-grey; } @@ -180,7 +180,7 @@ align-items: flex-start; padding: 10px 0 30px; opacity: 0; - transition: opacity var(--transition); + transition: opacity variables.$transition; .filters-open & { opacity: 1; @@ -339,7 +339,7 @@ max-width: 100%; select { - height: var(--dropdown-height); + height: variables.$dropdown-height; } } } diff --git a/hypha/static_src/sass/components/_heading.scss b/hypha/static_src/sass/components/_heading.scss index e9c80aecea..455908cf7a 100644 --- a/hypha/static_src/sass/components/_heading.scss +++ b/hypha/static_src/sass/components/_heading.scss @@ -30,7 +30,7 @@ display: flex; flex-direction: column; margin-block-start: 20px; - font-weight: var(--weight-normal); + font-weight: variables.$weight--normal; color: variables.$color--black-40; @include mixins.media-query(lg) { @@ -63,7 +63,7 @@ } &--bold { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; } &--activity-feed { diff --git a/hypha/static_src/sass/components/_invoice-block.scss b/hypha/static_src/sass/components/_invoice-block.scss index 6c6848fee1..881dc60a96 100644 --- a/hypha/static_src/sass/components/_invoice-block.scss +++ b/hypha/static_src/sass/components/_invoice-block.scss @@ -25,7 +25,7 @@ } &__title { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; margin: 0 0 0.2rem; } diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index d4133e4388..3591825a7c 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -15,7 +15,7 @@ &__item { display: block; - font-size: var(--font-size-zeta); + font-size: variables.$font-size--zeta; padding: 0.75em 1em; border-block-end: 2px solid variables.$color--light-mid-grey; margin: 0; @@ -23,7 +23,7 @@ &--meta { color: variables.$color--dark-blue; - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; display: flex; justify-content: space-between; margin: 0 -24px; @@ -42,7 +42,7 @@ padding: 0; border-block-end: 2px solid variables.$color--light-mid-grey; box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; - transition: max-height var(--transition); + transition: max-height variables.$transition; &--determination { border-inline-start: 1px solid variables.$color--light-mid-grey; @@ -65,7 +65,7 @@ height: 20px; fill: variables.$color--dark-grey; opacity: 0; - transition: opacity var(--quick-transition); + transition: opacity variables.$transition--quick; pointer-events: none; #{$root}__item:hover & { diff --git a/hypha/static_src/sass/components/_list.scss b/hypha/static_src/sass/components/_list.scss index e9d7746bdb..7ec40c4b8b 100644 --- a/hypha/static_src/sass/components/_list.scss +++ b/hypha/static_src/sass/components/_list.scss @@ -52,7 +52,7 @@ &--reviewer-name { max-width: 190px; overflow: hidden; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; text-overflow: ellipsis; display: flex; align-items: center; @@ -75,7 +75,7 @@ } #{$root}__item--opinion & { - font-weight: var(--weight-normal); + font-weight: variables.$weight--normal; } } diff --git a/hypha/static_src/sass/components/_messages.scss b/hypha/static_src/sass/components/_messages.scss index c226922a1f..518b10020e 100644 --- a/hypha/static_src/sass/components/_messages.scss +++ b/hypha/static_src/sass/components/_messages.scss @@ -26,7 +26,7 @@ color: variables.$color--white; font-size: 14px; opacity: 1; - transition: opacity, max-height, var(--transition); + transition: opacity, max-height, variables.$transition; pointer-events: all; max-height: 1000px; background: variables.$color--dark-blue; @@ -53,7 +53,7 @@ &__inner { display: flex; align-items: center; - max-width: var(--site-width); + max-width: variables.$site-width; margin: 0 auto; } @@ -69,7 +69,7 @@ color: variables.$color--dark-blue; background-color: variables.$color--white; display: inline-block; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; padding: 2px 20px; } } diff --git a/hypha/static_src/sass/components/_modal.scss b/hypha/static_src/sass/components/_modal.scss index 97e3aebc28..5a77ad89be 100644 --- a/hypha/static_src/sass/components/_modal.scss +++ b/hypha/static_src/sass/components/_modal.scss @@ -43,7 +43,7 @@ padding: 0; border-block-end: 2px solid variables.$color--light-mid-grey; box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; - transition: max-height var(--transition); + transition: max-height variables.$transition; &.is-closed { max-height: 0; @@ -53,7 +53,7 @@ &__list-item { display: block; - font-size: var(--font-size-zeta); + font-size: variables.$font-size--zeta; padding: 12px 28px; border-block-end: 2px solid variables.$color--light-mid-grey; margin: 0; @@ -61,7 +61,7 @@ &--meta { color: variables.$color--dark-blue; - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; display: flex; justify-content: space-between; margin: 0 -24px; @@ -77,7 +77,7 @@ height: 20px; fill: variables.$color--dark-grey; opacity: 0; - transition: opacity var(--quick-transition); + transition: opacity variables.$transition--quick; pointer-events: none; #{$root}__list-item:hover & { diff --git a/hypha/static_src/sass/components/_nav.scss b/hypha/static_src/sass/components/_nav.scss index d3a85e6f7c..8dfe8070fa 100644 --- a/hypha/static_src/sass/components/_nav.scss +++ b/hypha/static_src/sass/components/_nav.scss @@ -11,7 +11,7 @@ position: relative; padding-block: 0.5rem; color: variables.$color--default; - transition: color var(--transition); + transition: color variables.$transition; &:focus, &:hover { diff --git a/hypha/static_src/sass/components/_projects-table.scss b/hypha/static_src/sass/components/_projects-table.scss index fcf4480fd8..160a6c5c8b 100644 --- a/hypha/static_src/sass/components/_projects-table.scss +++ b/hypha/static_src/sass/components/_projects-table.scss @@ -96,7 +96,7 @@ display: inline-block; padding: 5px; font-size: 13px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; color: variables.$color--white; text-align: center; background-color: variables.$color--dark-blue; diff --git a/hypha/static_src/sass/components/_reviews-list.scss b/hypha/static_src/sass/components/_reviews-list.scss index 20a7ab4c19..a36006a6c3 100644 --- a/hypha/static_src/sass/components/_reviews-list.scss +++ b/hypha/static_src/sass/components/_reviews-list.scss @@ -15,7 +15,7 @@ } &:first-child { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; } } diff --git a/hypha/static_src/sass/components/_reviews-sidebar.scss b/hypha/static_src/sass/components/_reviews-sidebar.scss index 28f235cff2..eb01e1c464 100644 --- a/hypha/static_src/sass/components/_reviews-sidebar.scss +++ b/hypha/static_src/sass/components/_reviews-sidebar.scss @@ -6,7 +6,7 @@ .reviews-sidebar { $root: &; margin-block-end: 20px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; &__decision { position: relative; @@ -30,7 +30,7 @@ &--decision { margin-block-end: 10px; - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; &:first-child { #{$root}__outcome { diff --git a/hypha/static_src/sass/components/_round-block.scss b/hypha/static_src/sass/components/_round-block.scss index 1c69a60014..d3f65f8c01 100644 --- a/hypha/static_src/sass/components/_round-block.scss +++ b/hypha/static_src/sass/components/_round-block.scss @@ -14,7 +14,7 @@ border: 1px solid variables.$color--light-mid-grey; border-block-end: 0; padding: 25px; - transition: background-color var(--quick-transition); + transition: background-color variables.$transition--quick; min-height: 80px; &:last-child { @@ -49,15 +49,15 @@ a { margin: 0; flex-basis: auto; - font-weight: var(--weight-semibold); + font-weight: variables.$weight--semibold; } } } &__view { margin: 0 0 0 auto; - transition: color var(--quick-transition); - font-weight: var(--weight-bold); + transition: color variables.$transition--quick; + font-weight: variables.$weight--bold; text-transform: uppercase; @include mixins.media-query(lg) { @@ -75,8 +75,8 @@ &__title { color: variables.$color--default; - font-size: var(--font-size-epsilon); - font-weight: var(--weight-semibold); + font-size: variables.$font-size--epsilon; + font-weight: variables.$weight--semibold; } &__not-found { diff --git a/hypha/static_src/sass/components/_select2.scss b/hypha/static_src/sass/components/_select2.scss index fd7468618a..be4cee75ac 100644 --- a/hypha/static_src/sass/components/_select2.scss +++ b/hypha/static_src/sass/components/_select2.scss @@ -14,12 +14,12 @@ width: 100% !important; .select2-selection--single { - height: var(--dropdown-height); + height: variables.$dropdown-height; border: 1px solid variables.$color--mid-grey; border-radius: 0; &.is-active { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; border-color: variables.$color--primary; } @@ -30,12 +30,12 @@ .select2-selection__rendered { padding-inline-start: 15px; padding-inline-end: 30px; - line-height: var(--dropdown-height); + line-height: variables.$dropdown-height; } .select2-selection__arrow { inset-inline-end: 15px; - height: var(--dropdown-height); + height: variables.$dropdown-height; pointer-events: none; background: url("./../images/dropdown.svg") transparent no-repeat 95% center; diff --git a/hypha/static_src/sass/components/_sidebar.scss b/hypha/static_src/sass/components/_sidebar.scss index b3b180b44d..15eb00f1ca 100644 --- a/hypha/static_src/sass/components/_sidebar.scss +++ b/hypha/static_src/sass/components/_sidebar.scss @@ -55,7 +55,7 @@ &__separator { position: relative; font-size: 12px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; color: variables.$color--black-40; text-transform: uppercase; diff --git a/hypha/static_src/sass/components/_stat-block.scss b/hypha/static_src/sass/components/_stat-block.scss index cac11d8de3..28adfb131b 100644 --- a/hypha/static_src/sass/components/_stat-block.scss +++ b/hypha/static_src/sass/components/_stat-block.scss @@ -52,8 +52,8 @@ &__view { text-transform: uppercase; - font-weight: var(--weight-bold); - transition: opacity var(--quick-transition); + font-weight: variables.$weight--bold; + transition: opacity variables.$transition--quick; @include mixins.media-query(md) { position: absolute; diff --git a/hypha/static_src/sass/components/_status-bar.scss b/hypha/static_src/sass/components/_status-bar.scss index 244cb9a9a0..53851537e9 100644 --- a/hypha/static_src/sass/components/_status-bar.scss +++ b/hypha/static_src/sass/components/_status-bar.scss @@ -40,8 +40,8 @@ } &__text { - font-size: var(--font-size-milli); - font-weight: var(--weight-bold); + font-size: variables.$font-size--milli; + font-weight: variables.$weight--bold; } &__item { @@ -87,8 +87,8 @@ border-color: variables.$color--primary; &::before { - font-size: var(--font-size-milli); - font-weight: var(--weight-bold); + font-size: variables.$font-size--milli; + font-weight: variables.$weight--bold; color: variables.$color--white; background: variables.$color--primary; border-color: variables.$color--primary; diff --git a/hypha/static_src/sass/components/_status-block.scss b/hypha/static_src/sass/components/_status-block.scss index f97df3312a..e6b6970834 100644 --- a/hypha/static_src/sass/components/_status-block.scss +++ b/hypha/static_src/sass/components/_status-block.scss @@ -15,7 +15,7 @@ padding: 10px 20px; border-block-end: 1px solid variables.$color--light-mid-grey; background-color: variables.$color--white; - transition: background-color var(--quick-transition); + transition: background-color variables.$transition--quick; @include mixins.media-query(lg) { border-block-end: 0; diff --git a/hypha/static_src/sass/components/_submission-meta.scss b/hypha/static_src/sass/components/_submission-meta.scss index 2e5fccc25f..5b7f2fdd65 100644 --- a/hypha/static_src/sass/components/_submission-meta.scss +++ b/hypha/static_src/sass/components/_submission-meta.scss @@ -11,7 +11,7 @@ display: inline-block; padding: 10px; font-size: 13px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; color: variables.$color--mid-dark-grey; text-align: center; background-color: transparent; diff --git a/hypha/static_src/sass/components/_table.scss b/hypha/static_src/sass/components/_table.scss index b39d1b7531..9ada233f5b 100644 --- a/hypha/static_src/sass/components/_table.scss +++ b/hypha/static_src/sass/components/_table.scss @@ -103,7 +103,7 @@ &.title { a { - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; text-decoration: underline; } } diff --git a/hypha/static_src/sass/components/_tabs.scss b/hypha/static_src/sass/components/_tabs.scss index 16d1f0741c..33f0fe52df 100644 --- a/hypha/static_src/sass/components/_tabs.scss +++ b/hypha/static_src/sass/components/_tabs.scss @@ -24,7 +24,7 @@ position: relative; padding: 10px; - font-weight: var(--weight-bold); + font-weight: variables.$weight--bold; hyphens: auto; color: variables.$color--mid-grey; text-transform: uppercase; @@ -54,8 +54,8 @@ } &--alt { - font-size: var(--font-size-zeta); - font-weight: var(--weight-semibold); + font-size: variables.$font-size--zeta; + font-weight: variables.$weight--semibold; padding: 0.5rem 1rem; text-transform: none; display: inline-block; diff --git a/hypha/static_src/sass/components/_tooltip.scss b/hypha/static_src/sass/components/_tooltip.scss index 0015e72abc..2377d763ba 100644 --- a/hypha/static_src/sass/components/_tooltip.scss +++ b/hypha/static_src/sass/components/_tooltip.scss @@ -13,7 +13,7 @@ visibility: hidden; opacity: 0; pointer-events: none; - transition: opacity, bottom, var(--transition); + transition: opacity, bottom, variables.$transition; position: absolute; inset-block-end: 110%; margin-block-end: 5px; diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss index 74aeab2b71..8bd4314246 100644 --- a/hypha/static_src/sass/components/_wrapper.scss +++ b/hypha/static_src/sass/components/_wrapper.scss @@ -5,17 +5,17 @@ width: 100%; &--small { - max-width: var(--wrapper-small); + max-width: variables.$wrapper--small; margin-inline: auto; } &--medium { - max-width: var(--wrapper-medium); + max-width: variables.$wrapper--medium; margin-inline: auto; } &--large { - max-width: var(--site-width); + max-width: variables.$site-width; margin-inline: auto; } From d30d84d8496af3d49eb4e5ad3f2f82864a6f6bc0 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 22:38:47 +0100 Subject: [PATCH 16/18] Move css vars to tailwind variables.css. --- hypha/static_src/sass/abstracts/_root.scss | 93 ------------------- .../static_src/sass/abstracts/_variables.scss | 4 +- hypha/static_src/sass/main.scss | 3 - hypha/static_src/tailwind/base/variables.css | 92 ++++++++++++++++++ 4 files changed, 95 insertions(+), 97 deletions(-) delete mode 100644 hypha/static_src/sass/abstracts/_root.scss diff --git a/hypha/static_src/sass/abstracts/_root.scss b/hypha/static_src/sass/abstracts/_root.scss deleted file mode 100644 index ff72c35ccf..0000000000 --- a/hypha/static_src/sass/abstracts/_root.scss +++ /dev/null @@ -1,93 +0,0 @@ -:root { - // Default - --color-white: #fff; - --color-black: #1f2328; - --color-light-grey: #f7f7f7; - --color-light-mid-grey: #e8e8e8; - --color-mid-grey: #cfcfcf; - --color-mid-dark-grey: #919191; - --color-dark-grey: #404041; - - // Brand - --color-lightest-blue: #24aae1; - --color-light-blue: #1d79a8; - --color-light-blue-90: rgb(29 121 168 / 10%); - --color-lighter-blue: #7ab8d4; - --color-dark-blue: #0c72a0; - --color-darkest-blue: #3d6bdb; - --color-mustard: #e6ab32; - --color-purple: #8c0bbf; - --color-dark-pink: #511034; - --color-pink: #d02a85; - --color-light-pink: #ffe1df; - --color-light-green: #e1fae1; - --color-cream: #f5f7e7; - --color-dark-tomato: #cc1e12; - --color-tomato: #f05e54; - --color-mint: #40c2ad; - --color-grass: #7dc588; - --color-ocean: #1888b1; - --color-sky-blue: #e7f2f6; - --color-marine: #14729a; - --color-mist: #f3fafe; - --color-green: #7dc558; - --color-pastel-red: #f1a9a9; - --color-pastel-green: #afe6af; - - // Transparent - --color-black-60: rgb(0 0 0 / 60%); - --color-black-50: rgb(0 0 0 / 50%); - --color-black-40: rgb(0 0 0 / 40%); - --color-black-25: rgb(0 0 0 / 25%); - --color-black-20: rgb(0 0 0 / 20%); - --color-black-10: rgb(0 0 0 / 10%); - --color-white-50: rgb(255 255 255 / 50%); - --color-white-40: rgb(255 255 255 / 40%); - --color-white-25: rgb(255 255 255 / 25%); - --color-white-20: rgb(255 255 255 / 20%); - --color-white-10: rgb(255 255 255 / 10%); - - // Assignment - --color-default: var(--color-black); - --color-primary: var(--color-light-blue); - --color-error: var(--color-tomato); - --color-correct: var(--color-mint); - --color-button-disabled: var(--color-lighter-blue); - - // Font sizes - --font-size-alpha: 36px; - --font-size-beta: 30px; - --font-size-gamma: 28px; - --font-size-delta: 24px; - --font-size-epsilon: 18px; - --font-size-zeta: 14px; - --font-size-milli: 12px; - - // Font weights - --weight-black: 800; - --weight-bold: 700; - --weight-semibold: 600; - --weight-normal: 400; - --weight-light: 200; - - // Wrappers - --site-width: 1280px; - --wrapper-medium: 1020px; - --wrapper-small: 790px; - - // Text line length - --max-text-line-length: 50em; - - // Transition - --transition: 0.25s ease-out; - --transition-quick: 0.15s ease; - - // Spacing - --gutters: calc(5px + 1.5625vw); - --gutters-reverse: calc(0px - (5px + 1.5625vw)); - --spacing: 1.25rem; - --spacing-reverse: -1.25rem; - - // Dropdown height - --dropdown-height: 45px; -} diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index e52706f757..d7b9e637b0 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -1,4 +1,6 @@ -// Most variables are set from css variables defined in _root.scss so they are easy to override. +// Most variables are set from css variables defined in +// tailwind/base/variables.css so they are easy to override. +// Only variables used in media queries and calculations are defined here. // Default $color--white: var(--color-white); diff --git a/hypha/static_src/sass/main.scss b/hypha/static_src/sass/main.scss index c8182edc8f..9b15709c84 100644 --- a/hypha/static_src/sass/main.scss +++ b/hypha/static_src/sass/main.scss @@ -1,6 +1,3 @@ -// Variables -@use "abstracts/root"; - // Base @use "base/base"; @use "base/typography"; diff --git a/hypha/static_src/tailwind/base/variables.css b/hypha/static_src/tailwind/base/variables.css index 79b54abfa4..1008c3359c 100644 --- a/hypha/static_src/tailwind/base/variables.css +++ b/hypha/static_src/tailwind/base/variables.css @@ -3,4 +3,96 @@ --color-fg-default: #1f2328; --color-bg-default: #fff; --color-header-bg: #fff; + + /* Default */ + --color-white: #fff; + --color-black: #1f2328; + --color-light-grey: #f7f7f7; + --color-light-mid-grey: #e8e8e8; + --color-mid-grey: #cfcfcf; + --color-mid-dark-grey: #919191; + --color-dark-grey: #404041; + + /* Brand */ + --color-lightest-blue: #24aae1; + --color-light-blue: #1d79a8; + --color-light-blue-90: rgb(29 121 168 / 10%); + --color-lighter-blue: #7ab8d4; + --color-dark-blue: #0c72a0; + --color-darkest-blue: #3d6bdb; + --color-mustard: #e6ab32; + --color-purple: #8c0bbf; + --color-dark-pink: #511034; + --color-pink: #d02a85; + --color-light-pink: #ffe1df; + --color-light-green: #e1fae1; + --color-cream: #f5f7e7; + --color-dark-tomato: #cc1e12; + --color-tomato: #f05e54; + --color-mint: #40c2ad; + --color-grass: #7dc588; + --color-ocean: #1888b1; + --color-sky-blue: #e7f2f6; + --color-marine: #14729a; + --color-mist: #f3fafe; + --color-green: #7dc558; + --color-pastel-red: #f1a9a9; + --color-pastel-green: #afe6af; + + /* Transparent */ + --color-black-60: rgb(0 0 0 / 60%); + --color-black-50: rgb(0 0 0 / 50%); + --color-black-40: rgb(0 0 0 / 40%); + --color-black-25: rgb(0 0 0 / 25%); + --color-black-20: rgb(0 0 0 / 20%); + --color-black-10: rgb(0 0 0 / 10%); + --color-white-50: rgb(255 255 255 / 50%); + --color-white-40: rgb(255 255 255 / 40%); + --color-white-25: rgb(255 255 255 / 25%); + --color-white-20: rgb(255 255 255 / 20%); + --color-white-10: rgb(255 255 255 / 10%); + + /* Assignment */ + --color-default: var(--color-black); + --color-primary: var(--color-light-blue); + --color-error: var(--color-tomato); + --color-correct: var(--color-mint); + --color-button-disabled: var(--color-lighter-blue); + + /* Font sizes */ + --font-size-alpha: 36px; + --font-size-beta: 30px; + --font-size-gamma: 28px; + --font-size-delta: 24px; + --font-size-epsilon: 18px; + --font-size-zeta: 14px; + --font-size-milli: 12px; + + /* Font weights */ + --weight-black: 800; + --weight-bold: 700; + --weight-semibold: 600; + --weight-normal: 400; + --weight-light: 200; + + /* Wrappers */ + --site-width: 1280px; + --wrapper-medium: 1020px; + --wrapper-small: 790px; + + /* Text line length */ + --max-text-line-length: 50em; + + /* Transition */ + --transition: 0.25s ease-out; + --transition-quick: 0.15s ease; + + /* Spacing */ + --gutters: calc(5px + 1.5625vw); + --gutters-reverse: calc(0px - (5px + 1.5625vw)); + --spacing: 1.25rem; + --spacing-reverse: -1.25rem; + + /* Dropdown height */ + --dropdown-height: 45px; } From e639bd4a3436f943a71b9214c392b22224c151db Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 22:54:25 +0100 Subject: [PATCH 17/18] Use sass variables set by css variables, part 2. --- hypha/static_src/sass/components/_admin-bar.scss | 6 +++--- hypha/static_src/sass/components/_feed.scss | 2 +- hypha/static_src/sass/components/_list-reveal.scss | 2 +- hypha/static_src/sass/components/_rich-text.scss | 2 +- hypha/static_src/sass/components/_tabs.scss | 4 ++-- hypha/static_src/sass/components/_wrapper.scss | 2 +- hypha/static_src/sass/layout/_header.scss | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss index d8201e2c6c..14844a56e1 100644 --- a/hypha/static_src/sass/components/_admin-bar.scss +++ b/hypha/static_src/sass/components/_admin-bar.scss @@ -3,9 +3,9 @@ .admin-bar { position: relative; - padding-inline: var(--gutters); - padding-block: var(--spacing); - margin-inline: var(--gutters-reverse); + padding-inline: variables.$gutters; + padding-block: variables.$spacing; + margin-inline: variables.$gutters-reverse; color: variables.$color--white; background-color: variables.$color--dark-grey; diff --git a/hypha/static_src/sass/components/_feed.scss b/hypha/static_src/sass/components/_feed.scss index 06883879d3..dc1ccda8f8 100644 --- a/hypha/static_src/sass/components/_feed.scss +++ b/hypha/static_src/sass/components/_feed.scss @@ -151,7 +151,7 @@ &__comment { word-break: break-word; - max-width: var(--max-text-line-length); + max-width: variables.$max-text-line-length; } &__related-item { diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss index 3591825a7c..ecd96343cc 100644 --- a/hypha/static_src/sass/components/_list-reveal.scss +++ b/hypha/static_src/sass/components/_list-reveal.scss @@ -38,7 +38,7 @@ &__list { max-height: 200px; overflow: scroll; - margin: 0 -24px var(--gutters); + margin: 0 -24px 1.5rem; padding: 0; border-block-end: 2px solid variables.$color--light-mid-grey; box-shadow: inset 0 -10px 20px -10px variables.$color--mid-grey; diff --git a/hypha/static_src/sass/components/_rich-text.scss b/hypha/static_src/sass/components/_rich-text.scss index 354b89a6ee..c86e491923 100644 --- a/hypha/static_src/sass/components/_rich-text.scss +++ b/hypha/static_src/sass/components/_rich-text.scss @@ -3,7 +3,7 @@ .rich-text { margin-block-end: 2rem; word-break: break-word; - max-width: var(--max-text-line-length); + max-width: variables.$max-text-line-length; &--answers { > section { diff --git a/hypha/static_src/sass/components/_tabs.scss b/hypha/static_src/sass/components/_tabs.scss index 33f0fe52df..e1b4b874ea 100644 --- a/hypha/static_src/sass/components/_tabs.scss +++ b/hypha/static_src/sass/components/_tabs.scss @@ -2,8 +2,8 @@ @use "../abstracts/variables"; .tabs { - margin-block-start: var(--spacing); - margin-block-end: var(--spacing-reverse); + margin-block-start: variables.$spacing; + margin-block-end: variables.$spacing-reverse; &__container { display: flex; diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss index 8bd4314246..92a39a0cb3 100644 --- a/hypha/static_src/sass/components/_wrapper.scss +++ b/hypha/static_src/sass/components/_wrapper.scss @@ -20,7 +20,7 @@ } &--main { - padding-inline: var(--gutters); + padding-inline: variables.$gutters; @include mixins.media-query(xl) { padding-inline: 0; diff --git a/hypha/static_src/sass/layout/_header.scss b/hypha/static_src/sass/layout/_header.scss index 2b981355cb..d84067d15c 100644 --- a/hypha/static_src/sass/layout/_header.scss +++ b/hypha/static_src/sass/layout/_header.scss @@ -2,7 +2,7 @@ @use "../abstracts/variables"; .header { - padding-inline: var(--gutters); + padding-inline: variables.$gutters; @include mixins.media-query(xl) { padding-inline: 0; From 35b137ea044b37107b3292934e3268ef17e673ea Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sat, 7 Dec 2024 23:05:15 +0100 Subject: [PATCH 18/18] Remove unused variables. --- hypha/static_src/sass/abstracts/_variables.scss | 5 ----- hypha/static_src/sass/components/_admin-bar.scss | 2 +- hypha/static_src/sass/custom/_extra.scss | 1 - hypha/static_src/tailwind/base/variables.css | 5 ----- hypha/templates/base-apply.html | 2 +- 5 files changed, 2 insertions(+), 13 deletions(-) delete mode 100644 hypha/static_src/sass/custom/_extra.scss diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss index d7b9e637b0..071c4d38f1 100644 --- a/hypha/static_src/sass/abstracts/_variables.scss +++ b/hypha/static_src/sass/abstracts/_variables.scss @@ -41,12 +41,8 @@ $color--pastel-green: var(--color-pastel-green); $color--black-60: var(--color-black-60); $color--black-50: var(--color-black-50); $color--black-40: var(--color-black-40); -$color--black-25: var(--color-black-25); $color--black-20: var(--color-black-20); $color--black-10: var(--color-black-10); -$color--white-50: var(--color-white-50); -$color--white-40: var(--color-white-40); -$color--white-25: var(--color-white-25); $color--white-20: var(--color-white-20); $color--white-10: var(--color-white-10); @@ -72,7 +68,6 @@ $weight--black: var(--weight-black); $weight--bold: var(--weight-bold); $weight--semibold: var(--weight-semibold); $weight--normal: var(--weight-normal); -$weight--light: var(--weight-light); // Wrappers $site-width: var(--site-width); diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss index 14844a56e1..8b85f08d68 100644 --- a/hypha/static_src/sass/components/_admin-bar.scss +++ b/hypha/static_src/sass/components/_admin-bar.scss @@ -47,7 +47,7 @@ font-weight: variables.$weight--bold; &::before { - @include mixins.triangle(top, currentColor, 5px); + @include mixins.triangle(top); margin-inline-end: 0.5rem; transform: rotate(-90deg); } diff --git a/hypha/static_src/sass/custom/_extra.scss b/hypha/static_src/sass/custom/_extra.scss deleted file mode 100644 index 061b3d43d2..0000000000 --- a/hypha/static_src/sass/custom/_extra.scss +++ /dev/null @@ -1 +0,0 @@ -// stylelint-disable no-empty-source diff --git a/hypha/static_src/tailwind/base/variables.css b/hypha/static_src/tailwind/base/variables.css index 1008c3359c..ccc306f9b0 100644 --- a/hypha/static_src/tailwind/base/variables.css +++ b/hypha/static_src/tailwind/base/variables.css @@ -43,12 +43,8 @@ --color-black-60: rgb(0 0 0 / 60%); --color-black-50: rgb(0 0 0 / 50%); --color-black-40: rgb(0 0 0 / 40%); - --color-black-25: rgb(0 0 0 / 25%); --color-black-20: rgb(0 0 0 / 20%); --color-black-10: rgb(0 0 0 / 10%); - --color-white-50: rgb(255 255 255 / 50%); - --color-white-40: rgb(255 255 255 / 40%); - --color-white-25: rgb(255 255 255 / 25%); --color-white-20: rgb(255 255 255 / 20%); --color-white-10: rgb(255 255 255 / 10%); @@ -73,7 +69,6 @@ --weight-bold: 700; --weight-semibold: 600; --weight-normal: 400; - --weight-light: 200; /* Wrappers */ --site-width: 1280px; diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html index 965597d1b1..b21b013a3c 100644 --- a/hypha/templates/base-apply.html +++ b/hypha/templates/base-apply.html @@ -3,7 +3,7 @@ {% block header %}