From b2210fa346c40793a356ac11abfd1d10f829e5f6 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 12 Sep 2023 14:05:59 +0200 Subject: [PATCH] Update bourbon from 4 to 7 Bourbon version is severly outdated. This updates to the latest version, and also replaces deprecated mixins with native browser CSS. Also requires updating bourbon-neat, which also required updating deprecated mixins. As there was no migration guide for neat this purely a best effort guess based on their documentation and source code. --- app/package-lock.json | 28 +++++------ app/package.json | 4 +- app/src/styles/components/_alerts.scss | 2 +- app/src/styles/components/_cal.scss | 2 +- app/src/styles/components/_dropdowns.scss | 18 +++---- app/src/styles/components/_footer.scss | 2 +- app/src/styles/components/_header.scss | 6 +-- app/src/styles/components/_inputs.scss | 23 +++++---- app/src/styles/components/_menu-dropdown.scss | 6 +-- app/src/styles/components/_menu.scss | 2 +- app/src/styles/components/_progress-bar.scss | 4 +- .../styles/components/_statistics-graph.scss | 2 +- app/src/styles/components/_steps.scss | 8 ++-- app/src/styles/components/_tables.scss | 10 ++-- .../styles/components/_toggle-buttons.scss | 2 +- .../components/data-filter/_add-button.scss | 8 ++-- .../styles/components/data-filter/_base.scss | 2 +- .../data-filter/_clear-filters.scss | 12 ++--- .../data-filter/_filter-profiles.scss | 14 +++--- .../components/data-filter/_input-base.scss | 8 ++-- .../components/data-filter/_input-button.scss | 10 ++-- .../styles/components/data-filter/_label.scss | 12 ++--- .../components/data-filter/_popout.scss | 44 ++++++++++++----- .../data-filter/_select-dropdown.scss | 16 +++---- .../data-filter/_select-options.scss | 12 ++--- app/src/styles/components/modals/_header.scss | 4 +- .../modals/_important-messages.scss | 3 +- .../styles/components/modals/_modal-base.scss | 11 +++-- .../components/modals/_modal-components.scss | 16 +++---- .../components/video/_video-controls.scss | 6 +-- .../components/video/_video-editor.scss | 2 +- .../components/video/_video-event-area.scss | 2 +- .../components/video/popover/_animation.scss | 2 +- .../components/video/popover/_base.scss | 4 +- .../extensions/components/_drag-and-drop.scss | 19 ++++---- .../styles/extensions/components/_tables.scss | 6 +-- app/src/styles/main.scss | 15 ++++-- app/src/styles/mixins/_button.scss | 48 +++++++++---------- app/src/styles/mixins/_mixins-config.scss | 15 +++--- app/src/styles/views/_core.scss | 6 +-- app/src/styles/views/_login.scss | 5 +- app/src/styles/views/_statistics.scss | 2 +- 42 files changed, 232 insertions(+), 191 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index 0b3b80146a..9eef3fe360 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -16,8 +16,8 @@ "@testing-library/react": "^12.1.5", "array-move": "^4.0.0", "axios": "^1.4.0", - "bourbon": "^4.3.4", - "bourbon-neat": "1.7.1", + "bourbon": "^7.3.0", + "bourbon-neat": "4.0.0", "classnames": "^2.3.2", "date-fns": "^2.30.0", "font-awesome": "^4.7.0", @@ -6406,14 +6406,14 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "node_modules/bourbon": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-4.3.4.tgz", - "integrity": "sha512-XY2nuWcgS5ODGVFHgE/SsjFb18ke1dPtxu32vDm2tue8v4RflmU0mp0jpdIvvyjEtYEv6oiSpQL2PRUsEqde4w==" + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-7.3.0.tgz", + "integrity": "sha512-u9ZUqmaX7K7nkarKODlFT4/XYfWafLRoadlv2Lye8hytrIA4Urg/50rav1eFdbdbO6o9GnK9a6qf7zwq808atA==" }, "node_modules/bourbon-neat": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/bourbon-neat/-/bourbon-neat-1.7.1.tgz", - "integrity": "sha512-xl/TUDeqt8RDvq6A1r2AKnDVgc0dFgL4dbQ8mUZZPYoBodJu0/XlWqqjYPrPQh4WeXWpO9c/ki5TF565NlMD4A==" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/bourbon-neat/-/bourbon-neat-4.0.0.tgz", + "integrity": "sha512-Ql1JdvjNvK9NbGvcBpsDkfuRRMK8fZ/mx1gRyZEy3PM/kqQ8QX0PcmKEqnZMl18YLfKaDwC0qa+e36TlDmT49g==" }, "node_modules/brace-expansion": { "version": "1.1.11", @@ -25069,14 +25069,14 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "bourbon": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-4.3.4.tgz", - "integrity": "sha512-XY2nuWcgS5ODGVFHgE/SsjFb18ke1dPtxu32vDm2tue8v4RflmU0mp0jpdIvvyjEtYEv6oiSpQL2PRUsEqde4w==" + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-7.3.0.tgz", + "integrity": "sha512-u9ZUqmaX7K7nkarKODlFT4/XYfWafLRoadlv2Lye8hytrIA4Urg/50rav1eFdbdbO6o9GnK9a6qf7zwq808atA==" }, "bourbon-neat": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/bourbon-neat/-/bourbon-neat-1.7.1.tgz", - "integrity": "sha512-xl/TUDeqt8RDvq6A1r2AKnDVgc0dFgL4dbQ8mUZZPYoBodJu0/XlWqqjYPrPQh4WeXWpO9c/ki5TF565NlMD4A==" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/bourbon-neat/-/bourbon-neat-4.0.0.tgz", + "integrity": "sha512-Ql1JdvjNvK9NbGvcBpsDkfuRRMK8fZ/mx1gRyZEy3PM/kqQ8QX0PcmKEqnZMl18YLfKaDwC0qa+e36TlDmT49g==" }, "brace-expansion": { "version": "1.1.11", diff --git a/app/package.json b/app/package.json index 9a43c3e777..3b8f0446bb 100644 --- a/app/package.json +++ b/app/package.json @@ -12,8 +12,8 @@ "@testing-library/react": "^12.1.5", "array-move": "^4.0.0", "axios": "^1.4.0", - "bourbon": "^4.3.4", - "bourbon-neat": "1.7.1", + "bourbon": "^7.3.0", + "bourbon-neat": "4.0.0", "classnames": "^2.3.2", "date-fns": "^2.30.0", "font-awesome": "^4.7.0", diff --git a/app/src/styles/components/_alerts.scss b/app/src/styles/components/_alerts.scss index cf813e480c..db9a2739b0 100644 --- a/app/src/styles/components/_alerts.scss +++ b/app/src/styles/components/_alerts.scss @@ -146,7 +146,7 @@ right: 10px; font-size: 20px; margin-top: 9px; - @include transition($alert-transition); + transition: $alert-transition; text-decoration: none; color: inherit; } diff --git a/app/src/styles/components/_cal.scss b/app/src/styles/components/_cal.scss index 4264cccd0b..853d4906da 100644 --- a/app/src/styles/components/_cal.scss +++ b/app/src/styles/components/_cal.scss @@ -60,7 +60,7 @@ text-align: center; margin: -1px -1px 0px -1px; border: $thin-border-stroke darken($l-blue, 10%); - @include linear-gradient(top, #388ed6, #2b77b9); + background: linear-gradient(to bottom, #388ed6, #2b77b9); a { display: block; diff --git a/app/src/styles/components/_dropdowns.scss b/app/src/styles/components/_dropdowns.scss index 979b71438a..368bc97017 100644 --- a/app/src/styles/components/_dropdowns.scss +++ b/app/src/styles/components/_dropdowns.scss @@ -32,10 +32,10 @@ cursor: pointer; position: relative; vertical-align: middle; - @include user-select(none); + user-select: none; // Pulled from Button Mixin (keep in sync with those styles) - @include linear-gradient(#fff, #f7f7f7); + background: linear-gradient(#fff, #f7f7f7); border: $thin-border-stroke $main-border-color; box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05); outline: none; @@ -44,7 +44,7 @@ &:hover { border: $thin-border-stroke darken($main-border-color, 2%); - @include linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%)); + background: linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%)); color: $medium-prim-color; } @@ -86,7 +86,7 @@ > ul { position: absolute; - @include transition(all 200ms); + transition: all 200ms; background: $off-white; list-style: none; @include border-bottom-radius($main-border-radius); @@ -103,7 +103,7 @@ text-shadow: 0 1px 0 $white; display: block; position: relative; - @include transition(all 200ms); + transition: all 200ms; button { display: block; @@ -154,7 +154,7 @@ cursor: pointer; position: relative; vertical-align: middle; - @include user-select(none); + user-select: none; background-repeat: repeat-x; &:focus { @@ -169,7 +169,7 @@ > ul { position: absolute; - @include transition(all 200ms); + transition: all 200ms; background: $off-white; list-style: none; @include border-bottom-radius($main-border-radius); @@ -188,7 +188,7 @@ cursor: default; display: block; position: relative; - @include transition(all 200ms); + transition: all 200ms; span { padding: 3px 15px 3px 45px; @@ -245,7 +245,7 @@ @include border-bottom-radius(0); &:after { - @include transform(rotate(180deg)); + transform: rotate(180deg); } > ul { diff --git a/app/src/styles/components/_footer.scss b/app/src/styles/components/_footer.scss index ff012b60bf..49a0a24998 100644 --- a/app/src/styles/components/_footer.scss +++ b/app/src/styles/components/_footer.scss @@ -58,7 +58,7 @@ $footer-background-color: darken($body-background, 5%); right: 0; a { - @include transition(all .2s); + transition: all .2s; @include footer-component-padding(); border-left: 1px solid $footer-border-color; text-align: center; diff --git a/app/src/styles/components/_header.scss b/app/src/styles/components/_header.scss index c0cca3a167..508325578c 100644 --- a/app/src/styles/components/_header.scss +++ b/app/src/styles/components/_header.scss @@ -30,7 +30,7 @@ box-shadow: 0 1px 3px 1px rgba($black, 0.3); position: relative; border-bottom: 1px solid #1d3041; - @include linear-gradient(top, #388ed6, #2075b1); + background: linear-gradient(to bottom, #388ed6, #2075b1); .header-branding { float: left; @@ -413,11 +413,11 @@ text-shadow: 0 1px 0 rgba($black, 0.2); border: 1px solid $l-blue; - @include linear-gradient(top, lighten($mid-blue, 20%), lighten($mid-blue, 10%)); + background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%)); box-shadow: inset 0 1px 0 0 rgba($white, 0.2), 0 2px 3px 1px rgba($black, 0.05); &:hover { - @include linear-gradient(top, lighten($mid-blue, 20%), lighten($mid-blue, 10%)); + background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%)); } &:active { diff --git a/app/src/styles/components/_inputs.scss b/app/src/styles/components/_inputs.scss index 5b1b71c897..9e83ccae0d 100644 --- a/app/src/styles/components/_inputs.scss +++ b/app/src/styles/components/_inputs.scss @@ -49,7 +49,7 @@ textarea { font-weight: 600; color: $medium-prim-color; - @include placeholder { + &::placeholder { color: $light-prim-color; } @@ -71,21 +71,24 @@ textarea { // ---------------------------------------- &#email { - @include retina-image("#{$img-path}user-input-icon", 23px 20px); + background-image: url("#{$img-path}user-input-icon.png"); + background-size: 23px 20px; background-repeat: no-repeat; background-position: 14px center; } &#password { - @include retina-image("#{$img-path}key-icon", 16px 20px); + background-image: url("#{$img-path}key-icon.png"); + background-size: 16px 20px; background-repeat: no-repeat; background-position: 19px center; } &.search, &#search { - @include appearance(none); - @include retina-image("#{$img-path}search", 13px 13px); + appearance: none; + background-image: url("#{$img-path}search.png"); + background-size: 13px 13px; background-repeat: no-repeat; background-position: 14px center; vertical-align: top; @@ -93,7 +96,7 @@ textarea { height: 40px; &.expand { - @include transition(width 0.2s ease-in); + transition: width 0.2s ease-in; &:focus { width: 200px; @@ -142,7 +145,7 @@ input[type="radio"].ios { cursor: pointer; height: 28px; position: relative; - @include transition(border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration); + transition: border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration; width: 44px; vertical-align: top; @@ -158,20 +161,20 @@ input[type="radio"].ios { position: absolute; right: 16px; top: 0; - @include transition(border 250ms 150ms, left 250ms 100ms, right 150ms 175ms); + transition: border 250ms 150ms, left 250ms 100ms, right 150ms 175ms; } &:checked { border-color: $green; box-shadow: inset 0 0 0 13px $green; padding-left: 18px; - @include transition(border 250ms, box-shadow 250ms, padding 250ms 150ms); + transition: border 250ms, box-shadow 250ms, padding 250ms 150ms; &:after { border-color: $green; left: 16px; right: 0; - @include transition(border 250ms, left 150ms 250ms, right 250ms 175ms); + transition: border 250ms, left 150ms 250ms, right 250ms 175ms; } } } diff --git a/app/src/styles/components/_menu-dropdown.scss b/app/src/styles/components/_menu-dropdown.scss index f8fc8aeba8..1cb7c18b79 100644 --- a/app/src/styles/components/_menu-dropdown.scss +++ b/app/src/styles/components/_menu-dropdown.scss @@ -54,9 +54,9 @@ overflow: visible; display: block; padding: $link-padding; - @include transition-property($link-transition-property); - @include transition-duration(250ms); - @include transition-timing-function(ease-in); + transition-property: $link-transition-property; + transition-duration: 250ms; + transition-timing-function: ease-in; text-overflow: ellipsis; white-space: nowrap; font-weight: $weight-semibold; diff --git a/app/src/styles/components/_menu.scss b/app/src/styles/components/_menu.scss index abdab5cf0a..5fc011c653 100644 --- a/app/src/styles/components/_menu.scss +++ b/app/src/styles/components/_menu.scss @@ -62,7 +62,7 @@ vertical-align: middle; position: relative; line-height: 50px; - @include transition(all .2s); + transition: all .2s; color: #c6c6c6; } diff --git a/app/src/styles/components/_progress-bar.scss b/app/src/styles/components/_progress-bar.scss index 66bee87a20..63b17cfe89 100644 --- a/app/src/styles/components/_progress-bar.scss +++ b/app/src/styles/components/_progress-bar.scss @@ -44,9 +44,9 @@ text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); text-align: center; background-color: $progress-bar-color; - @include linear-gradient(top, #388ed6, #2b77b9); + background: linear-gradient(to bottom, #388ed6, #2b77b9); border-right: 1px solid darken(#388ed6, 15%); - @include transition(width 600ms ease); + transition: width 600ms ease; &[aria-valuenow="1"], &[aria-valuenow="2"] { diff --git a/app/src/styles/components/_statistics-graph.scss b/app/src/styles/components/_statistics-graph.scss index bc3da6791b..4e29018b1d 100644 --- a/app/src/styles/components/_statistics-graph.scss +++ b/app/src/styles/components/_statistics-graph.scss @@ -49,7 +49,7 @@ > input[type="radio"]:checked + label { cursor: pointer; border: $thin-border-stroke darken($main-border-color, 2%); - @include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); + background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); color: $medium-prim-color; box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1); } diff --git a/app/src/styles/components/_steps.scss b/app/src/styles/components/_steps.scss index 6c0ba34fb0..f4d34402b3 100644 --- a/app/src/styles/components/_steps.scss +++ b/app/src/styles/components/_steps.scss @@ -45,7 +45,7 @@ width: 100%; height: 1px; background: $main-border-color; - @include linear-gradient( + background: linear-gradient( left, rgba($modal-nav-border-color, 0) 5%, rgba($modal-nav-border-color, 1) 25%, @@ -59,7 +59,7 @@ margin: 0 10px; position: relative; line-height: $height + 30; - @include user-select(none); + user-select: none; // Dot &:after { @@ -76,12 +76,12 @@ // First line &:first-child:before { - @include linear-gradient(left, $modal-nav-bg-color, $modal-nav-border-color); + background: linear-gradient(to right, $modal-nav-bg-color, $modal-nav-border-color); } // Last line &:last-child:before { - @include linear-gradient(left, $modal-nav-border-color, $modal-nav-bg-color); + background: linear-gradient(to right, $modal-nav-border-color, $modal-nav-bg-color); } // Active step diff --git a/app/src/styles/components/_tables.scss b/app/src/styles/components/_tables.scss index 8ea3ee7b3d..ea866eef41 100644 --- a/app/src/styles/components/_tables.scss +++ b/app/src/styles/components/_tables.scss @@ -54,7 +54,7 @@ &.sortable { cursor: pointer; &:hover { - @include linear-gradient(top, $off-white, darken(#f1f3f5, 3%)); + background: linear-gradient(to bottom, $off-white, darken(#f1f3f5, 3%)); } &:active { box-shadow: inset 0 3px 10px 2px rgba($black, 0.05); @@ -82,8 +82,8 @@ border-right: 1px solid #c9d0d6; border-left: 1px solid #fff; border-bottom: 1px solid $border-color; - @include user-select(none); - @include linear-gradient(top, darken($off-white, 1%), darken(#f1f3f5, 3%)); + user-select: none; + background: linear-gradient(to bottom, darken($off-white, 1%), darken(#f1f3f5, 3%)); // Typography line-height: 35px; @@ -415,7 +415,7 @@ opacity: 0; visibility: hidden; float: right; - @include transition(all .2s); + transition: all .2s; } &.js-active:after { @@ -456,7 +456,7 @@ padding-left: 3px; &.open { - @include transform(rotate(90deg)); + transform: rotate(90deg); } } } diff --git a/app/src/styles/components/_toggle-buttons.scss b/app/src/styles/components/_toggle-buttons.scss index c605545fda..70f83a37f7 100644 --- a/app/src/styles/components/_toggle-buttons.scss +++ b/app/src/styles/components/_toggle-buttons.scss @@ -44,7 +44,7 @@ text-shadow: 0px 1px 0px rgba(0,0,0,0.2); border: 1px solid $l-blue; border-right: 1px solid darken($l-blue, 10%); - @include linear-gradient(top, lighten(#2b77b9, 5%), #388ed6); + background: linear-gradient(to bottom, lighten(#2b77b9, 5%), #388ed6); box-shadow: 0px 2px 3px 1px rgba(0,0,0,.05); } } diff --git a/app/src/styles/components/data-filter/_add-button.scss b/app/src/styles/components/data-filter/_add-button.scss index 3cbb0e47c1..4734f8eec2 100644 --- a/app/src/styles/components/data-filter/_add-button.scss +++ b/app/src/styles/components/data-filter/_add-button.scss @@ -24,9 +24,9 @@ @include btn(white); @include fa-icon($fa-var-plus, before, inline-block, 0 8px 0 0, 0, inherit, 11px); - @include transition-property(width, padding, border-radius); - @include transition-duration(200ms); - @include transition-timing-function(ease-in); + transition-property: width, padding, border-radius; + transition-duration: 200ms; + transition-timing-function: ease-in; float: left; padding: 12px 10px; @@ -42,7 +42,7 @@ // Transition Properties for @include fa-icon(...); mixin &:before { - @include transition(color 200ms ease-in); + transition: color 200ms ease-in; } .js-df-state-new-filter & { diff --git a/app/src/styles/components/data-filter/_base.scss b/app/src/styles/components/data-filter/_base.scss index 1c5c4f1e11..318a96f295 100644 --- a/app/src/styles/components/data-filter/_base.scss +++ b/app/src/styles/components/data-filter/_base.scss @@ -24,7 +24,7 @@ box-sizing: border-box; display: inline-block; vertical-align: top; - @include user-select(none); + user-select: none; } $df-height: 42px; diff --git a/app/src/styles/components/data-filter/_clear-filters.scss b/app/src/styles/components/data-filter/_clear-filters.scss index 04896cbc64..e5800ede07 100644 --- a/app/src/styles/components/data-filter/_clear-filters.scss +++ b/app/src/styles/components/data-filter/_clear-filters.scss @@ -29,7 +29,7 @@ position: absolute; top: 0; right: 0; - @include background-image(linear-gradient(right, #F7F7F7 50%, rgba(#F7F7F7, 0))); + background-image: linear-gradient(to left, #F7F7F7 50%, rgba(#F7F7F7, 0)); .df-clear-button { display: block; @@ -42,13 +42,13 @@ font-family: "Open Sans", sans-serif; color: #555; - @include transition-property(visibility, opacity); - @include transition-duration(300ms); - @include transition-timing-function(ease-in-out); - @include transition-delay(160ms); + transition-property: visibility, opacity; + transition-duration: 300ms; + transition-timing-function: ease-in-out; + transition-delay: 160ms; &:before { - @include transition(color 250ms ease-in-out); + transition: color 250ms ease-in-out; } &:hover { diff --git a/app/src/styles/components/data-filter/_filter-profiles.scss b/app/src/styles/components/data-filter/_filter-profiles.scss index 15eabf1115..aa15707285 100644 --- a/app/src/styles/components/data-filter/_filter-profiles.scss +++ b/app/src/styles/components/data-filter/_filter-profiles.scss @@ -40,7 +40,7 @@ // Common Elements header { - @include linear-gradient(#fff, #f7f7f7); + background: linear-gradient(#fff, #f7f7f7); border-top-left-radius: $main-border-radius; border-top-right-radius: $main-border-radius; border-bottom: 1px solid $main-border-color; @@ -57,7 +57,7 @@ } } // header .footer-btn { - @include linear-gradient(#fafafa, #f0f2f5); + background: linear-gradient(#fafafa, #f0f2f5); border-top: 1px solid darken(#f0f2f5, 10%); border-bottom-left-radius: $main-border-radius; border-bottom-right-radius: $main-border-radius; @@ -90,13 +90,13 @@ font-family: "Open Sans", sans-serif; color: #555; - @include transition-property(visibility, opacity); - @include transition-duration(300ms); - @include transition-timing-function(ease-in-out); - @include transition-delay(160ms); + transition-property: visibility, opacity; + transition-duration: 300ms; + transition-timing-function: ease-in-out; + transition-delay: 160ms; &:before { - @include transition(color 250ms ease-in-out); + transition: color 250ms ease-in-out; } &:hover { diff --git a/app/src/styles/components/data-filter/_input-base.scss b/app/src/styles/components/data-filter/_input-base.scss index 8926b668df..50b8bc96d0 100644 --- a/app/src/styles/components/data-filter/_input-base.scss +++ b/app/src/styles/components/data-filter/_input-base.scss @@ -24,10 +24,10 @@ position: relative; box-sizing: border-box; - @include transition-property(width, padding, visibility, opacity); - @include transition-duration(300ms); - @include transition-timing-function(ease-in-out); - @include transition-delay(80ms); + transition-property: width, padding, visibility, opacity; + transition-duration: 300ms; + transition-timing-function: ease-in-out; + transition-delay: 80ms; float: left; width: 0px; diff --git a/app/src/styles/components/data-filter/_input-button.scss b/app/src/styles/components/data-filter/_input-button.scss index 8d29e817e3..6d93c30a87 100644 --- a/app/src/styles/components/data-filter/_input-button.scss +++ b/app/src/styles/components/data-filter/_input-button.scss @@ -23,15 +23,15 @@ .df-popout-button { box-sizing: border-box; @include btn(white); - @include user-select(none); + user-select: none; $icon-pseudo-position: before; @include fa-icon($fa-var-ellipsis-v, $icon-pseudo-position, inline-block, 0 8px 0 0, 0, inherit, 14px); - @include transition-property(padding, visibility, opacity); - @include transition-duration(300ms); - @include transition-timing-function(ease-in-out); - @include transition-delay(80ms); + transition-property: padding, visibility, opacity; + transition-duration: 300ms; + transition-timing-function: ease-in-out; + transition-delay: 80ms; float: left; width: 15px; diff --git a/app/src/styles/components/data-filter/_label.scss b/app/src/styles/components/data-filter/_label.scss index bc47cedd20..52c0fb4770 100644 --- a/app/src/styles/components/data-filter/_label.scss +++ b/app/src/styles/components/data-filter/_label.scss @@ -31,12 +31,12 @@ // Hide Behind Parent position: relative; z-index: -1; - @include transform(translateY(15px)); + transform: translateY(15px); - @include transition-property(visibility, opacity, transform); - @include transition-duration(300ms); - @include transition-timing-function(ease-in-out); - @include transition-delay(80ms); + transition-property: visibility, opacity, transform; + transition-duration: 300ms; + transition-timing-function: ease-in-out; + transition-delay: 80ms; .js-df-state-new-filter & { visibility: visible; @@ -44,6 +44,6 @@ // Reveal from origin z-index: 1; - @include transform(translateY(0px)); + transform: translateY(0px); } } \ No newline at end of file diff --git a/app/src/styles/components/data-filter/_popout.scss b/app/src/styles/components/data-filter/_popout.scss index 6889172e0d..0e14acfd94 100644 --- a/app/src/styles/components/data-filter/_popout.scss +++ b/app/src/styles/components/data-filter/_popout.scss @@ -54,7 +54,7 @@ } .df-popout-header { - @include linear-gradient($white, #f7f7f7); + background: linear-gradient($white, #f7f7f7); border-top-left-radius: $main-border-radius; border-top-right-radius: $main-border-radius; border-bottom: $thin-border-stroke $main-border-color; @@ -65,30 +65,47 @@ } .df-table { - @include outer-container(100%); + // @include outer-container(100%); + @include grid-container; + margin-left: auto; + margin-right: auto; + max-width: 100%; + padding: 5px 10px; max-height: 150px; overflow: auto; // Row .row { - @include fill-parent(); - @include row(table); + // @include fill-parent(); + width: 100%; + box-sizing: border-box; + // @include row(table); + *zoom: 1; + display: block; + } + .row:before, .element:after { + content: " "; + display: table; + } + .row:after { + clear: both; } // Columns .df-saved-name { - @include span-columns(9); - @include pad(5px 0); + @include grid-column(9); + padding: 5px 0; font-size: 12px; font-weight: $weight-semibold; } .df-saved-actions { - @include span-columns(3); - @include reset-display; - @include pad(5px 0); + @include grid-column(3); + // @include reset-display; + display: block; + padding: 5px 0; } } @@ -135,7 +152,12 @@ $df-saved-actions-font-size: 11px; // Filter Set Form .df-save-set-container { - @include outer-container(100%); + // @include outer-container(100%); + @include grid-container; + margin-left: auto; + margin-right: auto; + max-width: 100%; + padding: 10px; .row { @@ -168,7 +190,7 @@ $df-saved-actions-font-size: 11px; } %df-save-set-button { - @include span-columns(6); + @include grid-column(6); text-shadow: none; text-align: center; } diff --git a/app/src/styles/components/data-filter/_select-dropdown.scss b/app/src/styles/components/data-filter/_select-dropdown.scss index 5e6b1d7f9c..1184e2fd04 100644 --- a/app/src/styles/components/data-filter/_select-dropdown.scss +++ b/app/src/styles/components/data-filter/_select-dropdown.scss @@ -42,7 +42,7 @@ $df-select-dropdown-horizontal-padding: 6px; .df-select-dropdown { box-sizing: border-box; @include btn(white); - @include appearance(none); + appearance: none; display: inline-block; float: left; width: auto; @@ -63,7 +63,7 @@ $df-select-dropdown-horizontal-padding: 6px; &:not(.df-paired-dropdown) { @extend .animated !optional; @extend .flipInX !optional; - @include animation-delay(400ms); + animation-delay: 400ms; } &.df-paired-dropdown { @@ -99,7 +99,7 @@ $df-select-dropdown-horizontal-padding: 6px; text-align: left; &:hover { - @include background(linear-gradient(#fff, #f7f7f7)); + background: linear-gradient(#fff, #f7f7f7); border: $thin-border-stroke $main-border-color; color: $medium-prim-color; } @@ -145,13 +145,13 @@ $df-select-dropdown-horizontal-padding: 6px; @include fa-icon-color(before, $light-prim-color); } - @include transition-property(visibility, opacity); - @include transition-duration(300ms); - @include transition-timing-function(ease-in-out); - @include transition-delay(160ms); + transition-property: visibility, opacity; + transition-duration: 300ms; + transition-timing-function: ease-in-out; + transition-delay: 160ms; &:before { - @include transition(color 250ms ease-in-out); + transition: color 250ms ease-in-out; } &:hover:not(.disabled) { diff --git a/app/src/styles/components/data-filter/_select-options.scss b/app/src/styles/components/data-filter/_select-options.scss index 624d056d8e..33b5ea1bdc 100644 --- a/app/src/styles/components/data-filter/_select-options.scss +++ b/app/src/styles/components/data-filter/_select-options.scss @@ -42,9 +42,9 @@ background: rgba($white, 0.98); box-shadow: 0 1px 3px rgba($black, 0.06); - @include transition-property(visibility, opacity); - @include transition-duration(100ms); - @include transition-timing-function(ease-in); + transition-property: visibility, opacity; + transition-duration: 100ms; + transition-timing-function: ease-in; a { display: block; @@ -56,9 +56,9 @@ text-shadow: none; cursor: pointer; - @include transition-property(color, background); - @include transition-duration(50ms); - @include transition-timing-function(ease-in); + transition-property: color, background; + transition-duration: 50ms; + transition-timing-function: ease-in; // ---------------------------------------- diff --git a/app/src/styles/components/modals/_header.scss b/app/src/styles/components/modals/_header.scss index db7af7d1fd..72bb60acf8 100644 --- a/app/src/styles/components/modals/_header.scss +++ b/app/src/styles/components/modals/_header.scss @@ -27,7 +27,7 @@ width: 100%; height: 40px; line-height: 40px; - @include linear-gradient(top, #fbfbfb, #e8e8e8); + background: linear-gradient(to bottom, #fbfbfb, #e8e8e8); border-bottom: 1px solid $main-border-color; @include border-top-radius($main-border-radius); padding: 0 20px; @@ -63,7 +63,7 @@ border-radius: $main-border-radius !important; &:after { - @include transform(rotate(180deg)); + transform: rotate(180deg); } } diff --git a/app/src/styles/components/modals/_important-messages.scss b/app/src/styles/components/modals/_important-messages.scss index 509c7bd83a..af8025c064 100644 --- a/app/src/styles/components/modals/_important-messages.scss +++ b/app/src/styles/components/modals/_important-messages.scss @@ -78,7 +78,8 @@ z-index: $max-z; width: $w; height: $h; - @include retina-image("#{$img-path}#{$image-name}", $w $h); + background-image: url("#{$img-path}#{$image-name}.png"); + background-size: $w $h; } } } diff --git a/app/src/styles/components/modals/_modal-base.scss b/app/src/styles/components/modals/_modal-base.scss index 395c6b136f..94815dec1d 100644 --- a/app/src/styles/components/modals/_modal-base.scss +++ b/app/src/styles/components/modals/_modal-base.scss @@ -53,7 +53,7 @@ visibility: hidden; opacity: 0; display: none; - @include transition(all .2s); + transition: all .2s; z-index: ($max-z + 2); width: $modal-width; height: auto; @@ -81,7 +81,7 @@ font-size: 50px; color: rgba($white, 0.7); text-shadow: 0 0 10px rgba($black, 0.4); - @include transition(all 0.2s); + transition: all 0.2s; &.fa-chevron-left { left: $spacing; @@ -106,7 +106,7 @@ // Hide overlay visibility: hidden; opacity: 0; - @include transition(all .15s); + transition: all .15s; &.active { opacity: 1; @@ -118,7 +118,8 @@ width: 100%; height: 100%; z-index: $max-z + 1; - @include radial-gradient(rgba($black, 0.2), rgba($black, 0.4)); + background-color: rgba($black, 0.2); + background-image: radial-gradient(rgba($black, 0.2), rgba($black, 0.4)); } @@ -175,7 +176,7 @@ header { $height: 35px; @include accordion-header($height); - @include user-select(none); + user-select: none; position: static; &.expand { diff --git a/app/src/styles/components/modals/_modal-components.scss b/app/src/styles/components/modals/_modal-components.scss index d34689c42a..f50c7ebf0f 100644 --- a/app/src/styles/components/modals/_modal-components.scss +++ b/app/src/styles/components/modals/_modal-components.scss @@ -359,7 +359,7 @@ .remove-file-button { // Reset - @include appearance(none); + appearance: none; background: none; outline: none; border: none; @@ -394,7 +394,7 @@ } .progress-bar { - @include linear-gradient(top, lighten($bright-blue, 5%), $bright-blue); + background: linear-gradient(to bottom, lighten($bright-blue, 5%), $bright-blue); } button { @@ -513,9 +513,9 @@ z-index: $z-60; width: 500px; height: 100%; - @include calc(max-width, "100% - 10px"); - @include calc(max-height, "100% - 12px"); - @include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); + max-width: calc(100% - 10px); + max-height: calc(100% - 12px); + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); overflow: hidden; } @@ -528,7 +528,7 @@ .watermark-preview, .watermark-config { - @include span-columns(6); + @include grid-column(6); } .watermark-preview { @@ -628,7 +628,7 @@ line-height: 22px; font-weight: $weight-semibold; text-align: center; - @include calc(max-height, "100% - 0px"); + max-height: calc(100% - 0px); &.left-aligned { text-align: left; @@ -685,7 +685,7 @@ // for legal or other small print &.paragraph-meta { - @include linear-gradient(top, rgba($black, 0.8), rgba($black, 0.2)); + background: linear-gradient(to bottom, rgba($black, 0.8), rgba($black, 0.2)); height: 100%; font-size: 12px; line-height: 18px; diff --git a/app/src/styles/components/video/_video-controls.scss b/app/src/styles/components/video/_video-controls.scss index 521eff14f4..6b4781efb5 100644 --- a/app/src/styles/components/video/_video-controls.scss +++ b/app/src/styles/components/video/_video-controls.scss @@ -23,7 +23,7 @@ .video-controls { @include clearfix(); box-sizing: border-box; - @include linear-gradient(top, #fff, #f7f7f7); + background: linear-gradient(to bottom, #fff, #f7f7f7); border: $thin-border-stroke $main-border-color; height: 50px; padding: 0 15px; @@ -80,7 +80,7 @@ } input { - @include appearance(none); + appearance: none; border-radius: 4px; height: 2px; } @@ -222,7 +222,7 @@ $playback-icon-font-size: 16px; input[type="number"] { box-sizing: border-box; - @include appearance(none); + appearance: none; @include font-smoothing(on); background: none; border: 0; diff --git a/app/src/styles/components/video/_video-editor.scss b/app/src/styles/components/video/_video-editor.scss index 41664d7c5f..7722e4cbba 100644 --- a/app/src/styles/components/video/_video-editor.scss +++ b/app/src/styles/components/video/_video-editor.scss @@ -484,7 +484,7 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); position: absolute; display: none; - @include transition(all 800ms); + transition: all 800ms; } .arrow_box:after, .arrow_box:before { diff --git a/app/src/styles/components/video/_video-event-area.scss b/app/src/styles/components/video/_video-event-area.scss index 06d51b04e0..f5ea128ca4 100644 --- a/app/src/styles/components/video/_video-event-area.scss +++ b/app/src/styles/components/video/_video-event-area.scss @@ -215,7 +215,7 @@ header { $height: 35px; @include accordion-header($height); - @include user-select(none); + user-select: none; position: static; &.expand { diff --git a/app/src/styles/components/video/popover/_animation.scss b/app/src/styles/components/video/popover/_animation.scss index 3fb5821942..5e33ea2c6b 100644 --- a/app/src/styles/components/video/popover/_animation.scss +++ b/app/src/styles/components/video/popover/_animation.scss @@ -52,6 +52,6 @@ .shortcuts-popover { visibility: visible; opacity: 1; - @include transition-delay(0ms); + transition-delay: 0ms; } } diff --git a/app/src/styles/components/video/popover/_base.scss b/app/src/styles/components/video/popover/_base.scss index 1dd4f0c373..ed38817c67 100644 --- a/app/src/styles/components/video/popover/_base.scss +++ b/app/src/styles/components/video/popover/_base.scss @@ -46,7 +46,7 @@ content: ""; display: block; margin: 0; - @include transition(margin 350ms ease-in-out); + transition: margin 350ms ease-in-out; } .keyboard-shortcuts.active .shortcuts-popover::after { @@ -74,7 +74,7 @@ $parent-border-stroke: 1px; .popover-header { @extend .popover-container; - @include linear-gradient(top, #fff, #f7f7f7); + background: linear-gradient(to bottom, #fff, #f7f7f7); border: $thin-border-stroke $main-border-color; @include border-top-radius($main-border-radius); box-shadow: inset 0 1px 0px 0px #fff, 0 0 2px rgba(0,0,0,.05); diff --git a/app/src/styles/extensions/components/_drag-and-drop.scss b/app/src/styles/extensions/components/_drag-and-drop.scss index 34e4615ac5..712a4ee2cf 100644 --- a/app/src/styles/extensions/components/_drag-and-drop.scss +++ b/app/src/styles/extensions/components/_drag-and-drop.scss @@ -25,13 +25,13 @@ padding: 15px 10px; .drag-item { - @include user-select(none); + user-select: none; height: 35px; width: 100%; border-radius: $main-border-radius; cursor: move; border: $thin-border-stroke $main-border-color; - @include linear-gradient(top, #fff, #f3f5f6); + background: linear-gradient(to bottom, #fff, #f3f5f6); color: darken(#8c939b, 10%); font-weight: 600; text-shadow: 0px 1px 0px #fff; @@ -39,7 +39,7 @@ position: relative; margin: 10px 0; box-shadow: 0 0 0 rgba(0,0,0,0); - @include transition(box-shadow .3s ease-in-out); + transition: box-shadow .3s ease-in-out; .title { padding: 10px; @@ -47,12 +47,12 @@ } &:hover { - @include linear-gradient(top, #fff, darken(#f3f5f6, 2%)); + background: linear-gradient(to bottom, #fff, darken(#f3f5f6, 2%)); } &:active, &.being-dragged { - @include linear-gradient(top, darken(#fff, 2%), darken(#f3f5f6, 3%)); + background: linear-gradient(to bottom, darken(#fff, 2%), darken(#f3f5f6, 3%)); cursor: move; border: $thin-border-stroke darken($main-border-color, 5%); box-shadow: 0 0 4px rgba(0,0,0,0.1); @@ -75,7 +75,8 @@ position: absolute; top: 12px; left: 10px; - @include retina-image("#{$img-path}grip", 13px 14px); + background-image: url("#{$img-path}grip.png"); + background-size: 13px 14px; } // Item Move Buttons @@ -88,11 +89,13 @@ right: 10px; &.add { - @include retina-image("#{$img-path}plus-icon", 17px 17px); + background-image: url("#{$img-path}plus-icon.png"); + background-size: 17px 17px; } &.remove { - @include retina-image("#{$img-path}remove-icon", 17px 17px); + background-image: url("#{$img-path}remove-icon.png"); + background-size: 17px 17px; } } } diff --git a/app/src/styles/extensions/components/_tables.scss b/app/src/styles/extensions/components/_tables.scss index 7e860f51c1..302f4c622e 100644 --- a/app/src/styles/extensions/components/_tables.scss +++ b/app/src/styles/extensions/components/_tables.scss @@ -42,7 +42,7 @@ border-bottom: none; border-top-left-radius: $main-border-radius; border-top-right-radius: $main-border-radius; - @include linear-gradient(top, #fff, #f7f7f7); + background: linear-gradient(to bottom, #fff, #f7f7f7); $action-icon-margin: 0 4px 0 0; @@ -92,7 +92,7 @@ vertical-align: middle; position: relative; cursor: pointer; - @include user-select(none); + user-select: none; width: 25px; height: 22px; @include btn(white); @@ -123,7 +123,7 @@ background: $body-background; border: $thin-border-stroke $main-border-color; border-radius: $main-border-radius; - @include transition(visibility 200ms, opacity 200ms); + transition: visibility 200ms, opacity 200ms; &:before, &:after { diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 623ed274c3..589b754c97 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -26,8 +26,8 @@ $disable-warnings: true !default; // disables deprecation warnings // Imports -@import "../../node_modules/bourbon/app/assets/stylesheets/bourbon"; -@import "../../node_modules/bourbon-neat/app/assets/stylesheets/neat"; +@import "../../node_modules/bourbon/core/bourbon"; +@import "../../node_modules/bourbon-neat/core/neat"; // Foundation // ---------------------------------------- @@ -99,6 +99,15 @@ $disable-warnings: true !default; // disables deprecation warnings } } +// We rely on border-box to center elements and cut down padding +// This had to be added during the bourbon upgrade from 4 to 7 +html { + box-sizing: border-box; +} +*, *::before, *::after { + box-sizing: inherit; +} + // All anchors should behave clickable (even without href attributes) a { cursor: pointer; @@ -536,7 +545,7 @@ table.main-tbl { font-size: 18px; opacity: 0; visibility: hidden; - @include transition(all .2s); + transition: all .2s; &.active { opacity: 1; diff --git a/app/src/styles/mixins/_button.scss b/app/src/styles/mixins/_button.scss index cac652bc2d..7f00338107 100644 --- a/app/src/styles/mixins/_button.scss +++ b/app/src/styles/mixins/_button.scss @@ -31,18 +31,18 @@ @if $color == green-dark-bg { box-shadow: inset 0px 1px 0px 0px $primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); - @include linear-gradient($primary-color-green, $primary-color-green-dark-1); + background: linear-gradient($primary-color-green, $primary-color-green-dark-1); border: $thin-border-stroke $dark-bg-border-color; &:hover { cursor: pointer; - @include linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%)); + background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%)); } &:focus { cursor: pointer; - @include linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%)); + background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%)); } &:active { @@ -55,18 +55,18 @@ @else if $color == blue-dark-bg { box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); - @include linear-gradient(#3a5e7e, #2c9966); + background: linear-gradient(#3a5e7e, #2c9966); border: $thin-border-stroke $dark-bg-border-color; &:hover { cursor: pointer; - @include linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%)); + background: linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%)); } &:focus { cursor: pointer; - @include linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%)); + background: linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%)); } &:active { @@ -78,18 +78,18 @@ @else if $color == green { box-shadow: inset 0px 1px 0px 0px $primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); - @include linear-gradient($primary-color-green, $primary-color-green-dark-1); + background: linear-gradient($primary-color-green, $primary-color-green-dark-1); border: $thin-border-stroke $primary-color-green-dark-3; &:hover { cursor: pointer; - @include linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%)); + background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%)); } &:focus { cursor: pointer; - @include linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%)); + background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%)); } &:active { @@ -102,18 +102,18 @@ @else if $color == blue { box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); - @include linear-gradient(#3a5e7e, #2c9966); + background: linear-gradient(#3a5e7e, #2c9966); border: $thin-border-stroke $dark-bg-border-color; &:hover { cursor: pointer; - @include linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%)); + background: linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%)); } &:focus { cursor: pointer; - @include linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%)); + background: linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%)); } &:active { @@ -126,18 +126,18 @@ box-shadow: inset 0px 1px 0px 0px lighten(#388ed6, 10%), 0px 2px 3px 1px rgba(0,0,0,.05); - @include linear-gradient(#388ed6, #2b77b9); + background: linear-gradient(#388ed6, #2b77b9); border: $thin-border-stroke darken(#2b77b9, 5%); &:hover { cursor: pointer; - @include linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%)); + background: linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%)); } &:focus { cursor: pointer; - @include linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%)); + background: linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%)); } &:active { @@ -150,18 +150,18 @@ box-shadow: inset 0px 1px 0px 0px lighten(#55cef2, 10%), 0px 2px 3px 1px rgba(0,0,0,.05); - @include linear-gradient(#55cef2, #4da1f7); + background: linear-gradient(#55cef2, #4da1f7); border: $thin-border-stroke darken(#4da1f7, 10%); &:hover { cursor: pointer; - @include linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%)); + background: linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%)); } &:focus { cursor: pointer; - @include linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%)); + background: linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%)); } &:active { @@ -173,20 +173,20 @@ @else if $color == red { box-shadow: inset 0px 1px 0px 0px lighten($alt-red, 10%), 0px 2px 3px 1px rgba(0,0,0,.05); - @include linear-gradient(lighten($alt-red, 5%), darken($alt-red, 5%)); + background: linear-gradient(lighten($alt-red, 5%), darken($alt-red, 5%)); border: $thin-border-stroke darken($alt-red, 20%); &:hover { cursor: pointer; border: $thin-border-stroke darken($alt-red, 30%); - @include linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%)); + background: linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%)); } &:focus { cursor: pointer; border: $thin-border-stroke darken($alt-red, 30%); - @include linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%)); + background: linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%)); } &:active { @@ -197,7 +197,7 @@ @else if $color == white { - @include linear-gradient(#fff, #f7f7f7); + background: linear-gradient(#fff, #f7f7f7); border: $thin-border-stroke $main-border-color; box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05); outline: none; @@ -207,14 +207,14 @@ &:hover { cursor: pointer; border: $thin-border-stroke darken($main-border-color, 2%); - @include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); + background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); color: $medium-prim-color; } &:focus { cursor: pointer; border: $thin-border-stroke darken($main-border-color, 2%); - @include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); + background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); color: $medium-prim-color; } diff --git a/app/src/styles/mixins/_mixins-config.scss b/app/src/styles/mixins/_mixins-config.scss index d6f703fac8..c1490874d1 100644 --- a/app/src/styles/mixins/_mixins-config.scss +++ b/app/src/styles/mixins/_mixins-config.scss @@ -45,7 +45,8 @@ left: $left; width: $width; height: $height; - @include retina-image("#{$img-path}#{$image}", $width $height); + background-image: url("#{$img-path}#{$image}.png"); + background-size: $width $height; } @@ -63,7 +64,7 @@ box-sizing: border-box; height: $height; line-height: $height; - @include linear-gradient(top, #fff, #f3f5f6); + background: linear-gradient(to bottom, #fff, #f3f5f6); border-bottom: 1px solid $main-border-color; @include border-top-radius($main-border-radius); margin: 0; @@ -80,11 +81,11 @@ @include fa-icon($fa-var-chevron-down, after, inline-block, 10px 0); &:hover { - @include linear-gradient(top, #fff, darken(#f3f5f6, 2%)); + background: linear-gradient(to bottom, #fff, darken(#f3f5f6, 2%)); } &:active { - @include linear-gradient(top, darken(#fff, 2%), darken(#f3f5f6, 3%)); + background: linear-gradient(to bottom, darken(#fff, 2%), darken(#f3f5f6, 3%)); } &:after { @@ -102,14 +103,14 @@ z-index: $max-z - 9; visibility: hidden; opacity: 0; - @include transition(all 200ms); + transition: all 200ms; background: $white; border: $thin-border-stroke $main-border-color; border-radius: $main-border-radius; width: $width; header { - @include linear-gradient($white, #f7f7f7); + background: linear-gradient($white, #f7f7f7); @include border-top-radius($main-border-radius); border-bottom: $thin-border-stroke $main-border-color; height: 30px; @@ -121,7 +122,7 @@ } .footer-btn { - @include linear-gradient($off-white, #f0f2f5); + background: linear-gradient($off-white, #f0f2f5); border-top: $thin-border-stroke darken(#f0f2f5, 10%); @include border-bottom-radius($main-border-radius); display: block; diff --git a/app/src/styles/views/_core.scss b/app/src/styles/views/_core.scss index e4df3a2436..a02594dc0d 100644 --- a/app/src/styles/views/_core.scss +++ b/app/src/styles/views/_core.scss @@ -152,10 +152,10 @@ body { color: #717171; text-shadow: 0 1px 0 rgba($white, 1); border: $thin-border-stroke $main-border-color; - @include linear-gradient(top, #f8f8f8, #e9e9e9); + background: linear-gradient(to bottom, #f8f8f8, #e9e9e9); // Pulled from Button Mixin (keep in sync with those styles) - @include linear-gradient(#fff, #f7f7f7); + background: linear-gradient(#fff, #f7f7f7); border: $thin-border-stroke $main-border-color; box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05); outline: none; @@ -164,7 +164,7 @@ body { &:hover:not(.active) { border: $thin-border-stroke darken($main-border-color, 2%); - @include linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%)); + background: linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%)); color: $medium-prim-color; } diff --git a/app/src/styles/views/_login.scss b/app/src/styles/views/_login.scss index af4946d113..fd71cab489 100644 --- a/app/src/styles/views/_login.scss +++ b/app/src/styles/views/_login.scss @@ -31,7 +31,8 @@ position: relative; height: inherit; color: $global-text-color; - @include radial-gradient($off-white, #d8dfe4); + background-color: $off-white; + background-image: radial-gradient($off-white, #d8dfe4); } .login-container { @@ -131,7 +132,7 @@ text-align: center; border-radius: 4px; border: none; - @include transition(all .2s); + transition: all .2s; &:hover { background: lighten($l-blue, 5%); diff --git a/app/src/styles/views/_statistics.scss b/app/src/styles/views/_statistics.scss index 4c172b7daf..fdd773ac1b 100644 --- a/app/src/styles/views/_statistics.scss +++ b/app/src/styles/views/_statistics.scss @@ -3,7 +3,7 @@ width: 100%; height: 40px; line-height: 40px; - @include linear-gradient(top, #fbfbfb, #e8e8e8); + background: linear-gradient(to bottom, #fbfbfb, #e8e8e8); border-bottom: 1px solid $main-border-color; @include border-top-radius($main-border-radius); padding: 0 20px;