From 500ea2ad9fea04be266e66e3fa90756f95f8da86 Mon Sep 17 00:00:00 2001 From: Josh Beveridge Date: Thu, 9 Apr 2020 14:34:58 -0400 Subject: [PATCH 1/2] Updates and tests for component based file structure --- app/components/accordions/accordions.js | 81 ++ app/components/accordions/accordions.scss | 0 app/components/accordions/accordions.twig | 0 app/core/clone.js | 13 + app/js/clone.js | 110 +- app/scss/clone-gridless.scss | 119 +- app/scss/clone.scss | 125 +- app/scss/components/_accordion.scss | 72 +- app/scss/components/_alert.scss | 22 +- app/scss/components/_back-to-top-link.scss | 10 +- app/scss/components/_blockquote.scss | 10 +- app/scss/components/_breadcrumbs.scss | 67 +- app/scss/components/_button.scss | 169 +-- app/scss/components/_carousel.scss | 46 +- app/scss/components/_code.scss | 15 +- app/scss/components/_dialog.scss | 67 +- app/scss/components/_iframe.scss | 10 +- app/scss/components/_menus.scss | 19 +- app/scss/components/_pullquote.scss | 10 +- .../components/_skip-to-content-link.scss | 24 +- app/scss/components/_table.scss | 7 +- app/scss/components/_tag.scss | 42 +- app/scss/core/_defaults.scss | 16 +- app/scss/core/_maps.scss | 139 ++ app/scss/core/_utilities.scss | 1186 ----------------- app/scss/properties/_alignment.scss | 23 + app/scss/properties/_background-colors.scss | 33 + app/scss/properties/_borders.scss | 165 +++ app/scss/properties/_cards.scss | 4 + app/scss/properties/_containers.scss | 88 ++ app/scss/properties/_display.scss | 35 + app/scss/properties/_horizontal-rules.scss | 41 + app/scss/properties/_margins.scss | 337 +++++ app/scss/properties/_overlays.scss | 57 + app/scss/properties/_padding.scss | 285 ++++ app/scss/properties/_radius.scss | 25 + app/scss/properties/_typography.scss | 162 +++ app/scss/properties/_visibility.scss | 33 + app/scss/variables.txt | 10 +- app/twig/components/accordion.twig | 16 +- app/twig/components/alert.twig | 10 +- app/twig/components/back-to-top-link.twig | 2 +- app/twig/components/blockquote.twig | 6 +- app/twig/components/breadcrumb.twig | 36 +- app/twig/components/card.twig | 4 +- app/twig/components/carousel.twig | 6 +- app/twig/components/dialog.twig | 22 +- app/twig/components/overlay.twig | 2 +- app/twig/components/pullquote.twig | 6 +- app/twig/components/skip-to-content-link.twig | 2 +- app/twig/components/tag.twig | 2 +- app/twig/index.twig | 15 +- app/twig/tests/accordion.twig | 47 +- app/twig/tests/alert.twig | 30 +- dist/css/clone-gridless.min.css | 2 +- dist/css/clone.min.css | 2 +- dist/css/gzip/clone-gridless.min.css.gz | Bin 32302 -> 76883 bytes dist/css/gzip/clone.min.css.gz | Bin 40458 -> 85353 bytes dist/index.html | 2 +- gulpfile.js | 16 +- 60 files changed, 2018 insertions(+), 1887 deletions(-) create mode 100644 app/components/accordions/accordions.js create mode 100644 app/components/accordions/accordions.scss create mode 100644 app/components/accordions/accordions.twig create mode 100644 app/core/clone.js create mode 100644 app/scss/core/_maps.scss delete mode 100644 app/scss/core/_utilities.scss create mode 100644 app/scss/properties/_alignment.scss create mode 100644 app/scss/properties/_background-colors.scss create mode 100644 app/scss/properties/_borders.scss create mode 100644 app/scss/properties/_cards.scss create mode 100644 app/scss/properties/_containers.scss create mode 100644 app/scss/properties/_display.scss create mode 100644 app/scss/properties/_horizontal-rules.scss create mode 100644 app/scss/properties/_margins.scss create mode 100644 app/scss/properties/_overlays.scss create mode 100644 app/scss/properties/_padding.scss create mode 100644 app/scss/properties/_radius.scss create mode 100644 app/scss/properties/_typography.scss create mode 100644 app/scss/properties/_visibility.scss diff --git a/app/components/accordions/accordions.js b/app/components/accordions/accordions.js new file mode 100644 index 0000000..3bbd5f0 --- /dev/null +++ b/app/components/accordions/accordions.js @@ -0,0 +1,81 @@ +// Clone / Components / Accordions / JavaScript + +import {focusable} from '../../core/clone.js'; + +// Old +function cloneAccordionTriggerOld(trigger) { + let object = "[data-c-accordion='trigger']"; + let content = "[data-c-accordion='content']"; + if ($(trigger).parent(object).hasClass("active")) { + $(trigger).attr("aria-expanded", "false"); + $(trigger).parent(object).removeClass("active"); + $(trigger).parent(object).find(content).attr("aria-hidden", "true"); + } + else { + $(trigger).attr("aria-expanded", "true"); + $(trigger).parent(object).addClass("active"); + $(trigger).parent(object).find(content).attr("aria-hidden", "false"); + let siblingContent = $(trigger).siblings(content); + let focusableItems = focusable(siblingContent); + let firstFocusableItem = $(focusableItems).first(); + if (focusableItems.length != 0) { + firstFocusableItem[0].focus(); + } + } +} + +export function accordionTriggerOld(trigger) { + cloneAccordionTriggerOld(trigger); +}; + +// New (Empty Attribute) +function cloneAccordionTrigger(trigger) { + let accordion = "[data-c-accordion='']"; + let content = "[data-c-accordion-content]"; + if ($(trigger).parent(accordion).hasClass("active")) { + $(trigger).attr("aria-expanded", "false"); + $(trigger).parent(accordion).removeClass("active"); + $(trigger).parent(accordion).find(content).attr("aria-hidden", "true"); + } + else { + $(trigger).attr("aria-expanded", "true"); + $(trigger).parent(accordion).addClass("active"); + $(trigger).parent(accordion).find(content).attr("aria-hidden", "false"); + let siblingContent = $(trigger).siblings(content); + let focusableItems = focusable(siblingContent); + let firstFocusableItem = $(focusableItems).first(); + if (focusableItems.length != 0) { + firstFocusableItem[0].focus(); + } + } +} + +export function accordionTrigger(trigger) { + cloneAccordionTrigger(trigger); +}; + +// New (React Fix) +function cloneAccordionTriggerReact(trigger) { + let accordion = "[data-c-accordion='true']"; + let content = "[data-c-accordion-content]"; + if ($(trigger).parent(accordion).hasClass("active")) { + $(trigger).attr("aria-expanded", "false"); + $(trigger).parent(accordion).removeClass("active"); + $(trigger).parent(accordion).find(content).attr("aria-hidden", "true"); + } + else { + $(trigger).attr("aria-expanded", "true"); + $(trigger).parent(accordion).addClass("active"); + $(trigger).parent(accordion).find(content).attr("aria-hidden", "false"); + let siblingContent = $(trigger).siblings(content); + let focusableItems = focusable(siblingContent); + let firstFocusableItem = $(focusableItems).first(); + if (focusableItems.length != 0) { + firstFocusableItem[0].focus(); + } + } +} + +export function accordionTriggerReact(trigger) { + cloneAccordionTriggerReact(trigger); +}; \ No newline at end of file diff --git a/app/components/accordions/accordions.scss b/app/components/accordions/accordions.scss new file mode 100644 index 0000000..e69de29 diff --git a/app/components/accordions/accordions.twig b/app/components/accordions/accordions.twig new file mode 100644 index 0000000..e69de29 diff --git a/app/core/clone.js b/app/core/clone.js new file mode 100644 index 0000000..8941035 --- /dev/null +++ b/app/core/clone.js @@ -0,0 +1,13 @@ +// Clone / Core / JavaScript + +// Find Focusable Items +function cloneFocusable(focusElement) { + console.log("focusElement", focusElement); + console.log("focusElementCode", focusElement.find('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')); + return (focusElement.find('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')); +} + +export function focusable(focusElement) { + // console.log(focusElement); + return cloneFocusable(focusElement); +}; \ No newline at end of file diff --git a/app/js/clone.js b/app/js/clone.js index 4d67487..cadeb0b 100644 --- a/app/js/clone.js +++ b/app/js/clone.js @@ -75,89 +75,6 @@ $(document).ready(function () { }); }); - // Accordion Handlers ====================================================== - - // Old - function accordionTriggerOld(trigger) { - var object = clone("accordion", "accordion"); - var content = clone("accordion", "content"); - if ($(trigger).parent(object).hasClass("active")) { - $(trigger).attr("aria-expanded", "false"); - $(trigger).parent(object).removeClass("active"); - $(trigger).parent(object).find(content).attr("aria-hidden", "true"); - } - else { - $(trigger).attr("aria-expanded", "true"); - $(trigger).parent(object).addClass("active"); - $(trigger).parent(object).find(content).attr("aria-hidden", "false"); - var siblingContent = $(trigger).siblings(content); - var focusableItems = focusable(siblingContent); - var firstFocusableItem = $(focusableItems).first(); - if (focusableItems.length != 0) { - firstFocusableItem[0].focus(); - } - } - } - - $(document).on("click", clone("accordion", "trigger"), function (e) { - e.preventDefault(); - accordionTriggerOld(this); - }); - - // New (Empty Attribute) - function accordionTrigger(trigger) { - var accordion = "[data-c-accordion='']"; - var content = "[data-c-accordion-content]"; - if ($(trigger).parent(accordion).hasClass("active")) { - $(trigger).attr("aria-expanded", "false"); - $(trigger).parent(accordion).removeClass("active"); - $(trigger).parent(accordion).find(content).attr("aria-hidden", "true"); - } - else { - $(trigger).attr("aria-expanded", "true"); - $(trigger).parent(accordion).addClass("active"); - $(trigger).parent(accordion).find(content).attr("aria-hidden", "false"); - var siblingContent = $(trigger).siblings(content); - var focusableItems = focusable(siblingContent); - var firstFocusableItem = $(focusableItems).first(); - if (focusableItems.length != 0) { - firstFocusableItem[0].focus(); - } - } - } - - $(document).on("click", "[data-c-accordion-trigger]", function (e) { - e.preventDefault(); - accordionTrigger(this); - }); - - // New (React Fix) - function accordionTriggerReact(trigger) { - var accordion = "[data-c-accordion='true']"; - var content = "[data-c-accordion-content]"; - if ($(trigger).parent(accordion).hasClass("active")) { - $(trigger).attr("aria-expanded", "false"); - $(trigger).parent(accordion).removeClass("active"); - $(trigger).parent(accordion).find(content).attr("aria-hidden", "true"); - } - else { - $(trigger).attr("aria-expanded", "true"); - $(trigger).parent(accordion).addClass("active"); - $(trigger).parent(accordion).find(content).attr("aria-hidden", "false"); - var siblingContent = $(trigger).siblings(content); - var focusableItems = focusable(siblingContent); - var firstFocusableItem = $(focusableItems).first(); - if (focusableItems.length != 0) { - firstFocusableItem[0].focus(); - } - } - } - - $(document).on("click", "[data-c-accordion-trigger]", function (e) { - e.preventDefault(); - accordionTriggerReact(this); - }); - // Alert Handlers ========================================================== // Old @@ -504,4 +421,29 @@ $(document).ready(function () { menuItemClick(this); }); -}); \ No newline at end of file +}); + +// Accordions +import {accordionTriggerOld, accordionTrigger, accordionTriggerReact} from './components/accordions/accordions.js'; + + // Old Syntax + $(document).ready(function () { + $(document).on("click", "[data-c-accordion='trigger']", function (e) { + e.preventDefault(); + accordionTriggerOld(this); + }); + }); + + // New/React Syntax + $(document).ready(function () { + $(document).on("click", "[data-c-accordion-trigger]", function (e) { + e.preventDefault(); + accordionTrigger(this); + }); + }); + $(document).ready(function () { + $(document).on("click", "[data-c-accordion-trigger]", function (e) { + e.preventDefault(); + accordionTriggerReact(this); + }); + }); \ No newline at end of file diff --git a/app/scss/clone-gridless.scss b/app/scss/clone-gridless.scss index da6baaf..02b2eb1 100644 --- a/app/scss/clone-gridless.scss +++ b/app/scss/clone-gridless.scss @@ -1,16 +1,16 @@ -// ============================================================================= +// Clone - // Clone - // Core +// Variables +@import "core/defaults"; -// ============================================================================= +// Plugins + // Glider + @import "core/glider"; -// User Variables ============================================================== -@import "core/defaults"; -@import "core/glider"; +// Sass Functions @import "core/functions"; -// Navigation ================================================================== +// Menus @import "components/menus"; html, @@ -24,72 +24,43 @@ body[data-clone] { [data-clone] { - // Slick Carousel by Ken Wheeler =========================================== - // @import "../../node_modules/slick-carousel/slick/slick.scss"; - - // Core System Files ======================================================= + // Core System Files @import "core/system"; - @import "core/typography"; - @import "core/utilities"; - - // Grids =================================================================== - - // Available media queries (MQ) include: - // pp (Phone: Portrait) - // pl (Phone: Landscape) - // tp (Tablet: Portrait) - // tl (Tablet: Landscape) - // ds (Desktop: Small) - // dm (Desktop: Medium) - // dl (Desktop: Large) - - // Components ============================================================== - - // Accordions - @import "components/accordion"; - - // Alerts - @import "components/alert"; - - // Back-to-top Links - @import "components/back-to-top-link"; - - // Blockquote - @import "components/blockquote"; - - // Breadcrumbs - @import "components/breadcrumbs"; + @import "core/maps"; - // Buttons - @import "components/button"; - - // Cards - - // Carousels - @import "components/carousel"; - - // Code - @import "components/code"; - - // Dialogs - @import "components/dialog"; - - // Iframes - @import "components/iframe"; - - // Inputs - @import "components/inputs"; - - // Pullquotes - @import "components/pullquote"; - - // Skip-to-content - @import "components/skip-to-content-link"; - - // Tables - @import "components/table"; - - // Tags - @import "components/tag"; + // System Typography + @import "core/typography"; -} + // Properties + @import "properties/alignment"; + @import "properties/background-colors"; + @import "properties/borders"; + @import "properties/cards"; + @import "properties/containers"; + @import "properties/display"; + @import "properties/horizontal-rules"; + @import "properties/margins"; + @import "properties/padding"; + @import "properties/overlays"; + @import "properties/radius"; + @import "properties/typography"; + @import "properties/visibility"; + + // Components + @import "components/accordion"; + @import "components/alert"; + @import "components/back-to-top-link"; + @import "components/blockquote"; + @import "components/breadcrumbs"; + @import "components/button"; + @import "components/carousel"; + @import "components/code"; + @import "components/dialog"; + @import "components/iframe"; + @import "components/inputs"; + @import "components/pullquote"; + @import "components/skip-to-content-link"; + @import "components/table"; + @import "components/tag"; + +} \ No newline at end of file diff --git a/app/scss/clone.scss b/app/scss/clone.scss index e010089..ec8763d 100644 --- a/app/scss/clone.scss +++ b/app/scss/clone.scss @@ -1,16 +1,16 @@ -// ============================================================================= +// Clone - // Clone - // Core +// Variables +@import "core/defaults"; -// ============================================================================= +// Plugins + // Glider + @import "core/glider"; -// User Variables ============================================================== -@import "core/defaults"; -@import "core/glider"; +// Sass Functions @import "core/functions"; -// Navigation ================================================================== +// Menus @import "components/menus"; html, @@ -24,71 +24,54 @@ body[data-clone] { [data-clone] { - // Core System Files ======================================================= + // Core System Files @import "core/system"; - @import "core/typography"; - @import "core/utilities"; - - // Grids =================================================================== - - // Available media queries (MQ) include: - // pp (Phone: Portrait) - // pl (Phone: Landscape) - // tp (Tablet: Portrait) - // tl (Tablet: Landscape) - // ds (Desktop: Small) - // dm (Desktop: Medium) - // dl (Desktop: Large) - - @import "core/flexbox-grid"; - - // Components ============================================================== - - // Accordions - @import "components/accordion"; - - // Alerts - @import "components/alert"; - - // Back-to-top Links - @import "components/back-to-top-link"; - - // Blockquote - @import "components/blockquote"; - - // Breadcrumbs - @import "components/breadcrumbs"; + @import "core/maps"; - // Buttons - @import "components/button"; - - // Cards - - // Carousels - @import "components/carousel"; - - // Code - @import "components/code"; - - // Dialogs - @import "components/dialog"; - - // Iframes - @import "components/iframe"; - - // Inputs - @import "components/inputs"; - - // Pullquotes - @import "components/pullquote"; - - // Skip-to-content - @import "components/skip-to-content-link"; - - // Tables - @import "components/table"; + // System Typography + @import "core/typography"; - // Tags - @import "components/tag"; + // Properties + @import "properties/alignment"; + @import "properties/background-colors"; + @import "properties/borders"; + @import "properties/cards"; + @import "properties/containers"; + @import "properties/display"; + @import "properties/horizontal-rules"; + @import "properties/margins"; + @import "properties/padding"; + @import "properties/overlays"; + @import "properties/radius"; + @import "properties/typography"; + @import "properties/visibility"; + + // Grid + // Available media queries (MQ) include: + // pp (Phone: Portrait) + // pl (Phone: Landscape) + // tp (Tablet: Portrait) + // tl (Tablet: Landscape) + // ds (Desktop: Small) + // dm (Desktop: Medium) + // dl (Desktop: Large) + @import "core/flexbox-grid"; + + // Components + @import "components/accordion"; + @import "components/alert"; + @import "components/back-to-top-link"; + @import "components/blockquote"; + @import "components/breadcrumbs"; + @import "components/button"; + @import "components/carousel"; + @import "components/code"; + @import "components/dialog"; + @import "components/iframe"; + @import "components/inputs"; + @import "components/pullquote"; + @import "components/skip-to-content-link"; + @import "components/table"; + @import "components/tag"; } \ No newline at end of file diff --git a/app/scss/components/_accordion.scss b/app/scss/components/_accordion.scss index 2c0c630..9502cf3 100644 --- a/app/scss/components/_accordion.scss +++ b/app/scss/components/_accordion.scss @@ -1,16 +1,9 @@ -// ============================================================================= - - // Clone - // Accordions - -// ============================================================================= - +// Clone: Accordion Component [data-c-accordion*="group"], [data-c-accordion-group] { [data-c-accordion="accordion"], [data-c-accordion=""], [data-c-accordion="true"] { - // border-bottom: 1px solid $clone-accordion-border-color; [data-c-accordion="trigger"], [data-c-accordion-trigger] { background: none; @@ -20,7 +13,7 @@ position: relative; text-align: left; width: 100%; - + // Old [data-c-accordion*="icon"] { font-size: $clone-font-scale-h4; @@ -28,20 +21,17 @@ top: 50%; right: 2rem; transform: translate(0, -50%); - &[data-c-accordion*="--add"] { display: block; } - &[data-c-accordion*="--remove"] { display: none; } } - + // New [data-c-accordion-add] { display: block; - // font-size: $clone-font-scale-h4; position: absolute; top: 50%; right: 2rem; @@ -49,13 +39,11 @@ } [data-c-accordion-remove] { display: none; - // font-size: $clone-font-scale-h4; position: absolute; top: 50%; right: 2rem; transform: translate(0, -50%); } - @each $key, $value in $clone-color-map { @each $alpha in $clone-opacity-list { $newValue: unquote($key)+"("+$alpha+")"; @@ -64,9 +52,9 @@ background: rgba($value, $decimal) } } - }; - } + } + } [data-c-accordion="content"], [data-c-accordion-content] { display: none; @@ -75,47 +63,44 @@ } } - // States ------------------------------------------------------------------ - - &:first-of-type { - // border-top: 1px solid $clone-accordion-border-color; - } + // States + &.active { + [data-c-accordion="trigger"], + [data-c-accordion-trigger] { - &.active { - [data-c-accordion="trigger"], - [data-c-accordion-trigger] { - // Old - [data-c-accordion*="icon"] { - &[data-c-accordion*="--add"] { - display: none; - } - &[data-c-accordion*="--remove"] { - display: block; - } - } - // New - [data-c-accordion-add] { + // Old + [data-c-accordion*="icon"] { + &[data-c-accordion*="--add"] { display: none; } - [data-c-accordion-remove] { + &[data-c-accordion*="--remove"] { display: block; } } - [data-c-accordion="content"], - [data-c-accordion-content] { + + // New + [data-c-accordion-add] { + display: none; + } + [data-c-accordion-remove] { display: block; } } - - [data-c-accordion="trigger"]:focus, - [data-c-accordion-trigger]:focus { - outline: $clone-focus-color solid 3px; + [data-c-accordion="content"], + [data-c-accordion-content] { + display: block; } + } + [data-c-accordion="trigger"]:focus, + [data-c-accordion-trigger]:focus { + outline: $clone-focus-color solid 3px; + } } } +// Groupt w/ Alternating Backgrounds [data-c-accordion="group(alt)"] { [data-c-accordion="accordion"] { &:nth-child(odd) { @@ -123,7 +108,6 @@ } } } - [data-c-accordion-group="alt"] { [data-c-accordion] { &:nth-child(odd) { diff --git a/app/scss/components/_alert.scss b/app/scss/components/_alert.scss index 8e584e6..4b51f62 100644 --- a/app/scss/components/_alert.scss +++ b/app/scss/components/_alert.scss @@ -1,10 +1,4 @@ -// ============================================================================= - - // Clone - // Alerts - -// ============================================================================= - +// Clone: Alert Component [data-c-alert] { align-items: flex-start; display: flex; @@ -15,13 +9,8 @@ border: none; cursor: pointer; float: right; - margin: calc((#{$clone-margin} / 2) * -1) calc((#{$clone-margin} / 2) * -1) 0 0; - @media #{$clone-tablet-portrait} { - margin: calc(((#{$clone-margin} / 2) * #{$clone-whitespace-multiplier}) * -1) calc(((#{$clone-margin} / 2) * #{$clone-whitespace-multiplier}) * -1) 0 0; - } - @media #{$clone-desktop-large} { - margin: calc((((#{$clone-margin} / 2) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}) * -1) calc((((#{$clone-margin} / 2) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}) * -1) 0 0; - } + margin-top: calc((#{$clone-margin} / 2) * -1); + margin-right: calc((#{$clone-margin} / 2) * -1); i { margin-right: .15rem; margin-left: .15rem; @@ -37,7 +26,6 @@ vertical-align: middle; } } - [data-c-alert-close-trigger] { background: none; border: none; @@ -49,7 +37,6 @@ max-width: 1.5rem; } } - [data-c-alert*="information"] { background: mix(white, $clone-alert-information, 75%); border: 1px solid darken($clone-alert-information, 25%); @@ -58,7 +45,6 @@ color: darken($clone-alert-information, 25%); } } - [data-c-alert*="warning"] { background: mix(white, $clone-alert-warning, 75%); border: 1px solid darken($clone-alert-warning, 25%); @@ -67,7 +53,6 @@ color: darken($clone-alert-warning, 25%); } } - [data-c-alert*="error"] { background: mix(white, $clone-alert-error, 75%); border: 1px solid darken($clone-alert-error, 25%); @@ -76,7 +61,6 @@ color: darken($clone-alert-error, 25%); } } - [data-c-alert*="toast"] { margin: 0 auto; max-width: 90vw; diff --git a/app/scss/components/_back-to-top-link.scss b/app/scss/components/_back-to-top-link.scss index 5f6774d..8d3d336 100644 --- a/app/scss/components/_back-to-top-link.scss +++ b/app/scss/components/_back-to-top-link.scss @@ -1,10 +1,4 @@ -// ============================================================================= - - // Clone - // Back-to-top Link - -// ============================================================================= - +// Clone: Back-to-top Link Component .clone-back-to-top-link { border-radius: 0 0 5px 5px; border-top: 1px solid white; @@ -14,11 +8,9 @@ display: inline-block; position: relative; top: -1px; - i { margin-top: -.25rem; margin-right: .5rem; vertical-align: middle; } - } diff --git a/app/scss/components/_blockquote.scss b/app/scss/components/_blockquote.scss index 3ea8cfb..3774913 100644 --- a/app/scss/components/_blockquote.scss +++ b/app/scss/components/_blockquote.scss @@ -1,17 +1,9 @@ -// ============================================================================= - - // Clone - // Blockquotes - -// ============================================================================= - +// Clone: Blockquote Component .clone-blockquote { background: rgba($clone-blockquote-color, .2); border-left: .25rem solid darken($clone-blockquote-color, 10%); - .clone-blockquote-author { color: darken($clone-blockquote-color, 10%); text-align: right; } - } diff --git a/app/scss/components/_breadcrumbs.scss b/app/scss/components/_breadcrumbs.scss index 2d69c6a..4e7ca72 100644 --- a/app/scss/components/_breadcrumbs.scss +++ b/app/scss/components/_breadcrumbs.scss @@ -1,43 +1,29 @@ -// ============================================================================= - - // Clone - // Breadcrumbs - -// ============================================================================= - +// Clone: Breadcrumb Component [data-c-breadcrumbs] { - ol, ul { margin: -.5rem; list-style: none; padding: 0; - li { display: inline-block; line-height: calc(#{$clone-line-height} * 1.5); margin: 0; - a { margin: .5rem; transition: color .2s ease; - - // States ------------------------------------------------------ - - &[aria-current="page"] { - font-weight: 700; - pointer-events: none; - text-decoration: none; - } - - &:hover, - &:focus { - color: $clone-focus-color; - transition: color .2s ease; - } - + // States + &[aria-current="page"] { + font-weight: 700; + pointer-events: none; + text-decoration: none; + } + &:hover, + &:focus { + color: $clone-focus-color; + transition: color .2s ease; + } } - p[aria-current="page"], span[aria-current="page"] { font-weight: 700; @@ -45,29 +31,20 @@ pointer-events: none; text-decoration: none; } - i { vertical-align: middle; } - - // States ---------------------------------------------------------- - - &:last-child { - - a { - font-weight: 700; - pointer-events: none; - text-decoration: none; - } - - i { - display: none; - } - + // States + &:last-child { + a { + font-weight: 700; + pointer-events: none; + text-decoration: none; } - + i { + display: none; + } + } } - } - } diff --git a/app/scss/components/_button.scss b/app/scss/components/_button.scss index 60357d0..7050a2c 100644 --- a/app/scss/components/_button.scss +++ b/app/scss/components/_button.scss @@ -1,17 +1,10 @@ -// ============================================================================= - - // Clone - // Buttons - -// ============================================================================= - +// Clone: Button Component a[data-c-button] { display: inline-block; max-width: 100%; text-decoration: underline; vertical-align: middle; } - [data-c-button]:not([data-c-button="reset"]) { cursor: pointer; font-family: $clone-font-default; @@ -19,14 +12,7 @@ a[data-c-button] { outline: none; text-align: center; transition: all .2s ease; - padding: calc(#{$clone-padding} / 2) #{$clone-padding}; - @media #{$clone-tablet-portrait} { - padding: calc((#{$clone-padding} / 2) * #{$clone-whitespace-multiplier}) calc(#{$clone-padding} * #{$clone-whitespace-multiplier}); - } - @media #{$clone-desktop-large} { - padding: calc(((#{$clone-padding} / 2) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}) calc((#{$clone-padding} * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}); - } - + padding: calc(#{$clone-padding} / 2); i { font-size: inherit; line-height: 1; @@ -34,25 +20,21 @@ a[data-c-button] { transition: all .2s ease; vertical-align: middle; } - img { display: inline-block; transform: translate(0, .1rem); width: 1rem; } - svg { display: inline-block; transform: translate(0, .1rem); width: 1rem; } - span+i, span+img, span+svg { margin-left: .5rem; } - i+span, img+span, svg+span { @@ -60,41 +42,41 @@ a[data-c-button] { margin-left: .5rem; } - // States -------------------------------------------------------------- - @media (hover: hover) { - &:hover { - background: rgba($clone-focus-color, .2); - border-color: $clone-focus-color; + // States -------------------------------------------------------------- + @media (hover: hover) { + &:hover { + background: rgba($clone-focus-color, .2); + border-color: $clone-focus-color; + color: $clone-focus-color; + transition: all .2s ease; + i { color: $clone-focus-color; transition: all .2s ease; - i { - color: $clone-focus-color; - transition: all .2s ease; - } } - @each $key, $value in $clone-color-map { - &[data-c-hover-color="#{$key}"]:hover, - &[data-c-hover-color="#{$key}"]:hover { - background: rgba($value, .2) !important; - border-color: $value !important; + } + @each $key, $value in $clone-color-map { + &[data-c-hover-color="#{$key}"]:hover, + &[data-c-hover-color="#{$key}"]:hover { + background: rgba($value, .2) !important; + border-color: $value !important; + color: $value !important; + transition: all .2s ease; + i { color: $value !important; transition: all .2s ease; - i { - color: $value !important; - transition: all .2s ease; - } } - }; - } - &:focus { - box-shadow: -3px -3px 0 $clone-focus-color, 3px -3px 0 $clone-focus-color, 3px 3px 0 $clone-focus-color, -3px 3px 0 $clone-focus-color; - } - &:disabled { - background: lighten($clone-grey, 30%); - border-color: lighten($clone-grey, 30%); - color: $clone-grey; - pointer-events: none; - } + } + }; + } + &:focus { + box-shadow: -3px -3px 0 $clone-focus-color, 3px -3px 0 $clone-focus-color, 3px 3px 0 $clone-focus-color, -3px 3px 0 $clone-focus-color; + } + &:disabled { + background: lighten($clone-grey, 30%); + border-color: lighten($clone-grey, 30%); + color: $clone-grey; + pointer-events: none; + } } @@ -127,65 +109,62 @@ a[data-c-button] { } } -// Variations ------------------------------------------------------------------ - - $clone-button-style-list: ("solid", "outline"); - - @each $style in $clone-button-style-list { - @each $key, $value in $clone-color-map { - @if $style == "solid" { - [data-c-button="#{$style}(#{$key})"] { - background: $value; - border: 1px solid $value; +// Variations +$clone-button-style-list: ("solid", "outline"); +@each $style in $clone-button-style-list { + @each $key, $value in $clone-color-map { + @if $style == "solid" { + [data-c-button="#{$style}(#{$key})"] { + background: $value; + border: 1px solid $value; + color: contrasting-color($value, $clone-white, $clone-black); + i { + color: contrasting-color($value, $clone-white, $clone-black); + } + &:visited { color: contrasting-color($value, $clone-white, $clone-black); - i { - color: contrasting-color($value, $clone-white, $clone-black); - } - &:visited { - color: contrasting-color($value, $clone-white, $clone-black); - } } } - @if $style == "outline" { - [data-c-button="#{$style}(#{$key})"] { - background: none; - border: 1px solid $value; + } + @if $style == "outline" { + [data-c-button="#{$style}(#{$key})"] { + background: none; + border: 1px solid $value; + color: $value; + i { color: $value; - i { - color: $value; - } } } } - }; - - [data-c-button="reset"] { - background: none; - border: none; - cursor: pointer; - @media (hover: hover) { - &:hover { + } +}; +[data-c-button="reset"] { + background: none; + border: none; + cursor: pointer; + @media (hover: hover) { + &:hover { + color: $clone-focus-color; + transition: all .2s ease; + i { color: $clone-focus-color; transition: all .2s ease; - i { - color: $clone-focus-color; - transition: all .2s ease; - } } - @each $key, $value in $clone-color-map { - &[data-c-hover-color="#{$key}"]:hover, - &[data-c-hover-color="#{$key}"]:hover { + } + @each $key, $value in $clone-color-map { + &[data-c-hover-color="#{$key}"]:hover, + &[data-c-hover-color="#{$key}"]:hover { + color: $value !important; + transition: all .2s ease; + i { color: $value !important; transition: all .2s ease; - i { - color: $value !important; - transition: all .2s ease; - } } - }; - &:disabled { - color: $clone-grey; - pointer-events: none; } + }; + &:disabled { + color: $clone-grey; + pointer-events: none; } } +} diff --git a/app/scss/components/_carousel.scss b/app/scss/components/_carousel.scss index c8bc486..293467e 100644 --- a/app/scss/components/_carousel.scss +++ b/app/scss/components/_carousel.scss @@ -1,13 +1,6 @@ -// ============================================================================= - - // Clone - // Carousels - -// ============================================================================= - +// Clone: Carousel Component (Glider.js) [data-c-carousel-wrapper] { .slick-list { - // border-radius: 5px; .slick-track { display: flex; .slick-slide { @@ -18,10 +11,6 @@ } } } - .slick-slide .slick-list .slick-track >div { - // margin-right: 10vw; - // margin-left: 10vw; - } [data-c-carousel-arrow] { background: rgba($clone-black, .5); border: none; @@ -45,23 +34,22 @@ left: 50%; transform: translate(-50%, -50%); } - // States ---------------------------------------------------------- - &:hover, - &:focus { - background: rgba($clone-black, .8); - transition: all .2s ease; - } - // Types ----------------------------------------------------------- - &[data-c-carousel-arrow="prev"] { - // border-radius: 5px 0 0 5px; - left: 0; - } + // States + &:hover, + &:focus { + background: rgba($clone-black, .8); + transition: all .2s ease; + } + + // Types + &[data-c-carousel-arrow="prev"] { + left: 0; + } + &[data-c-carousel-arrow="next"] { + right: 0; + } - &[data-c-carousel-arrow="next"] { - // border-radius: 0 5px 5px 0; - right: 0; - } } [data-c-carousel-dots] { list-style: none; @@ -82,13 +70,15 @@ cursor: pointer; height: 1.5rem; width: 1.5rem; - // States ---------------------------------------------------------- + + // States &.active, &:hover, &:focus { background: $clone-carousel-dot-active-color; transition: all .2s ease; } + } } } diff --git a/app/scss/components/_code.scss b/app/scss/components/_code.scss index 2efa269..14fafc4 100644 --- a/app/scss/components/_code.scss +++ b/app/scss/components/_code.scss @@ -1,9 +1,4 @@ -// ============================================================================= - - // Clone - // Code - -// ============================================================================= +// Clone: Code Component pre { background: $clone-code-background; color: contrasting-color($clone-code-background, $clone-white, $clone-black); @@ -29,13 +24,7 @@ code { color: contrasting-color($clone-code-background, $clone-white, $clone-black); font-family: $clone-font-monospace; font-size: inherit; - padding: calc(#{$clone-padding} / 6) calc(#{$clone-padding} / 3); - @media #{$clone-tablet-portrait} { - padding: calc((#{$clone-padding} / 6) * #{$clone-whitespace-multiplier}) calc((#{$clone-padding} / 3) * #{$clone-whitespace-multiplier}); - } - @media #{$clone-desktop-large} { - padding: calc(((#{$clone-padding} / 6) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}) calc(((#{$clone-padding} / 3) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}); - } + padding: calc(#{$clone-padding} / 6) calc(#{$clone-padding} / 3);; * { font-family: $clone-font-monospace; font-size: $clone-default-font-size; diff --git a/app/scss/components/_dialog.scss b/app/scss/components/_dialog.scss index 08371d6..38d8655 100644 --- a/app/scss/components/_dialog.scss +++ b/app/scss/components/_dialog.scss @@ -1,10 +1,4 @@ -// ============================================================================= - - // Clone - // Dialogs - -// ============================================================================= - +// Clone: Dialog Component [data-c-dialog-overlay] { background: rgba(0, 0, 0, .9); height: 100vh; @@ -17,13 +11,11 @@ width: 100vw; z-index: 100000000; } - [data-c-dialog-overlay*="active"] { opacity: 1; transform: translate(0, 0); transition: transform 0s linear, opacity .2s ease; } - [data-c-dialog] { height: 100vh; opacity: 0; @@ -32,7 +24,6 @@ transition: all 0s ease; width: 100vw; z-index: 1000000000; - >div { margin-top: 0; margin-right: auto; @@ -81,36 +72,38 @@ left: 50%; transform: translate(-50%, -50%); } - // States ------------------------------------------------------ - &:hover { - color: $clone-stop; - transition: color .3s ease; - } - &:focus { - border: solid 3px $clone-focus-color; - transition: border .2s ease; - } + + // States + &:hover { + color: $clone-stop; + transition: color .3s ease; + } + &:focus { + border: solid 3px $clone-focus-color; + transition: border .2s ease; + } + } } } - // States ------------------------------------------------------------------ - &[data-c-dialog="active--contained"] { - height: auto; - opacity: 1; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - transition: transform 0s linear, opacity .2s ease .2s; - } - &[data-c-dialog="active--overflowing"] { - height: 100vh; - opacity: 1; - overflow: auto; - top: 0; - left: 50%; - transform: translate(-50%, 0%); - transition: transform 0s linear, opacity .2s ease .2s; - } + // States + &[data-c-dialog="active--contained"] { + height: auto; + opacity: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: transform 0s linear, opacity .2s ease .2s; + } + &[data-c-dialog="active--overflowing"] { + height: 100vh; + opacity: 1; + overflow: auto; + top: 0; + left: 50%; + transform: translate(-50%, 0%); + transition: transform 0s linear, opacity .2s ease .2s; + } } diff --git a/app/scss/components/_iframe.scss b/app/scss/components/_iframe.scss index fd72b51..2b1484c 100644 --- a/app/scss/components/_iframe.scss +++ b/app/scss/components/_iframe.scss @@ -1,15 +1,8 @@ -// ============================================================================= - - // Clone - // iFrames - -// ============================================================================= - +// Clone: iFrame Component [data-c-iframe] { height: 0; padding: 0 0 56.25%; position: relative; - iframe { height: 100%; position: absolute; @@ -17,5 +10,4 @@ left: 0; width: 100%; } - } diff --git a/app/scss/components/_menus.scss b/app/scss/components/_menus.scss index b36b2e8..fcb731c 100644 --- a/app/scss/components/_menus.scss +++ b/app/scss/components/_menus.scss @@ -1,9 +1,4 @@ -// ============================================================================= - - // Clone - // Menus - -// ============================================================================= +// Clone: Menu Component [data-clone] { [data-c-menu-mobile-trigger] { position: fixed; @@ -30,7 +25,6 @@ } } } - [data-clone][data-c-menu-style] { [data-c-menu] { background: $clone-menu-background-color; @@ -63,7 +57,7 @@ color: $clone-menu-icon-color; } - // Mobile ================================================================== + // Mobile overflow: auto; position: fixed; top: 0; @@ -138,7 +132,7 @@ } } - // colors ================================================================= + // Colors // Main Menu >ul >li:not(:first-child) >a, @@ -151,6 +145,7 @@ >ul >li >button { background: contrasting-color($clone-menu-background-color, rgba($clone-white, .1), rgba($clone-black, .1)); } + // Layer 1 >ul >li >ul { background: $clone-submenu-background-color; @@ -173,6 +168,7 @@ >ul >li >ul >li >button >i { color: contrasting-color($clone-submenu-background-color, $clone-white, $clone-black); } + // Layer 2 >ul >li >ul >li >ul { background: darken($clone-submenu-background-color, 5%); @@ -195,6 +191,7 @@ >ul >li >ul >li >ul >li >button >i { color: contrasting-color(darken($clone-submenu-background-color, 5%), $clone-white, $clone-black); } + // Layer 3 >ul >li >ul >li >ul >li >ul { background: darken($clone-submenu-background-color, 10%); @@ -217,6 +214,7 @@ >ul >li >ul >li >ul >li >ul >li >button >i { color: contrasting-color(darken($clone-submenu-background-color, 10%), $clone-white, $clone-black); } + // Layer 4 >ul >li >ul >li >ul >li >ul >li >ul { background: darken($clone-submenu-background-color, 15%); @@ -239,6 +237,7 @@ >ul >li >ul >li >ul >li >ul >li >ul >li >button >i { color: contrasting-color(darken($clone-submenu-background-color, 15%), $clone-white, $clone-black); } + // Layer 5 >ul >li >ul >li >ul >li >ul >li >ul >li >ul { background: darken($clone-submenu-background-color, 20%); @@ -264,7 +263,6 @@ } } - [data-clone][data-c-menu-style*="topbar"] { [data-c-menu] { @media #{$clone-tablet-landscape} { @@ -406,7 +404,6 @@ } } } - [data-clone][data-c-menu-style*="sidebar"] { @media #{$clone-tablet-landscape} { margin-left: calc((1/4) * 100%); diff --git a/app/scss/components/_pullquote.scss b/app/scss/components/_pullquote.scss index dd0fc8c..451dee6 100644 --- a/app/scss/components/_pullquote.scss +++ b/app/scss/components/_pullquote.scss @@ -1,14 +1,6 @@ -// ============================================================================= - - // Clone - // Pullquotes - -// ============================================================================= - +// Clone: Pullquote Component .clone-pullquote { - .clone-pullquote-copy { color: $clone-pullquote-color; } - } diff --git a/app/scss/components/_skip-to-content-link.scss b/app/scss/components/_skip-to-content-link.scss index e3a2aad..a46b667 100644 --- a/app/scss/components/_skip-to-content-link.scss +++ b/app/scss/components/_skip-to-content-link.scss @@ -1,10 +1,4 @@ -// ============================================================================= - - // Clone - // Skip to Content - -// ============================================================================= - +// Clone: Skip-to-content Link Component [data-c-skip-content] { display: block; height: 1px; @@ -13,12 +7,12 @@ left: -100vw; text-align: center; width: 1px; - // States -------------------------------------------------------------- - &:focus { - height: auto; - position: relative; - top: 0; - left: 0; - width: 100%; - } + // States + &:focus { + height: auto; + position: relative; + top: 0; + left: 0; + width: 100%; + } } diff --git a/app/scss/components/_table.scss b/app/scss/components/_table.scss index 35ca773..6f7a707 100644 --- a/app/scss/components/_table.scss +++ b/app/scss/components/_table.scss @@ -1,9 +1,4 @@ -// ============================================================================= - - // Clone - // Tables - -// ============================================================================= +// Clone: Table Component [data-c-table] { overflow: auto; width: 100%; diff --git a/app/scss/components/_tag.scss b/app/scss/components/_tag.scss index 000f6f8..5c8e4d7 100644 --- a/app/scss/components/_tag.scss +++ b/app/scss/components/_tag.scss @@ -1,6 +1,36 @@ -// ============================================================================= - - // Clone - // Tags - -// ============================================================================= +// Clone: Tag Component +@each $key, $value in $clone-color-map { + [data-c-tag="#{$key}"] { + background: $value; + color: contrasting-color($value, $clone-white, $clone-black); + display: inline-block; + line-height: $clone-line-height; + padding: calc(#{$clone-padding} / 4) calc(#{$clone-padding} / 2); + vertical-align: middle; + @media (hover: hover) { + a:hover { + color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; + } + } + } + a[data-c-tag="#{$key}"] { + @media (hover: hover) { + &:hover { + color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; + } + } + } + // IE 11 Hover Support + &[id*="Trident/7.0"] { + [data-c-tag="#{$key}"] { + a:hover { + color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; + } + } + a[data-c-tag="#{$key}"] { + &:hover { + color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; + } + } + } +}; \ No newline at end of file diff --git a/app/scss/core/_defaults.scss b/app/scss/core/_defaults.scss index e114998..5b923de 100644 --- a/app/scss/core/_defaults.scss +++ b/app/scss/core/_defaults.scss @@ -28,15 +28,12 @@ $clone-small-layout: 39rem !default; $clone-copy-layout: $clone-small-layout; // Whitespace Variables // On Portrait Phone Devices, Media Queries exist at Tablet Landscape, and Desktop Large and are generated using the multiplier below. -$clone-margin: 1rem !default; -$clone-padding: 1rem !default; +$clone-margin: 1.25vw !default; +$clone-margin-old: 1rem !default; +$clone-padding: 1.25vw !default; +$clone-padding-old: 1rem !default; // Calculation Variables $clone-whitespace-multiplier: 1.1 !default; - $clone-ws-tp: #{$clone-whitespace-multiplier} !default; // 1.4rem - $clone-ws-tl: #{$clone-ws-tp} * #{$clone-whitespace-multiplier} !default; // 1.68rem - $clone-ws-ds: #{$clone-ws-tl} * #{$clone-whitespace-multiplier} !default; // 2.016rem - $clone-ws-dm: #{$clone-ws-ds} * #{$clone-whitespace-multiplier} !default; // 2.4192rem - $clone-ws-dl: #{$clone-ws-dm} * #{$clone-whitespace-multiplier} !default; // 2.90304rem // Grid Variables $clone-grid-columns: 12 !default; // Main Color Variables @@ -150,6 +147,11 @@ $clone-grid-columns: 12 !default; // Alternatives $clone-heading-5-border-colour: $clone-heading-1-border-color; $clone-heading-5-colour: $clone-heading-1-color; +// Border Options +$clone-border-thickness-thin: 1px !default; +$clone-border-thickness-thick: .5rem !default; +$clone-border-radius-rounded: 5px !default; +$clone-border-radius-pill: 20rem !default; // Component Options // Cards $clone-card-shadow: 0 3px 5px rgba(0, 0, 0, .5) !default; diff --git a/app/scss/core/_maps.scss b/app/scss/core/_maps.scss new file mode 100644 index 0000000..394a2c0 --- /dev/null +++ b/app/scss/core/_maps.scss @@ -0,0 +1,139 @@ +// Clone: Sass Maps + +// Alignment +$clone-alignment-map: ( + "left": left, + "center": center, + "centre": center, + "right": right +); +$clone-alignment-value-map: ( + "left": auto auto auto 0, + "center": 0 auto, + "centre": 0 auto, + "right": auto 0 auto auto +); + +// Borders +$clone-border-style-list: ("solid", "dashed"); +$clone-border-width-list: ("thick", "thin"); + +// Color +$clone-color-map: ( + "white": $clone-white, + "grey": $clone-gray, + "gray": $clone-gray, + "black": $clone-black, + "go": $clone-go, + "slow": $clone-slow, + "stop": $clone-stop, + "c1": $clone-c1, + "c2": $clone-c2, + "c3": $clone-c3, + "c4": $clone-c4, + "c5": $clone-c5 +); + +// Containers +$clone-container-size-map: ( + "small": $clone-small-layout, + "medium": $clone-medium-layout, + "large": $clone-large-layout, + "copy": $clone-small-layout, + "form": $clone-medium-layout, + "layout": $clone-large-layout, + "full": none +); + +// Display +$clone-display-list: ("block", "inline", "inline-block", "table", "grid", "flex", "none"); + +// Font Family +$clone-font-family-map: ( + "sans": $clone-font-sans, + "serif": $clone-font-serif, + "script": $clone-font-script, + "mono": $clone-font-monospace, + "monospace": $clone-font-monospace, +); + +// Font Size +$clone-font-size-map: ( + "h1": $clone-font-scale-h1, + "h2": $clone-font-scale-h2, + "h3": $clone-font-scale-h3, + "h4": $clone-font-scale-h4, + "h5": $clone-font-scale-h5, + "regular": $clone-default-font-size, + "normal": $clone-default-font-size, + "small": $clone-font-scale-small, +); + +// Media +$clone-media-query-map: ( + "base": "screen", + "pp": $clone-phone-portrait, + "pl": $clone-phone-landscape, + "tp": $clone-tablet-portrait, + "tl": $clone-tablet-landscape, + "ds": $clone-desktop-small, + "dm": $clone-desktop-medium, + "dl": $clone-desktop-large, +); + +// Opacity +$clone-opacity-list: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100); + +// Orientation +$clone-orientation-map: ( + "all": "", + "top": "-top", + "right": "-right", + "bottom": "-bottom", + "left": "-left" +); + +// Sides +$clone-side-map: ( + "all": "", + "top": "-top", + "right": "-right", + "bottom": "-bottom", + "left": "-left", + "tb": "", + "rl": "" +); + +// Weight +$clone-weight-map: ( + "100": 100, + "200": 200, + "300": 300, + "400": 400, + "normal": 400, + "500": 500, + "600": 600, + "700": 700, + "bold": 700, + "800": 800, + "900": 900 +); + +// Whitespace +$clone-whitespace-map: ( + "1": "", + ".25": "/ 4", + ".5": "/ 2", + "2": "* 2", + "2.5": "* 2.5", + "3": "* 3", + "4": "* 4", + "5": "* 5" +); +$clone-whitespace-map-old: ( + "normal": "", + "quarter": "/ 4", + "half": "/ 2", + "double": "* 2", + "triple": "* 3" +); \ No newline at end of file diff --git a/app/scss/core/_utilities.scss b/app/scss/core/_utilities.scss deleted file mode 100644 index bd112ce..0000000 --- a/app/scss/core/_utilities.scss +++ /dev/null @@ -1,1186 +0,0 @@ -// ============================================================================= - - // Clone - // Utility Classes - -// ============================================================================= - -// Maps ======================================================================== - - // Alignment - $clone-alignment-map: ( - "left": left, - "center": center, - "centre": center, - "right": right - ); - $clone-alignment-value-map: ( - "left": auto auto auto 0, - "center": 0 auto, - "centre": 0 auto, - "right": auto 0 auto auto - ); - - // Color - $clone-color-map: ( - "white": $clone-white, - "grey": $clone-gray, - "gray": $clone-gray, - "black": $clone-black, - "go": $clone-go, - "slow": $clone-slow, - "stop": $clone-stop, - "c1": $clone-c1, - "c2": $clone-c2, - "c3": $clone-c3, - "c4": $clone-c4, - "c5": $clone-c5 - ); - - // Containers - $clone-container-size-map: ( - "small": $clone-small-layout, - "medium": $clone-medium-layout, - "large": $clone-large-layout, - "copy": $clone-small-layout, - "form": $clone-medium-layout, - "layout": $clone-large-layout, - "full": none - ); - - // Orientation - $clone-orientation-map: ( - "all": "", - "top": "-top", - "right": "-right", - "bottom": "-bottom", - "left": "-left" - ); - - // Weight - $clone-weight-map: ( - "100": 100, - "200": 200, - "300": 300, - "400": 400, - "normal": 400, - "500": 500, - "600": 600, - "700": 700, - "bold": 700, - "800": 800, - "900": 900 - ); - - // Whitespace - $clone-whitespace-map: ( - "1": "", - ".25": "/ 4", - ".5": "/ 2", - "2": "* 2", - "3": "* 3", - "4": "* 4" - ); - $clone-whitespace-map-old: ( - "normal": "", - "quarter": "/ 4", - "half": "/ 2", - "double": "* 2", - "triple": "* 3" - ); - -// Alignment =================================================================== -[data-c-alignment="center"], -[data-c-alignment="centre"], -[data-c-align="center"], -[data-c-align="centre"] {text-align: center;} -[data-c-alignment="right"], -[data-c-align="right"] {text-align: right;} -[data-c-alignment="left"], -[data-c-align="left"] {text-align: left;} - -@each $key, $value in $clone-alignment-map { - [data-c-alignment*="base(#{$key})"], - [data-c-align*="base(#{$key})"] { - text-align: $value; - } -} -@each $key, $value in $clone-alignment-map { - @media #{$clone-phone-portrait} { - [data-c-alignment*="pp(#{$key})"], - [data-c-align*="pp(#{$key})"] { - text-align: $value; - } - } -} -@each $key, $value in $clone-alignment-map { - @media #{$clone-phone-landscape} { - [data-c-alignment*="pl(#{$key})"], - [data-c-align*="pl(#{$key})"] { - text-align: $value; - } - } -} -@each $key, $value in $clone-alignment-map { - @media #{$clone-tablet-portrait} { - [data-c-alignment*="tp(#{$key})"], - [data-c-align*="tp(#{$key})"] { - text-align: $value; - } - } -} -@each $key, $value in $clone-alignment-map { - @media #{$clone-tablet-landscape} { - [data-c-alignment*="tl(#{$key})"], - [data-c-align*="tl(#{$key})"] { - text-align: $value; - } - } -} -@each $key, $value in $clone-alignment-map { - @media #{$clone-desktop-small} { - [data-c-alignment*="ds(#{$key})"], - [data-c-align*="ds(#{$key})"] { - text-align: $value; - } - } -} -@each $key, $value in $clone-alignment-map { - @media #{$clone-desktop-medium} { - [data-c-alignment*="dm(#{$key})"], - [data-c-align*="dm(#{$key})"] { - text-align: $value; - } - } -} -@each $key, $value in $clone-alignment-map { - @media #{$clone-desktop-large} { - [data-c-alignment*="dl(#{$key})"], - [data-c-align*="dl(#{$key})"] { - text-align: $value; - } - } -} - -// a11y ======================================================================== -[data-c-visibility="invisible"] { - height: 1px; - overflow: hidden; - position: absolute; - top: 0; - left: -100vw; - width: 1px; -} -[data-c-visibility="hidden"] { - display: none; - visibility: hidden; -} - -// Backgrounds ================================================================= -$clone-opacity-list: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100); -@each $key, $value in $clone-color-map { - @each $alpha in $clone-opacity-list { - $newValue: unquote($key)+"("+$alpha+")"; - [data-c-background="#{$newValue}"] { - $decimal: $alpha / 100; - background: rgba($value, $decimal); - a:hover { - color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; - } - } - } -}; - -// Borders ===================================================================== -$clone-border-style-list: ("solid", "dashed"); -$clone-border-width-list: ("thick", "thin"); -@each $style in $clone-border-style-list { - @each $width in $clone-border-width-list { - @each $key, $value in $clone-color-map { - [data-c-border*="all(#{$width}, #{$style}, #{$key})"] { - border-color: $value; - border-style: unquote($style); - @if ($width == "thin") { - border-width: 1px; - } - @if ($width == "thick") { - border-width: .5rem; - } - } - }; - @each $key, $value in $clone-color-map { - [data-c-border*="tb(#{$width}, #{$style}, #{$key})"], - [data-c-border*="bt(#{$width}, #{$style}, #{$key})"] { - border-top-color: $value; - border-bottom-color: $value; - border-top-style: unquote($style); - border-bottom-style: unquote($style); - @if ($width == "thin") { - border-top-width: 1px; - border-bottom-width: 1px; - } - @if ($width == "thick") { - border-top-width: .5rem; - border-bottom-width: .5rem; - } - } - }; - @each $key, $value in $clone-color-map { - [data-c-border*="rl(#{$width}, #{$style}, #{$key})"], - [data-c-border*="lr(#{$width}, #{$style}, #{$key})"] { - border-right-color: $value; - border-left-color: $value; - border-right-style: unquote($style); - border-left-style: unquote($style); - @if ($width == "thin") { - border-right-width: 1px; - border-left-width: 1px; - } - @if ($width == "thick") { - border-right-width: .5rem; - border-left-width: .5rem; - } - } - }; - @each $key, $value in $clone-color-map { - [data-c-border*="top(#{$width}, #{$style}, #{$key})"] { - border-top-color: $value; - border-top-style: unquote($style); - @if ($width == "thin") { - border-top-width: 1px; - } - @if ($width == "thick") { - border-top-width: .5rem; - } - } - }; - @each $key, $value in $clone-color-map { - [data-c-border*="right(#{$width}, #{$style}, #{$key})"] { - border-right-color: $value; - border-right-style: unquote($style); - @if ($width == "thin") { - border-right-width: 1px; - } - @if ($width == "thick") { - border-right-width: .5rem; - } - } - }; - @each $key, $value in $clone-color-map { - [data-c-border*="bottom(#{$width}, #{$style}, #{$key})"] { - border-bottom-color: $value; - border-bottom-style: unquote($style); - @if ($width == "thin") { - border-bottom-width: 1px; - } - @if ($width == "thick") { - border-bottom-width: .5rem; - } - } - }; - @each $key, $value in $clone-color-map { - [data-c-border*="left(#{$width}, #{$style}, #{$key})"] { - border-left-color: $value; - border-left-style: unquote($style); - @if ($width == "thin") { - border-left-width: 1px; - } - @if ($width == "thick") { - border-left-width: .5rem; - } - } - }; - }; -}; -[data-c-radius="rounded"] { - border-radius: 5px; - overflow: hidden; -} -[data-c-radius="pill"] { - border-radius: 20rem; - overflow: hidden; -} - -// Cards ======================================================================= -[data-c-card] { - box-shadow: $clone-card-shadow -} - -// Containers ================================================================== -[data-c-container="full"] { - margin: 0 auto; - width: 90%; -} -// Large Containers -[data-c-container="layout"], -[data-c-container="large"], -[data-c-container="large(center)"] { - margin: 0 auto; - max-width: $clone-large-layout; - width: 90%; -} -[data-c-container="large(left)"] { - margin: 0 auto auto 0; - max-width: $clone-large-layout; - width: 90%; -} -[data-c-container="large(right)"] { - margin: 0 0 auto auto; - max-width: $clone-large-layout; - width: 90%; -} -// Medium Containers -[data-c-container="form"], -[data-c-container="medium"], -[data-c-container="medium(center)"] { - margin: 0 auto; - max-width: $clone-medium-layout; - width: 90%; -} -[data-c-container="medium(left)"] { - margin: 0 auto auto 0; - max-width: $clone-medium-layout; - width: 90%; -} -[data-c-container="medium(right)"] { - margin: 0 0 auto auto; - max-width: $clone-medium-layout; - width: 90%; -} -// Small Containers -[data-c-container="copy"], -[data-c-container="small"], -[data-c-container="small(center)"] { - margin: 0 auto; - max-width: $clone-small-layout; - width: 90%; -} -[data-c-container="small(left)"] { - margin: 0 auto auto 0; - max-width: $clone-small-layout; - width: 90%; -} -[data-c-container="small(right)"] { - margin: 0 0 auto auto; - max-width: $clone-small-layout; - width: 90%; -} -// Media Query Syntax -[data-c-container*="pp"], -[data-c-container*="pl"], -[data-c-container*="tl"], -[data-c-container*="tp"], -[data-c-container*="ds"], -[data-c-container*="dm"], -[data-c-container*="dl"] { - margin: 0 auto; - width: 90%; -} -// Base -@each $sizeKey, $sizeValue in $clone-container-size-map { - @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { - [data-c-container*="base(#{$sizeKey}, #{$alignmentKey})"] { - margin: $alignmentValue; - max-width: $sizeValue; - width: 90%; - } - } -} -// Phone -@each $sizeKey, $sizeValue in $clone-container-size-map { - @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { - @media #{$clone-phone-portrait} { - [data-c-container*="pp(#{$sizeKey}, #{$alignmentKey})"] { - margin: $alignmentValue; - max-width: $sizeValue; - width: 90%; - } - } - } -} -@each $sizeKey, $sizeValue in $clone-container-size-map { - @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { - @media #{$clone-phone-landscape} { - [data-c-container*="pl(#{$sizeKey}, #{$alignmentKey})"] { - margin: $alignmentValue; - max-width: $sizeValue; - width: 90%; - } - } - } -} -// Tablet -@each $sizeKey, $sizeValue in $clone-container-size-map { - @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { - @media #{$clone-tablet-portrait} { - [data-c-container*="tp(#{$sizeKey}, #{$alignmentKey})"] { - margin: $alignmentValue; - max-width: $sizeValue; - width: 90%; - } - } - } -} -@each $sizeKey, $sizeValue in $clone-container-size-map { - @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { - @media #{$clone-tablet-landscape} { - [data-c-container*="tl(#{$sizeKey}, #{$alignmentKey})"] { - margin: $alignmentValue; - max-width: $sizeValue; - width: 90%; - } - } - } -} -// Desktop -@each $sizeKey, $sizeValue in $clone-container-size-map { - @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { - @media #{$clone-desktop-small} { - [data-c-container*="ds(#{$sizeKey}, #{$alignmentKey})"] { - margin: $alignmentValue; - max-width: $sizeValue; - width: 90%; - } - } - } -} -@each $sizeKey, $sizeValue in $clone-container-size-map { - @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { - @media #{$clone-desktop-medium} { - [data-c-container*="dm(#{$sizeKey}, #{$alignmentKey})"] { - margin: $alignmentValue; - max-width: $sizeValue; - width: 90%; - } - } - } -} -@each $sizeKey, $sizeValue in $clone-container-size-map { - @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { - @media #{$clone-desktop-large} { - [data-c-container*="dl(#{$sizeKey}, #{$alignmentKey})"] { - margin: $alignmentValue; - max-width: $sizeValue; - width: 90%; - } - } - } -} - -// Display ===================================================================== -[data-c-display="block"] { - display: block; -} -[data-c-display="inline"] { - display: inline; -} -[data-c-display="inline-block"] { - display: inline-block; -} -[data-c-display="table"] { - display: table; -} -[data-c-display="grid"] { - display: grid; -} -[data-c-display="flex"] { - display: flex; -} -[data-c-display="none"] { - display: none; -} - -// Fonts ======================================================================= -[data-c-font="sans"] { - font-family: $clone-font-sans; - a, span { - font-family: $clone-font-sans; - } -} -[data-c-font="serif"] { - font-family: $clone-font-serif; - a, span { - font-family: $clone-font-serif; - } -} -[data-c-font="script"] { - font-family: $clone-font-script; - a, span { - font-family: $clone-font-script; - } -} -[data-c-font="mono"], -[data-c-font="monospace"] { - font-family: $clone-font-monospace; - a, span { - font-family: $clone-font-monospace; - } -} - - // Font Color ------------------------------------------------------------- - @each $key, $value in $clone-color-map { - [data-c-color="#{$key}"], - [data-c-colour="#{$key}"] {color: $value;} - }; - - // Hover Color ------------------------------------------------------------ - @each $key, $value in $clone-color-map { - [data-c-hover-color="#{$key}"]:hover, - [data-c-hover-colour="#{$key}"]:hover {color: $value;} - }; - - @each $key, $value in $clone-color-map { - a[data-c-hover-color="#{$key}"]:hover, - a[data-c-hover-colour="#{$key}"]:hover {color: $value !important;} - }; - - // Font Weights ------------------------------------------------------------ - @each $key, $value in $clone-weight-map { - [data-c-font-weight="#{$key}"] {font-weight: $value;} - }; - - // Font Sizes -------------------------------------------------------------- - [data-c-font-size="h1"] {font-size: $clone-font-scale-h1;} - [data-c-font-size="h2"] {font-size: $clone-font-scale-h2;} - [data-c-font-size="h3"] {font-size: $clone-font-scale-h3;} - [data-c-font-size="h4"] {font-size: $clone-font-scale-h4;} - [data-c-font-size="h5"] {font-size: $clone-font-scale-h5;} - [data-c-font-size="normal"] {font-size: $clone-default-font-size;} - [data-c-font-size="regular"] {font-size: $clone-default-font-size;} - [data-c-font-size="small"] {font-size: $clone-font-scale-small;} - - // Font Styles ------------------------------------------------------------- - [data-c-font-style="reset"] { - font-style: normal; - text-decoration: none currentcolor solid; - } - [data-c-font-style="italic"] {font-style: italic;} - [data-c-font-style="underline"] {text-decoration: underline;} - -// Horizontal Rules ============================================================ -[data-c-hr] { - background: $clone-hr-color; - border: none; - height: 1px; - outline: none; -} -@each $width in $clone-border-width-list { - @each $key, $value in $clone-color-map { - [data-c-hr*="#{$width}(#{$key})"] { - background: $value; - @if ($width == "thin") { - height: 1px; - } - @if ($width == "thick") { - height: .5rem; - } - } - }; -}; - -// Whitespace ================================================================== - - // Margins ----------------------------------------------------------------- - - // New Syntax ---------------------------------------------------------- - - // Shorthand ([data-c-margin=normal]) ------------------------------ - // Adds a whitespace shorthand that defaults to all sides of the element. - @each $wKey, $wValue in $clone-whitespace-map { - [data-c-margin="#{$wKey}"] { - margin: calc(#{$clone-margin} #{$wValue}); - @media #{$clone-tablet-portrait} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - - // Shorthand ([data-c-margin=top]) --------------------------------- - // Adds an orientation shorthand that defaults to the normal whitespace value. - @each $oKey, $oValue in $clone-orientation-map { - [data-c-margin="#{$oKey}"] { - margin#{$oValue}: #{$clone-margin}; - @media #{$clone-tablet-portrait} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-dl}); - } - } - } - - // Shorthand ([data-c-margin="tb(normal)" -------------------------- - // Adds a top/bottom and left/right shorthand. - @each $wKey, $wValue in $clone-whitespace-map { - // Top/Bottom - [data-c-margin*="tb(#{$wKey})"], - [data-c-margin*="bt(#{$wKey})"] { - margin-top: calc(#{$clone-margin} #{$wValue}); - margin-bottom: calc(#{$clone-margin} #{$wValue}); - @media #{$clone-tablet-portrait} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - } - } - // Right/Left - [data-c-margin*="rl(#{$wKey})"], - [data-c-margin*="lr(#{$wKey})"] { - margin-right: calc(#{$clone-margin} #{$wValue}); - margin-left: calc(#{$clone-margin} #{$wValue}); - @media #{$clone-tablet-portrait} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - - // Margin Syntax --------------------------------------------------- - @each $oKey, $oValue in $clone-orientation-map { - @each $wKey, $wValue in $clone-whitespace-map { - [data-c-margin*="#{$oKey}(#{$wKey})"] { - margin#{$oValue}: calc(#{$clone-margin} #{$wValue}); - @media #{$clone-tablet-portrait} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - } - - // Old Syntax ---------------------------------------------------------- - - // Shorthand ([data-c-margin=normal]) ------------------------------ - // Adds a whitespace shorthand that defaults to all sides of the element. - @each $wKey, $wValue in $clone-whitespace-map-old { - [data-c-margin="#{$wKey}"] { - margin: calc(#{$clone-margin} #{$wValue}); - @media #{$clone-tablet-portrait} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - - // Shorthand ([data-c-margin=top]) --------------------------------- - // Adds an orientation shorthand that defaults to the normal whitespace value. - @each $oKey, $oValue in $clone-orientation-map { - [data-c-margin="#{$oKey}"] { - margin#{$oValue}: #{$clone-margin}; - @media #{$clone-tablet-portrait} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin#{$oValue}: calc(#{$clone-margin} * #{$clone-ws-dl}); - } - } - } - - // Shorthand ([data-c-margin="tb(normal)" -------------------------- - // Adds a top/bottom and left/right shorthand. - @each $wKey, $wValue in $clone-whitespace-map-old { - // Top/Bottom - [data-c-margin*="tb(#{$wKey})"], - [data-c-margin*="bt(#{$wKey})"] { - margin-top: calc(#{$clone-margin} #{$wValue}); - margin-bottom: calc(#{$clone-margin} #{$wValue}); - @media #{$clone-tablet-portrait} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin-top: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - margin-bottom: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - } - } - // Right/Left - [data-c-margin*="rl(#{$wKey})"], - [data-c-margin*="lr(#{$wKey})"] { - margin-right: calc(#{$clone-margin} #{$wValue}); - margin-left: calc(#{$clone-margin} #{$wValue}); - @media #{$clone-tablet-portrait} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin-right: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - margin-left: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - - // Margin Syntax --------------------------------------------------- - @each $oKey, $oValue in $clone-orientation-map { - @each $wKey, $wValue in $clone-whitespace-map-old { - [data-c-margin*="#{$oKey}(#{$wKey})"] { - margin#{$oValue}: calc(#{$clone-margin} #{$wValue}); - @media #{$clone-tablet-portrait} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - margin#{$oValue}: calc((#{$clone-margin} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - } - - // Auto Margins -------------------------------------------------------- - [data-c-margin*="right(auto)"] { - margin-right: auto; - } - - [data-c-margin*="left(auto)"] { - margin-left: auto; - } - - // Right/Left Auto - [data-c-margin*="rl(auto)"], - [data-c-margin*="lr(auto)"] { - margin-right: auto; - margin-left: auto; - } - - // Padding ----------------------------------------------------------------- - - // New Syntax ---------------------------------------------------------- - - // Shorthand ([data-c-padding=normal]) --------------------------------- - // Adds a whitespace shorthand that defaults to all sides of the element. - @each $wKey, $wValue in $clone-whitespace-map { - [data-c-padding="#{$wKey}"] { - padding: calc(#{$clone-padding} #{$wValue}); - @media #{$clone-tablet-portrait} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - - // Shorthand ([data-c-padding=top]) ------------------------------------ - // Adds an orientation shorthand that defaults to the normal whitespace value. - @each $oKey, $oValue in $clone-orientation-map { - [data-c-padding="#{$oKey}"] { - padding#{$oValue}: #{$clone-padding}; - @media #{$clone-tablet-portrait} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-dl}); - } - } - } - - // Shorthand ([data-c-padding="tb(normal)" ----------------------------- - // Adds a top/bottom and left/right shorthand. - @each $wKey, $wValue in $clone-whitespace-map { - // Top/Bottom - [data-c-padding*="tb(#{$wKey})"], - [data-c-padding*="bt(#{$wKey})"] { - padding-top: calc(#{$clone-padding} #{$wValue}); - padding-bottom: calc(#{$clone-padding} #{$wValue}); - @media #{$clone-tablet-portrait} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - } - } - // Right/Left - [data-c-padding*="rl(#{$wKey})"], - [data-c-padding*="lr(#{$wKey})"] { - padding-right: calc(#{$clone-padding} #{$wValue}); - padding-left: calc(#{$clone-padding} #{$wValue}); - @media #{$clone-tablet-portrait} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - - // Padding Syntax ------------------------------------------------------ - @each $oKey, $oValue in $clone-orientation-map { - @each $wKey, $wValue in $clone-whitespace-map { - [data-c-padding*="#{$oKey}(#{$wKey})"] { - padding#{$oValue}: calc(#{$clone-padding} #{$wValue}); - @media #{$clone-tablet-portrait} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - } - - // Old Syntax ---------------------------------------------------------- - - // Shorthand ([data-c-padding=normal]) ----------------------------- - // Adds a whitespace shorthand that defaults to all sides of the element. - @each $wKey, $wValue in $clone-whitespace-map-old { - [data-c-padding="#{$wKey}"] { - padding: calc(#{$clone-padding} #{$wValue}); - @media #{$clone-tablet-portrait} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - - // Shorthand ([data-c-padding=top]) -------------------------------- - // Adds an orientation shorthand that defaults to the normal whitespace value. - @each $oKey, $oValue in $clone-orientation-map { - [data-c-padding="#{$oKey}"] { - padding#{$oValue}: #{$clone-padding}; - @media #{$clone-tablet-portrait} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding#{$oValue}: calc(#{$clone-padding} * #{$clone-ws-dl}); - } - } - } - - // Shorthand ([data-c-padding="tb(normal)" ------------------------- - // Adds a top/bottom and left/right shorthand. - @each $wKey, $wValue in $clone-whitespace-map-old { - // Top/Bottom - [data-c-padding*="tb(#{$wKey})"], - [data-c-padding*="bt(#{$wKey})"] { - padding-top: calc(#{$clone-padding} #{$wValue}); - padding-bottom: calc(#{$clone-padding} #{$wValue}); - @media #{$clone-tablet-portrait} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding-top: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - padding-bottom: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - } - } - // Right/Left - [data-c-padding*="rl(#{$wKey})"], - [data-c-padding*="lr(#{$wKey})"] { - padding-right: calc(#{$clone-padding} #{$wValue}); - padding-left: calc(#{$clone-padding} #{$wValue}); - @media #{$clone-tablet-portrait} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding-right: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - padding-left: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - - // Padding Syntax -------------------------------------------------- - @each $oKey, $oValue in $clone-orientation-map { - @each $wKey, $wValue in $clone-whitespace-map-old { - [data-c-padding*="#{$oKey}(#{$wKey})"] { - padding#{$oValue}: calc(#{$clone-padding} #{$wValue}); - @media #{$clone-tablet-portrait} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tp}); - } - @media #{$clone-tablet-landscape} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-tl}); - } - @media #{$clone-desktop-small} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-ds}); - } - @media #{$clone-desktop-medium} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dm}); - } - @media #{$clone-desktop-large} { - padding#{$oValue}: calc((#{$clone-padding} #{$wValue}) * #{$clone-ws-dl}); - } - } - } - } - -// Overlays ==================================================================== -@each $key, $value in $clone-color-map { - @each $alpha in $clone-opacity-list { - $newValue: unquote($key)+"("+$alpha+")"; - [data-c-overlay="#{$newValue}"] { - background-position: center center; - background-size: cover; - position: relative; - &::before { - $decimal: $alpha / 100; - background: rgba($value, $decimal); - content: " "; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - } - * { - position: relative; - } - } - } -}; - -// Tags ======================================================================== -@each $key, $value in $clone-color-map { - [data-c-tag="#{$key}"] { - background: $value; - color: contrasting-color($value, $clone-white, $clone-black); - display: inline-block; - line-height: $clone-line-height; - padding: calc(#{$clone-padding} / 4) calc(#{$clone-padding} / 2); - vertical-align: middle; - @media #{$clone-tablet-portrait} { - padding: calc((#{$clone-padding} / 4) * #{$clone-whitespace-multiplier}) calc((#{$clone-padding} / 2) * #{$clone-whitespace-multiplier}); - } - @media #{$clone-desktop-large} { - padding: calc(((#{$clone-padding} / 4) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}) calc(((#{$clone-padding} / 2) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}); - } - @media (hover: hover) { - a:hover { - color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; - } - } - } - a[data-c-tag="#{$key}"] { - @media (hover: hover) { - &:hover { - color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; - } - } - } - // IE 11 Hover Support - &[id*="Trident/7.0"] { - [data-c-tag="#{$key}"] { - a:hover { - color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; - } - } - a[data-c-tag="#{$key}"] { - &:hover { - color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; - } - } - } -}; \ No newline at end of file diff --git a/app/scss/properties/_alignment.scss b/app/scss/properties/_alignment.scss new file mode 100644 index 0000000..9857a29 --- /dev/null +++ b/app/scss/properties/_alignment.scss @@ -0,0 +1,23 @@ +// Clone: Alignment Property + +// Deprecated Syntax +[data-c-alignment="center"], +[data-c-alignment="centre"], +[data-c-align="center"], +[data-c-align="centre"] {text-align: center;} +[data-c-alignment="right"], +[data-c-align="right"] {text-align: right;} +[data-c-alignment="left"], +[data-c-align="left"] {text-align: left;} + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $alignmentKey, $alignmentValue in $clone-alignment-map { + [data-c-alignment*="#{$mediaKey}(#{$alignmentKey})"], + [data-c-align*="#{$mediaKey}(#{$alignmentKey})"] { + text-align: $alignmentValue; + } + } + } +} \ No newline at end of file diff --git a/app/scss/properties/_background-colors.scss b/app/scss/properties/_background-colors.scss new file mode 100644 index 0000000..9b9af46 --- /dev/null +++ b/app/scss/properties/_background-colors.scss @@ -0,0 +1,33 @@ +// Clone: Background Color Property + +// Deprecated Syntax +@each $key, $value in $clone-color-map { + @each $alpha in $clone-opacity-list { + $newValue: unquote($key)+"("+$alpha+")"; + [data-c-background="#{$newValue}"] { + $decimal: $alpha / 100; + background: rgba($value, $decimal); + a:hover { + color: contrasting-color($value, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; + } + } + } +}; + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $colorKey, $colorValue in $clone-color-map { + @each $alpha in $clone-opacity-list { + $newValue: unquote($colorKey)+", "+$alpha; + $decimal: $alpha / 100; + [data-c-background-color*="#{$mediaKey}(#{$newValue})"] { + background: rgba($colorValue, $decimal); + a:hover { + color: contrasting-color($colorValue, lighten($clone-hover-color, 10%), darken($clone-hover-color, 10%)) !important; + } + } + } + }; + } +} \ No newline at end of file diff --git a/app/scss/properties/_borders.scss b/app/scss/properties/_borders.scss new file mode 100644 index 0000000..ce58216 --- /dev/null +++ b/app/scss/properties/_borders.scss @@ -0,0 +1,165 @@ +// Clone: Border Property + +// Deprecated Syntax +@each $style in $clone-border-style-list { + @each $width in $clone-border-width-list { + @each $key, $value in $clone-color-map { + [data-c-border*="all(#{$width}, #{$style}, #{$key})"] { + border-color: $value; + border-style: unquote($style); + @if ($width == "thin") { + border-width: 1px; + } + @if ($width == "thick") { + border-width: .5rem; + } + } + }; + @each $key, $value in $clone-color-map { + [data-c-border*="tb(#{$width}, #{$style}, #{$key})"], + [data-c-border*="bt(#{$width}, #{$style}, #{$key})"] { + border-top-color: $value; + border-bottom-color: $value; + border-top-style: unquote($style); + border-bottom-style: unquote($style); + @if ($width == "thin") { + border-top-width: 1px; + border-bottom-width: 1px; + } + @if ($width == "thick") { + border-top-width: .5rem; + border-bottom-width: .5rem; + } + } + }; + @each $key, $value in $clone-color-map { + [data-c-border*="rl(#{$width}, #{$style}, #{$key})"], + [data-c-border*="lr(#{$width}, #{$style}, #{$key})"] { + border-right-color: $value; + border-left-color: $value; + border-right-style: unquote($style); + border-left-style: unquote($style); + @if ($width == "thin") { + border-right-width: 1px; + border-left-width: 1px; + } + @if ($width == "thick") { + border-right-width: .5rem; + border-left-width: .5rem; + } + } + }; + @each $key, $value in $clone-color-map { + [data-c-border*="top(#{$width}, #{$style}, #{$key})"] { + border-top-color: $value; + border-top-style: unquote($style); + @if ($width == "thin") { + border-top-width: 1px; + } + @if ($width == "thick") { + border-top-width: .5rem; + } + } + }; + @each $key, $value in $clone-color-map { + [data-c-border*="right(#{$width}, #{$style}, #{$key})"] { + border-right-color: $value; + border-right-style: unquote($style); + @if ($width == "thin") { + border-right-width: 1px; + } + @if ($width == "thick") { + border-right-width: .5rem; + } + } + }; + @each $key, $value in $clone-color-map { + [data-c-border*="bottom(#{$width}, #{$style}, #{$key})"] { + border-bottom-color: $value; + border-bottom-style: unquote($style); + @if ($width == "thin") { + border-bottom-width: 1px; + } + @if ($width == "thick") { + border-bottom-width: .5rem; + } + } + }; + @each $key, $value in $clone-color-map { + [data-c-border*="left(#{$width}, #{$style}, #{$key})"] { + border-left-color: $value; + border-left-style: unquote($style); + @if ($width == "thin") { + border-left-width: 1px; + } + @if ($width == "thick") { + border-left-width: .5rem; + } + } + }; + }; +}; + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $sideKey, $sideValue in $clone-side-map { + @each $width in $clone-border-width-list { + @each $style in $clone-border-style-list { + @each $colorKey, $colorValue in $clone-color-map { + [data-c-border*="#{$mediaKey}(#{$sideKey}, #{$width}, #{$style}, #{$colorKey})"] { + @if $sideKey == "all" { + border-color: $colorValue; + border-style: unquote($style); + @if ($width == "thin") { + border-width: $clone-border-thickness-thin; + } + @if ($width == "thick") { + border-width: $clone-border-thickness-thick; + } + } + @else if $sideKey == "tb" { + border-top-color: $colorValue; + border-top-style: unquote($style); + border-bottom-color: $colorValue; + border-bottom-style: unquote($style); + @if ($width == "thin") { + border-top-width: $clone-border-thickness-thin; + border-bottom-width: $clone-border-thickness-thin; + } + @if ($width == "thick") { + border-top-width: $clone-border-thickness-thick; + border-bottom-width: $clone-border-thickness-thick; + } + } + @else if $sideKey == "rl" { + border-right-color: $colorValue; + border-right-style: unquote($style); + border-left-color: $colorValue; + border-left-style: unquote($style); + @if ($width == "thin") { + border-right-width: $clone-border-thickness-thin; + border-left-width: $clone-border-thickness-thin; + } + @if ($width == "thick") { + border-right-width: $clone-border-thickness-thick; + border-left-width: $clone-border-thickness-thick; + } + } + @else { + border#{$sideValue}-color: $colorValue; + border#{$sideValue}-style: unquote($style); + @if ($width == "thin") { + border#{$sideValue}-width: $clone-border-thickness-thin; + } + @if ($width == "thick") { + border#{$sideValue}-width: $clone-border-thickness-thick; + } + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/app/scss/properties/_cards.scss b/app/scss/properties/_cards.scss new file mode 100644 index 0000000..f526071 --- /dev/null +++ b/app/scss/properties/_cards.scss @@ -0,0 +1,4 @@ +// Clone: Card Property +[data-c-card] { + box-shadow: $clone-card-shadow +} \ No newline at end of file diff --git a/app/scss/properties/_containers.scss b/app/scss/properties/_containers.scss new file mode 100644 index 0000000..334cb07 --- /dev/null +++ b/app/scss/properties/_containers.scss @@ -0,0 +1,88 @@ +// Clone: Container Property + +// Deprecated Syntax +[data-c-container="full"] { + margin: 0 auto; + width: 90%; +} + + // Large Containers + [data-c-container="layout"], + [data-c-container="large"], + [data-c-container="large(center)"] { + margin: 0 auto; + max-width: $clone-large-layout; + width: 90%; + } + [data-c-container="large(left)"] { + margin: 0 auto auto 0; + max-width: $clone-large-layout; + width: 90%; + } + [data-c-container="large(right)"] { + margin: 0 0 auto auto; + max-width: $clone-large-layout; + width: 90%; + } + + // Medium Containers + [data-c-container="form"], + [data-c-container="medium"], + [data-c-container="medium(center)"] { + margin: 0 auto; + max-width: $clone-medium-layout; + width: 90%; + } + [data-c-container="medium(left)"] { + margin: 0 auto auto 0; + max-width: $clone-medium-layout; + width: 90%; + } + [data-c-container="medium(right)"] { + margin: 0 0 auto auto; + max-width: $clone-medium-layout; + width: 90%; + } + + // Small Containers + [data-c-container="copy"], + [data-c-container="small"], + [data-c-container="small(center)"] { + margin: 0 auto; + max-width: $clone-small-layout; + width: 90%; + } + [data-c-container="small(left)"] { + margin: 0 auto auto 0; + max-width: $clone-small-layout; + width: 90%; + } + [data-c-container="small(right)"] { + margin: 0 0 auto auto; + max-width: $clone-small-layout; + width: 90%; + } + +// 3.0 Syntax +[data-c-container*="pp"], +[data-c-container*="pl"], +[data-c-container*="tl"], +[data-c-container*="tp"], +[data-c-container*="ds"], +[data-c-container*="dm"], +[data-c-container*="dl"] { + margin: 0 auto; + width: 90%; +} +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $sizeKey, $sizeValue in $clone-container-size-map { + @each $alignmentKey, $alignmentValue in $clone-alignment-value-map { + [data-c-container*="#{$mediaKey}(#{$sizeKey}, #{$alignmentKey})"] { + margin: $alignmentValue; + max-width: $sizeValue; + } + } + } + } +} \ No newline at end of file diff --git a/app/scss/properties/_display.scss b/app/scss/properties/_display.scss new file mode 100644 index 0000000..0e08669 --- /dev/null +++ b/app/scss/properties/_display.scss @@ -0,0 +1,35 @@ +// Clone: Display Property + +// Deprecated Syntax +[data-c-display="block"] { + display: block; +} +[data-c-display="inline"] { + display: inline; +} +[data-c-display="inline-block"] { + display: inline-block; +} +[data-c-display="table"] { + display: table; +} +[data-c-display="grid"] { + display: grid; +} +[data-c-display="flex"] { + display: flex; +} +[data-c-display="none"] { + display: none; +} + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $display in $clone-display-list { + [data-c-display*="#{$mediaKey}(#{$display})"] { + display: $display; + } + } + } +} \ No newline at end of file diff --git a/app/scss/properties/_horizontal-rules.scss b/app/scss/properties/_horizontal-rules.scss new file mode 100644 index 0000000..cb7d890 --- /dev/null +++ b/app/scss/properties/_horizontal-rules.scss @@ -0,0 +1,41 @@ +// Clone: Horizontal Rule Property +[data-c-hr] { + background: $clone-hr-color; + border: none; + height: $clone-border-thickness-thin; + outline: none; +} + +// Deprecated Syntax +@each $width in $clone-border-width-list { + @each $colorKey, $colorValue in $clone-color-map { + [data-c-hr*="#{$width}(#{$colorKey})"] { + background: $colorValue; + @if ($width == "thin") { + height: $clone-border-thickness-thin; + } + @if ($width == "thick") { + height: $clone-border-thickness-thick; + } + } + }; +}; + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $width in $clone-border-width-list { + @each $colorKey, $colorValue in $clone-color-map { + [data-c-hr*="#{$mediaKey}(#{$width}, #{$colorKey})"] { + background: $colorValue; + @if ($width == "thin") { + height: $clone-border-thickness-thin; + } + @if ($width == "thick") { + height: $clone-border-thickness-thick; + } + } + }; + }; + } +} \ No newline at end of file diff --git a/app/scss/properties/_margins.scss b/app/scss/properties/_margins.scss new file mode 100644 index 0000000..9b974a2 --- /dev/null +++ b/app/scss/properties/_margins.scss @@ -0,0 +1,337 @@ +// Clone: Margin Property + +// Deprecated Syntax + + // Vars + $clone-ws-base: #{$clone-whitespace-multiplier} !default; + $clone-ws-pp: #{$clone-whitespace-multiplier} !default; + $clone-ws-pl: #{$clone-whitespace-multiplier} !default; + $clone-ws-tp: #{$clone-whitespace-multiplier} !default; + $clone-ws-tl: #{$clone-ws-tp} * #{$clone-whitespace-multiplier} !default; + $clone-ws-ds: #{$clone-ws-tl} * #{$clone-whitespace-multiplier} !default; + $clone-ws-dm: #{$clone-ws-ds} * #{$clone-whitespace-multiplier} !default; + $clone-ws-dl: #{$clone-ws-dm} * #{$clone-whitespace-multiplier} !default; + + // Old Syntax ---------------------------------------------------------- + + // Shorthand ([data-c-margin=normal]) ------------------------------ + // Adds a whitespace shorthand that defaults to all sides of the element. + @each $wKey, $wValue in $clone-whitespace-map-old { + [data-c-margin="#{$wKey}"] { + margin: calc(#{$clone-margin-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + + // Shorthand ([data-c-margin=top]) --------------------------------- + // Adds an orientation shorthand that defaults to the normal whitespace value. + @each $oKey, $oValue in $clone-orientation-map { + [data-c-margin="#{$oKey}"] { + margin#{$oValue}: #{$clone-margin-old}; + @media #{$clone-tablet-portrait} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-dl}); + } + } + } + + // Shorthand ([data-c-margin="tb(normal)" -------------------------- + // Adds a top/bottom and left/right shorthand. + @each $wKey, $wValue in $clone-whitespace-map-old { + // Top/Bottom + [data-c-margin*="tb(#{$wKey})"], + [data-c-margin*="bt(#{$wKey})"] { + margin-top: calc(#{$clone-margin-old} #{$wValue}); + margin-bottom: calc(#{$clone-margin-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + // Right/Left + [data-c-margin*="rl(#{$wKey})"], + [data-c-margin*="lr(#{$wKey})"] { + margin-right: calc(#{$clone-margin-old} #{$wValue}); + margin-left: calc(#{$clone-margin-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + + // Margin Syntax --------------------------------------------------- + @each $oKey, $oValue in $clone-orientation-map { + @each $wKey, $wValue in $clone-whitespace-map-old { + [data-c-margin*="#{$oKey}(#{$wKey})"] { + margin#{$oValue}: calc(#{$clone-margin-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + } + + // New Syntax ---------------------------------------------------------- + + // Shorthand ([data-c-margin=normal]) ------------------------------ + // Adds a whitespace shorthand that defaults to all sides of the element. + @each $wKey, $wValue in $clone-whitespace-map { + [data-c-margin="#{$wKey}"] { + margin: calc(#{$clone-margin-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + + // Shorthand ([data-c-margin=top]) --------------------------------- + // Adds an orientation shorthand that defaults to the normal whitespace value. + @each $oKey, $oValue in $clone-orientation-map { + [data-c-margin="#{$oKey}"] { + margin#{$oValue}: #{$clone-margin-old}; + @media #{$clone-tablet-portrait} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin#{$oValue}: calc(#{$clone-margin-old} * #{$clone-ws-dl}); + } + } + } + + // Shorthand ([data-c-margin="tb(normal)" -------------------------- + // Adds a top/bottom and left/right shorthand. + @each $wKey, $wValue in $clone-whitespace-map { + // Top/Bottom + [data-c-margin*="tb(#{$wKey})"], + [data-c-margin*="bt(#{$wKey})"] { + margin-top: calc(#{$clone-margin-old} #{$wValue}); + margin-bottom: calc(#{$clone-margin-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin-top: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + margin-bottom: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + // Right/Left + [data-c-margin*="rl(#{$wKey})"], + [data-c-margin*="lr(#{$wKey})"] { + margin-right: calc(#{$clone-margin-old} #{$wValue}); + margin-left: calc(#{$clone-margin-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin-right: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + margin-left: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + + // Margin Syntax --------------------------------------------------- + @each $oKey, $oValue in $clone-orientation-map { + @each $wKey, $wValue in $clone-whitespace-map { + [data-c-margin*="#{$oKey}(#{$wKey})"] { + margin#{$oValue}: calc(#{$clone-margin-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + margin#{$oValue}: calc((#{$clone-margin-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + } + + // Auto Margins -------------------------------------------------------- + [data-c-margin*="right(auto)"] { + margin-right: auto; + } + + [data-c-margin*="left(auto)"] { + margin-left: auto; + } + + // Right/Left Auto + [data-c-margin*="rl(auto)"], + [data-c-margin*="lr(auto)"] { + margin-right: auto; + margin-left: auto; + } + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $sideKey, $sideValue in $clone-side-map { + @each $whitespaceKey, $whitespaceValue in $clone-whitespace-map { + [data-c-margin*="#{$mediaKey}(#{$sideKey}, #{$whitespaceKey})"] { + @if $sideKey == "all" { + margin: calc(#{$clone-margin} #{$whitespaceValue}); + } + @else if $sideKey == "tb" { + margin-top: calc(#{$clone-margin} #{$whitespaceValue}); + margin-bottom: calc(#{$clone-margin} #{$whitespaceValue}); + } + @else if $sideKey == "rl" { + margin-right: calc(#{$clone-margin} #{$whitespaceValue}); + margin-left: calc(#{$clone-margin} #{$whitespaceValue}); + } + @else { + margin#{$sideValue}: calc(#{$clone-margin} #{$whitespaceValue}); + } + } + } + } + } +} + +// Auto Margins +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $sideKey, $sideValue in $clone-side-map { + [data-c-margin*="#{$mediaKey}(#{$sideKey}, auto)"] { + @if $sideKey == "all" { + margin: auto; + } + @else if $sideKey == "tb" { + margin-top: auto; + margin-bottom: auto; + } + @else if $sideKey == "rl" { + margin-right: auto; + margin-left: auto; + } + @else { + margin#{$sideValue}: auto; + } + } + } + } +} \ No newline at end of file diff --git a/app/scss/properties/_overlays.scss b/app/scss/properties/_overlays.scss new file mode 100644 index 0000000..e00977f --- /dev/null +++ b/app/scss/properties/_overlays.scss @@ -0,0 +1,57 @@ +// Clone: Overlay Property + +// Deprecated Syntax +@each $key, $value in $clone-color-map { + @each $alpha in $clone-opacity-list { + $newValue: unquote($key)+"("+$alpha+")"; + [data-c-overlay="#{$newValue}"] { + background-position: center center; + background-size: cover; + position: relative; + &::before { + $decimal: $alpha / 100; + background: rgba($value, $decimal); + content: " "; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + } + * { + position: relative; + } + } + } +}; + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $colorKey, $colorValue in $clone-color-map { + @each $alpha in $clone-opacity-list { + $newValue: unquote($colorKey)+", "+$alpha; + [data-c-overlay="#{$mediaKey}(#{$newValue})"] { + background-position: center center; + background-size: cover; + position: relative; + &::before { + $decimal: $alpha / 100; + background: rgba($colorValue, $decimal); + content: " "; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + } + * { + position: relative; + } + } + } + } + } +} \ No newline at end of file diff --git a/app/scss/properties/_padding.scss b/app/scss/properties/_padding.scss new file mode 100644 index 0000000..d1cfd0a --- /dev/null +++ b/app/scss/properties/_padding.scss @@ -0,0 +1,285 @@ +// Clone: Padding Property + + // Old Syntax ---------------------------------------------------------- + + // Shorthand ([data-c-padding=normal]) ----------------------------- + // Adds a whitespace shorthand that defaults to all sides of the element. + @each $wKey, $wValue in $clone-whitespace-map-old { + [data-c-padding="#{$wKey}"] { + padding: calc(#{$clone-padding-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + + // Shorthand ([data-c-padding=top]) -------------------------------- + // Adds an orientation shorthand that defaults to the normal whitespace value. + @each $oKey, $oValue in $clone-orientation-map { + [data-c-padding="#{$oKey}"] { + padding#{$oValue}: #{$clone-padding-old}; + @media #{$clone-tablet-portrait} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-dl}); + } + } + } + + // Shorthand ([data-c-padding="tb(normal)" ------------------------- + // Adds a top/bottom and left/right shorthand. + @each $wKey, $wValue in $clone-whitespace-map-old { + // Top/Bottom + [data-c-padding*="tb(#{$wKey})"], + [data-c-padding*="bt(#{$wKey})"] { + padding-top: calc(#{$clone-padding-old} #{$wValue}); + padding-bottom: calc(#{$clone-padding-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + // Right/Left + [data-c-padding*="rl(#{$wKey})"], + [data-c-padding*="lr(#{$wKey})"] { + padding-right: calc(#{$clone-padding-old} #{$wValue}); + padding-left: calc(#{$clone-padding-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + + // Padding Syntax -------------------------------------------------- + @each $oKey, $oValue in $clone-orientation-map { + @each $wKey, $wValue in $clone-whitespace-map-old { + [data-c-padding*="#{$oKey}(#{$wKey})"] { + padding#{$oValue}: calc(#{$clone-padding-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + } + + // New Syntax ---------------------------------------------------------- + + // Shorthand ([data-c-padding=normal]) --------------------------------- + // Adds a whitespace shorthand that defaults to all sides of the element. + @each $wKey, $wValue in $clone-whitespace-map { + [data-c-padding="#{$wKey}"] { + padding: calc(#{$clone-padding-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + + // Shorthand ([data-c-padding=top]) ------------------------------------ + // Adds an orientation shorthand that defaults to the normal whitespace value. + @each $oKey, $oValue in $clone-orientation-map { + [data-c-padding="#{$oKey}"] { + padding#{$oValue}: #{$clone-padding-old}; + @media #{$clone-tablet-portrait} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding#{$oValue}: calc(#{$clone-padding-old} * #{$clone-ws-dl}); + } + } + } + + // Shorthand ([data-c-padding="tb(normal)" ----------------------------- + // Adds a top/bottom and left/right shorthand. + @each $wKey, $wValue in $clone-whitespace-map { + // Top/Bottom + [data-c-padding*="tb(#{$wKey})"], + [data-c-padding*="bt(#{$wKey})"] { + padding-top: calc(#{$clone-padding-old} #{$wValue}); + padding-bottom: calc(#{$clone-padding-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding-top: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + padding-bottom: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + // Right/Left + [data-c-padding*="rl(#{$wKey})"], + [data-c-padding*="lr(#{$wKey})"] { + padding-right: calc(#{$clone-padding-old} #{$wValue}); + padding-left: calc(#{$clone-padding-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding-right: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + padding-left: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + + // Padding Syntax ------------------------------------------------------ + @each $oKey, $oValue in $clone-orientation-map { + @each $wKey, $wValue in $clone-whitespace-map { + [data-c-padding*="#{$oKey}(#{$wKey})"] { + padding#{$oValue}: calc(#{$clone-padding-old} #{$wValue}); + @media #{$clone-tablet-portrait} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tp}); + } + @media #{$clone-tablet-landscape} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-tl}); + } + @media #{$clone-desktop-small} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-ds}); + } + @media #{$clone-desktop-medium} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dm}); + } + @media #{$clone-desktop-large} { + padding#{$oValue}: calc((#{$clone-padding-old} #{$wValue}) * #{$clone-ws-dl}); + } + } + } + } + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $sideKey, $sideValue in $clone-side-map { + @each $whitespaceKey, $whitespaceValue in $clone-whitespace-map { + [data-c-padding*="#{$mediaKey}(#{$sideKey}, #{$whitespaceKey})"] { + @if $sideKey == "all" { + padding: calc(#{$clone-padding} #{$whitespaceValue}); + } + @else if $sideKey == "tb" { + padding-top: calc(#{$clone-padding} #{$whitespaceValue}); + padding-bottom: calc(#{$clone-padding} #{$whitespaceValue}); + } + @else if $sideKey == "rl" { + padding-right: calc(#{$clone-padding} #{$whitespaceValue}); + padding-left: calc(#{$clone-padding} #{$whitespaceValue}); + } + @else { + padding#{$sideValue}: calc(#{$clone-padding} #{$whitespaceValue}); + } + } + } + } + } +} \ No newline at end of file diff --git a/app/scss/properties/_radius.scss b/app/scss/properties/_radius.scss new file mode 100644 index 0000000..ef8b9f9 --- /dev/null +++ b/app/scss/properties/_radius.scss @@ -0,0 +1,25 @@ +// Clone: Radius Property + +// Deprecated Syntax +[data-c-radius="rounded"] { + border-radius: 5px; + overflow: hidden; +} +[data-c-radius="pill"] { + border-radius: 20rem; + overflow: hidden; +} + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + [data-c-radius="#{$mediaKey}(rounded)"] { + border-radius: $clone-border-radius-rounded; + overflow: hidden; + } + [data-c-radius="#{$mediaKey}(pill)"] { + border-radius: $clone-border-radius-pill; + overflow: hidden; + } + } +} \ No newline at end of file diff --git a/app/scss/properties/_typography.scss b/app/scss/properties/_typography.scss new file mode 100644 index 0000000..76a526b --- /dev/null +++ b/app/scss/properties/_typography.scss @@ -0,0 +1,162 @@ +// Clone: Typography Properties + + // Font Family + + // Deprecated Syntax + [data-c-font="sans"] { + font-family: $clone-font-sans; + a, span { + font-family: $clone-font-sans; + } + } + [data-c-font="serif"] { + font-family: $clone-font-serif; + a, span { + font-family: $clone-font-serif; + } + } + [data-c-font="script"] { + font-family: $clone-font-script; + a, span { + font-family: $clone-font-script; + } + } + [data-c-font="mono"], + [data-c-font="monospace"] { + font-family: $clone-font-monospace; + a, span { + font-family: $clone-font-monospace; + } + } + + // 3.0 Syntax + @each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $fontFamilyKey, $fontFamilyValue in $clone-font-family-map { + [data-c-font="#{$mediaKey}(#{$fontFamilyKey})"] { + font-family: $fontFamilyValue; + a, span { + font-family: $fontFamilyValue; + } + } + } + } + } + + // Font Size + + // Deprecated Syntax + @each $fontSizeKey, $fontSizeValue in $clone-font-size-map { + [data-c-font-size="#{$fontSizeKey}"] { + font-size: $fontSizeValue; + } + } + + // 3.0 Syntax + @each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $fontSizeKey, $fontSizeValue in $clone-font-size-map { + [data-c-font-size*="#{$mediaKey}(#{$fontSizeKey})"] { + font-size: $fontSizeValue; + } + } + } + } + + // Font Color + + // Deprecated Syntax + @each $key, $value in $clone-color-map { + [data-c-color="#{$key}"], + [data-c-colour="#{$key}"] {color: $value;} + }; + + // 3.0 Syntax + @each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $colorKey, $colorValue in $clone-color-map { + [data-c-color*="#{$mediaKey}(#{$colorKey})"], + [data-c-colour*="#{$mediaKey}(#{$colorKey})"] { + color: $colorValue; + } + } + } + } + + // Font Weight + + // Deprecated Syntax + @each $key, $value in $clone-weight-map { + [data-c-font-weight="#{$key}"] {font-weight: $value;} + }; + + // 3.0 Syntax + @each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $weightKey, $weightValue in $clone-weight-map { + [data-c-font-weight*="#{$mediaKey}(#{$weightKey})"] { + font-weight: $weightValue; + } + } + } + } + + // Font Style + + // Deprecated Syntax + [data-c-font-style="reset"] { + font-style: normal; + text-decoration: none currentcolor solid; + } + [data-c-font-style="italic"] { + font-style: italic; + } + [data-c-font-style="underline"] { + text-decoration: underline; + } + + // 3.0 Syntax + @each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + [data-c-font-style*="#{$mediaKey}(reset)"] { + font-style: normal; + text-decoration: none currentcolor solid; + } + [data-c-font-style*="#{$mediaKey}(italic)"] { + font-style: italic; + } + [data-c-font-style*="#{$mediaKey}(underline)"] { + text-decoration: underline; + } + } + } + + // Hover Color + + // Deprecated Syntax + @each $key, $value in $clone-color-map { + [data-c-hover-color="#{$key}"]:hover, + [data-c-hover-colour="#{$key}"]:hover {color: $value;} + }; + @each $key, $value in $clone-color-map { + a[data-c-hover-color="#{$key}"]:hover, + a[data-c-hover-colour="#{$key}"]:hover {color: $value !important;} + }; + + // 3.0 Syntax + @each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + @each $colorKey, $colorValue in $clone-color-map { + [data-c-hover-color*="#{$mediaKey}(#{$colorKey})"]:hover, + [data-c-hover-colour*="#{$mediaKey}(#{$colorKey})"]:hover { + color: $colorValue; + } + }; + @each $colorKey, $colorValue in $clone-color-map { + a[data-c-hover-color*="#{$mediaKey}(#{$colorKey})"]:hover, + a[data-c-hover-colour*="#{$mediaKey}(#{$colorKey})"]:hover { + color: $colorValue !important; + } + }; + } + } \ No newline at end of file diff --git a/app/scss/properties/_visibility.scss b/app/scss/properties/_visibility.scss new file mode 100644 index 0000000..50932a8 --- /dev/null +++ b/app/scss/properties/_visibility.scss @@ -0,0 +1,33 @@ +// Clone: Visibility Property + +// Deprecated Syntax +[data-c-visibility="invisible"] { + height: 1px; + overflow: hidden; + position: absolute; + top: 0; + left: -100vw; + width: 1px; +} +[data-c-visibility="hidden"] { + display: none; + visibility: hidden; +} + +// 3.0 Syntax +@each $mediaKey, $mediaValue in $clone-media-query-map { + @media #{$mediaValue} { + [data-c-visibility*="#{$mediaKey}(invisible)"]{ + height: 1px; + overflow: hidden; + position: absolute; + top: 0; + left: -100vw; + width: 1px; + } + [data-c-visibility*="#{$mediaKey}(hidden)"] { + display: none; + visibility: hidden; + } + } +} \ No newline at end of file diff --git a/app/scss/variables.txt b/app/scss/variables.txt index 18587eb..00ddd50 100644 --- a/app/scss/variables.txt +++ b/app/scss/variables.txt @@ -24,11 +24,6 @@ $clone-margin: 1rem; $clone-padding: 1rem; // Calculation Variables $clone-whitespace-multiplier: 1.1; - $clone-ws-tp: #{$clone-whitespace-multiplier}; // 1.4rem - $clone-ws-tl: #{$clone-ws-tp} * #{$clone-whitespace-multiplier}; // 1.68rem - $clone-ws-ds: #{$clone-ws-tl} * #{$clone-whitespace-multiplier}; // 2.016rem - $clone-ws-dm: #{$clone-ws-ds} * #{$clone-whitespace-multiplier}; // 2.4192rem - $clone-ws-dl: #{$clone-ws-dm} * #{$clone-whitespace-multiplier}; // 2.90304rem // Grid Variables $clone-grid-columns: 12; // Main Color Variables @@ -115,6 +110,11 @@ $clone-grid-columns: 12; $clone-heading-5-font: $clone-font-sans; $clone-heading-5-font-size: $clone-font-scale-h5; $clone-heading-5-font-weight: bold; +// Border Options +$clone-border-thickness-thin: 1px; +$clone-border-thickness-thick: .5rem; +$clone-border-radius-rounded: 5px; +$clone-border-radius-pill: 20rem; // Component Options // Cards $clone-card-shadow: 0 3px 5px rgba(0, 0, 0, .5); diff --git a/app/twig/components/accordion.twig b/app/twig/components/accordion.twig index 7596e59..af6d005 100644 --- a/app/twig/components/accordion.twig +++ b/app/twig/components/accordion.twig @@ -4,18 +4,18 @@
-