diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 5526ee6140..230e8eaae3 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -6,6 +6,7 @@ import { import { useAppSelector } from "../store"; import { Link } from "react-router"; import { useTranslation } from "react-i18next"; +import { LuMessagesSquare } from "react-icons/lu"; /** * Component that renders the footer @@ -58,7 +59,10 @@ const Footer: React.FC = () => { {/* Only render if a feedback URL is set*/} {!!orgProperties && !!orgProperties[feedbackUrlPropertyId] && (
- Feedback + + +

Feedback

+
)} diff --git a/src/components/shared/modals/Modal.tsx b/src/components/shared/modals/Modal.tsx index 3f9e471d65..0ada5549b1 100644 --- a/src/components/shared/modals/Modal.tsx +++ b/src/components/shared/modals/Modal.tsx @@ -74,7 +74,7 @@ export const Modal = forwardRef>(
resetPolicies(formik.resetForm)} submit={() => saveAccess(formik.values, false)} diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss index 7969dc5ac9..8088e1925e 100644 --- a/src/styles/base/_fonts.scss +++ b/src/styles/base/_fonts.scss @@ -1,4 +1,3 @@ -@use "sass:meta"; @use "variables"; /** diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index 39c4ec22e6..b99352a0da 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -22,116 +22,208 @@ */ -// Logo -// ---------------------------------------- - -$logo-width: 100px; -$logo-height: 20px; +/** + * + * ---------------- COLORS ---------------- + * + */ -// Primary Colors +// Blues // ---------------------------------------- +$d-blue: #24425c; // "primary color" +$l-blue: #378dd4; // "primary color" +$bright-blue: #4da1f7; -$primary-color-green: #37c180; -$green: $primary-color-green; - -$primary-color-light-blue: #378dd4; -$l-blue: $primary-color-light-blue; - -$primary-color-blue: #24425c; -$d-blue: $primary-color-blue; - -$primary-color-grey: #8c939b; -$grey: $primary-color-grey; - -$primary-color-white: #fafafa; -$off-white: $primary-color-white; - -// Secondary Colors -// ---------------------------------------- +$l-blue-gradient: #2b77b9; +$b-blue-gradient: #55cef2; -$bright-blue: #4da1f7; $ref-blue: #1d5888; $ref-blue-button: #069; + +// Other Colors +// ---------------------------------------- +$green: #37c180; // "primary color" $red: #fa1919; $alt-red: #e45253; $orange: #ff8c00; $yellow: #e4d12e; -$black: #000; -$white: #fff; -$color-black: #000; +// Gray Scale +// ---------------------------------------- +$black: #000; +$dark-prim-color: #333; $color-darkgray: #444; -$color-gray: #898989; +$color-neutral-darkgray: #4d4d4d; +$medium-prim-color: #666; +$color-gray: #898989; // "primary color (was #8c939b)" +$light-prim-color: #a6a6a6; $color-silver: #CCC; +$color-midgray: #e2e2e2; +$color-highgray: #ededed; $color-lightgray: #F8F8F8; -$color-white: #fff; - -$l-blue-gradient: #2b77b9; -$b-blue-gradient: #55cef2; +$off-white: #fafafa; // "primary color" +$white: #fff; +// Text +$global-text-color: $medium-prim-color; +$global-text-color-light: color.adjust($global-text-color, $lightness: 6%); //#757575 +// Border +// ---------------------------------------- -// Primary color with light/medium/darker shades -$prim-color: color.adjust(#fff, $lightness: -50%); -$light-prim-color: color.adjust($prim-color, $lightness: 15%); //#a6a6a6 -$medium-prim-color: color.adjust($prim-color, $lightness: -10%); //#666666 -$dark-prim-color: color.adjust($prim-color, $lightness: -30%); //#333333 - -$global-text-color: $medium-prim-color; +$main-border-color: $color-silver; +$lighter-border-color: $color-midgray; +$dark-bg-border-color: #0e1b25; // Element Colors // ---------------------------------------- $body-background: $off-white; -$table-title-color: #46647e; -$header-link-color: #435263; +$table-title-color: $d-blue; $color-link: $medium-prim-color; $color-link-hover: $dark-prim-color; +$footer-background-color-light: color.adjust($body-background, $lightness: -3%); //#f2f2f2 +$footer-background-color: $color-highgray; +$main-menu-background: color.adjust($d-blue, $lightness: -3%); //#203a51 +$main-menu-border-color: $dark-bg-border-color; -// Highlights and Lowlights +// Main Table // ---------------------------------------- -$primary-color-green-light-3: color.adjust($primary-color-green, $lightness: 24%); // #92e0bb -$primary-color-green-light-2: color.adjust($primary-color-green, $lightness: 12%); // #63d29e -$primary-color-green-light-1: color.adjust($primary-color-green, $lightness: 6%); // #4bcc8f -$primary-color-green-dark-1: color.adjust($primary-color-green, $lightness: -9%); // #2d9d68 -$primary-color-green-dark-2: color.adjust($primary-color-green, $lightness: -15%); // #268558 -$primary-color-green-dark-3: color.adjust($primary-color-green, $lightness: -20%); // #20724b +$table-color-off-white-dark-1: color.adjust($off-white, $lightness: -1%); //#f7f7f7 +$table-color-off-white-dark-2: color.adjust($off-white, $lightness: -4%); //#f0f0f0 +$table-off-white-gradient: $color-highgray; +$color-lightgray-dark-1: color.adjust($color-lightgray, $lightness: -2%); //#f3f3f3 +$color-lightgray-dark-2: color.adjust($color-lightgray, $lightness: -5%); //#ebebeb -$table-highlight: color.adjust($light-prim-color, $lightness: 28%); +// Button Highlights and Lowlights, Gradients +// ---------------------------------------- -// Border +$green-light-3: color.adjust($green, $lightness: 24%); // #92e0bb +$green-light-2: color.adjust($green, $lightness: 12%); // #63d29e +$green-light-1: color.adjust($green, $lightness: 6%); // #4bcc8f + +$green-dark-1: color.adjust($green, $lightness: -9%); // #2d9d68 +$green-dark-2: color.adjust($green, $lightness: -15%); // #268558 +$green-dark-3: color.adjust($green, $lightness: -20%); // #20724b + +$l-blue-light-1: color.adjust($l-blue, $lightness: 10%); +$l-blue-gradient-dark-1: color.adjust($l-blue-gradient, $lightness: -5%); +$l-blue-gradient-dark-2: color.adjust($l-blue-gradient, $lightness: -10%); + +$bright-blue-dark-1: color.adjust($bright-blue, $lightness: -5%); +$bright-blue-dark-2: color.adjust($bright-blue, $lightness: -10%); +$b-blue-gradient-light-1: color.adjust($b-blue-gradient, $lightness: 5%); +$b-blue-gradient-light-2: color.adjust($b-blue-gradient, $lightness: 10%); + +$alt-red-light-1: color.adjust($alt-red, $lightness: 5%); +$alt-red-light-2: color.adjust($alt-red, $lightness: 10%); +$alt-red-dark-1: color.adjust($alt-red, $lightness: -5%); +$alt-red-dark-2: color.adjust($alt-red, $lightness: -10%); +$alt-red-dark-3: color.adjust($alt-red, $lightness: -20%); +$alt-red-dark-4: color.adjust($alt-red, $lightness: -30%); + +$main-border-color-dark-1: color.adjust($main-border-color, $lightness: -2%); +$white-dark-1: color.adjust($white, $lightness: -4%); +$color-lightgray-dark-1: color.adjust($color-lightgray, $lightness: -4%); +$color-lightgray-dark-2: color.adjust($color-lightgray, $lightness: -10%); + +$white-semidark: color.adjust($white, $lightness: -2%); +$color-off-white-dark-1: color.adjust($off-white, $lightness: -3%); +$color-off-white-dark-2: color.adjust($off-white, $lightness: -5%); +$color-off-white-dark-3: color.adjust($off-white, $lightness: -6%); + +$color-button-box-shadow: rgba(0,0,0,.05); +$color-active-box-shadow: rgba(0,0,0,.1); +$color-header-box-shadow: rgba(0,0,0,.3); +$color-dropdown-box-shadow: rgba(0,0,0,.1); +$color-table-cell-shadow: rgba(0,0,0,.05); +$color-modal-box-shadow: rgba(0,0,0,.3); +$color-modal-overlay-box-shadow: rgba(0,0,0,.2); +$color-modal-overlay-gradient-box-shadow: rgba(0,0,0,.4); +$color-pagination-active-box-shadow: rgba(0,0,0,.5); + +$table-highlight: $color-highgray; + +// Progress Bar // ---------------------------------------- -$main-border-color: #c9d0d3; -$light-border-color: #cfd3d5; -$lighter-border-color: #e2e2e2; -$main-border-radius: 4px; -$thin-border: 1px; -$thin-border-stroke: $thin-border solid; -$mid-border-stroke: 2px solid; +$progress-bar-color: $l-blue; -$dark-bg-border-color: #0e1b25; +// Modals +// ---------------------------------------- -// Form +$modal-heading-color: $color-neutral-darkgray; +$modal-header-gradient: color.adjust($color-lightgray, $lightness: -7%); //#e6e6e6 +$modal-obj-header-gradient: color.adjust($off-white, $lightness: -3%); //#f2f2f2 + +// Nav Colors // ---------------------------------------- +$modal-nav-bg-color: $color-highgray; +$modal-nav-border-color: $main-border-color; +$modal-nav-link-color: $medium-prim-color; +$modal-nav-link-active-color: $modal-heading-color; +$subpage-navigation-link-color: $color-silver; +$subpage-navigation-link-hover-color: $light-prim-color; -$input-height: 40px; -$btn-height: 39px; +// Alerts +// ---------------------------------------- +// Success (Green) +$state-success-text: #3c763d; +$state-success-bg: #dff0d8; +$state-success-border: #d4e9cb; +// Info (Blue) +$state-info-text: #3d88ad; +$state-info-bg: #d9edf7; +$state-info-border: #c2e0ef; -// Progress Bar +// Warning (Yellow) +$state-warning-text: #8a6d3b; +$state-warning-bg: #fcf8e3; +$state-warning-border: #f5efcb; + +// Danger (Red) +$state-danger-text: #a94442; +$state-danger-bg: #f2dede; +$state-danger-border: #ebd1d1; + +// Stats // ---------------------------------------- +$stats-color: $subpage-navigation-link-color; +$stats-hover-color: $subpage-navigation-link-hover-color; -$progress-bar-color: $l-blue; +/** + * + * -------------- DIMENSIONS--------------- + * + */ +// Logo +// ---------------------------------------- + +$logo-width: 100px; +$logo-height: 20px; + +// Form +// ---------------------------------------- + +$input-height: 40px; +$btn-height: 39px; // Inputs // ---------------------------------------- $small-input-width: 130px; +// Border +// ---------------------------------------- + +$main-border-radius: 4px; +$thin-border: 1px; +$thin-border-stroke: $thin-border solid; +$mid-border-stroke: 2px solid; // Modals @@ -140,21 +232,6 @@ $small-input-width: 130px; $modal-width: 800px; $modal-col-width: 358px; $modal-full-col-width: 100%; -$modal-heading-color: #4d4d4d; - -// Nav Colors -// ---------------------------------------- -$modal-nav-bg-color: #eeeff0; -$modal-nav-border-color: #d6d6d6; -$modal-nav-link-color: #646E75; -$modal-nav-link-active-color: $header-link-color; -$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%); //#fafafa -$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%); //#9cabbc - -// Stats -// ---------------------------------------- -$stats-color: $subpage-navigation-link-color; -$stats-hover-color: $subpage-navigation-link-hover-color; // Layout // ---------------------------------------- @@ -206,28 +283,5 @@ $img-path: "/src/img/"; // Alerts // ---------------------------------------- - -// Colors - -// Success (Green) -$state-success-text: #3c763d; -$state-success-bg: #dff0d8; -$state-success-border: rgb(211.8267110656, 233.0538934426, 203.0861065574); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-success-bg, 1%), $lightness: -3%); - -// Info (Blue) -$state-info-text: color.adjust(#31708f, $lightness: 5%); -$state-info-bg: #d9edf7; -$state-info-border: rgb(194.6022156398, 224.3725947867, 239.2577843602); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-info-bg, 1%), $lightness: -5%); - -// Warning (Yellow) -$state-warning-text: #8a6d3b; -$state-warning-bg: #fcf8e3; -$state-warning-border: rgb(245.5470578374, 238.7655993294, 203.1629421626); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-warning-bg, 1%), $lightness: -5%); - -// Danger (Red) -$state-danger-text: #a94442; -$state-danger-bg: #f2dede; -$state-danger-border: rgb(234.9211137441, 209.1388862559, 209.1388862559); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-danger-bg, 1%), $lightness: -3%); - // Transition $alert-transition: color 300ms ease-in; diff --git a/src/styles/components/_about.scss b/src/styles/components/_about.scss index 641585fd76..cf8fd4637f 100644 --- a/src/styles/components/_about.scss +++ b/src/styles/components/_about.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -22,13 +21,6 @@ * */ - -// About Variables -// ---------------------------------------- - -$about-border-color: color.adjust(variables.$body-background, $lightness: -13%); -$about-background-color: color.adjust(variables.$body-background, $lightness: -5%); - // Styles // ---------------------------------------- @@ -36,8 +28,8 @@ $about-background-color: color.adjust(variables.$body-background, $lightness: -5 width: 50%; margin-left: auto; margin-right: auto; - background-color: $about-background-color; - border: 1px solid $about-border-color; + background-color: variables.$footer-background-color; + border: 1px solid variables.$main-border-color; padding: 10px; margin-top: 20px; diff --git a/src/styles/components/_alerts.scss b/src/styles/components/_alerts.scss index f63bb02707..07a1723a36 100644 --- a/src/styles/components/_alerts.scss +++ b/src/styles/components/_alerts.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -34,14 +33,6 @@ p { color: $text-color; } - - a { - color: color.adjust($text-color, $lightness: 10%); - - &:hover { - color: $text-color; - } - } } // Alerts diff --git a/src/styles/components/_breadcrumbs.scss b/src/styles/components/_breadcrumbs.scss index a776749f1a..6365fe7c5d 100644 --- a/src/styles/components/_breadcrumbs.scss +++ b/src/styles/components/_breadcrumbs.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -25,7 +24,7 @@ .breadcrumb { $height: 35px; - background: color.adjust(variables.$modal-nav-bg-color, $lightness: 4%); + background: variables.$off-white; border-bottom: 1px solid variables.$modal-nav-border-color; line-height: $height; diff --git a/src/styles/components/_datepicker-custom.scss b/src/styles/components/_datepicker-custom.scss index d4c4fb59d0..ea793a18d1 100644 --- a/src/styles/components/_datepicker-custom.scss +++ b/src/styles/components/_datepicker-custom.scss @@ -18,7 +18,6 @@ * the License. * */ - @use "sass:color"; @use "../base/variables"; .datepicker-custom { @@ -36,7 +35,7 @@ .react-datepicker__navigation--years { &::before { - border-color: variables.$color-silver; + border-color: variables.$color-gray; border-style: solid; border-width: 3px 3px 0 0; content: ''; @@ -58,13 +57,13 @@ } &:hover::before { - border-color: color.adjust(variables.$color-silver, $lightness: -15%); + border-color: variables.$color-darkgray; } } .react-datepicker__month-read-view, .react-datepicker__year-read-view { - color: variables.$color-white; + color: variables.$white; background: variables.$color-gray; &:hover { background: variables.$color-darkgray; diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss index dd9581a1a3..1afbad781f 100644 --- a/src/styles/components/_dropdowns.scss +++ b/src/styles/components/_dropdowns.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -42,18 +41,17 @@ // Pulled from Button Mixin (keep in sync with those styles) background: linear-gradient(variables.$white, variables.$color-lightgray); border: variables.$thin-border-stroke variables.$main-border-color; - box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow; color: variables.$medium-prim-color; text-shadow: 0px 1px 0px variables.$white; &:hover { - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -1%), color.adjust(variables.$color-lightgray, $lightness: -1%)); - color: variables.$medium-prim-color; + border: variables.$thin-border-stroke variables.$l-blue; + box-shadow: 0 0 0 1px variables.$l-blue; } &:active { - box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 6px 2px variables.$color-button-box-shadow; } // Menu Icon Settings diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss index e6e8850c20..b5d503e24c 100644 --- a/src/styles/components/_footer.scss +++ b/src/styles/components/_footer.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -22,13 +21,6 @@ * */ - -// Footer Variables -// ---------------------------------------- - -$footer-border-color: color.adjust(variables.$body-background, $lightness: -13%); -$footer-background-color: color.adjust(variables.$body-background, $lightness: -5%); - @mixin footer-component-padding() { padding-top: 10px; padding-bottom: 12px; @@ -43,8 +35,8 @@ $footer-background-color: color.adjust(variables.$body-background, $lightness: - position: fixed; bottom: 0; left: 0; - background: $footer-background-color; - border-top: 1px solid $footer-border-color; + background: variables.$footer-background-color; + border-top: 1px solid variables.$main-border-color; .feedback-btn { width: 90px; @@ -58,19 +50,15 @@ $footer-background-color: color.adjust(variables.$body-background, $lightness: - a { transition: all .2s; @include footer-component-padding(); - border-left: 1px solid $footer-border-color; - text-align: center; - display: block; + border-left: 1px solid variables.$main-border-color; + display: flex; padding-left: 5px; padding-right: 5px; + gap: 6px; + justify-content: center; &:hover { - background: rgba(variables.$white, 0.8); - } - - &:before { - content: "\f086"; - margin-right: 6px; + background: variables.$off-white; } } } @@ -81,7 +69,7 @@ $footer-background-color: color.adjust(variables.$body-background, $lightness: - } ul li { - color: variables.$light-prim-color; + color: variables.$medium-prim-color; margin-left: 10px; vertical-align: top; font-size: 10px; diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss index 0eaf39a509..8a5276b315 100644 --- a/src/styles/components/_header.scss +++ b/src/styles/components/_header.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/button"; @use "../mixins/mixins-config"; @@ -34,10 +33,10 @@ $height: 50px; width: 100%; height: $height; - box-shadow: 0 1px 3px 1px rgba(variables.$black, 0.3); + box-shadow: 0 1px 3px 1px variables.$color-header-box-shadow; position: relative; - border-bottom: 1px solid color.adjust(variables.$d-blue, $lightness: -5%); //1d3041; - background: linear-gradient(to bottom, variables.$l-blue, color.adjust(variables.$l-blue, $lightness: -9%)); //2075b1 + border-bottom: 1px solid variables.$d-blue; + background: linear-gradient(to bottom, variables.$l-blue, variables.$l-blue-gradient); .header-branding { float: left; @@ -144,7 +143,7 @@ .lang-dd .dropdown-ul { .selected-icon { - color: variables.$primary-color-green; + color: variables.$green; font-size: 15px; margin: 0 7px 0 0; vertical-align: middle; @@ -220,10 +219,10 @@ .menu-top { width: 80px; height: 42px; - background: color.adjust(variables.$d-blue, $lightness: -3%); + background: variables.$main-menu-background; border-top-left-radius: 4px; border-top-right-radius: 4px; - border: variables.$thin-border-stroke color.adjust(variables.$d-blue, $lightness: -12%); + border: variables.$thin-border-stroke variables.$main-menu-border-color; border-bottom: none; margin: 0 variables.$side-margin; position: relative; diff --git a/src/styles/components/_inputs.scss b/src/styles/components/_inputs.scss index d99bdbf394..ab22cb3e08 100644 --- a/src/styles/components/_inputs.scss +++ b/src/styles/components/_inputs.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/button"; @@ -51,7 +50,7 @@ textarea { } &:hover { - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -20%); + border: variables.$thin-border-stroke variables.$dark-prim-color; } &:focus { @@ -99,7 +98,7 @@ select[multiple] { height: 40px; position: relative; - outline: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); + outline: variables.$thin-border-stroke variables.$main-border-color; border-radius: variables.$main-border-radius; input.search { @@ -199,14 +198,14 @@ select[multiple] { border: 1px solid variables.$main-border-color; border-radius: 4px; padding: 0px 8px; - color: variables.$color-black; + color: variables.$black; margin-right: 8px; white-space: nowrap; } /* Right text */ .file-text { - color: variables.$color-white; + color: variables.$white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/styles/components/_menu-dropdown.scss b/src/styles/components/_menu-dropdown.scss index 49156e423c..3487159561 100644 --- a/src/styles/components/_menu-dropdown.scss +++ b/src/styles/components/_menu-dropdown.scss @@ -30,11 +30,11 @@ // Base Properties $padding: 8px 0; - $background-color: rgba(variables.$white, 0.98 ); + $background-color: variables.$white; $border-stroke: 1px; - $border-color: rgba(variables.$black, 0.1); + $border-color: variables.$color-dropdown-box-shadow; $border-radius: variables.$main-border-radius; - $box-shadow: 0 1px 3px rgba(variables.$black, 0.1), 0 0 1px $border-stroke rgba(variables.$black, 0.1); + $box-shadow: 0 1px 3px variables.$color-dropdown-box-shadow, 0 0 1px $border-stroke variables.$color-dropdown-box-shadow; $point-width: 7px; $point-height: 7px; $point-position-from-right: 10px; diff --git a/src/styles/components/_multi-value.scss b/src/styles/components/_multi-value.scss index 7eb97f28a2..24c9d0a161 100644 --- a/src/styles/components/_multi-value.scss +++ b/src/styles/components/_multi-value.scss @@ -19,7 +19,7 @@ } &-green { - background: variables.$primary-color-green-light-1; + background: variables.$green; } &-red { diff --git a/src/styles/components/_popover.scss b/src/styles/components/_popover.scss index 08ee3571bc..2a184a6bc6 100644 --- a/src/styles/components/_popover.scss +++ b/src/styles/components/_popover.scss @@ -32,7 +32,7 @@ } .play-circle-icon { - color: variables.$primary-color-green; + color: variables.$green; font-size: 20px; } } diff --git a/src/styles/components/_progress-bar.scss b/src/styles/components/_progress-bar.scss index c9bfa74524..1226c60c56 100644 --- a/src/styles/components/_progress-bar.scss +++ b/src/styles/components/_progress-bar.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -30,7 +29,7 @@ margin-bottom: 10px; background-color: variables.$white; border-radius: variables.$main-border-radius; - border: 1px solid color.adjust(variables.$l-blue, $lightness: -10%); + border: 1px solid variables.$l-blue-gradient; &.compact { height: 8px; @@ -44,25 +43,18 @@ font-size: 12px; line-height: 24px; color: variables.$white; - text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); text-align: center; background-color: variables.$progress-bar-color; - background: linear-gradient(to bottom, variables.$l-blue, variables.$l-blue-gradient); - border-right: 1px solid color.adjust(variables.$l-blue, $lightness: -15%); + background: linear-gradient(to bottom, variables.$b-blue-gradient, variables.$bright-blue); + border-right: 1px solid variables.$d-blue; transition: width 600ms ease; + &[aria-valuenow="0"], &[aria-valuenow="1"], &[aria-valuenow="2"] { min-width: 30px; } - &[aria-valuenow="0"] { - min-width: 30px; - background-color: transparent; - background-image: none; - box-shadow: none; - } - &.bad { background: variables.$white; } @@ -79,7 +71,7 @@ background: variables.$l-blue; } &.verystrong { - background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); + background: linear-gradient(variables.$green, variables.$green-dark-1); } } diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss index c0f10612c4..3b9b070dc2 100644 --- a/src/styles/components/_statistics-graph.scss +++ b/src/styles/components/_statistics-graph.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/button"; @@ -59,14 +58,6 @@ border-left: 0; border-radius: 0 4px 4px 0; } - - > input[type="radio"]:checked + label { - cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(variables.$color-lightgray, $lightness: -10%)); - color: variables.$medium-prim-color; - box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1); - } } p { diff --git a/src/styles/components/_stats.scss b/src/styles/components/_stats.scss index 89e34f58f1..6ef412c1f6 100644 --- a/src/styles/components/_stats.scss +++ b/src/styles/components/_stats.scss @@ -20,7 +20,6 @@ * the License. * */ -@use "sass:math"; .stats-container { align-self: center; diff --git a/src/styles/components/_steps.scss b/src/styles/components/_steps.scss index 91f0e02fb3..8dfa1a5ca2 100644 --- a/src/styles/components/_steps.scss +++ b/src/styles/components/_steps.scss @@ -37,12 +37,12 @@ } .MuiStepLabel-labelContainer .Mui-active { - border-bottom: 1px solid variables.$primary-color-blue; + border-bottom: 1px solid variables.$d-blue; font-weight: 800; } .Mui-active svg { - color: variables.$primary-color-blue !important; + color: variables.$d-blue !important; transform: none !important; } @@ -86,10 +86,10 @@ background: variables.$main-border-color; background: linear-gradient( to left, - rgba(variables.$modal-nav-border-color, 0) 5%, - rgba(variables.$modal-nav-border-color, 1) 25%, - rgba(variables.$modal-nav-border-color, 1) 75%, - rgba(variables.$modal-nav-border-color, 0) 95% + transparent 5%, + variables.$modal-nav-border-color 25%, + variables.$modal-nav-border-color 75%, + transparent 95% ); } diff --git a/src/styles/components/_table-filter-profiles.scss b/src/styles/components/_table-filter-profiles.scss index 95b325d6a1..9992172147 100644 --- a/src/styles/components/_table-filter-profiles.scss +++ b/src/styles/components/_table-filter-profiles.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/button"; @@ -188,7 +187,7 @@ padding: 5px; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; - background: color.adjust(variables.$body-background, $lightness: -3%); + background: variables.$footer-background-color-light; border-top: 1px solid variables.$main-border-color; } diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index 243bd98f8c..b4e43ab170 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/mixins-config"; @use "../mixins/button"; @@ -42,13 +41,10 @@ } button { - $highlight-blue: variables.$ref-blue; - - color: $highlight-blue; - text-shadow: 0 1px 0 rgba(variables.$white, 0.75); + color: variables.$ref-blue; &:hover { - color: color.adjust($highlight-blue, $lightness: 10%); + color: variables.$l-blue; } } } @@ -86,10 +82,10 @@ &.sortable { cursor: pointer; &:hover { - background: linear-gradient(to bottom, variables.$off-white, color.adjust(variables.$off-white, $lightness: -5%)); + background: linear-gradient(to bottom, variables.$off-white, variables.$table-off-white-gradient); } &:active { - box-shadow: inset 0 3px 10px 2px rgba(variables.$black, 0.05); + box-shadow: inset 0 3px 10px 2px variables.$color-table-cell-shadow; } } // Layout @@ -115,7 +111,7 @@ border-left: 1px solid variables.$white; border-bottom: 1px solid $border-color; user-select: none; - background: linear-gradient(to bottom, color.adjust(variables.$off-white, $lightness: -1%), color.adjust(variables.$off-white, $lightness: -5%)); + background: linear-gradient(to bottom, variables.$table-color-off-white-dark-1, variables.$table-off-white-gradient); // Typography line-height: 35px; @@ -131,8 +127,8 @@ // Darken tbl when sorted on &.col-sort { - background: color.adjust(variables.$off-white, $lightness: -4%); - box-shadow: inset 0 3px 10px 2px rgba(variables.$black, 0.05); + background: variables.$table-color-off-white-dark-2; + box-shadow: inset 0 3px 10px 2px variables.$color-table-cell-shadow; } // Special column @@ -187,12 +183,12 @@ .chevron-up { position: relative; top: 3px; - color: variables.$grey; + color: variables.$color-gray; } .chevron-down { position: relative; top: -3px; - color: variables.$grey; + color: variables.$color-gray; } .active { color: variables.$color-darkgray; @@ -228,7 +224,7 @@ // at the bottom of rows. &.total { > td { - background: color.adjust(variables.$color-lightgray, $lightness: -2%); + background: variables.$color-lightgray-dark-1; color: variables.$medium-prim-color; font-weight: bold; @@ -240,7 +236,7 @@ } &.darker-row { - background: color.adjust(variables.$color-lightgray, $lightness: -5%); + background: variables.$color-lightgray-dark-2; } &.disabled { @@ -375,7 +371,7 @@ } > hr { - background: color.adjust(variables.$main-border-color, $lightness: 10%); + background: variables.$lighter-border-color; height: 1px; border: none; } diff --git a/src/styles/components/modals/_footer.scss b/src/styles/components/modals/_footer.scss index ad360eaea6..b06180a25a 100644 --- a/src/styles/components/modals/_footer.scss +++ b/src/styles/components/modals/_footer.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; @use "../../mixins/button"; @@ -29,7 +28,7 @@ height: 60px; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; - background: color.adjust(variables.$body-background, $lightness: -3%); + background: variables.$footer-background-color-light; border-top: 1px solid variables.$main-border-color; div { &.pull-right{ @@ -41,6 +40,8 @@ @include button.btn(green); &.cancel { + float: left; + margin-left: 3%; @include button.btn(white); } diff --git a/src/styles/components/modals/_header.scss b/src/styles/components/modals/_header.scss index 9a77e58b63..3488ded1c2 100644 --- a/src/styles/components/modals/_header.scss +++ b/src/styles/components/modals/_header.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; /** @@ -30,7 +29,7 @@ width: 100%; height: 40px; line-height: 40px; - background: linear-gradient(to bottom, variables.$color-lightgray, color.adjust(variables.$color-lightgray, $lightness: -7%)); + background: linear-gradient(to bottom, variables.$color-lightgray, variables.$modal-header-gradient); border-bottom: 1px solid variables.$main-border-color; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index 12ab3e8005..80a1945802 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; @use "../../mixins/button"; @use "../../mixins/mixins-config"; @@ -66,7 +65,7 @@ margin-left: -(variables.$modal-width * 0.5); background: variables.$body-background; border-radius: variables.$main-border-radius; - box-shadow: 0 0 20px 2px rgba(variables.$black, 0.3); + box-shadow: 0 0 20px 2px variables.$color-modal-box-shadow; input[readonly] { border: none; @@ -171,8 +170,8 @@ width: 100%; height: 100%; z-index: variables.$max-z + 1; - background-color: rgba(variables.$black, 0.2); - background-image: radial-gradient(rgba(variables.$black, 0.2), rgba(variables.$black, 0.4)); + background-color: variables.$color-modal-overlay-box-shadow; + background-image: radial-gradient(variables.$color-modal-overlay-box-shadow, variables.$color-modal-overlay-gradient-box-shadow); } @@ -204,7 +203,7 @@ box-sizing: border-box; height: $height; line-height: $height; - background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -3%)); + background: linear-gradient(to bottom, variables.$white, variables.$modal-obj-header-gradient); border-bottom: 1px solid variables.$main-border-color; border-top-left-radius: variables.$main-border-radius; border-top-right-radius: variables.$main-border-radius; @@ -212,7 +211,7 @@ width: 100%; padding-left: 10px; padding-right: 10px; - color: color.adjust(variables.$grey, $lightness: -10%); + color: variables.$global-text-color-light; font-weight: 600; text-shadow: 0 1px 0 variables.$white; font-size: 13px; @@ -397,7 +396,7 @@ > li { line-height: 23px; - border-bottom: 1px solid color.adjust(variables.$main-border-color, $lightness: 10%); + border-bottom: 1px solid variables.$lighter-border-color; padding: 10px 0; &:first-child { @@ -436,7 +435,7 @@ .active { padding: 14px 5px; min-width: 100px; - color: variables.$header-link-color; + color: variables.$modal-nav-link-active-color; font-weight: 600; } diff --git a/src/styles/components/modals/_modal-components.scss b/src/styles/components/modals/_modal-components.scss index 7910d21204..2b699047a9 100644 --- a/src/styles/components/modals/_modal-components.scss +++ b/src/styles/components/modals/_modal-components.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; @use "../../mixins/button"; @@ -67,7 +66,7 @@ } > hr { - background: color.adjust(variables.$main-border-color, $lightness: 10%); + background: variables.$lighter-border-color; height: 1px; border: none; margin: 30px 0 20px; @@ -251,7 +250,7 @@ // ---------------------------------------- .details-link { - color: variables.$l-blue; + color: variables.$ref-blue; white-space: nowrap; display: flex; align-items: center; @@ -262,7 +261,7 @@ } &:hover { - color: color.adjust(variables.$l-blue, $lightness: -20%); + color: variables.$color-link-hover; } } @@ -291,7 +290,7 @@ border-radius: 10px; height: 19px; display: inline-block; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 3px variables.$color-button-box-shadow; // Filename label p { @@ -344,14 +343,6 @@ } } - .progress { - border: 1px solid color.adjust(variables.$bright-blue, $lightness: -5%); - } - - .progress-bar { - background: linear-gradient(to bottom, color.adjust(variables.$bright-blue, $lightness: 5%), variables.$bright-blue); - } - button { &:first-child { @@ -449,7 +440,7 @@ padding: 5px; border: 1px solid variables.$main-border-color; border-radius: variables.$main-border-radius; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 3px variables.$color-dropdown-box-shadow; background: variables.$white; min-height: 202px; } diff --git a/src/styles/components/modals/_modals-config.scss b/src/styles/components/modals/_modals-config.scss index cf7a6ddbcb..65cfb283fd 100644 --- a/src/styles/components/modals/_modals-config.scss +++ b/src/styles/components/modals/_modals-config.scss @@ -25,7 +25,6 @@ @use "_header"; @use "_nav"; @use "_footer"; -@use "_wizard"; // Components @use "_modal-components"; diff --git a/src/styles/components/modals/_wizard.scss b/src/styles/components/modals/_wizard.scss deleted file mode 100644 index 23d47763d3..0000000000 --- a/src/styles/components/modals/_wizard.scss +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Licensed to The Apereo Foundation under one or more contributor license - * agreements. See the NOTICE file distributed with this work for additional - * information regarding copyright ownership. - * - * - * The Apereo Foundation licenses this file to you under the Educational - * Community License, Version 2.0 (the "License"); you may not use this file - * except in compliance with the License. You may obtain a copy of the License - * at: - * - * http://opensource.org/licenses/ecl2.txt - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations under - * the License. - * - */ - - -.modal.wizard { - - .cancel { - float: left; - margin-left: 3%; - } - - .inactive { - opacity: 0.5; - cursor: default; - } -} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 5a6bcb3eb6..5d6d10eb6a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -23,7 +23,6 @@ // ---------------------------------------- // Imports -@use "sass:meta"; // Foundation // ---------------------------------------- diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss index f0e4a20252..8b00ca42d4 100644 --- a/src/styles/mixins/_button.scss +++ b/src/styles/mixins/_button.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -32,177 +31,102 @@ position: relative; @if $color == green-dark-bg { - box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$green-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; - background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); + background: linear-gradient(variables.$green, variables.$green-dark-1); border: variables.$thin-border-stroke variables.$dark-bg-border-color; - &:hover { + &:hover, + &:focus { cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -5%)); - } - - &:focus { - cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -5%)); + background: linear-gradient(variables.$green-light-1, variables.$green-dark-3); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px variables.$primary-color-green-dark-2; - background-color: variables.$primary-color-green-dark-1 !important; + box-shadow: inset 0px 3px 10px 1px variables.$green-dark-2; + background-color: variables.$green-dark-1 !important; } } - /** - * Currently goes unused. Kept to illustrate the intention behind this file - * for future readers. - @else if $color == blue-dark-bg { - box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); - - background: linear-gradient(#3a5e7e, #2c9966); - - border: variables.$thin-border-stroke variables.$dark-bg-border-color; - - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); - } - - &:focus { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); - } - - &:active { - cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); - } - } - */ - @else if $color == green { - box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); - - background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); + box-shadow: inset 0px 1px 0px 0px variables.$green-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; - border: variables.$thin-border-stroke variables.$primary-color-green-dark-3; + background: linear-gradient(variables.$green, variables.$green-dark-1); - &:hover { - cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -10%)); - } + border: variables.$thin-border-stroke variables.$green-dark-3; - &:focus { + &:hover, + &:focus { cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -10%)); + background: linear-gradient(variables.$green-light-1, variables.$green-dark-3); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px variables.$primary-color-green-dark-2; - background-color: variables.$primary-color-green-dark-1 !important; + box-shadow: inset 0px 3px 10px 1px variables.$green-dark-2; + background-color: variables.$green-dark-1 !important; } } - /** - * Currently goes unused. Kept to illustrate the intention behind this file - * for future readers. - @else if $color == blue { - box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); - - background: linear-gradient(#3a5e7e, #2c9966); - - border: variables.$thin-border-stroke variables.$dark-bg-border-color; - - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); - } - - &:focus { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); - } - - &:active { - cursor: pointer; - box-shadow: inset 0 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); - } - } - */ - @else if $color == lightblue { - box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$l-blue, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$l-blue-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; background: linear-gradient(variables.$l-blue, variables.$l-blue-gradient); - border: variables.$thin-border-stroke color.adjust(variables.$l-blue-gradient, $lightness: -5%); - - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(variables.$l-blue, $lightness: 10%), color.adjust(variables.$l-blue-gradient, $lightness: -10%)); - } + border: variables.$thin-border-stroke variables.$l-blue-gradient-dark-1; - &:focus { + &:hover, + &:focus { cursor: pointer; - background: linear-gradient(color.adjust(variables.$l-blue, $lightness: 10%), color.adjust(variables.$l-blue-gradient, $lightness: -10%)); + background: linear-gradient(variables.$l-blue-light-1, variables.$l-blue-gradient-dark-2); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(variables.$l-blue-gradient, $lightness: -5%); + box-shadow: inset 0px 3px 10px 1px variables.$l-blue-gradient-dark-1; } } @else if $color == brightblue { - box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$b-blue-gradient, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$b-blue-gradient-light-2, 0px 2px 3px 1px variables.$color-button-box-shadow; background: linear-gradient(variables.$b-blue-gradient, variables.$bright-blue); - border: variables.$thin-border-stroke color.adjust(variables.$bright-blue, $lightness: -10%); - - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(variables.$b-blue-gradient, $lightness: 5%), color.adjust(variables.$bright-blue, $lightness: -10%)); - } + border: variables.$thin-border-stroke variables.$bright-blue-dark-2; - &:focus { + &:hover, + &:focus { cursor: pointer; - background: linear-gradient(color.adjust(variables.$b-blue-gradient, $lightness: 5%), color.adjust(variables.$bright-blue, $lightness: -10%)); + background: linear-gradient(variables.$b-blue-gradient-light-1, variables.$bright-blue-dark-2); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(variables.$bright-blue, $lightness: -5%); + box-shadow: inset 0px 3px 10px 1px variables.$bright-blue-dark-1; } } @else if $color == red { - box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$alt-red, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); - - background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 5%), color.adjust(variables.$alt-red, $lightness: -5%)); + box-shadow: inset 0px 1px 0px 0px variables.$alt-red-light-2, 0px 2px 3px 1px variables.$color-button-box-shadow; - border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -20%); + background: linear-gradient(variables.$alt-red-light-1, variables.$alt-red-dark-1); - &:hover { - cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -30%); - background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 10%), color.adjust(variables.$alt-red, $lightness: -10%)); - } + border: variables.$thin-border-stroke variables.$alt-red-dark-3; - &:focus { + &:hover, + &:focus { cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -30%); - background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 10%), color.adjust(variables.$alt-red, $lightness: -10%)); + border: variables.$thin-border-stroke variables.$alt-red-dark-4; + background: linear-gradient(variables.$alt-red-light-2, variables.$alt-red-dark-2); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(variables.$alt-red, $lightness: -5%); + box-shadow: inset 0px 3px 10px 1px variables.$alt-red-dark-1; } } @@ -210,27 +134,21 @@ background: linear-gradient(variables.$white, variables.$color-lightgray); border: variables.$thin-border-stroke variables.$main-border-color; - box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow; color: variables.$medium-prim-color; text-shadow: 0px 1px 0px variables.$white; - &:hover { - cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(variables.$color-lightgray, $lightness: -10%)); - color: variables.$medium-prim-color; - } - - &:focus { + &:hover, + &:focus { cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(variables.$color-lightgray, $lightness: -10%)); + border: variables.$thin-border-stroke variables.$main-border-color-dark-1; + background: linear-gradient(variables.$white-dark-1, variables.$color-lightgray-dark-2); color: variables.$medium-prim-color; } &:active { cursor: pointer; - box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1); + box-shadow: inset 0px 1px 6px 2px variables.$color-active-box-shadow; } } diff --git a/src/styles/mixins/_mixins-config.scss b/src/styles/mixins/_mixins-config.scss index e3467f21c9..86877e8280 100644 --- a/src/styles/mixins/_mixins-config.scss +++ b/src/styles/mixins/_mixins-config.scss @@ -20,7 +20,6 @@ */ -@use "sass:color"; @use "button"; @use "triangle-point"; @use "../base/variables"; diff --git a/src/styles/mixins/_triangle-point.scss b/src/styles/mixins/_triangle-point.scss index 07630d683b..d0d7cac0f4 100644 --- a/src/styles/mixins/_triangle-point.scss +++ b/src/styles/mixins/_triangle-point.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -22,7 +21,7 @@ * */ -@mixin triangle-point-side($position, $width, $height, $position-from-left: 4.75px, $background-color: variables.$white, $border-stroke: 1px, $border-color: color.adjust(variables.$main-border-color, $lightness: -5%), $position-from-origin: 1) { +@mixin triangle-point-side($position, $width, $height, $position-from-left: 4.75px, $background-color: variables.$white, $border-stroke: 1px, $border-color: variables.$main-border-color, $position-from-origin: 1) { @if $position == left { &:before, @@ -54,7 +53,7 @@ } -@mixin triangle-point($position, $width, $height, $position-from-right: 10px, $background-color: variables.$white, $border-stroke: 1px, $border-color: color.adjust(variables.$main-border-color, $lightness: -5%), $position-from-origin: 1) { +@mixin triangle-point($position, $width, $height, $position-from-right: 10px, $background-color: variables.$white, $border-stroke: 1px, $border-color: variables.$main-border-color, $position-from-origin: 1) { @if $position == top { diff --git a/src/styles/views/_core.scss b/src/styles/views/_core.scss index f35186e7b9..9f45b682e7 100644 --- a/src/styles/views/_core.scss +++ b/src/styles/views/_core.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** @@ -126,30 +125,19 @@ body { padding: 7px 10px; margin-right: 4px; border-radius: variables.$main-border-radius - 1; - box-shadow: inset 0 1px 0 rgba(variables.$white, 0.8); - font-size: 12px; font-weight: 600; - text-decoration: none; - color: variables.$color-gray; - text-shadow: 0 1px 0 rgba(variables.$white, 1); - border: variables.$thin-border-stroke variables.$main-border-color; - background: linear-gradient(to bottom, variables.$off-white, variables.$color-lightgray); - - // Pulled from Button Mixin (keep in sync with those styles) background: linear-gradient(variables.$white, variables.$color-lightgray); border: variables.$thin-border-stroke variables.$main-border-color; - box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow; color: variables.$medium-prim-color; - text-shadow: 0px 1px 0px variables.$white; &:hover:not(.active) { - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -1%), color.adjust(variables.$color-lightgray, $lightness: -1%)); + background: linear-gradient(variables.$white-dark-1, variables.$color-lightgray-dark-1); color: variables.$medium-prim-color; } &:active { - box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 6px 2px variables.$color-button-box-shadow; } > i { @@ -158,14 +146,14 @@ body { } .active { - display: inline-block; - padding: 7px 10px; - margin-right: 4px; + // display: inline-block; + // padding: 7px 10px; + // margin-right: 4px; border: none; background: variables.$medium-prim-color; - box-shadow: inset 0 0 8px rgba(variables.$black, 0.5); + box-shadow: inset 0 0 8px variables.$color-pagination-active-box-shadow; color: variables.$off-white; - text-shadow: 0 0 3px rgba(variables.$black, 0.5); + text-shadow: 0 0 3px variables.$color-pagination-active-box-shadow; } } diff --git a/src/styles/views/_statistics.scss b/src/styles/views/_statistics.scss index 77fa6304ac..8be60c90f4 100644 --- a/src/styles/views/_statistics.scss +++ b/src/styles/views/_statistics.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; .statistics header { @@ -6,7 +5,7 @@ width: 100%; height: 40px; line-height: 40px; - background: linear-gradient(to bottom, variables.$color-lightgray, color.adjust(variables.$color-lightgray, $lightness: -7%)); + background: linear-gradient(to bottom, variables.$color-lightgray, variables.$modal-header-gradient); border-bottom: 1px solid variables.$main-border-color; border-top-left-radius: variables.$main-border-radius; border-top-right-radius: variables.$main-border-radius; @@ -70,8 +69,8 @@ This file is generated by `grunt build`, do not edit it by hand. background-color: variables.$white; background: linear-gradient(variables.$white 20%, variables.$color-lightgray 50%); background-clip: padding-box; - -webkit-box-shadow: 0 0 3px variables.$white inset, 0 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 0 3px variables.$white inset, 0 1px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0 0 3px variables.$white inset, 0 1px 1px variables.$color-dropdown-box-shadow; + box-shadow: 0 0 3px variables.$white inset, 0 1px 1px variables.$color-dropdown-box-shadow; color: variables.$color-darkgray; text-decoration: none; white-space: nowrap; diff --git a/src/styles/views/modals/_edit-table-view.scss b/src/styles/views/modals/_edit-table-view.scss index e2d608ecf7..bcdca95ce5 100644 --- a/src/styles/views/modals/_edit-table-view.scss +++ b/src/styles/views/modals/_edit-table-view.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; /** @@ -71,14 +70,14 @@ border-radius: variables.$main-border-radius; cursor: move; border: variables.$thin-border-stroke variables.$main-border-color; - background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -3%)); - color: color.adjust(variables.$grey, $lightness: -10%); + background: linear-gradient(to bottom, variables.$white, variables.$color-off-white-dark-1); + color: variables.$global-text-color-light; font-weight: 600; text-shadow: 0px 1px 0px variables.$white; font-size: 13px; position: relative; margin: 10px 0; - box-shadow: 0 0 0 rgba(0,0,0,0); + box-shadow: none; transition: box-shadow .3s ease-in-out; // Begin transitioning to flexbox @@ -89,15 +88,14 @@ padding-left: 5px; &:hover { - background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -5%)); + background: linear-gradient(to bottom, variables.$white, variables.$color-off-white-dark-2); } &:active, &.being-dragged { - background: linear-gradient(to bottom, color.adjust(variables.$white, $lightness: -2%), color.adjust(variables.$off-white, $lightness: -6%)); + background: linear-gradient(to bottom, variables.$white-semidark, variables.$color-off-white-dark-3); cursor: move; - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -5%); - box-shadow: 0 0 4px rgba(0,0,0,0.1); + box-shadow: 0 0 4px variables.$color-active-box-shadow; } // Item Move Buttons diff --git a/src/styles/views/modals/_embedded-code.scss b/src/styles/views/modals/_embedded-code.scss index bbde152315..28f4900412 100644 --- a/src/styles/views/modals/_embedded-code.scss +++ b/src/styles/views/modals/_embedded-code.scss @@ -102,7 +102,7 @@ width:95%; overflow:auto; margin-top:5px; - color: variables.$color-black; + color: variables.$black; display: block; padding: 16px; border-radius: 10px; diff --git a/src/styles/views/modals/_hotkey-cheat-sheet.scss b/src/styles/views/modals/_hotkey-cheat-sheet.scss index d1456e74ba..2420d7400c 100644 --- a/src/styles/views/modals/_hotkey-cheat-sheet.scss +++ b/src/styles/views/modals/_hotkey-cheat-sheet.scss @@ -7,7 +7,7 @@ border: 1px solid variables.$modal-heading-color; border-radius: 5px; padding: 2px 9px; - color: variables.$color-white; + color: variables.$white; text-shadow: 1px 1px 0 variables.$color-darkgray; min-width: 32px; } diff --git a/src/styles/views/modals/_publications.scss b/src/styles/views/modals/_publications.scss index a0236216a0..2c13389ad1 100644 --- a/src/styles/views/modals/_publications.scss +++ b/src/styles/views/modals/_publications.scss @@ -89,7 +89,7 @@ } .video-icon { - color: variables.$primary-color-green-light-2; + color: variables.$green; font-size: 24px; } @@ -100,12 +100,12 @@ .play { float: right; margin-left: auto; - color: variables.$primary-color-green-light-2; + color: variables.$green; font-size: 24px; &:active:before, &:hover:before { - color: variables.$primary-color-green; + color: variables.$green-dark-1; } } diff --git a/src/styles/views/modals/_registration.scss b/src/styles/views/modals/_registration.scss index 7180ffc1fa..6e1c72cf74 100644 --- a/src/styles/views/modals/_registration.scss +++ b/src/styles/views/modals/_registration.scss @@ -29,7 +29,7 @@ } .modal-content { - background-color: variables.$primary-color-white; + background-color: variables.$off-white; //background-color: $white; .row { margin: 6px 0; diff --git a/src/styles/views/modals/_workflows.scss b/src/styles/views/modals/_workflows.scss index e4c56d00c1..ee6cf4c369 100644 --- a/src/styles/views/modals/_workflows.scss +++ b/src/styles/views/modals/_workflows.scss @@ -27,7 +27,7 @@ vertical-align: middle; &.grey { - color: variables.$grey; + color: variables.$color-gray; } &.darkgray {