From de3cd0a0536070b8bd311d4b6d244ef882f1305d Mon Sep 17 00:00:00 2001 From: Pete Schuster Date: Tue, 7 Nov 2017 13:33:02 -0500 Subject: [PATCH] release: realignment to UX (#3) * merges ux-alignment branch commit a6f62ad53f08feb9695448a121d6c76ba0aea11c Author: Schuster Date: Tue Nov 7 11:51:09 2017 -0500 adds dark link variant commit 7fef28bdcdd2557a34a0daa5361aa203dc8021b0 Author: Schuster Date: Tue Nov 7 11:47:23 2017 -0500 adds button primary on dark variant commit ddcc35dba561822b79fd07261e33f8f1831ea4f7 Author: Schuster Date: Tue Nov 7 11:11:02 2017 -0500 updates heading line heights commit f33546fa4a693e793b75331e629cc4aed5089b4c Author: Schuster Date: Tue Nov 7 11:04:19 2017 -0500 updates badge commit 3fb6d7c5df05c835537d51ef117b3f340a0f9517 Author: Schuster Date: Tue Nov 7 11:04:14 2017 -0500 updates h5bp commit 81ddc06699cd621ab3c0682c8d6983d047d47b91 Author: Schuster Date: Tue Nov 7 10:23:03 2017 -0500 align secondary colors commit e4dbb366489a659ee6ec47c7d4846a92d01cd81c Author: Schuster Date: Tue Nov 7 10:03:58 2017 -0500 find and replace renamed greys commit 4d0273dc89d1d73d0f2525e0c3cabaf34aa8d465 Author: Schuster Date: Tue Nov 7 10:00:47 2017 -0500 udpates commit 0c615c9b1bc1d9704e4a8dde05e9c6e456e5f4e7 Author: Schuster Date: Tue Nov 7 09:18:50 2017 -0500 updates greys * bump versions * adds back merge --- README.md | 2 +- assets/sass/all-digital/base/_forms.scss | 2 +- assets/sass/all-digital/base/_links.scss | 11 ++- assets/sass/all-digital/base/_typography.scss | 4 +- .../sass/all-digital/components/_badge.scss | 10 +- .../sass/all-digital/components/_buttons.scss | 14 +++ assets/sass/all-digital/components/_card.scss | 2 +- .../all-digital/components/_form-boolean.scss | 10 +- .../components/_form-controls.scss | 2 - .../all-digital/components/_form-toggle.scss | 2 +- .../all-digital/components/_link-group.scss | 2 +- .../sass/all-digital/components/_loading.scss | 6 +- assets/sass/all-digital/utils/_variables.scss | 95 ++++++++----------- .../sass/all-digital/utils/themes/_dark.scss | 2 + .../utils/themes/dark/_buttons.scss | 13 ++- .../all-digital/utils/themes/dark/_links.scss | 4 + .../all-digital/utils/themes/grey/_card.scss | 4 +- .../all-digital/utils/themes/grey/_forms.scss | 2 +- .../utils/themes/grey/_headings.scss | 26 ++--- .../all-digital/utils/themes/grey/_links.scss | 3 +- .../all-digital/utils/variables/_card.scss | 4 +- .../all-digital/utils/variables/_forms.scss | 2 +- .../utils/variables/_headings.scss | 38 ++++---- assets/sass/all-digital/vendors/_h5bp.scss | 20 ++-- package.json | 2 +- 25 files changed, 148 insertions(+), 134 deletions(-) create mode 100644 assets/sass/all-digital/utils/themes/dark/_links.scss diff --git a/README.md b/README.md index 834705b..f1e25a2 100755 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Welcome to the All Digital brought to you by Comcast. In your project: ```bash -npm install git+https://github.com/Comcast/all-digital.git#v1.12.0 +npm install git+https://github.com/Comcast/all-digital.git#v2.0.0 ``` ## Usage diff --git a/assets/sass/all-digital/base/_forms.scss b/assets/sass/all-digital/base/_forms.scss index e4f17d4..13a7403 100755 --- a/assets/sass/all-digital/base/_forms.scss +++ b/assets/sass/all-digital/base/_forms.scss @@ -149,7 +149,7 @@ textarea { } input::placeholder { - color: $cool-grey8; + color: $cool-grey11; } // override normalize diff --git a/assets/sass/all-digital/base/_links.scss b/assets/sass/all-digital/base/_links.scss index 1bc7890..28f763b 100755 --- a/assets/sass/all-digital/base/_links.scss +++ b/assets/sass/all-digital/base/_links.scss @@ -5,21 +5,24 @@ a, &:hover { text-decoration: underline; - color: $link-hover-color; + } + + &:active { + color: $link-active-color; } @include ui-dark { color: map-get($ui-dark-map, link-color); - &:hover { - color: map-get($ui-dark-map, link-hover-color); + &:active { + color: map-get($ui-dark-map, link-active-color); } } @include ui-blue { color: map-get($ui-blue-map, link-color); - &:hover { + &:active { color: map-get($ui-blue-map, link-color); } } diff --git a/assets/sass/all-digital/base/_typography.scss b/assets/sass/all-digital/base/_typography.scss index 9214e8c..b3118bd 100755 --- a/assets/sass/all-digital/base/_typography.scss +++ b/assets/sass/all-digital/base/_typography.scss @@ -43,7 +43,7 @@ address { pre { margin: 0 0 1.5em; - background: $grey-27; + background: $cool-grey4; padding: 0.5em; word-wrap: normal; } @@ -56,7 +56,7 @@ blockquote { @include font-size(20); display: block; margin: 0 0 20px; - border-left: 3px solid $grey-9; + border-left: 3px solid $cool-grey4; padding-left: 10px; overflow: hidden; diff --git a/assets/sass/all-digital/components/_badge.scss b/assets/sass/all-digital/components/_badge.scss index 05ec55a..9ba2834 100755 --- a/assets/sass/all-digital/components/_badge.scss +++ b/assets/sass/all-digital/components/_badge.scss @@ -2,22 +2,22 @@ @include heading5; display: inline-block; padding: calc-target(2, $heading5-size) calc-target(6, $heading5-size); - color: $cool-grey9; + color: $cool-grey12; border-radius: calc-target(3, $heading5-size); background-color: $cool-grey6; - + & { + + .badge { margin-left: 6px; } } .badge--success { - background-color: $green-lime; - color: $cool-grey10; + background-color: $minty; + color: $cool-grey14; } .badge--info { - background-color: $blue-jeans; + background-color: $blue-deep; color: $white; } diff --git a/assets/sass/all-digital/components/_buttons.scss b/assets/sass/all-digital/components/_buttons.scss index ba13309..a774451 100755 --- a/assets/sass/all-digital/components/_buttons.scss +++ b/assets/sass/all-digital/components/_buttons.scss @@ -124,7 +124,21 @@ } @include ui-dark { + border-color: map-get($ui-dark-map, button-primary-border-color); + background-color: map-get($ui-dark-map, button-primary-background-color); color: map-get($ui-dark-map, button-primary-text-color); + + &:hover, + &.pseudo-class-hover { + border-color: map-get($ui-dark-map, button-primary-border-color-hover); + background-color: map-get($ui-dark-map, button-primary-background-color-hover); + } + + &:active, + &.pseudo-class-active { + border-color: map-get($ui-dark-map, button-primary-border-color-active); + background-color: map-get($ui-dark-map, button-primary-background-color-active); + } } @include ui-blue { diff --git a/assets/sass/all-digital/components/_card.scss b/assets/sass/all-digital/components/_card.scss index e93c14e..18a5afb 100755 --- a/assets/sass/all-digital/components/_card.scss +++ b/assets/sass/all-digital/components/_card.scss @@ -229,6 +229,6 @@ button.card { margin: 0 2px; width: 6px; height: 6px; - background: $cool-grey7; + background: $cool-grey8; } } diff --git a/assets/sass/all-digital/components/_form-boolean.scss b/assets/sass/all-digital/components/_form-boolean.scss index 5b0608c..ccf7752 100755 --- a/assets/sass/all-digital/components/_form-boolean.scss +++ b/assets/sass/all-digital/components/_form-boolean.scss @@ -48,7 +48,7 @@ input[type="checkbox"] ~ .form-control__label::before { border-radius: 3px; background-color: $cool-grey2; - border: 1px solid $cool-grey8; + border: 1px solid $cool-grey11; } input[type="checkbox"]:checked ~ .form-control__label::before { @@ -60,7 +60,7 @@ input[type="radio"] ~ .form-control__label::before { border-radius: 50%; background: $cool-grey2; - border: 1px solid $cool-grey8; + border: 1px solid $cool-grey11; } input[type="radio"]:checked ~ .form-control__label::before { @@ -71,13 +71,13 @@ @include ui-dark { input[type="checkbox"] ~ .form-control__label::before, input[type="radio"] ~ .form-control__label::before { - border-color: $cool-grey7; + border-color: $cool-grey8; background-color: transparent; } input[type="checkbox"]:checked ~ .form-control__label::before, input[type="radio"]:checked ~ .form-control__label::before { - border-color: $blue-jeans; + border-color: $blue-deep; } input[type="radio"]:checked ~ .form-control__label::before { @@ -85,7 +85,7 @@ } input[type="checkbox"]:checked ~ .form-control__label::before { - background-color: $blue-jeans; + background-color: $blue-deep; } } } diff --git a/assets/sass/all-digital/components/_form-controls.scss b/assets/sass/all-digital/components/_form-controls.scss index 5957c36..90fe41a 100755 --- a/assets/sass/all-digital/components/_form-controls.scss +++ b/assets/sass/all-digital/components/_form-controls.scss @@ -25,7 +25,6 @@ $form-control: ( .form-control__helper { margin: 0; padding-bottom: 5px; - color: $grey-36; input + & { padding-top: 5px; @@ -40,7 +39,6 @@ $form-control: ( .form-control__label-body { display: block; - color: $grey-72; &.heading5 { margin-bottom: 0; diff --git a/assets/sass/all-digital/components/_form-toggle.scss b/assets/sass/all-digital/components/_form-toggle.scss index a27f8f4..9eeffef 100644 --- a/assets/sass/all-digital/components/_form-toggle.scss +++ b/assets/sass/all-digital/components/_form-toggle.scss @@ -28,7 +28,7 @@ &:before { width: 54px; height: 30px; - background-color: $cool-grey8; + background-color: $cool-grey11; border-radius: 30px; transition: background 0.4s; content: 'OFF '; diff --git a/assets/sass/all-digital/components/_link-group.scss b/assets/sass/all-digital/components/_link-group.scss index bcb5f0b..bd3e48c 100755 --- a/assets/sass/all-digital/components/_link-group.scss +++ b/assets/sass/all-digital/components/_link-group.scss @@ -9,7 +9,7 @@ margin-bottom: 12px; margin-left: 10px; padding-left: 10px; - border-left: 1px solid $cool-grey7; + border-left: 1px solid $cool-grey8; &:first-child { margin-left: 0; diff --git a/assets/sass/all-digital/components/_loading.scss b/assets/sass/all-digital/components/_loading.scss index fc6bf89..0b49a02 100755 --- a/assets/sass/all-digital/components/_loading.scss +++ b/assets/sass/all-digital/components/_loading.scss @@ -19,7 +19,7 @@ .loading__content { @include horizontal-vertical-align(); - background-color: rgba($cool-grey7, 0.2); + background-color: rgba($cool-grey8, 0.2); border-radius: 50%; width: 100px; height: 100px; @@ -27,11 +27,11 @@ text-align: center; .page-section & { - background-color: $cool-grey7; + background-color: $cool-grey8; } @include ui-blue { - background-color: rgba($cool-grey7, 0.2); + background-color: rgba($cool-grey8, 0.2); } } diff --git a/assets/sass/all-digital/utils/_variables.scss b/assets/sass/all-digital/utils/_variables.scss index 596c257..edbcbec 100755 --- a/assets/sass/all-digital/utils/_variables.scss +++ b/assets/sass/all-digital/utils/_variables.scss @@ -2,83 +2,68 @@ // site specific colors and overrides // ========================================================================== -// brand colors -$blue-genie: #2b9cd8; -$blue-berry: #1f6f9a; -$blue-sky: #0272b6; -$blue-ocean: #00619a; -$blue-moon: #015383; -$blue-knight: #051219; -$blue-jeans: #0b7dbf; - -$red-cherry: #c90318; - -$yellow-banana: #fece00; -$yellow-pumpkin: #ffa700; - -$green-lime: #5bc942; -$green-grass: #19a926; -$green-forest: #007B76; - -// additional colors -$minty: #65d0a7; -$lagoon: #1bcfe1; -$green-tea: #1ee2c9; -$smolder: #1f232e; -$urban: #051219; -$red-watermelon: #fb543f; -$turq: #50c3d5; -$haute: #ff5a5a; -$tangerine: #ff9271; -$berry: #ff638d; -$bramble: #bc43d3; -$reign: #7155d3; - -// greys -$white: #fff; -$grey-5: #f2f2f2; -$grey-9: #e8e8e8; -$grey-18: #d1d1d1; -$grey-27: #bababa; -$grey-36: #a3a3a3; -$grey-45: #8c8c8c; -$grey-54: #757575; -$grey-63: #5e5e5e; -$grey-72: #474747; -$grey-81: #303030; -$grey-90: #191919; -$black: #000; - // cool greys +$white: #fff; $cool-grey1: #fbfcfc; $cool-grey2: #f2f4f5; $cool-grey3: #eef1f3; $cool-grey4: #ebeef0; $cool-grey5: #e6eaed; $cool-grey6: #dde2e6; -$cool-grey7: #b1b9bf; -$cool-grey8: #6c747c; -$cool-grey9: #44484c; -$cool-grey10: #191919; +$cool-grey7: #c7cdd2; +$cool-grey8: #b1b9bf; +$cool-grey9: #9ba4aa; +$cool-grey10: #868f96; +$cool-grey11: #646a70; +$cool-grey12: #44484c; +$cool-grey13: #2a2c2d; +$cool-grey14: #191919; +$black: #000; + +// action blue +$blue-sky: #0272B6; +$blue-deep: #0B7DBB; +$blue-genie: #2B9CD8; +$blue-ocean: #00619A; +$blue-moon: #015383; + +// secondary colors +$minty: #65d0a7; +$turq: #50c3d5; +$green-tea: #1ee2c9; +$lagoon: #1bcfe1; +$haute: #D9003A; +$bramble: #AA2DC1; +$reign: #5736CB; +$winkle: #3475CA; +$royal: #2D42A0; +$gunmetal: #2F3845; +$smolder: #1f232e; +$urban: #051219; +$red-watermelon: #fb543f; +$yellow-pumpkin: #ffa700; +$red-cherry: #c90318; // ========================================================================== // functional color palette // ========================================================================== // general -$text-color: $cool-grey10; +$text-color: $cool-grey12; $link-color: $blue-sky; $link-hover-color: $blue-sky; +$link-active-color: $blue-moon; + $background-color: $white; // color degrees $primary: $blue-sky; -$secondary: $blue-berry; +$secondary: $blue-deep; // ui colors -$ui-success: $green-lime; +$ui-success: $minty; $ui-info: $blue-sky; -$ui-warning: $yellow-banana; +$ui-warning: $yellow-pumpkin; $ui-danger: $red-cherry; // ========================================================================== diff --git a/assets/sass/all-digital/utils/themes/_dark.scss b/assets/sass/all-digital/utils/themes/_dark.scss index 0a39dea..d655a25 100755 --- a/assets/sass/all-digital/utils/themes/_dark.scss +++ b/assets/sass/all-digital/utils/themes/_dark.scss @@ -23,8 +23,10 @@ $ui-dark-map: ( @import 'dark/buttons'; @import 'dark/page-sections'; +@import 'dark/links'; $ui-dark-map: map-merge($ui-dark-map, $headings); $ui-dark-map: map-merge($ui-dark-map, $forms); $ui-dark-map: map-merge($ui-dark-map, $buttons); $ui-dark-map: map-merge($ui-dark-map, $page-sections); +$ui-dark-map: map-merge($ui-dark-map, $links); diff --git a/assets/sass/all-digital/utils/themes/dark/_buttons.scss b/assets/sass/all-digital/utils/themes/dark/_buttons.scss index 38ad09d..d17e555 100755 --- a/assets/sass/all-digital/utils/themes/dark/_buttons.scss +++ b/assets/sass/all-digital/utils/themes/dark/_buttons.scss @@ -1,6 +1,17 @@ $buttons: ( button-text-color: $white, + button-secondary-border-color: transparent, button-secondary-text-color-hover: $cool-grey1, - button-secondary-text-color-active: $cool-grey2 + button-secondary-text-color-active: $cool-grey2, + + button-primary-border-color: $blue-deep, + button-primary-background-color: $blue-deep, + button-primary-text-color: $white, + + button-primary-border-color-hover: $blue-ocean, + button-primary-background-color-hover: $blue-ocean, + + button-primary-border-color-active: $blue-moon, + button-primary-background-color-active: $blue-moon ); diff --git a/assets/sass/all-digital/utils/themes/dark/_links.scss b/assets/sass/all-digital/utils/themes/dark/_links.scss new file mode 100644 index 0000000..4c14dbf --- /dev/null +++ b/assets/sass/all-digital/utils/themes/dark/_links.scss @@ -0,0 +1,4 @@ +$links: ( + link-color: $blue-genie, + link-active-color: $blue-sky +); diff --git a/assets/sass/all-digital/utils/themes/grey/_card.scss b/assets/sass/all-digital/utils/themes/grey/_card.scss index 94ef97f..df055d3 100755 --- a/assets/sass/all-digital/utils/themes/grey/_card.scss +++ b/assets/sass/all-digital/utils/themes/grey/_card.scss @@ -1,8 +1,8 @@ $card: ( - card-text-color: $cool-grey10, + card-text-color: $cool-grey14, card-background-color: $white, card-border-color: $cool-grey5, - card-secondary-text-color: $cool-grey10, + card-secondary-text-color: $cool-grey14, card-secondary-background-color: $cool-grey1, card-secondary-border-color: $cool-grey5 ); diff --git a/assets/sass/all-digital/utils/themes/grey/_forms.scss b/assets/sass/all-digital/utils/themes/grey/_forms.scss index 5d38b7c..50c9504 100755 --- a/assets/sass/all-digital/utils/themes/grey/_forms.scss +++ b/assets/sass/all-digital/utils/themes/grey/_forms.scss @@ -1,5 +1,5 @@ $forms: ( - text-input-border-color: $cool-grey8, + text-input-border-color: $cool-grey11, text-input-background-color: rgba($white, 0.75), text-input-text-color: inherit ); diff --git a/assets/sass/all-digital/utils/themes/grey/_headings.scss b/assets/sass/all-digital/utils/themes/grey/_headings.scss index c0f3cbf..454d6cc 100755 --- a/assets/sass/all-digital/utils/themes/grey/_headings.scss +++ b/assets/sass/all-digital/utils/themes/grey/_headings.scss @@ -1,15 +1,15 @@ $headings: ( - display1-color: $cool-grey10, - display2-color: $cool-grey10, - display3-color: $cool-grey10, - heading1-color: $cool-grey10, - heading2-color: $cool-grey10, - heading3-color: $cool-grey10, - heading4-color: $cool-grey10, - body1-color: $cool-grey10, - body2-color: $cool-grey10, - body3-color: $cool-grey10, - body4-color: $cool-grey10, - heading5-color: $cool-grey10, - heading6-color: $cool-grey10 + display1-color: $cool-grey14, + display2-color: $cool-grey14, + display3-color: $cool-grey14, + heading1-color: $cool-grey14, + heading2-color: $cool-grey14, + heading3-color: $cool-grey14, + heading4-color: $cool-grey14, + body1-color: $cool-grey14, + body2-color: $cool-grey12, + body3-color: $cool-grey12, + body4-color: $cool-grey14, + heading5-color: $cool-grey14, + heading6-color: $cool-grey14 ); diff --git a/assets/sass/all-digital/utils/themes/grey/_links.scss b/assets/sass/all-digital/utils/themes/grey/_links.scss index 01735c1..9a4deba 100755 --- a/assets/sass/all-digital/utils/themes/grey/_links.scss +++ b/assets/sass/all-digital/utils/themes/grey/_links.scss @@ -1,4 +1,3 @@ $links: ( - link-color: $blue-sky, - link-hover-color: $blue-berry + link-color: $blue-sky ); diff --git a/assets/sass/all-digital/utils/variables/_card.scss b/assets/sass/all-digital/utils/variables/_card.scss index b5b8150..e7bfdba 100755 --- a/assets/sass/all-digital/utils/variables/_card.scss +++ b/assets/sass/all-digital/utils/variables/_card.scss @@ -2,7 +2,7 @@ // default card // ========================================================================== -$card-text-color: $cool-grey10; +$card-text-color: $cool-grey14; $card-background-color: $white; $card-border-color: $cool-grey6; @@ -10,6 +10,6 @@ $card-border-color: $cool-grey6; // secondary card // ========================================================================== -$card-secondary-text-color: $cool-grey10; +$card-secondary-text-color: $cool-grey14; $card-secondary-background-color: $cool-grey1; $card-secondary-border-color: $cool-grey6; diff --git a/assets/sass/all-digital/utils/variables/_forms.scss b/assets/sass/all-digital/utils/variables/_forms.scss index 74acdb4..18b01e9 100755 --- a/assets/sass/all-digital/utils/variables/_forms.scss +++ b/assets/sass/all-digital/utils/variables/_forms.scss @@ -1,5 +1,5 @@ // default -$text-input-border-color: $cool-grey8 !default; +$text-input-border-color: $cool-grey11 !default; $text-input-background-color: rgba($white, 0.75) !default; $text-input-text-color: inherit !default; $text-input-font-size: 16px !default; diff --git a/assets/sass/all-digital/utils/variables/_headings.scss b/assets/sass/all-digital/utils/variables/_headings.scss index e0ec6c3..433678c 100755 --- a/assets/sass/all-digital/utils/variables/_headings.scss +++ b/assets/sass/all-digital/utils/variables/_headings.scss @@ -1,15 +1,15 @@ -$display1-color: $cool-grey10; -$display2-color: $cool-grey10; -$display3-color: $cool-grey10; -$heading1-color: $cool-grey10; -$heading2-color: $cool-grey10; -$heading3-color: $cool-grey10; -$body1-color: $cool-grey10; -$body2-color: $cool-grey9; -$body3-color: $cool-grey9; -$body4-color: $cool-grey10; -$heading4-color: $cool-grey10; -$heading5-color: $cool-grey10; +$display1-color: $cool-grey14; +$display2-color: $cool-grey14; +$display3-color: $cool-grey14; +$heading1-color: $cool-grey14; +$heading2-color: $cool-grey14; +$heading3-color: $cool-grey14; +$body1-color: $cool-grey14; +$body2-color: $cool-grey12; +$body3-color: $cool-grey12; +$body4-color: $cool-grey14; +$heading4-color: $cool-grey14; +$heading5-color: $cool-grey14; $display1-size: 50; $display2-size: 40; @@ -25,9 +25,9 @@ $heading4-size: 15; $heading5-size: 12; $display1-height: 75; -$display2-height: 60; -$display3-height: 45; -$heading1-height: 36; +$display2-height: 55; +$display3-height: 40; +$heading1-height: 32; $heading2-height: 30; $heading3-height: 27; $body1-height: 24; @@ -47,10 +47,10 @@ $heading2-size-large: 24; $heading3-size-large: 20; $body1-size-large: 18; -$display1-height-large: 105; -$display2-height-large: 75; -$display3-height-large: 60; -$heading1-height-large: 45; +$display1-height-large: 90; +$display2-height-large: 65; +$display3-height-large: 55; +$heading1-height-large: 40; $heading2-height-large: 36; $heading3-height-large: 30; $body1-height-large: 27; diff --git a/assets/sass/all-digital/vendors/_h5bp.scss b/assets/sass/all-digital/vendors/_h5bp.scss index 9e9668b..46098cf 100755 --- a/assets/sass/all-digital/vendors/_h5bp.scss +++ b/assets/sass/all-digital/vendors/_h5bp.scss @@ -1,4 +1,4 @@ -/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ +/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. @@ -20,7 +20,9 @@ html { * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 * - * These selection rule sets have to be separate. + * Vendor-prefixed and regular ::selection selectors cannot be combined: + * https://stackoverflow.com/a/16982510/7133471 + * * Customize the background color to match your design. */ @@ -135,6 +137,8 @@ textarea { .visuallyhidden { border: 0; clip: rect(0 0 0 0); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; @@ -153,6 +157,8 @@ textarea { .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; + -webkit-clip-path: none; + clip-path: none; height: auto; margin: 0; overflow: visible; @@ -217,15 +223,7 @@ textarea { @media print { *, *:before, - *:after, - p:first-letter, - div:first-letter, - blockquote:first-letter, - li:first-letter, - p:first-line, - div:first-line, - blockquote:first-line, - li:first-line { + *:after { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ diff --git a/package.json b/package.json index d586451..d6a28a1 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "all-digital", - "version": "1.12.0", + "version": "2.0.0", "description": "CSS for All Digital", "repository": { "type": "git",