diff --git a/app/clone-gridless.scss b/app/clone-gridless.scss new file mode 100644 index 0000000..b2f50ac --- /dev/null +++ b/app/clone-gridless.scss @@ -0,0 +1,41 @@ +// Clone / System SCSS + +// Core +@import "core/clone"; + +// Properties +@import "properties/alignment/alignment"; +@import "properties/background-colors/background-colors"; +@import "properties/borders/borders"; +@import "properties/display/display"; +@import "properties/fonts/fonts"; +@import "properties/hover-colors/hover-colors"; +@import "properties/margins/margins"; +@import "properties/padding/padding"; +@import "properties/radius/radius"; +@import "properties/visibility/visibility"; + +// Components +@import "components/accordions/accordions"; +@import "components/alerts/alerts"; +@import "components/blockquotes/blockquotes"; +@import "components/buttons/buttons"; +@import "components/cards/cards"; +@import "components/carousels/carousels"; +@import "components/code-blocks/code-blocks"; +@import "components/containers/containers"; +@import "components/dialogs/dialogs"; +// @import "components/flexbox-grid/flexbox-grid"; +@import "components/form-elements/form-elements"; +@import "components/horizontal-rules/horizontal-rules"; +@import "components/iframes/iframes"; +@import "components/overlays/overlays"; +@import "components/pullquotes/pullquotes"; +@import "components/skip-to-content-links/skip-to-content-links"; +@import "components/tables/tables"; +@import "components/tags/tags"; + +// Patterns +@import "patterns/breadcrumbs/breadcrumbs"; +@import "patterns/menus/menus"; +@import "patterns/sidebars/sidebars"; \ No newline at end of file diff --git a/app/clone.scss b/app/clone.scss new file mode 100644 index 0000000..672ce4f --- /dev/null +++ b/app/clone.scss @@ -0,0 +1,41 @@ +// Clone / System SCSS + +// Core +@import "core/clone"; + +// Properties +@import "properties/alignment/alignment"; +@import "properties/background-colors/background-colors"; +@import "properties/borders/borders"; +@import "properties/display/display"; +@import "properties/fonts/fonts"; +@import "properties/hover-colors/hover-colors"; +@import "properties/margins/margins"; +@import "properties/padding/padding"; +@import "properties/radius/radius"; +@import "properties/visibility/visibility"; + +// Components +@import "components/accordions/accordions"; +@import "components/alerts/alerts"; +@import "components/blockquotes/blockquotes"; +@import "components/buttons/buttons"; +@import "components/cards/cards"; +@import "components/carousels/carousels"; +@import "components/code-blocks/code-blocks"; +@import "components/containers/containers"; +@import "components/dialogs/dialogs"; +@import "components/flexbox-grid/flexbox-grid"; +@import "components/form-elements/form-elements"; +@import "components/horizontal-rules/horizontal-rules"; +@import "components/iframes/iframes"; +@import "components/overlays/overlays"; +@import "components/pullquotes/pullquotes"; +@import "components/skip-to-content-links/skip-to-content-links"; +@import "components/tables/tables"; +@import "components/tags/tags"; + +// Patterns +@import "patterns/breadcrumbs/breadcrumbs"; +@import "patterns/menus/menus"; +@import "patterns/sidebars/sidebars"; \ 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..f754982 --- /dev/null +++ b/app/components/accordions/_accordions.scss @@ -0,0 +1,121 @@ +// Clone / Components / Accordions + +[data-clone] { + + [data-c-accordion-group] { + [data-c-accordion="accordion"], + [data-c-accordion=""], + [data-c-accordion="true"] { + [data-c-accordion="trigger"], + [data-c-accordion-trigger] { + background: none; + border: none; + cursor: pointer; + padding-right: 5rem; + position: relative; + text-align: left; + width: 100%; + + // Old + [data-c-accordion*="icon"] { + font-size: $clone-font-scale-h4; + position: absolute; + 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; + position: absolute; + top: 50%; + right: 2rem; + transform: translate(0, -50%); + } + [data-c-accordion-remove] { + display: none; + 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+")"; + &[data-c-background="#{$newValue}"] { + $decimal: $alpha / 100; + background: rgba($value, $decimal) + } + } + } + + } + [data-c-accordion="content"], + [data-c-accordion-content] { + display: none; + form { + padding-bottom: 0; + } + } + + // States + &.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] { + display: none; + } + [data-c-accordion-remove] { + display: block; + } + + } + [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) { + background: $clone-accordion-alternating-background-color; + } + } + } + [data-c-accordion-group="alt"] { + [data-c-accordion] { + &:nth-child(odd) { + background: $clone-accordion-alternating-background-color; + } + } + } + +} \ No newline at end of file diff --git a/app/twig/components/accordion.twig b/app/components/accordions/accordions.html similarity index 55% rename from app/twig/components/accordion.twig rename to app/components/accordions/accordions.html index 7596e59..be02ab9 100644 --- a/app/twig/components/accordion.twig +++ b/app/components/accordions/accordions.html @@ -1,22 +1,21 @@ -
- +
- This input has an error. -
+
\ No newline at end of file diff --git a/app/components/form-elements/number-inputs/number-inputs.js b/app/components/form-elements/number-inputs/number-inputs.js new file mode 100644 index 0000000..0933d4f --- /dev/null +++ b/app/components/form-elements/number-inputs/number-inputs.js @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Number Inputs \ No newline at end of file diff --git a/app/components/form-elements/password-inputs/_password-inputs.scss b/app/components/form-elements/password-inputs/_password-inputs.scss new file mode 100644 index 0000000..25a00c2 --- /dev/null +++ b/app/components/form-elements/password-inputs/_password-inputs.scss @@ -0,0 +1,43 @@ +// Clone / Components / Form Elements / Password Inputs + +[data-clone] { + + [data-c-input*="password"] { + >div { + position: relative; + input { + padding-right: 3rem; + } + button { + appearance: none; + background: none; + border: none; + color: $clone-black; + cursor: pointer; + position: absolute; + top: 50%; + right: 1rem; + transform: translate(0, -50%); + i:first-child { + display: block; + } + i:last-child { + display: none; + } + } + } + &[data-c-input*="--visible"] { + >div { + button { + i:first-child { + display: none; + } + i:last-child { + display: block; + } + } + } + } + } + +} \ No newline at end of file diff --git a/app/twig/components/input/password.twig b/app/components/form-elements/password-inputs/password-inputs.html similarity index 100% rename from app/twig/components/input/password.twig rename to app/components/form-elements/password-inputs/password-inputs.html diff --git a/app/components/form-elements/password-inputs/password-inputs.js b/app/components/form-elements/password-inputs/password-inputs.js new file mode 100644 index 0000000..ec5a9d0 --- /dev/null +++ b/app/components/form-elements/password-inputs/password-inputs.js @@ -0,0 +1,16 @@ +// Clone / Components / Form Elements / Password Inputs + +$(document).ready(function () { + $(("[data-c-input*='password']") + " button").on("click", function (e) { + e.preventDefault(); + var x = $(this).siblings("input"); + if (x.attr("type") === "password") { + x.attr("type", "text"); + x.parents("[data-c-input*='password']").attr("data-c-input", "password--visible"); + } + else { + x.attr("type", "password"); + x.parents("[data-c-input*='password']").attr("data-c-input", "password"); + } + }); +}); \ No newline at end of file diff --git a/app/components/form-elements/radio-inputs/_radio-inputs.scss b/app/components/form-elements/radio-inputs/_radio-inputs.scss new file mode 100644 index 0000000..30a0212 --- /dev/null +++ b/app/components/form-elements/radio-inputs/_radio-inputs.scss @@ -0,0 +1,42 @@ +// Clone / Components / Form Elements / Radio Inputs + +[data-clone] { + + [data-c-input="radio"] { + >div { + border: 1px solid $clone-gray; + border-radius: 5px; + margin-top: .5rem; + margin-bottom: 1.5rem; + 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}); + } + label { + cursor: pointer; + display: block; + margin: 0 !important; + padding-top: .25rem !important; + padding-bottom: .25rem !important; + input { + display: inline-block; + margin-top: .4rem; + width: auto; + vertical-align: top; + } + span { + color: $clone-black; + display: inline-block; + font-size: $clone-default-font-size; + margin: 0; + max-width: 90%; + padding-left: .5rem; + } + } + } + } + +} \ No newline at end of file diff --git a/app/twig/components/input/radio.twig b/app/components/form-elements/radio-inputs/radio-inputs.html similarity index 99% rename from app/twig/components/input/radio.twig rename to app/components/form-elements/radio-inputs/radio-inputs.html index 192ec7e..b4098d7 100644 --- a/app/twig/components/input/radio.twig +++ b/app/components/form-elements/radio-inputs/radio-inputs.html @@ -20,4 +20,4 @@ This input has an error. - + \ No newline at end of file diff --git a/app/components/form-elements/radio-inputs/radio-inputs.js b/app/components/form-elements/radio-inputs/radio-inputs.js new file mode 100644 index 0000000..b1ac8f9 --- /dev/null +++ b/app/components/form-elements/radio-inputs/radio-inputs.js @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Radio Inputs \ No newline at end of file diff --git a/app/components/form-elements/select-inputs/_select-inputs.scss b/app/components/form-elements/select-inputs/_select-inputs.scss new file mode 100644 index 0000000..058d286 --- /dev/null +++ b/app/components/form-elements/select-inputs/_select-inputs.scss @@ -0,0 +1,43 @@ +// Clone / Components / Form Elements / Select Inputs + +[data-clone] { + + [data-c-input="dropdown"], + [data-c-input="select"] { + >div { + position: relative; + i { + color: $clone-black; + position: absolute; + top: 50%; + right: 1rem; + pointer-events: none; + transform: translate(0, -50%); + z-index: 1; + } + select { + appearance: none; + border: 1px solid $clone-gray; + border-radius: 5px; + color: $clone-black; + cursor: pointer; + display: block; + font-size: $clone-default-font-size; + outline: none; + margin-bottom: 1.4rem; + width: 100%; + padding: calc(#{$clone-padding} / 2) 3rem calc(#{$clone-padding} / 2) #{$clone-padding}; + @media #{$clone-tablet-portrait} { + padding: calc((#{$clone-padding} / 2) * #{$clone-whitespace-multiplier}) 3rem 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}) 3rem calc(((#{$clone-padding} / 2) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}) calc((#{$clone-padding} * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}); + } + &:focus { + border: 1px solid $clone-c1; + } + } + } + } + +} \ No newline at end of file diff --git a/app/twig/components/input/dropdown.twig b/app/components/form-elements/select-inputs/select-inputs.html similarity index 98% rename from app/twig/components/input/dropdown.twig rename to app/components/form-elements/select-inputs/select-inputs.html index 0679c96..6a60667 100644 --- a/app/twig/components/input/dropdown.twig +++ b/app/components/form-elements/select-inputs/select-inputs.html @@ -18,4 +18,4 @@ This input has an error. - + \ No newline at end of file diff --git a/app/components/form-elements/select-inputs/select-inputs.js b/app/components/form-elements/select-inputs/select-inputs.js new file mode 100644 index 0000000..ab77a9b --- /dev/null +++ b/app/components/form-elements/select-inputs/select-inputs.js @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Select Inputs \ No newline at end of file diff --git a/app/components/form-elements/telephone-inputs/_telephone-inputs.scss b/app/components/form-elements/telephone-inputs/_telephone-inputs.scss new file mode 100644 index 0000000..13ce527 --- /dev/null +++ b/app/components/form-elements/telephone-inputs/_telephone-inputs.scss @@ -0,0 +1 @@ +// Components / Clone / Form Elements / Telephone Inputs \ No newline at end of file diff --git a/app/twig/components/input/telephone.twig b/app/components/form-elements/telephone-inputs/telephone-inputs.html similarity index 100% rename from app/twig/components/input/telephone.twig rename to app/components/form-elements/telephone-inputs/telephone-inputs.html diff --git a/app/components/form-elements/telephone-inputs/telephone-inputs.js b/app/components/form-elements/telephone-inputs/telephone-inputs.js new file mode 100644 index 0000000..13ce527 --- /dev/null +++ b/app/components/form-elements/telephone-inputs/telephone-inputs.js @@ -0,0 +1 @@ +// Components / Clone / Form Elements / Telephone Inputs \ No newline at end of file diff --git a/app/components/form-elements/text-inputs-with-buttons/_text-inputs-with-buttons.scss b/app/components/form-elements/text-inputs-with-buttons/_text-inputs-with-buttons.scss new file mode 100644 index 0000000..79d1866 --- /dev/null +++ b/app/components/form-elements/text-inputs-with-buttons/_text-inputs-with-buttons.scss @@ -0,0 +1,28 @@ +// Clone / Components / Form Elements / Text Inputs with Buttons + +[data-clone] { + + [data-c-input="button"] { + >div { + input { + border-radius: 5px 0 0 5px; + border-right: none; + margin-bottom: 0; + } + button { + border-radius: 0 5px 5px 0; + display: block; + font-size: $clone-default-font-size; + outline: none; + 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}); + } + } + } + } + +} \ No newline at end of file diff --git a/app/twig/components/input/text-with-button.twig b/app/components/form-elements/text-inputs-with-buttons/text-inputs-with-buttons.html similarity index 98% rename from app/twig/components/input/text-with-button.twig rename to app/components/form-elements/text-inputs-with-buttons/text-inputs-with-buttons.html index ac30de7..727472b 100644 --- a/app/twig/components/input/text-with-button.twig +++ b/app/components/form-elements/text-inputs-with-buttons/text-inputs-with-buttons.html @@ -15,4 +15,4 @@ This input has an error. - + \ No newline at end of file diff --git a/app/components/form-elements/text-inputs-with-buttons/text-inputs-with-buttons.js b/app/components/form-elements/text-inputs-with-buttons/text-inputs-with-buttons.js new file mode 100644 index 0000000..812ae27 --- /dev/null +++ b/app/components/form-elements/text-inputs-with-buttons/text-inputs-with-buttons.js @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Text Inputs with Buttons \ No newline at end of file diff --git a/app/components/form-elements/text-inputs/_text-inputs.scss b/app/components/form-elements/text-inputs/_text-inputs.scss new file mode 100644 index 0000000..e1674a2 --- /dev/null +++ b/app/components/form-elements/text-inputs/_text-inputs.scss @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Text Inputs \ No newline at end of file diff --git a/app/twig/components/input/text.twig b/app/components/form-elements/text-inputs/text-inputs.html similarity index 100% rename from app/twig/components/input/text.twig rename to app/components/form-elements/text-inputs/text-inputs.html diff --git a/app/components/form-elements/text-inputs/text-inputs.js b/app/components/form-elements/text-inputs/text-inputs.js new file mode 100644 index 0000000..e1674a2 --- /dev/null +++ b/app/components/form-elements/text-inputs/text-inputs.js @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Text Inputs \ No newline at end of file diff --git a/app/components/form-elements/textareas/_textareas.scss b/app/components/form-elements/textareas/_textareas.scss new file mode 100644 index 0000000..3c45846 --- /dev/null +++ b/app/components/form-elements/textareas/_textareas.scss @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Textareas \ No newline at end of file diff --git a/app/twig/components/input/textarea.twig b/app/components/form-elements/textareas/textareas.html similarity index 97% rename from app/twig/components/input/textarea.twig rename to app/components/form-elements/textareas/textareas.html index 30a4c46..4c3a13c 100644 --- a/app/twig/components/input/textarea.twig +++ b/app/components/form-elements/textareas/textareas.html @@ -5,4 +5,4 @@ This input has an error. - + \ No newline at end of file diff --git a/app/components/form-elements/textareas/textareas.js b/app/components/form-elements/textareas/textareas.js new file mode 100644 index 0000000..3c45846 --- /dev/null +++ b/app/components/form-elements/textareas/textareas.js @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Textareas \ No newline at end of file diff --git a/app/components/form-elements/url-inputs/_url-inputs.scss b/app/components/form-elements/url-inputs/_url-inputs.scss new file mode 100644 index 0000000..9008e1f --- /dev/null +++ b/app/components/form-elements/url-inputs/_url-inputs.scss @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Url Inputs \ No newline at end of file diff --git a/app/twig/components/input/url.twig b/app/components/form-elements/url-inputs/url-inputs.html similarity index 97% rename from app/twig/components/input/url.twig rename to app/components/form-elements/url-inputs/url-inputs.html index 79dca24..5c0ff3a 100644 --- a/app/twig/components/input/url.twig +++ b/app/components/form-elements/url-inputs/url-inputs.html @@ -5,4 +5,4 @@ This input has an error. - + \ No newline at end of file diff --git a/app/components/form-elements/url-inputs/url-inputs.js b/app/components/form-elements/url-inputs/url-inputs.js new file mode 100644 index 0000000..9008e1f --- /dev/null +++ b/app/components/form-elements/url-inputs/url-inputs.js @@ -0,0 +1 @@ +// Clone / Components / Form Elements / Url Inputs \ No newline at end of file diff --git a/app/components/horizontal-rules/_horizontal-rules.scss b/app/components/horizontal-rules/_horizontal-rules.scss new file mode 100644 index 0000000..0d2d72f --- /dev/null +++ b/app/components/horizontal-rules/_horizontal-rules.scss @@ -0,0 +1,46 @@ +// Clone / Components / Horizontal Rules + +[data-clone] { + + [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/components/horizontal-rules/horizontal-rules.html b/app/components/horizontal-rules/horizontal-rules.html new file mode 100644 index 0000000..26593f6 --- /dev/null +++ b/app/components/horizontal-rules/horizontal-rules.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/app/components/horizontal-rules/horizontal-rules.js b/app/components/horizontal-rules/horizontal-rules.js new file mode 100644 index 0000000..f5e592c --- /dev/null +++ b/app/components/horizontal-rules/horizontal-rules.js @@ -0,0 +1 @@ +// Clone / Components / Horizontal Rules \ No newline at end of file diff --git a/app/components/iframes/_iframes.scss b/app/components/iframes/_iframes.scss new file mode 100644 index 0000000..e82e216 --- /dev/null +++ b/app/components/iframes/_iframes.scss @@ -0,0 +1,18 @@ +// Clone / Components / iFrames + +[data-clone] { + + [data-c-iframe] { + height: 0; + padding: 0 0 56.25%; + position: relative; + iframe { + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + } + } + +} \ No newline at end of file diff --git a/app/components/iframes/iframes.html b/app/components/iframes/iframes.html new file mode 100644 index 0000000..cc7e420 --- /dev/null +++ b/app/components/iframes/iframes.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/app/components/iframes/iframes.js b/app/components/iframes/iframes.js new file mode 100644 index 0000000..4e69ab4 --- /dev/null +++ b/app/components/iframes/iframes.js @@ -0,0 +1 @@ +// Clone / Components / iFrames \ No newline at end of file diff --git a/app/components/overlays/_overlays.scss b/app/components/overlays/_overlays.scss new file mode 100644 index 0000000..e44659b --- /dev/null +++ b/app/components/overlays/_overlays.scss @@ -0,0 +1,61 @@ +// Clone / Components / Overlays + +[data-clone] { + + // 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/components/overlays/overlays.html b/app/components/overlays/overlays.html new file mode 100644 index 0000000..b93053f --- /dev/null +++ b/app/components/overlays/overlays.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/app/components/overlays/overlays.js b/app/components/overlays/overlays.js new file mode 100644 index 0000000..ac64adf --- /dev/null +++ b/app/components/overlays/overlays.js @@ -0,0 +1 @@ +// Clone / Components / Overlays \ No newline at end of file diff --git a/app/components/pullquotes/_pullquotes.scss b/app/components/pullquotes/_pullquotes.scss new file mode 100644 index 0000000..a53a74b --- /dev/null +++ b/app/components/pullquotes/_pullquotes.scss @@ -0,0 +1,13 @@ +// Clone / Components / Pullquotes + +[data-clone] { + + .clone-pullquote, + [data-c-pullquote] { + .clone-pullquote-copy, + [data-c-pullquote-copy] { + color: $clone-pullquote-color; + } + } + +} \ No newline at end of file diff --git a/app/components/pullquotes/pullquotes.html b/app/components/pullquotes/pullquotes.html new file mode 100644 index 0000000..a304598 --- /dev/null +++ b/app/components/pullquotes/pullquotes.html @@ -0,0 +1,3 @@ +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nobis totam aliquid nisi ducimus sapiente, dignissimos nostrum ullam. Inventore, enim omnis. Aliquam voluptas saepe voluptatum dignissimos eum, ipsum cum in. +
\ No newline at end of file diff --git a/app/components/pullquotes/pullquotes.js b/app/components/pullquotes/pullquotes.js new file mode 100644 index 0000000..399c139 --- /dev/null +++ b/app/components/pullquotes/pullquotes.js @@ -0,0 +1 @@ +// Clone / Components / Pullquotes \ No newline at end of file diff --git a/app/components/skip-to-content-links/_skip-to-content-links.scss b/app/components/skip-to-content-links/_skip-to-content-links.scss new file mode 100644 index 0000000..d74c980 --- /dev/null +++ b/app/components/skip-to-content-links/_skip-to-content-links.scss @@ -0,0 +1,23 @@ +// Clone / Components / Skip-to-content Links + +[data-clone] { + + [data-c-skip-content] { + display: block; + height: 1px; + position: absolute; + top: -100vh; + left: -100vw; + text-align: center; + width: 1px; + // States + &:focus { + height: auto; + position: relative; + top: 0; + left: 0; + width: 100%; + } + } + +} \ No newline at end of file diff --git a/app/components/skip-to-content-links/skip-to-content-links.html b/app/components/skip-to-content-links/skip-to-content-links.html new file mode 100644 index 0000000..0c80614 --- /dev/null +++ b/app/components/skip-to-content-links/skip-to-content-links.html @@ -0,0 +1 @@ +Skip to Main Content \ No newline at end of file diff --git a/app/components/skip-to-content-links/skip-to-content-links.js b/app/components/skip-to-content-links/skip-to-content-links.js new file mode 100644 index 0000000..1c987f4 --- /dev/null +++ b/app/components/skip-to-content-links/skip-to-content-links.js @@ -0,0 +1 @@ +// Clone / Components / Skip-to-content Links \ No newline at end of file diff --git a/app/components/tables/_tables.scss b/app/components/tables/_tables.scss new file mode 100644 index 0000000..2e74560 --- /dev/null +++ b/app/components/tables/_tables.scss @@ -0,0 +1,46 @@ +// Clone / Components / Tables + +[data-clone] { + + [data-c-table] { + overflow: auto; + width: 100%; + table { + border: 1px solid $clone-black; + border-collapse: collapse; + min-width: 40rem; + text-align: left; + @media #{$clone-tablet-landscape} { + min-width: 100%; + } + thead { + border-bottom: 1px solid $clone-black; + tr { + th { + background: $clone-table-heading-color; + color: contrasting-color($clone-table-heading-color, $clone-white, $clone-black); + padding: #{$clone-padding}; + } + td { + padding: #{$clone-padding}; + } + } + } + tbody { + tr { + &:nth-child(even) { + background: $clone-table-alternating-color; + } + th { + background: $clone-table-alternating-color; + padding: #{$clone-padding}; + } + td { + padding: #{$clone-padding}; + } + } + } + } + } + +} \ No newline at end of file diff --git a/app/twig/components/table.twig b/app/components/tables/tables.html similarity index 93% rename from app/twig/components/table.twig rename to app/components/tables/tables.html index e721b62..beb7bf7 100644 --- a/app/twig/components/table.twig +++ b/app/components/tables/tables.html @@ -14,7 +14,6 @@ - Sample Title @@ -28,4 +27,4 @@ - + \ No newline at end of file diff --git a/app/components/tables/tables.js b/app/components/tables/tables.js new file mode 100644 index 0000000..bcb7aa1 --- /dev/null +++ b/app/components/tables/tables.js @@ -0,0 +1 @@ +// Clone / Components / Tables \ No newline at end of file diff --git a/app/components/tags/_tags.scss b/app/components/tags/_tags.scss new file mode 100644 index 0000000..9393286 --- /dev/null +++ b/app/components/tags/_tags.scss @@ -0,0 +1,41 @@ +// Clone / Components / Tags + +[data-clone] { + + @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/components/tags/tags.html b/app/components/tags/tags.html new file mode 100644 index 0000000..e0436fb --- /dev/null +++ b/app/components/tags/tags.html @@ -0,0 +1,3 @@ +
+ Pill Label +
\ No newline at end of file diff --git a/app/components/tags/tags.js b/app/components/tags/tags.js new file mode 100644 index 0000000..b402d4d --- /dev/null +++ b/app/components/tags/tags.js @@ -0,0 +1 @@ +// Clone / Components / Tags \ No newline at end of file diff --git a/app/core/_clone.scss b/app/core/_clone.scss new file mode 100644 index 0000000..9d36dd2 --- /dev/null +++ b/app/core/_clone.scss @@ -0,0 +1,25 @@ +// Clone / Core + +// Default Variables +@import "defaults"; + +// SCSS Functions +@import "functions"; + +html, +body[data-clone] { + margin: 0; + max-width: 100%; + min-height: 100vh; + position: relative; + width: 100%; +} + +// System SCSS +@import "system"; + +// SCSS Data Maps +@import "maps"; + +// System-wide Typography +@import "typography"; \ No newline at end of file diff --git a/app/core/_defaults.scss b/app/core/_defaults.scss new file mode 100644 index 0000000..6e914db --- /dev/null +++ b/app/core/_defaults.scss @@ -0,0 +1,273 @@ +// Clone / Core / Default Variables + +// Media Queries + + // Phone (Portrait): 320px + $clone-phone-portrait: "screen and (min-width: 20em)" !default; + + // Phone (Landscape): 480px + $clone-phone-landscape: "screen and (min-width: 30em)" !default; + + // Tablet (Portrait): 768px + $clone-tablet-portrait: "screen and (min-width: 48em)" !default; + + // Tablet (Landscape): 1024px + $clone-tablet-landscape: "screen and (min-width: 64em)" !default; + + // Desktop (Small): 1025px + $clone-desktop-small: "screen and (min-width: 64.01em)" !default; + + // Desktop (Medium): 1600px + $clone-desktop-medium: "screen and (min-width: 100em)" !default; + + // Desktop (Large): 1760px + $clone-desktop-large: "screen and (min-width: 110em)" !default; + +// Layout Variables +$clone-large-layout: 80rem !default; +$clone-medium-layout: 60rem !default; +$clone-small-layout: 39rem !default; + + // Alternatives + $clone-wide-layout: $clone-large-layout; + $clone-form-layout: $clone-medium-layout; + $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: 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; + + // Deprecated Whitespace Calculations + $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; + +// Grid Variables +$clone-grid-columns: 12 !default; + +// Main Color Variables + + // Black & White + $clone-white: #FFFFFF !default; + $clone-black: rgba(10, 10, 20, 1) !default; + + // Grey/Gray + $clone-gray: rgba(150, 150, 150, 1) !default; + + // Alternatives + $clone-grey: $clone-gray; + + // Theme Colors + $clone-c1: #F14948 !default; + $clone-c2: #F1604D !default; + $clone-c3: #F47953 !default; + $clone-c4: #F79559 !default; + $clone-c5: #F7AF5B !default; + + // Go, Slow, Stop + $clone-go: green !default; + $clone-slow: orange !default; + $clone-stop: red !default; + + // Alternatives + $clone-error: $clone-stop; + +// Sitewide Color Variables + + // Text Selection + $clone-selection-background-color: $clone-c5 !default; + + // Alternatives + $clone-selection-background-colour: $clone-selection-background-color; + + // Hover + $clone-hover-color: $clone-c4 !default; + + // Alternatives + $clone-hover-colour: $clone-hover-color; + + // Focus + $clone-focus-color: $clone-hover-color !default; + + // Alternatives + $clone-focus-colour: $clone-focus-color; + + // Horizontal Rules + $clone-hr-color: $clone-c2 !default; + + // Alternatives + $clone-hr-colour: $clone-hr-color; + +// Font Variables + + // Fonts + $clone-font-sans: "Open Sans", sans-serif !default; + $clone-font-serif: serif !default; + $clone-font-script: "Euphoria Script", cursive !default; + $clone-font-monospace: "Consolas", monospace !default; + $clone-font-default: $clone-font-sans !default; + + // Default Line Height + $clone-line-height: 1.5 !default; + + // The Typography Scale + $clone-default-font-size: 1rem !default; + $clone-font-scale: 1.333 !default; + $clone-font-scale-small: calc(#{$clone-default-font-size}/(#{$clone-font-scale})) !default; + $clone-font-scale-h5: $clone-default-font-size !default; + $clone-font-scale-h4: calc(#{$clone-default-font-size}*(#{$clone-font-scale})) !default; + $clone-font-scale-h3: calc(#{$clone-font-scale-h4}*(#{$clone-font-scale})) !default; + $clone-font-scale-h2: calc(#{$clone-font-scale-h3}*(#{$clone-font-scale})) !default; + $clone-font-scale-h1: calc(#{$clone-font-scale-h2}*(#{$clone-font-scale})) !default; + + // Headings + + // h1 + $clone-heading-1-border-color: $clone-c1 !default; + $clone-heading-1-border-style: none none solid none !default; + $clone-heading-1-border-width: 0px !default; + $clone-heading-1-color: $clone-white !default; + $clone-heading-1-font: $clone-font-sans !default; + $clone-heading-1-font-size: $clone-font-scale-h1 !default; + $clone-heading-1-font-weight: 900 !default; + + // Alternatives + $clone-heading-1-border-colour: $clone-heading-1-border-color; + $clone-heading-1-colour: $clone-heading-1-color; + + // h2 + $clone-heading-2-border-color: $clone-c1 !default; + $clone-heading-2-border-style: none none solid none !default; + $clone-heading-2-border-width: 0px !default; + $clone-heading-2-color: $clone-c1 !default; + $clone-heading-2-font: $clone-font-sans !default; + $clone-heading-2-font-size: $clone-font-scale-h2 !default; + $clone-heading-2-font-weight: 600 !default; + + // Alternatives + $clone-heading-2-border-colour: $clone-heading-1-border-color; + $clone-heading-2-colour: $clone-heading-1-color; + + // h3 + $clone-heading-3-border-color: $clone-gray !default; + $clone-heading-3-border-style: none none solid none !default; + $clone-heading-3-border-width: 1px !default; + $clone-heading-3-color: $clone-black !default; + $clone-heading-3-font: $clone-font-sans !default; + $clone-heading-3-font-size: $clone-font-scale-h3 !default; + $clone-heading-3-font-weight: normal !default; + + // Alternatives + $clone-heading-3-border-colour: $clone-heading-1-border-color; + $clone-heading-3-colour: $clone-heading-1-color; + + // h4 + $clone-heading-4-border-color: $clone-c3 !default; + $clone-heading-4-border-style: none none solid none !default; + $clone-heading-4-border-width: 0px !default; + $clone-heading-4-color: $clone-c3 !default; + $clone-heading-4-font: $clone-font-sans !default; + $clone-heading-4-font-size: $clone-font-scale-h4 !default; + $clone-heading-4-font-weight: 600 !default; + + // Alternatives + $clone-heading-4-border-colour: $clone-heading-1-border-color; + $clone-heading-4-colour: $clone-heading-1-color; + + // h5 + $clone-heading-5-border-color: $clone-gray !default; + $clone-heading-5-border-style: none none solid none !default; + $clone-heading-5-border-width: 1px !default; + $clone-heading-5-color: $clone-black !default; + $clone-heading-5-font: $clone-font-sans !default; + $clone-heading-5-font-size: $clone-font-scale-h5 !default; + $clone-heading-5-font-weight: bold !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; + $clone-card-background-color: $clone-white !default; + + // Alternatives + $clone-card-background-colour: $clone-card-background-color; + +// Component Color Variables + + // Accordions + $clone-accordion-alternating-background-color: lighten($clone-grey, 35%) !default; + + // Alternatives + $clone-accordion-alternating-background-colour: $clone-accordion-alternating-background-color; + + // Alerts + $clone-alert-information: $clone-go !default; + $clone-alert-warning: $clone-slow !default; + $clone-alert-error: $clone-stop !default; + + // Blockquotes + $clone-blockquote-color: $clone-c1 !default; + + // Alternatives + $clone-blockquote-colour: $clone-blockquote-color; + + // Carousels + $clone-carousel-dot-color: lighten($clone-grey, 35%) !default; + $clone-carousel-dot-active-color: $clone-hover-color !default; + + // Alternatives + $clone-carousel-dot-colour: $clone-carousel-dot-color; + $clone-carousel-dot-active-colour: $clone-carousel-dot-active-color; + + // Code Blocks + $clone-code-background: $clone-black !default; + + // Menus + $clone-menu-background-color: $clone-black !default; + $clone-submenu-background-color: rgba(40, 40, 50, 1) !default; + $clone-menu-font-color: $clone-white !default; + $clone-menu-divider-color: rgba($clone-c4, .5) !default; + $clone-menu-icon-color: $clone-white !default; + + // Alternatives + $clone-menu-background-colour: $clone-menu-background-color; + $clone-submenu-background-colour: $clone-submenu-background-color; + $clone-menu-font-colour: $clone-menu-font-color; + $clone-menu-divider-colour: $clone-menu-divider-color; + $clone-menu-icon-colour: $clone-menu-icon-color; + + // Pullquotes + $clone-pullquote-color: $clone-c2 !default; + + // Alternatives + $clone-pullquote-colour: $clone-pullquote-color; + + // Tables + // Note that $clone-table-alternating-color's transparency allows for a checker pattern on the grid when there is a vertical heading column. + $clone-table-heading-color: $clone-c1 !default; + $clone-table-alternating-color: rgba(0, 0, 0, .1) !default; + + // Alternatives + $clone-table-heading-colour: $clone-table-heading-color; + $clone-table-alternating-colour: $clone-table-alternating-color; \ No newline at end of file diff --git a/app/scss/core/_functions.scss b/app/core/_functions.scss similarity index 71% rename from app/scss/core/_functions.scss rename to app/core/_functions.scss index 4fc0bcc..c86e39f 100644 --- a/app/scss/core/_functions.scss +++ b/app/core/_functions.scss @@ -1,6 +1,5 @@ -// Functions =================================================================== - -@function sqrt ($clone-r) { +// Clone / Core / SCSS Functions +@function cloneSquareRoot ($clone-r) { $clone-x0: 1; $clone-x1: $clone-x0; @@ -11,12 +10,10 @@ @return $clone-x1; } - $clone-red-magic-number: 241; $clone-green-magic-number: 691; $clone-blue-magic-number: 68; $clone-brightness-divisor: $clone-red-magic-number + $clone-green-magic-number + $clone-blue-magic-number; - @function brightness($clone-color) { // Extract color components $clone-red-component: red($clone-color); @@ -24,12 +21,11 @@ $clone-brightness-divisor: $clone-red-magic-number + $clone-green-magic-number + $clone-blue-component: blue($clone-color); // Calculate a brightness value in 3d color space between 0 and 255 - $clone-number: sqrt((($clone-red-component * $clone-red-component * $clone-red-magic-number) + ($clone-green-component * $clone-green-component * $clone-green-magic-number) + ($clone-blue-component * $clone-blue-component * $clone-blue-magic-number)) / $clone-brightness-divisor); + $clone-number: cloneSquareRoot((($clone-red-component * $clone-red-component * $clone-red-magic-number) + ($clone-green-component * $clone-green-component * $clone-green-magic-number) + ($clone-blue-component * $clone-blue-component * $clone-blue-magic-number)) / $clone-brightness-divisor); // Convert to percentage and return @return 100% * $clone-number / 255; } - @function contrasting-color($clone-color, $clone-light, $clone-dark) { @if brightness($clone-color) < 65% { @return $clone-light; diff --git a/app/core/_maps.scss b/app/core/_maps.scss new file mode 100644 index 0000000..5691d70 --- /dev/null +++ b/app/core/_maps.scss @@ -0,0 +1,139 @@ +// Clone / SCSS Data 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/core/_system.scss b/app/core/_system.scss new file mode 100644 index 0000000..72f018c --- /dev/null +++ b/app/core/_system.scss @@ -0,0 +1,21 @@ +// Clone / Core / System SCSS +[data-clone] { + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + p, div { + font-size: $clone-default-font-size + } + img, + iframe { + max-width: 100%; + } + .mobile-lock { + overflow: hidden; + @media #{$clone-tablet-landscape} { + overflow: visible; + } + } +} \ No newline at end of file diff --git a/app/core/_typography.scss b/app/core/_typography.scss new file mode 100644 index 0000000..3a3f646 --- /dev/null +++ b/app/core/_typography.scss @@ -0,0 +1,93 @@ +// Clone / Core / System-wide Typography + +[data-clone] { + + // System + * { + line-height: $clone-line-height; + } + ::selection { + background: $clone-selection-background-color !important; + color: contrasting-color($clone-selection-background-color, $clone-white, $clone-black) !important; + } + h1, h2, h3, h4, h5 { + font-weight: 400; + line-height: calc(#{$clone-line-height} * .85); + } + h1, h2, h3, h4, h5, h6, div, p, a, span, blockquote, aside, button, label, input, textarea, table, ul, li { + font-family: $clone-font-default; + } + + // Misc. Copy Elements + + // Anchors + a { + color: inherit; + font-size: inherit; + font-weight: inherit; + text-decoration: underline; + transition: color .2s ease; + @media (hover: hover) { + &:hover { + color: $clone-hover-color !important; + transition: color .2s ease; + } + } + } + + // IE 11 Hover Support + &[id*="Trident/7.0"] { + a:hover { + color: $clone-hover-color !important; + transition: color .2s ease; + } + } + + // Lists + ul, + ol { + padding-left: calc(#{$clone-padding} * 2); + @media #{$clone-tablet-portrait} { + padding-left: calc((#{$clone-padding} * 2) * #{$clone-whitespace-multiplier}); + } + @media #{$clone-desktop-large} { + padding-left: calc(((#{$clone-padding} * 2) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}); + } + li { + color: inherit; + font-size: inherit; + margin-bottom: calc(#{$clone-margin} / 2); + @media #{$clone-tablet-portrait} { + margin-bottom: calc((#{$clone-margin} / 2) * #{$clone-whitespace-multiplier}); + } + @media #{$clone-desktop-large} { + margin-bottom: calc(((#{$clone-margin} / 2) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}); + } + &:last-child { + margin-bottom: 0; + } + >ul { + margin-top: calc(#{$clone-margin} / 2); + @media #{$clone-tablet-portrait} { + margin-top: calc((#{$clone-margin} / 2) * #{$clone-whitespace-multiplier}); + } + @media #{$clone-desktop-large} { + margin-top: calc(((#{$clone-margin} / 2) * #{$clone-whitespace-multiplier}) * #{$clone-whitespace-multiplier}); + } + } + } + } + + // Styled Elements + em { + color: inherit; + font-size: inherit; + font-style: italic; + } + strong { + color: inherit; + font-size: inherit; + font-weight: 600; + } + +} \ No newline at end of file diff --git a/app/js/cash.min.js b/app/core/cash.min.js similarity index 100% rename from app/js/cash.min.js rename to app/core/cash.min.js diff --git a/app/core/clone.js b/app/core/clone.js new file mode 100644 index 0000000..6318b83 --- /dev/null +++ b/app/core/clone.js @@ -0,0 +1,25 @@ +// Clone / Core + +// Validation Function +$.fn.isValid = function() { + return this[0].checkValidity(); +} + +// Define Root +var $root = $('html, body'); + +// hasAttribute Function +$.fn.hasAttr = function (name) { + var attr = $(this).attr(name); + return (typeof attr !== typeof undefined && attr !== false); +}; + +// User Agent Data Attributes +var ua = navigator.userAgent; +ua = ua.toString(); +$('body').attr('id', ua); + +// Find Focusable Items +function focusable(focusElement) { + return (focusElement.find('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')); +} \ No newline at end of file diff --git a/app/core/import.scss b/app/core/import.scss new file mode 100644 index 0000000..4730d98 --- /dev/null +++ b/app/core/import.scss @@ -0,0 +1,20 @@ +// My Custom Clone Theme +// Please note that the order of the instructions/includes below is important to maintain. + +// Include Clone's Variables +// Doing this gives you access to the default variables in the event you'd like to use one of them as a value in your custom theme variables. +@import "node_modules/clone-framework/app/core/_defaults"; + +// Your Clone Theme Variables +// Put any of the variables you'd like to customize here. A list of all the available variables can be found at: https://designwithclone.ca/themes/how/ +// Example Variables: +// $clone-grid-columns: 8; +// $clone-c1: #5B1647; + +// Include Clone +@import "node_modules/clone-framework/app/clone"; +// @import "node_modules/clone-framework/app/clone-gridless"; + +[data-clone] { + // Custom CSS for your app goes here. +} \ No newline at end of file diff --git a/app/scss/variables.txt b/app/core/variables.scss similarity index 83% rename from app/scss/variables.txt rename to app/core/variables.scss index 18587eb..a0251bb 100644 --- a/app/scss/variables.txt +++ b/app/core/variables.scss @@ -1,80 +1,97 @@ -// Clone: Default Variables +// Clone / Theme Variables + // Media Queries + // Phone (Portrait): 320px $clone-phone-portrait: "screen and (min-width: 20em)"; + // Phone (Landscape): 480px $clone-phone-landscape: "screen and (min-width: 30em)"; + // Tablet (Portrait): 768px $clone-tablet-portrait: "screen and (min-width: 48em)"; + // Tablet (Landscape): 1024px $clone-tablet-landscape: "screen and (min-width: 64em)"; + // Desktop (Small): 1025px $clone-desktop-small: "screen and (min-width: 64.01em)"; + // Desktop (Medium): 1600px $clone-desktop-medium: "screen and (min-width: 100em)"; + // Desktop (Large): 1760px $clone-desktop-large: "screen and (min-width: 110em)"; + // Layout Variables $clone-large-layout: 80rem; $clone-medium-layout: 60rem; $clone-small-layout: 39rem; + // 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; -$clone-padding: 1rem; +$clone-margin: 1.25vw; +$clone-padding: 1.25vw; + // 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 + // Black & White $clone-white: #FFFFFF; $clone-black: rgba(10, 10, 20, 1); - // Gray + + // Grey/Gray $clone-gray: rgba(150, 150, 150, 1); + // Theme Colors $clone-c1: #F14948; $clone-c2: #F1604D; $clone-c3: #F47953; $clone-c4: #F79559; $clone-c5: #F7AF5B; + // Go, Slow, Stop $clone-go: green; $clone-slow: orange; $clone-stop: red; + // Sitewide Color Variables + // Text Selection $clone-selection-background-color: $clone-c5; + // Hover $clone-hover-color: $clone-c4; + // Focus $clone-focus-color: $clone-hover-color; + // Horizontal Rules $clone-hr-color: $clone-c2; + // Font Variables + // Fonts $clone-font-sans: "Open Sans", sans-serif; $clone-font-serif: serif; $clone-font-script: "Euphoria Script", cursive; $clone-font-monospace: "Consolas", monospace; $clone-font-default: $clone-font-sans; + // Default Line Height $clone-line-height: 1.5; + // The Typography Scale $clone-default-font-size: 1rem; $clone-font-scale: 1.333; - $clone-font-scale-small: calc(#{$clone-default-font-size}/(#{$clone-font-scale})); - $clone-font-scale-h5: $clone-default-font-size; - $clone-font-scale-h4: calc(#{$clone-default-font-size}*(#{$clone-font-scale})); - $clone-font-scale-h3: calc(#{$clone-font-scale-h4}*(#{$clone-font-scale})); - $clone-font-scale-h2: calc(#{$clone-font-scale-h3}*(#{$clone-font-scale})); - $clone-font-scale-h1: calc(#{$clone-font-scale-h2}*(#{$clone-font-scale})); + // Headings + // h1 $clone-heading-1-border-color: $clone-c1; $clone-heading-1-border-style: none none solid none; @@ -83,6 +100,7 @@ $clone-grid-columns: 12; $clone-heading-1-font: $clone-font-sans; $clone-heading-1-font-size: $clone-font-scale-h1; $clone-heading-1-font-weight: 900; + // h2 $clone-heading-2-border-color: $clone-c1; $clone-heading-2-border-style: none none solid none; @@ -91,6 +109,7 @@ $clone-grid-columns: 12; $clone-heading-2-font: $clone-font-sans; $clone-heading-2-font-size: $clone-font-scale-h2; $clone-heading-2-font-weight: 600; + // h3 $clone-heading-3-border-color: $clone-gray; $clone-heading-3-border-style: none none solid none; @@ -99,6 +118,7 @@ $clone-grid-columns: 12; $clone-heading-3-font: $clone-font-sans; $clone-heading-3-font-size: $clone-font-scale-h3; $clone-heading-3-font-weight: normal; + // h4 $clone-heading-4-border-color: $clone-c3; $clone-heading-4-border-style: none none solid none; @@ -107,6 +127,7 @@ $clone-grid-columns: 12; $clone-heading-4-font: $clone-font-sans; $clone-heading-4-font-size: $clone-font-scale-h4; $clone-heading-4-font-weight: 600; + // h5 $clone-heading-5-border-color: $clone-gray; $clone-heading-5-border-style: none none solid none; @@ -115,31 +136,49 @@ $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); + $clone-card-background-color: $clone-white; + // Component Color Variables + // Accordions - $clone-accordion-alternating-background-color: lighten($clone-gray, 35%); + $clone-accordion-alternating-background-color: lighten($clone-grey, 35%); + // Alerts $clone-alert-information: $clone-go; $clone-alert-warning: $clone-slow; $clone-alert-error: $clone-stop; + // Blockquotes $clone-blockquote-color: $clone-c1; + // Carousels - $clone-carousel-dot-color: lighten($clone-gray, 35%); + $clone-carousel-dot-color: lighten($clone-grey, 35%); $clone-carousel-dot-active-color: $clone-hover-color; + // Code Blocks $clone-code-background: $clone-black; + // Menus $clone-menu-background-color: $clone-black; $clone-submenu-background-color: rgba(40, 40, 50, 1); $clone-menu-font-color: $clone-white; $clone-menu-divider-color: rgba($clone-c4, .5); $clone-menu-icon-color: $clone-white; + // Pullquotes $clone-pullquote-color: $clone-c2; + // Tables // Note that $clone-table-alternating-color's transparency allows for a checker pattern on the grid when there is a vertical heading column. $clone-table-heading-color: $clone-c1; diff --git a/app/index.twig b/app/index.twig new file mode 100644 index 0000000..3638b2c --- /dev/null +++ b/app/index.twig @@ -0,0 +1,20 @@ + + + + Clone: Design System + + + + + + + + +
+
+

