From c08aa6ade542ddb3ceee29d8bedffa572fcfd5b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 12 Mar 2021 17:52:09 +0100 Subject: [PATCH] Split SCSS mixins in several files One file was OK when we only had a couple of mixins, but recently we've been adding quite a few. We can now avoid a SCSS Lint warning by excluding just the file with the affected mixin. --- .scss-lint.yml | 1 + app/assets/stylesheets/application.scss | 2 +- app/assets/stylesheets/mixins.scss | 322 ------------------ app/assets/stylesheets/mixins/buttons.scss | 19 ++ app/assets/stylesheets/mixins/headings.scss | 7 + app/assets/stylesheets/mixins/icons.scss | 47 +++ app/assets/stylesheets/mixins/layouts.scss | 23 ++ .../stylesheets/mixins/orbit_bullets.scss | 24 ++ app/assets/stylesheets/mixins/sdg.scss | 58 ++++ app/assets/stylesheets/mixins/tags.scss | 31 ++ app/assets/stylesheets/mixins/tooltips.scss | 13 + app/assets/stylesheets/mixins/uploads.scss | 73 ++++ 12 files changed, 297 insertions(+), 323 deletions(-) delete mode 100644 app/assets/stylesheets/mixins.scss create mode 100644 app/assets/stylesheets/mixins/buttons.scss create mode 100644 app/assets/stylesheets/mixins/headings.scss create mode 100644 app/assets/stylesheets/mixins/icons.scss create mode 100644 app/assets/stylesheets/mixins/layouts.scss create mode 100644 app/assets/stylesheets/mixins/orbit_bullets.scss create mode 100644 app/assets/stylesheets/mixins/sdg.scss create mode 100644 app/assets/stylesheets/mixins/tags.scss create mode 100644 app/assets/stylesheets/mixins/tooltips.scss create mode 100644 app/assets/stylesheets/mixins/uploads.scss diff --git a/.scss-lint.yml b/.scss-lint.yml index d2d024576..47c4296d7 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -98,6 +98,7 @@ linters: PlaceholderInExtend: enabled: true + exclude: "app/assets/stylesheets/mixins/icons.scss" PrivateNamingConvention: enabled: true diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index e71bfaf26..93d6472cd 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -4,7 +4,7 @@ @import "font-awesome-sprockets"; @import "font-awesome"; @import "icons"; -@import "mixins"; +@import "mixins/*"; @import "admin"; @import "advanced_search"; @import "layout"; diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss deleted file mode 100644 index d5dd96113..000000000 --- a/app/assets/stylesheets/mixins.scss +++ /dev/null @@ -1,322 +0,0 @@ -// Table of Contents -// -// 01. Logo -// 02. Orbit bullets -// 03. Direct uploads -// 04. Admin layout -// ------------------ - -// 01. Logo -// -------- - -@mixin logo { - color: #fff; - display: inline-block; - font-family: "Lato" !important; - font-size: rem-calc(24); - font-weight: lighter; - - @include breakpoint(medium) { - line-height: $line-height * 2; - margin-top: 0; - } -} - -// 02. Orbit bullets -// ----------------- - -@mixin orbit-bullets { - @include disable-mouse-outline; - position: relative; - margin-top: $orbit-bullet-margin-top; - margin-bottom: $orbit-bullet-margin-bottom; - text-align: center; - - button { - width: $orbit-bullet-diameter; - height: $orbit-bullet-diameter; - margin: $orbit-bullet-margin; - - border-radius: 50%; - background-color: $orbit-bullet-background; - - &:hover { - background-color: $orbit-bullet-background-active; - } - - &.is-active { - background-color: $orbit-bullet-background-active; - } - } -} - -// 03. Direct uploads -// ------------------ - -@mixin direct-uploads { - - .cached-image { - max-width: rem-calc(150); - max-height: rem-calc(150); - } - - .progress-bar-placeholder { - display: none; - margin-bottom: $line-height; - } - - .document, - .image { - - .document-attachment, - .image-attachment { - padding-left: 0; - - p { - margin-bottom: 0; - } - } - - .attachment-errors { - - > .js-image-attachment, - > .js-document-attachment { - display: none; - - ~ .error { - display: inline-block; - } - } - } - } - - .button { - font-weight: normal; - } - - .progress-bar { - width: 100%; - background-color: $light-gray; - } - - .file-name { - margin-top: 0; - } - - .loading-bar { - height: 5px; - width: 0; - transition: width 500ms ease-out; - - &.uploading { - background-color: $dark-gray; - } - - &.complete { - background-color: $success-color; - } - - &.errors { - background-color: $alert-color; - margin-top: $line-height / 2; - } - } - - .loading-bar.no-transition { - transition: none; - } -} - -// 04. Admin layout -// ---------------- - -@mixin admin-layout { - - > header { - margin-bottom: 0; - } - - > .menu-and-content { - flex: 1; - } -} - -%font-icon { - @extend %fa-icon; - font-family: "Font Awesome 5 Free"; - margin-right: rem-calc(4); - vertical-align: middle; -} - -%svg-icon { - background: currentcolor; - content: ""; - height: 1em; - mask-repeat: no-repeat; - mask-size: 100% 100%; - width: 1em; -} - -%admin-menu-icon { - font-size: rem-calc(20); - margin-left: rem-calc(8); - margin-right: rem-calc(10); -} - -@mixin has-fa-icon($icon, $style, $position: "before") { - - &::#{$position} { - @extend %font-icon; - @extend .fa-#{$icon}:before; - - @if $style == "solid" { - font-weight: bold; - } @else { - font-weight: normal; - } - - @if $style == "brands" { - font-family: "Font Awesome 5 Brands"; - } - } - - @supports (mask-image: url()) { - - &::#{$position} { - @extend %svg-icon; - mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg"); - } - } -} - -@mixin bottom-tooltip { - @include tooltip; - line-height: $global-lineheight; - margin-top: $line-height / 8; - width: max-content; - - &::before { - @include css-triangle($tooltip-pip-width, $tooltip-background-color, up); - bottom: 100%; - left: 50%; - transform: translateX(-50%); - } -} - -%button { - font-size: $base-font-size; - - &:focus, - &:hover { - text-decoration: none !important; - } -} - -@mixin regular-button($color: $brand) { - @include button($background: $color); - @extend %button; -} - -@mixin hollow-button($color: $link) { - @include button($style: hollow, $background: $color); - @extend %button; - margin-bottom: 0; -} - -@mixin header-font-size($heading-tag) { - @each $size, $headers in $header-styles { - @include breakpoint($size) { - font-size: rem-calc(map-get(map-get($headers, $heading-tag), font-size)); - } - } -} - -@mixin sdg-goal-list($spacing: 1ch) { - $min-spacing: $sdg-icon-min-width / 10; - $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"}; - - display: flex; - flex-wrap: wrap; - list-style: none; - margin: -$spacing 0 $line-height / 3 -#{$spacing}; - margin-left: calc(-1 * #{$max-spacing}); - margin-top: calc(-1 * #{$max-spacing}); - width: calc(100% + #{$spacing}); - width: calc(100% + #{$max-spacing}); - - > *, - > .tabs-title { - margin-bottom: 0; - margin-left: $spacing; - margin-left: $max-spacing; - margin-right: 0; - margin-top: $spacing; - margin-top: $max-spacing; - } - - a:hover .sdg-goal-icon { - filter: brightness(90%); - } -} - -%sdg-goal-list { - @include sdg-goal-list; -} - -%sdg-goal-list-expanded { - $spacing: 0.5%; - @include sdg-goal-list($spacing); - - label, - li { - min-width: $sdg-icon-min-width; - width: calc(100% / 17 - #{$spacing}); - - &:hover { - cursor: pointer; - } - - .sdg-goal-icon { - width: 100%; - } - - a:focus { - outline: none; - - img { - outline: $outline-focus; - } - } - } -} - -%tags { - margin-bottom: 0; - margin-left: 0; - - li { - display: inline-block; - margin-bottom: 0; - } - - a, - span { - @extend %tag; - } -} - -%tag { - background: #ececec; - border-radius: rem-calc(6); - color: $text; - display: inline-block; - font-size: $small-font-size; - margin-bottom: $line-height / 3; - padding: $line-height / 4 $line-height / 3; - text-decoration: none; - - &:hover { - background: #e0e0e0; - text-decoration: none; - } -} diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss new file mode 100644 index 000000000..3d6cc984c --- /dev/null +++ b/app/assets/stylesheets/mixins/buttons.scss @@ -0,0 +1,19 @@ +%button { + font-size: $base-font-size; + + &:focus, + &:hover { + text-decoration: none !important; + } +} + +@mixin regular-button($color: $brand) { + @include button($background: $color); + @extend %button; +} + +@mixin hollow-button($color: $link) { + @include button($style: hollow, $background: $color); + @extend %button; + margin-bottom: 0; +} diff --git a/app/assets/stylesheets/mixins/headings.scss b/app/assets/stylesheets/mixins/headings.scss new file mode 100644 index 000000000..01366569a --- /dev/null +++ b/app/assets/stylesheets/mixins/headings.scss @@ -0,0 +1,7 @@ +@mixin header-font-size($heading-tag) { + @each $size, $headers in $header-styles { + @include breakpoint($size) { + font-size: rem-calc(map-get(map-get($headers, $heading-tag), font-size)); + } + } +} diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss new file mode 100644 index 000000000..aced0dc28 --- /dev/null +++ b/app/assets/stylesheets/mixins/icons.scss @@ -0,0 +1,47 @@ +%font-icon { + @extend %fa-icon; + font-family: "Font Awesome 5 Free"; + margin-right: rem-calc(4); + vertical-align: middle; +} + +%svg-icon { + background: currentcolor; + content: ""; + height: 1em; + mask-repeat: no-repeat; + mask-size: 100% 100%; + width: 1em; +} + +%admin-menu-icon { + font-size: rem-calc(20); + margin-left: rem-calc(8); + margin-right: rem-calc(10); +} + +@mixin has-fa-icon($icon, $style, $position: "before") { + + &::#{$position} { + @extend %font-icon; + @extend .fa-#{$icon}:before; + + @if $style == "solid" { + font-weight: bold; + } @else { + font-weight: normal; + } + + @if $style == "brands" { + font-family: "Font Awesome 5 Brands"; + } + } + + @supports (mask-image: url()) { + + &::#{$position} { + @extend %svg-icon; + mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg"); + } + } +} diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss new file mode 100644 index 000000000..ee5422be9 --- /dev/null +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -0,0 +1,23 @@ +@mixin admin-layout { + + > header { + margin-bottom: 0; + } + + > .menu-and-content { + flex: 1; + } +} + +@mixin logo { + color: #fff; + display: inline-block; + font-family: "Lato" !important; + font-size: rem-calc(24); + font-weight: lighter; + + @include breakpoint(medium) { + line-height: $line-height * 2; + margin-top: 0; + } +} diff --git a/app/assets/stylesheets/mixins/orbit_bullets.scss b/app/assets/stylesheets/mixins/orbit_bullets.scss new file mode 100644 index 000000000..0fd68f1d1 --- /dev/null +++ b/app/assets/stylesheets/mixins/orbit_bullets.scss @@ -0,0 +1,24 @@ +@mixin orbit-bullets { + @include disable-mouse-outline; + position: relative; + margin-top: $orbit-bullet-margin-top; + margin-bottom: $orbit-bullet-margin-bottom; + text-align: center; + + button { + width: $orbit-bullet-diameter; + height: $orbit-bullet-diameter; + margin: $orbit-bullet-margin; + + border-radius: 50%; + background-color: $orbit-bullet-background; + + &:hover { + background-color: $orbit-bullet-background-active; + } + + &.is-active { + background-color: $orbit-bullet-background-active; + } + } +} diff --git a/app/assets/stylesheets/mixins/sdg.scss b/app/assets/stylesheets/mixins/sdg.scss new file mode 100644 index 000000000..ecb5de882 --- /dev/null +++ b/app/assets/stylesheets/mixins/sdg.scss @@ -0,0 +1,58 @@ +@mixin sdg-goal-list($spacing: 1ch) { + $min-spacing: $sdg-icon-min-width / 10; + $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"}; + + display: flex; + flex-wrap: wrap; + list-style: none; + margin: -$spacing 0 $line-height / 3 -#{$spacing}; + margin-left: calc(-1 * #{$max-spacing}); + margin-top: calc(-1 * #{$max-spacing}); + width: calc(100% + #{$spacing}); + width: calc(100% + #{$max-spacing}); + + > *, + > .tabs-title { + margin-bottom: 0; + margin-left: $spacing; + margin-left: $max-spacing; + margin-right: 0; + margin-top: $spacing; + margin-top: $max-spacing; + } + + a:hover .sdg-goal-icon { + filter: brightness(90%); + } +} + +%sdg-goal-list { + @include sdg-goal-list; +} + +%sdg-goal-list-expanded { + $spacing: 0.5%; + @include sdg-goal-list($spacing); + + label, + li { + min-width: $sdg-icon-min-width; + width: calc(100% / 17 - #{$spacing}); + + &:hover { + cursor: pointer; + } + + .sdg-goal-icon { + width: 100%; + } + + a:focus { + outline: none; + + img { + outline: $outline-focus; + } + } + } +} diff --git a/app/assets/stylesheets/mixins/tags.scss b/app/assets/stylesheets/mixins/tags.scss new file mode 100644 index 000000000..285eaf55d --- /dev/null +++ b/app/assets/stylesheets/mixins/tags.scss @@ -0,0 +1,31 @@ +%tags { + margin-bottom: 0; + margin-left: 0; + + li { + display: inline-block; + margin-bottom: 0; + } + + a, + span { + @extend %tag; + } +} + +%tag { + background: #ececec; + border-radius: rem-calc(6); + color: $text; + display: inline-block; + font-size: $small-font-size; + margin-bottom: $line-height / 3; + padding: $line-height / 4 $line-height / 3; + text-decoration: none; + + &:hover { + background: #e0e0e0; + text-decoration: none; + } +} + diff --git a/app/assets/stylesheets/mixins/tooltips.scss b/app/assets/stylesheets/mixins/tooltips.scss new file mode 100644 index 000000000..50cf9674a --- /dev/null +++ b/app/assets/stylesheets/mixins/tooltips.scss @@ -0,0 +1,13 @@ +@mixin bottom-tooltip { + @include tooltip; + line-height: $global-lineheight; + margin-top: $line-height / 8; + width: max-content; + + &::before { + @include css-triangle($tooltip-pip-width, $tooltip-background-color, up); + bottom: 100%; + left: 50%; + transform: translateX(-50%); + } +} diff --git a/app/assets/stylesheets/mixins/uploads.scss b/app/assets/stylesheets/mixins/uploads.scss new file mode 100644 index 000000000..7b3a211d4 --- /dev/null +++ b/app/assets/stylesheets/mixins/uploads.scss @@ -0,0 +1,73 @@ +@mixin direct-uploads { + + .cached-image { + max-width: rem-calc(150); + max-height: rem-calc(150); + } + + .progress-bar-placeholder { + display: none; + margin-bottom: $line-height; + } + + .document, + .image { + + .document-attachment, + .image-attachment { + padding-left: 0; + + p { + margin-bottom: 0; + } + } + + .attachment-errors { + + > .js-image-attachment, + > .js-document-attachment { + display: none; + + ~ .error { + display: inline-block; + } + } + } + } + + .button { + font-weight: normal; + } + + .progress-bar { + width: 100%; + background-color: $light-gray; + } + + .file-name { + margin-top: 0; + } + + .loading-bar { + height: 5px; + width: 0; + transition: width 500ms ease-out; + + &.uploading { + background-color: $dark-gray; + } + + &.complete { + background-color: $success-color; + } + + &.errors { + background-color: $alert-color; + margin-top: $line-height / 2; + } + } + + .loading-bar.no-transition { + transition: none; + } +}