Looking for documentation? Check out Clone's Docs for more information.

+
+
+ + + diff --git a/app/js/clone.js b/app/js/clone.js deleted file mode 100644 index 4d67487..0000000 --- a/app/js/clone.js +++ /dev/null @@ -1,507 +0,0 @@ -// ============================================================================= - - // Utilities JavaScript - -// ============================================================================= - -// Add isValid() -$.fn.isValid = function() { - // console.log($(this[0]).nodeName); - return this[0].checkValidity(); -} - -// Root -var $root = $('html, body'); - -// Add has attribute Function -$.fn.hasAttr = function (name) { - var attr = $(this).attr(name); - return (typeof attr !== typeof undefined && attr !== false); -}; - -// Find Focusable Items -function focusable(el) { - return (el.find('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')); -} - -// User Agent Data Attributes ================================================== -var ua = navigator.userAgent; -ua = ua.toString(); -$('body').attr('id', ua); - -// Clone Shorthand ============================================================= -function clone(attr, option, selector) { - if (option != null) { - if (selector != null) { - return '[data-c-' + attr + selector + '=\'' + option + '\']'; - } - else { - return '[data-c-' + attr + '=\'' + option + '\']'; - } - } - else { - return '[data-c-' + attr + ']'; - } -} - -// Core ======================================================================== -$(document).ready(function () { - - // Glider Initialization =================================================== - window.addEventListener('load', function(){ - var carouselID = 0; - $("[data-c-carousel]").each(function() { - if (this.hasAttribute("data-c-custom-carousel")) { - // Do nothing. - } - else { - carouselID = carouselID + 1; - $(this).attr("id", "carousel" + carouselID); - $(this).parent().find("[data-c-carousel-arrow=\"prev\"]").attr("id", "carousel" + carouselID + "prev"); - $(this).parent().find("[data-c-carousel-arrow=\"next\"]").attr("id", "carousel" + carouselID + "next"); - $(this).parent().find("[data-c-carousel-dots]").attr("id", "carousel" + carouselID + "dots"); - new Glider(document.querySelector('#carousel' + carouselID), { - slidesToShow: 1, - arrows: { - "prev": '#carousel' + carouselID + "prev", - "next": '#carousel' + carouselID + "next" - }, - dots: '#carousel' + carouselID + "dots", - draggable: true, - scrollLock: true, - rewind: true - }) - } - }); - }); - - // 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 - function alertTriggerOld(trigger) { - $(trigger).closest("[data-c-alert='information']").remove(); - $(trigger).closest("[data-c-alert='warning']").remove(); - $(trigger).closest("[data-c-alert='error']").remove(); - } - - $(document).on("click", clone("alert", "close-trigger"), function (e) { - e.preventDefault(); - alertTriggerOld(this); - }); - - // New - function alertTrigger(trigger) { - $(trigger).closest("[data-c-alert]").remove(); - } - $(document).on("click", "[data-c-alert-close-trigger]", function (e) { - e.preventDefault(); - alertTrigger(this); - }); - - // Form Handlers =========================================================== - - // HTML5 Validation ---------------------------------------------------- - - // Required Fields ------------------------------------------------- - function requiredFields() { - $("input:required, textarea:required, select:required").each(function(e) { - $(this).parents(clone("input")).attr("data-c-required", ""); - }); - } - - requiredFields(); - - // Validation ------------------------------------------------------ - var inputs = $(clone("input") + " input," + clone("input") + " textarea," + clone("input") + " select"); - function handlerFunction() { - if ($(this).is("[required]")) { - if ($(this).val() == "") { - if ($(this).attr("type") == "password") { - return false; - } - else { - $(this).parents(clone("input")).attr("data-c-invalid", ""); - } - } - else { - if ($(this).isValid() == true) { - if ($(this).val() == "" || $(this).attr("type") == "password") { - $(this).parents(clone("input")).removeAttr("data-c-invalid"); - } - else { - $(this).parents(clone("input")).removeAttr("data-c-invalid"); - } - } - else { - if ($(this).attr("type") == "password") { - return false; - } - else { - $(this).parents(clone("input")).attr("data-c-invalid", ""); - } - } - } - } - else { - if ($(this).isValid() == true) { - if ($(this).val() == "" || $(this).attr("type") == "password") { - $(this).parents(clone("input")).removeAttr("data-c-invalid"); - } - else { - $(this).parents(clone("input")).removeAttr("data-c-invalid"); - } - } - else { - if ($(this).attr("type") == "password") { - return false; - } - else { - $(this).parents(clone("input")).attr("data-c-invalid", ""); - } - } - } - }; - - var newInputs = $(inputs); - for (var i = 0, len = inputs.length; i < len; i++) { - newInputs[i].addEventListener('focusout', handlerFunction, false); - } - - // Password Toggle ----------------------------------------------------- - $(clone("input", "password", "*") + " button").on("click", function (e) { - e.preventDefault(); - var x = $(this).siblings("input"); - if (x.attr("type") === "password") { - x.attr("type", "text"); - x.parents(clone("input", "password", "*")).attr("data-c-input", "password--visible"); - } - else { - x.attr("type", "password"); - x.parents(clone("input", "password", "*")).attr("data-c-input", "password"); - } - }); - - // Dialog Handlers ========================================================= - - // Dialog Tabindex on Pageload ----------------------------------------- - function dialogTabIndex() { - $(clone("dialog")).each(function() { - // $(this).find(":focusable").attr("tabindex", "-1"); - }); - } - - dialogTabIndex(); - - // Dialog Trigger ------------------------------------------------------ - function dialogTrigger(trigger) { - var dialogID = $(trigger).attr("data-c-dialog-id"); - var dialog = $(clone("dialog") + "[data-c-dialog-id='" + dialogID +"']"); - var overlay = $(clone("dialog-overlay")); - var targetInput = $("[data-c-dialog-focus]"); - $(targetInput).attr("tabindex", "0"); - // var focusableItems = $(dialog).find(":focusable"); - var focusableItems = focusable($(dialog)); - if($(dialog).attr("data-c-dialog") != "") { - $("body").css("overflow", "visible"); - $(overlay).attr("data-c-dialog-overlay", ""); - $(dialog).attr("data-c-dialog", ""); - $(dialog).attr("aria-hidden", "true"); - $(focusableItems).each(function() { - $(this).attr("tabindex", "-1"); - }); - $(dialog).off('keyup'); - document.querySelector("[data-c-dialog-ancestor]").focus(); - } - else { - $("*").removeAttr("data-c-dialog-ancestor"); - $(trigger).attr("data-c-dialog-ancestor", ""); - $("body").css("overflow", "hidden"); - $(focusableItems).each(function() { - $(this).attr("tabindex", "0"); - }); - $(overlay).attr("data-c-dialog-overlay", "active"); - $(dialog).attr("aria-hidden", "false"); - dialogSizing(dialog); - var firstInput = focusableItems.first(); - var lastInput = focusableItems.last(); - if (targetInput[0] != null) { - targetInput[0].focus(); - } - dialogTabbing(firstInput, lastInput); - } - } - - // Dialog Sizing ------------------------------------------------------- - function dialogSizing(dialog) { - var viewportHeight = $(window).height(); - if (dialog != null) { - var dialogHeight = $(dialog).children("div").height() + 50; - if (dialogHeight > viewportHeight) { - $(dialog).attr("data-c-dialog", "active--overflowing"); - } - else { - $(dialog).attr("data-c-dialog", "active--contained"); - } - } - else { - $(clone("dialog")).each(function() { - if ($(this).attr("data-c-dialog") == false){ - return false; - } - else { - var dialogHeight = $(this).children("div").height() + 50; - if (dialogHeight > viewportHeight) { - $(this).attr("data-c-dialog", "active--overflowing"); - } - else { - $(this).attr("data-c-dialog", "active--contained"); - } - } - }); - } - } - - $(document).on("click", "button[data-c-dialog-id]", function(e) { - e.preventDefault(); - dialogTrigger(this); - }); - - window.onresize = (function(e) { - e.preventDefault(); - dialogSizing(); - }); - - // Tab Handler --------------------------------------------------------- - function dialogTabbing(first, last) { - $(document).on("keydown", function(e){ - var keyCode = e.keyCode || e.which; - if (keyCode == 9 && !e.shiftKey) { - if ($(last).is(":focus")) { - e.preventDefault(); - first[0].focus(); - } - } - else if (keyCode == 9 && e.shiftKey) { - if ($(first).is(":focus")) { - e.preventDefault(); - last[0].focus(); - } - } - }); - } - - // Escape Handler ------------------------------------------------------ - function dialogEscape(trigger) { - var dialogID = $(trigger).attr("data-c-dialog-id"); - var dialog = $(clone("dialog") + "[data-c-dialog-id='" + dialogID +"']"); - if ($(dialog).hasAttr("data-c-dialog-escapable")) { - $(dialog).on("keyup", function(e){ - var keyCode = e.keyCode || e.which; - if (keyCode == 27) { - $("[data-c-dialog-overlay]").attr("data-c-dialog-overlay", ""); - $("[data-c-dialog]").each(function() { - $(this).attr("data-c-dialog", ""); - }); - $("body").css("overflow", "visible"); - document.querySelector("[data-c-dialog-ancestor]").focus(); - $(dialog).off('keyup'); - } - }); - } - } - - $(document).on("click", "button[data-c-dialog-id]", function(e) { - e.preventDefault(); - dialogEscape(this); - }); - - // Menu Handlers =========================================================== - function toggleMenu(trigger) { - if ($(trigger).hasClass("active")) { - $("body").removeClass("mobile-lock"); - $(trigger).removeClass("active").attr("aria-pressed", "false"); - // var focusableItems = $("[data-c-menu]").find(":focusable"); - var focusableItems = focusable($("[data-c-menu]")); - $("[data-c-menu]").removeClass("active"); - $(focusableItems).each(function() { - $(this).attr("tabindex", "-1"); - }); - } - else { - $("body").addClass("mobile-lock"); - $(trigger).addClass("active").attr("aria-pressed", "true"); - $("[data-c-menu]").addClass("active"); - // var focusableItems = $("[data-c-menu]").find(":focusable"); - var focusableItems = focusable($("[data-c-menu]")); - var secondLast = focusableItems.last(); - var newItems = $(focusableItems).add($(trigger)); - $(newItems).each(function() { - $(this).attr("tabindex", "0"); - }); - var firstInput = newItems.first(); - var lastInput = newItems.last(); - // $(firstInput).focus(); - menuTabbing(firstInput, secondLast, lastInput); - } - } - - $(document).on("click", "[data-c-menu-mobile-trigger]", function(e) { - e.preventDefault(); - toggleMenu(this); - }); - - function menuTabbing(first, secondLast, last) { - $(document).on("keydown", function(e){ - if ($("[data-c-menu]").hasClass("active")) { - var keyCode = e.keyCode || e.which; - if (keyCode == 9 && !e.shiftKey) { - if ($(last).is(":focus")) { - // console.log("LAST TO FIRST"); - e.preventDefault(); - first[0].focus(); - } - else if ($(secondLast).is(":focus")) { - // console.log("2ND TO LAST"); - e.preventDefault(); - last[0].focus(); - } - } - else if (keyCode == 9 && e.shiftKey) { - if ($(first).is(":focus")) { - // console.log("FIRST TO LAST"); - e.preventDefault(); - last[0].focus(); - } - else if ($(last).is(":focus")) { - // console.log("LAST TO 2ND"); - e.preventDefault(); - secondLast[0].focus(); - } - } - } - }); - } - - function toggleSubmenu(trigger) { - var parent = $(trigger).closest("li"); - if ($(parent).hasClass("active")) { - $(parent).removeClass("active"); - $(parent).find("ul").removeClass("active"); - $(parent).find("li").removeClass("active"); - } - else { - $(parent).addClass("active"); - $(parent).children("ul").addClass("active"); - } - } - - $(document).on("click", "[data-c-menu-submenu-trigger]", function(e) { - e.preventDefault(); - toggleSubmenu(this); - }); - - function menuItemClick(trigger) { - var destination = $(trigger).attr("href"); - if (destination.match("^#")) { - $("body").css("overflow", "visible"); - $("[data-c-menu-mobile-trigger]").removeClass("active").attr("aria-pressed", "false"); - // var focusableItems = $("[data-c-menu]").find(":focusable"); - var focusableItems = focusable($("[data-c-menu]")); - $("[data-c-menu]").removeClass("active"); - $(focusableItems).each(function() { - $(this).attr("tabindex", "-1"); - }); - } - else { - - } - } - - $(document).on("click", "[data-c-menu] a", function(e) { - menuItemClick(this); - }); - -}); \ No newline at end of file diff --git a/app/patterns/breadcrumbs/_breadcrumbs.scss b/app/patterns/breadcrumbs/_breadcrumbs.scss new file mode 100644 index 0000000..16b3e29 --- /dev/null +++ b/app/patterns/breadcrumbs/_breadcrumbs.scss @@ -0,0 +1,54 @@ +// Clone / Patterns / Breadcrumbs + +[data-clone] { + + [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; + } + } + p[aria-current="page"], + span[aria-current="page"] { + font-weight: 700; + margin: .5rem; + 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; + } + } + } + } + } +} \ No newline at end of file diff --git a/app/patterns/breadcrumbs/breadcrumbs.html b/app/patterns/breadcrumbs/breadcrumbs.html new file mode 100644 index 0000000..d9d386b --- /dev/null +++ b/app/patterns/breadcrumbs/breadcrumbs.html @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/app/patterns/breadcrumbs/breadcrumbs.js b/app/patterns/breadcrumbs/breadcrumbs.js new file mode 100644 index 0000000..23999d6 --- /dev/null +++ b/app/patterns/breadcrumbs/breadcrumbs.js @@ -0,0 +1 @@ +// Clone / Patterns / Breadcrumbs \ No newline at end of file diff --git a/app/scss/components/_menus.scss b/app/patterns/menus/_menus.scss similarity index 97% rename from app/scss/components/_menus.scss rename to app/patterns/menus/_menus.scss index b36b2e8..fcdc32d 100644 --- a/app/scss/components/_menus.scss +++ b/app/patterns/menus/_menus.scss @@ -1,9 +1,5 @@ -// ============================================================================= +// Clone / Patterns / Menus - // Clone - // Menus - -// ============================================================================= [data-clone] { [data-c-menu-mobile-trigger] { position: fixed; @@ -63,7 +59,7 @@ color: $clone-menu-icon-color; } - // Mobile ================================================================== + // Mobile overflow: auto; position: fixed; top: 0; @@ -138,7 +134,7 @@ } } - // colors ================================================================= + // Colors // Main Menu >ul >li:not(:first-child) >a, @@ -151,6 +147,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 +170,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 +193,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 +216,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 +239,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 +265,6 @@ } } - [data-clone][data-c-menu-style*="topbar"] { [data-c-menu] { @media #{$clone-tablet-landscape} { @@ -406,7 +406,6 @@ } } } - [data-clone][data-c-menu-style*="sidebar"] { @media #{$clone-tablet-landscape} { margin-left: calc((1/4) * 100%); diff --git a/app/twig/components/menu.twig b/app/patterns/menus/menus.html similarity index 68% rename from app/twig/components/menu.twig rename to app/patterns/menus/menus.html index 79134b8..ad48dc3 100644 --- a/app/twig/components/menu.twig +++ b/app/patterns/menus/menus.html @@ -1,25 +1,22 @@ - + - +