Skip to content
Snippets Groups Projects
Commit d412c61b authored by Martin Leblanc's avatar Martin Leblanc Committed by Eric Bremner
Browse files

ISTWCMS-5631: code standards - css linting for the src/patterns/01-core folder

parent 0e1d80be
No related branches found
No related tags found
1 merge request!16ISTWCMS-5631: presentation layer css for menu
Hide whitespace changes
Inline Side-by-side
Showing
with 200 additions and 275 deletions
src/patterns/01-core/mixins/_svg-background.scss
+ 0
− 4
View file @ d412c61b
...@@ -3,14 +3,10 @@ ...@@ -3,14 +3,10 @@
@mixin svg-background($image-name, $image-location: '../images/') { @mixin svg-background($image-name, $image-location: '../images/') {
background-image: url($image-location + $image-name + '.svg'), linear-gradient(transparent, transparent); background-image: url($image-location + $image-name + '.svg'), linear-gradient(transparent, transparent);
background-repeat: no-repeat; background-repeat: no-repeat;
//background-size: 100%;
//display: inline-block;
} }
@mixin svg-background-color($image-color, $image-name, $image-location: '../images/') { @mixin svg-background-color($image-color, $image-name, $image-location: '../images/') {
background-color: $image-color; background-color: $image-color;
-webkit-mask: url($image-location + $image-name + '.svg') no-repeat;
mask: url($image-location + $image-name + '.svg') no-repeat; mask: url($image-location + $image-name + '.svg') no-repeat;
-webkit-mask-size: contain;
mask-size: contain; mask-size: contain;
} }
src/patterns/01-core/mixins/_uw-mixins.scss
+ 12
− 158
View file @ d412c61b
...@@ -13,7 +13,6 @@ $test-color-12: var(--green-5); ...@@ -13,7 +13,6 @@ $test-color-12: var(--green-5);
@mixin uw-no-breakout { @mixin uw-no-breakout {
overflow-wrap: break-word; overflow-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all; word-break: break-all;
word-break: break-word; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;
...@@ -24,7 +23,6 @@ $test-color-12: var(--green-5); ...@@ -24,7 +23,6 @@ $test-color-12: var(--green-5);
margin-right: auto; margin-right: auto;
max-width: $value; max-width: $value;
padding: 0 var(--size-2); padding: 0 var(--size-2);
@media(min-width: 75rem) { @media(min-width: 75rem) {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
...@@ -61,19 +59,18 @@ $test-color-12: var(--green-5); ...@@ -61,19 +59,18 @@ $test-color-12: var(--green-5);
max-width: inherit; max-width: inherit;
padding: inherit; padding: inherit;
position: relative; position: relative;
right: inherit; right: inherit;
width: inherit; width: inherit;
} }
@mixin uw-contained-width-reset() { @mixin uw-contained-width-reset() {
margin-left:inherit; margin-left: inherit;
margin-right: inherit; margin-right: inherit;
max-width: inherit; max-width: inherit;
padding: inherit; padding: inherit;
@media(min-width: 75rem) { @media(min-width: 75rem) {
padding-left:inherit; padding-left: inherit;
padding-right:inherit; padding-right: inherit;
} }
} }
...@@ -91,20 +88,6 @@ $test-color-12: var(--green-5); ...@@ -91,20 +88,6 @@ $test-color-12: var(--green-5);
// - applies to: flex items // - applies to: flex items
// <positive-number>, initial, auto, or none // <positive-number>, initial, auto, or none
@mixin flex($fg: 1, $fs: 0, $fb: auto) { @mixin flex($fg: 1, $fs: 0, $fb: auto) {
// Set a variable to be used by box-flex properties
$fg-boxflex: $fg;
// Box-Flex only supports a flex-grow value so lets grab the
// first item in the list and just return that.
@if type-of($fg) == 'list' {
$fg-boxflex: nth($fg, 1);
}
-webkit-box: $fg-boxflex;
-moz-box: $fg-boxflex;
-webkit-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb; flex: $fg $fs $fb;
} }
...@@ -112,30 +95,6 @@ $test-color-12: var(--green-5); ...@@ -112,30 +95,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers // - applies to: flex containers
// row (default) | row-reverse | column | column-reverse // row (default) | row-reverse | column | column-reverse
@mixin flex-direction($direction: row) { @mixin flex-direction($direction: row) {
@if $direction == row-reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
} @else if $direction == column {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
} @else if $direction == column-reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
-ms-flex-direction: $direction;
-webkit-flex-direction: $direction;
flex-direction: $direction; flex-direction: $direction;
} }
...@@ -143,14 +102,6 @@ $test-color-12: var(--green-5); ...@@ -143,14 +102,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers // - applies to: flex containers
// nowrap | wrap | wrap-reverse // nowrap | wrap | wrap-reverse
@mixin flex-wrap($value: nowrap) { @mixin flex-wrap($value: nowrap) {
// No Webkit/FF Box fallback.
-webkit-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: inherit;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value; flex-wrap: $value;
} }
...@@ -158,10 +109,6 @@ $test-color-12: var(--green-5); ...@@ -158,10 +109,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers // - applies to: flex containers
// <flex-direction> || <flex-wrap> // <flex-direction> || <flex-wrap>
@mixin flex-flow($values: (row nowrap)) { @mixin flex-flow($values: (row nowrap)) {
// No Webkit/FF Box fallback.
-webkit-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values; flex-flow: $values;
} }
...@@ -169,10 +116,6 @@ $test-color-12: var(--green-5); ...@@ -169,10 +116,6 @@ $test-color-12: var(--green-5);
// - applies to: flex items // - applies to: flex items
// <integer> // <integer>
@mixin order($int: 0) { @mixin order($int: 0) {
-webkit-box-ordinal-group: $int + 1;
-moz-box-ordinal-group: $int + 1;
-ms-flex-order: $int;
-webkit-order: $int;
order: $int; order: $int;
} }
...@@ -180,10 +123,6 @@ $test-color-12: var(--green-5); ...@@ -180,10 +123,6 @@ $test-color-12: var(--green-5);
// - applies to: flex items // - applies to: flex items
// <number> // <number>
@mixin flex-grow($int: 1) { @mixin flex-grow($int: 1) {
-webkit-box-flex: $int;
-moz-box-flex: $int;
-ms-flex: $int;
-webkit-flex-grow: $int;
flex-grow: $int; flex-grow: $int;
} }
...@@ -191,9 +130,6 @@ $test-color-12: var(--green-5); ...@@ -191,9 +130,6 @@ $test-color-12: var(--green-5);
// - applies to: flex item shrink factor // - applies to: flex item shrink factor
// <number> // <number>
@mixin flex-shrink($int: 0) { @mixin flex-shrink($int: 0) {
-ms-flex: $int;
-webkit-flex-shrink: $int;
-moz-flex-shrink: $int;
flex-shrink: $int; flex-shrink: $int;
} }
...@@ -202,7 +138,6 @@ $test-color-12: var(--green-5); ...@@ -202,7 +138,6 @@ $test-color-12: var(--green-5);
// - applies to: flex itemsnitial main size of the flex item // - applies to: flex itemsnitial main size of the flex item
// <width> // <width>
@mixin flex-basis($value: auto) { @mixin flex-basis($value: auto) {
-webkit-flex-basis: $value;
flex-basis: $value; flex-basis: $value;
} }
...@@ -210,28 +145,6 @@ $test-color-12: var(--green-5); ...@@ -210,28 +145,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers // - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around // flex-start | flex-end | center | space-between | space-around
@mixin justify-content($value: flex-start) { @mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-moz-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: distribute;
} @else {
-webkit-box-pack: $value;
-moz-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
justify-content: $value; justify-content: $value;
} }
...@@ -239,17 +152,6 @@ $test-color-12: var(--green-5); ...@@ -239,17 +152,6 @@ $test-color-12: var(--green-5);
// - applies to: multi-line flex containers // - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch // flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($value: stretch) { @mixin align-content($value: stretch) {
// No Webkit Box Fallback.
-webkit-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value; align-content: $value;
} }
...@@ -257,22 +159,6 @@ $test-color-12: var(--green-5); ...@@ -257,22 +159,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers // - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch // flex-start | flex-end | center | baseline | stretch
@mixin align-items($value: stretch) { @mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-moz-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-moz-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
align-items: $value; align-items: $value;
} }
...@@ -280,38 +166,30 @@ $test-color-12: var(--green-5); ...@@ -280,38 +166,30 @@ $test-color-12: var(--green-5);
// - applies to: flex items // - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch // auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($value: auto) { @mixin align-self($value: auto) {
// No Webkit Box Fallback.
-webkit-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value; align-self: $value;
} }
// Display of elements in gridded style. // Display of elements in gridded style.
@mixin uw-flex-grid($value: flexbox){ @mixin uw-flex-grid($value: flexbox){
@if $value == inline-flex { @if $value == inline-flex {
@include inline-flex(); @include inline-flex();
@include flex-flow(row wrap); @include flex-flow(row wrap);
gap: var(--grid-gap); gap: var(--grid-gap);
}@else if $value == term{ }
@else if $value == term{
@include flexbox(); @include flexbox();
@include flex-wrap(wrap); @include flex-wrap(wrap);
gap: var(--grid-gap); gap: var(--grid-gap);
}@else if $value == card{ }
@else if $value == card{
@include flexbox(); @include flexbox();
@include flex-direction(column); @include flex-direction(column);
}@else if $value == masonry{ }
@else if $value == masonry{
@include flexbox(); @include flexbox();
@include flex-flow(row wrap); @include flex-flow(row wrap);
}@else{ }
@else{
@include flexbox(); @include flexbox();
@include flex-flow(row wrap); @include flex-flow(row wrap);
gap: var(--grid-gap); gap: var(--grid-gap);
...@@ -323,12 +201,10 @@ $test-color-12: var(--green-5); ...@@ -323,12 +201,10 @@ $test-color-12: var(--green-5);
@include flex(); @include flex();
@include align-items(flex-start); @include align-items(flex-start);
width: 100%; width: 100%;
@media(min-width: 48.06rem) { @media(min-width: 48.06rem) {
@include flex(1 1 auto); @include flex(1 1 auto);
@include flex-grow(1); @include flex-grow(1);
width: 45%; width: 45%;
.uw-contained-width--narrow &, .uw-contained-width--narrow &,
.layout--uw-inverted-l-right &, .layout--uw-inverted-l-right &,
.layout--uw-inverted-l-left &, .layout--uw-inverted-l-left &,
...@@ -341,7 +217,6 @@ $test-color-12: var(--green-5); ...@@ -341,7 +217,6 @@ $test-color-12: var(--green-5);
@media(min-width: 63.1875rem) { @media(min-width: 63.1875rem) {
width: 30%; width: 30%;
.uw-contained-width--wide &{ .uw-contained-width--wide &{
width: 45% !important; width: 45% !important;
} }
...@@ -352,30 +227,9 @@ $test-color-12: var(--green-5); ...@@ -352,30 +227,9 @@ $test-color-12: var(--green-5);
@mixin uw-flex-term-item(){ @mixin uw-flex-term-item(){
align-self: flex-start; align-self: flex-start;
width: 100%; width: 100%;
@media(min-width: 48.06rem) { @media(min-width: 48.06rem) {
@include flex(1 1 auto); @include flex(1 1 auto);
@include flex-grow(1); @include flex-grow(1);
width: 45%; width: 45%;
} }
@media(min-width: 63.1875rem) {
//width: 30%;
}
}
// Display of elements in list style.
@mixin uw-flex-list(){
//
}
// Display of list item.
@mixin uw-flex-list-item(){
}
// Display of mosiac item.
@mixin uw-flex-masonry-item(){
}
// Display of gallery item.
@mixin uw-flex-gallery-item(){
} }
src/patterns/01-core/props/_animations.scss
+ 108
− 46
View file @ d412c61b
:where(html) { :where(html) {
--animation-fade-in: fade-in .5s var(--ease-3); --animation-fade-in: fade-in 0.5s var(--ease-3);
--animation-fade-out: fade-out .5s var(--ease-3); --animation-fade-out: fade-out 0.5s var(--ease-3);
--animation-scale-up: scale-up .5s var(--ease-3); --animation-scale-up: scale-up 0.5s var(--ease-3);
--animation-scale-down: scale-down .5s var(--ease-3); --animation-scale-down: scale-down 0.5s var(--ease-3);
--animation-slide-out-up: slide-out-up .5s var(--ease-3); --animation-slide-out-up: slide-out-up 0.5s var(--ease-3);
--animation-slide-out-down: slide-out-down .5s var(--ease-3); --animation-slide-out-down: slide-out-down 0.5s var(--ease-3);
--animation-slide-out-right: slide-out-right .5s var(--ease-3); --animation-slide-out-right: slide-out-right 0.5s var(--ease-3);
--animation-slide-out-left: slide-out-left .5s var(--ease-3); --animation-slide-out-left: slide-out-left 0.5s var(--ease-3);
--animation-slide-in-up: slide-in-up .5s var(--ease-3); --animation-slide-in-up: slide-in-up 0.5s var(--ease-3);
--animation-slide-in-down: slide-in-down .5s var(--ease-3); --animation-slide-in-down: slide-in-down 0.5s var(--ease-3);
--animation-slide-in-right: slide-in-right .5s var(--ease-3); --animation-slide-in-right: slide-in-right 0.5s var(--ease-3);
--animation-slide-in-left: slide-in-left .5s var(--ease-3); --animation-slide-in-left: slide-in-left 0.5s var(--ease-3);
--animation-shake-x: shake-x .75s var(--ease-out-5); --animation-shake-x: shake-x 0.75s var(--ease-out-5);
--animation-shake-y: shake-y .75s var(--ease-out-5); --animation-shake-y: shake-y 0.75s var(--ease-out-5);
--animation-spin: spin 2s linear infinite; --animation-spin: spin 2s linear infinite;
--animation-ping: ping 5s var(--ease-out-3) infinite; --animation-ping: ping 5s var(--ease-out-3) infinite;
--animation-blink: blink 1s var(--ease-out-3) infinite; --animation-blink: blink 1s var(--ease-out-3) infinite;
...@@ -22,99 +22,161 @@ ...@@ -22,99 +22,161 @@
} }
@keyframes fade-in { @keyframes fade-in {
to { opacity: 1 } to {
opacity: 1;
}
} }
@keyframes fade-out { @keyframes fade-out {
to { opacity: 0 } to {
opacity: 0;
}
} }
@keyframes scale-up { @keyframes scale-up {
to { transform: scale(1.25) } to {
transform: scale(1.25);
}
} }
@keyframes scale-down { @keyframes scale-down {
to { transform: scale(.75) } to {
transform: scale(0.75);
}
} }
@keyframes slide-out-up { @keyframes slide-out-up {
to { transform: translateY(-100%) } to {
transform: translateY(-100%);
}
} }
@keyframes slide-out-down { @keyframes slide-out-down {
to { transform: translateY(100%) } to {
transform: translateY(100%);
}
} }
@keyframes slide-out-right { @keyframes slide-out-right {
to { transform: translateX(100%) } to {
transform: translateX(100%);
}
} }
@keyframes slide-out-left { @keyframes slide-out-left {
to { transform: translateX(-100%) } to {
transform: translateX(-100%);
}
} }
@keyframes slide-in-up { @keyframes slide-in-up {
from { transform: translateY(100%) } from {
transform: translateY(100%);
}
} }
@keyframes slide-in-down { @keyframes slide-in-down {
from { transform: translateY(-100%) } from {
transform: translateY(-100%);
}
} }
@keyframes slide-in-right { @keyframes slide-in-right {
from { transform: translateX(-100%) } from {
transform: translateX(-100%);
}
} }
@keyframes slide-in-left { @keyframes slide-in-left {
from { transform: translateX(100%) } from {
transform: translateX(100%);
}
} }
@keyframes shake-x { @keyframes shake-x {
0%, 100% { transform: translateX(0%) } 0%,
20% { transform: translateX(-5%) } 100% {
40% { transform: translateX(5%) } transform: translateX(0%);
60% { transform: translateX(-5%) } }
80% { transform: translateX(5%) } 20% {
transform: translateX(-5%);
}
40% {
transform: translateX(5%);
}
60% {
transform: translateX(-5%);
}
80% {
transform: translateX(5%);
}
} }
@keyframes shake-y { @keyframes shake-y {
0%, 100% { transform: translateY(0%) } 0%,
20% { transform: translateY(-5%) } 100% {
40% { transform: translateY(5%) } transform: translateY(0%);
60% { transform: translateY(-5%) } }
80% { transform: translateY(5%) } 20% {
transform: translateY(-5%);
}
40% {
transform: translateY(5%);
}
60% {
transform: translateY(-5%);
}
80% {
transform: translateY(5%);
}
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(1turn) } to {
transform: rotate(1turn);
}
} }
@keyframes ping { @keyframes ping {
90%, 100% { 90%,
100% {
transform: scale(2); transform: scale(2);
opacity: 0; opacity: 0;
} }
} }
@keyframes blink { @keyframes blink {
0%, 100% { 0%,
opacity: 1 100% {
opacity: 1;
} }
50% { 50% {
opacity: .5 opacity: 0.5;
} }
} }
@keyframes float { @keyframes float {
50% { transform: translateY(-25%) } 50% {
transform: translateY(-25%);
}
} }
@keyframes bounce { @keyframes bounce {
25% { transform: translateY(-20%) } 25% {
40% { transform: translateY(-3%) } transform: translateY(-20%);
0%, 60%, 100% { transform: translateY(0) } }
40% {
transform: translateY(-3%);
}
0%,
60%,
100% {
transform: translateY(0);
}
} }
@keyframes pulse { @keyframes pulse {
50% { transform: scale(.9,.9) } 50% {
transform: scale(0.9, 0.9);
}
} }
src/patterns/01-core/props/_aspects.scss
+ 1
− 1
View file @ d412c61b
...@@ -4,5 +4,5 @@ ...@@ -4,5 +4,5 @@
--ratio-portrait: 3/4; --ratio-portrait: 3/4;
--ratio-widescreen: 16/9; --ratio-widescreen: 16/9;
--ratio-ultrawide: 18/5; --ratio-ultrawide: 18/5;
--ratio-golden: 1.6180/1; --ratio-golden: 1.618/1;
} }
src/patterns/01-core/props/_colors.scss
+ 13
− 12
View file @ d412c61b
...@@ -10,13 +10,13 @@ ...@@ -10,13 +10,13 @@
--cgc-3: #b71233; --cgc-3: #b71233;
--cgc-4: #80001f; --cgc-4: #80001f;
--cgc-red: #c4262e; --cgc-red: #c4262e;
--cgc-light: #E8878C; --cgc-light: #e8878c;
--cgc-primary: #c4262e; --cgc-primary: #c4262e;
--gray-0: #ffffff; --gray-0: #ffffff;
--gray-1: #fafafa; --gray-1: #fafafa;
--gray-2: #eee; --gray-2: #eee;
--gray-3: #ccc; --gray-3: #ccc;
--gray-4: #A2A2A2; --gray-4: #a2a2a2;
--gray-5: #757575; --gray-5: #757575;
--gray-6: #4e4e4e; --gray-6: #4e4e4e;
--gray-7: #333; --gray-7: #333;
...@@ -63,24 +63,25 @@ ...@@ -63,24 +63,25 @@
--stj-4: #80001f; --stj-4: #80001f;
--stj-gold: #c88a11; --stj-gold: #c88a11;
--stj-green: #01573e; --stj-green: #01573e;
--stj-light: #92B7AC; --stj-light: #92b7ac;
--stj-primary: #01573e; --stj-primary: #01573e;
--stp-1: #ffa5aa; --stp-1: #ffa5aa;
--stp-2: #e41740; --stp-2: #e41740;
--stp-3: #b71233; --stp-3: #b71233;
--stp-4: #80001f; --stp-4: #80001f;
--stp-brown: #c88a11; --stp-brown: #584528;
--stp-green: #01573e; --stp-green: #879637;
--stp-light: #92B7AC; --stp-light: #c2cd79;
--stp-primary: #01573e; --stp-primary: #879637;
--ren-1: #ffa5aa; --ren-1: #ffa5aa;
--ren-2: #e41740; --ren-2: #e41740;
--ren-3: #b71233; --ren-3: #b71233;
--ren-4: #80001f; --ren-4: #80001f;
--ren-gold: #c88a11; --ren-red: #de3831;
--ren-green: #01573e; --ren-gold: #d2c295;
--ren-light: #92B7AC; --ren-green: #00693c;
--ren-primary: #01573e; --ren-light: #7fb49d;
--ren-primary: #00693c;
--uw-black: #000; --uw-black: #000;
--uw-black-1: #dfdfdf; --uw-black-1: #dfdfdf;
--uw-black-2: #a2a2a2; --uw-black-2: #a2a2a2;
...@@ -236,7 +237,7 @@ $faculties_colours: ( ...@@ -236,7 +237,7 @@ $faculties_colours: (
//Swatches //Swatches
.pl-colors .color-demo > div > div{ .pl-colors .color-demo > div > div{
background-color: rgba(0,0,0,0.6); background-color: rgba(0, 0, 0, 0.6);
font-family: var(--font-systembold); font-family: var(--font-systembold);
font-size: var(--font-size-000); font-size: var(--font-size-000);
} }
src/patterns/01-core/props/_easing.scss
+ 28
− 28
View file @ d412c61b
:where(html) { :where(html) {
--ease-1: cubic-bezier(.25, 0, .5, 1); --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
--ease-2: cubic-bezier(.25, 0, .4, 1); --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
--ease-3: cubic-bezier(.25, 0, .3, 1); --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
--ease-4: cubic-bezier(.25, 0, .2, 1); --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
--ease-5: cubic-bezier(.25, 0, .1, 1); --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
--ease-in-1: cubic-bezier(.25, 0, 1, 1); --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
--ease-in-2: cubic-bezier(.50, 0, 1, 1); --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
--ease-in-3: cubic-bezier(.70, 0, 1, 1); --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
--ease-in-4: cubic-bezier(.90, 0, 1, 1); --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
--ease-in-5: cubic-bezier(1, 0, 1, 1); --ease-in-5: cubic-bezier(1, 0, 1, 1);
--ease-out-1: cubic-bezier(0, 0, .75, 1); --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
--ease-out-2: cubic-bezier(0, 0, .50, 1); --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
--ease-out-3: cubic-bezier(0, 0, .3, 1); --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
--ease-out-4: cubic-bezier(0, 0, .1, 1); --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
--ease-out-5: cubic-bezier(0, 0, 0, 1); --ease-out-5: cubic-bezier(0, 0, 0, 1);
--ease-in-out-1: cubic-bezier(.1, 0, .9, 1); --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
--ease-in-out-2: cubic-bezier(.3, 0, .7, 1); --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
--ease-in-out-3: cubic-bezier(.5, 0, .5, 1); --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
--ease-in-out-4: cubic-bezier(.7, 0, .3, 1); --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
--ease-in-out-5: cubic-bezier(.9, 0, .1, 1); --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
--ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25); --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
--ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25); --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
--ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25); --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
--ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25); --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
--ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25); --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
--ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5); --ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
--ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5); --ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
--ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5); --ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
--ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5); --ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
--ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5); --ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
--ease-step-1: steps(2); --ease-step-1: steps(2);
--ease-step-2: steps(3); --ease-step-2: steps(3);
--ease-step-3: steps(4); --ease-step-3: steps(4);
......
src/patterns/01-core/props/_fonts.scss
+ 28
− 16
View file @ d412c61b
:where(html) { :where(html) {
--font-book: 'BureauGrot Book', 'Barlow', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif; /* stylelint-disable-next-line value-keyword-case */
--font-condensed: 'BureauGrotCond', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif; --font-book: 'BureauGrot Book', 'Barlow', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
/* stylelint-disable-next-line value-keyword-case */
--font-condensed: 'BureauGrotCond', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
/* stylelint-disable-next-line value-keyword-case */
--font-condensedbook: 'BureauGrotCond Book', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif; --font-condensedbook: 'BureauGrotCond Book', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
--font-sans: BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif; /* stylelint-disable-next-line value-keyword-case */
--font-serif: georgia, 'droid serif', 'Times New Roma', Times, serif; --font-sans: BureauGrot, Barlow, impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
--font-system: Typ1451-Regular,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif; /* stylelint-disable-next-line value-keyword-case */
--font-systemlight: Typ1451-Light,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif; --font-serif: georgia, 'droid serif', 'Times New Roma', Times, serif;
--font-systemmedium: Typ1451-Medium,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif; /* stylelint-disable-next-line value-keyword-case */
--font-systembold: Typ1451-Bold,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif; --font-system: Typ1451-Regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
/* stylelint-disable-next-line value-keyword-case */
--font-systemlight: Typ1451-Light, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
/* stylelint-disable-next-line value-keyword-case */
--font-systemmedium: Typ1451-Medium, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
/* stylelint-disable-next-line value-keyword-case */
--font-systembold: Typ1451-Bold, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
/* stylelint-disable-next-line value-keyword-case */
--font-mono: Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif; --font-mono: Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
/* stylelint-disable-next-line value-keyword-case */
--font-primary: georgia, 'droid serif', 'Times New Roma', Times, serif; --font-primary: georgia, 'droid serif', 'Times New Roma', Times, serif;
--font-secondary: BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif; /* stylelint-disable-next-line value-keyword-case */
--font-secondary: BureauGrot, Barlow, impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
--font-weight-100: 100; --font-weight-100: 100;
--font-weight-200: 200; --font-weight-200: 200;
--font-weight-300: 300; --font-weight-300: 300;
...@@ -21,7 +33,7 @@ ...@@ -21,7 +33,7 @@
--font-weight-800: 800; --font-weight-800: 800;
--font-weight-900: 900; --font-weight-900: 900;
--font-size-0000000: 7.888px; --font-size-0000000: 7.888px;
--font-size-000000: 8.88px; --font-size-000000: 8.88px;
--font-size-00000: 9.984px; --font-size-00000: 9.984px;
--font-size-0000: 11.232px; --font-size-0000: 11.232px;
--font-size-000: 12.64px; --font-size-000: 12.64px;
...@@ -42,8 +54,8 @@ ...@@ -42,8 +54,8 @@
--font-size-13: 73.984px; --font-size-13: 73.984px;
--font-size-14: 83.232px; --font-size-14: 83.232px;
--font-size-15: 93.632px; --font-size-15: 93.632px;
--font-size-16: 105.328px; --font-size-16: 105.328px;
--font-lineheight-00: .95; --font-lineheight-00: 0.95;
--font-lineheight-1: 1.1; --font-lineheight-1: 1.1;
--font-lineheight-2: 1.25; --font-lineheight-2: 1.25;
--font-lineheight-3: 1.375; --font-lineheight-3: 1.375;
...@@ -52,10 +64,10 @@ ...@@ -52,10 +64,10 @@
--font-lineheight-6: 2; --font-lineheight-6: 2;
--font-letterspacing-0: -0.05em; --font-letterspacing-0: -0.05em;
--font-letterspacing-1: 0.025em; --font-letterspacing-1: 0.025em;
--font-letterspacing-2: 0.050em; --font-letterspacing-2: 0.05em;
--font-letterspacing-3: 0.75em; --font-letterspacing-3: 0.75em;
--font-letterspacing-4: 0.150em; --font-letterspacing-4: 0.15em;
--font-letterspacing-5: 0.500em; --font-letterspacing-5: 0.5em;
--font-letterspacing-6: 0.750em; --font-letterspacing-6: 0.75em;
--font-letterspacing-7: 1em; --font-letterspacing-7: 1em;
} }
src/patterns/01-core/props/_sizes.scss
+ 1
− 1
View file @ d412c61b
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
--size-15: 7.5rem; // 120px --size-15: 7.5rem; // 120px
--size-16: 8rem; // 128px --size-16: 8rem; // 128px
--size-20: 10rem; // 160px --size-20: 10rem; // 160px
--size-fluid-1: clamp(.5rem, 1vw, 1rem); --size-fluid-1: clamp(0.5rem, 1vw, 1rem);
--size-fluid-2: clamp(1rem, 2vw, 1.5rem); --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
--size-fluid-3: clamp(1.5rem, 3vw, 2rem); --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
--size-fluid-4: clamp(2rem, 4vw, 3rem); --size-fluid-4: clamp(2rem, 4vw, 3rem);
......
src/patterns/01-core/utilities/_pl-override.scss
+ 9
− 9
View file @ d412c61b
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
.pl-c-pattern__extra-toggle, .pl-c-pattern__extra-toggle,
.pl-js-pattern-extra-toggle{ .pl-js-pattern-extra-toggle{
border: var(--size-xs) solid var(--gray-4) !important; border: var(--size-xs) solid var(--gray-4) !important;
border-size: var(--size-xs) var(--size-xs) 0 var(--size-xs); border-width: var(--size-xs) var(--size-xs) 0 var(--size-xs);
box-shadow: none !important; box-shadow: none !important;
font-size:inherit !important; font-size: inherit !important;
&:hover{ &:hover{
border: var(--size-xs) solid var(--gray-6) !important; border: var(--size-xs) solid var(--gray-6) !important;
} }
} }
.pl-c-code-copy-btn, .pl-c-code-copy-btn,
.pl-js-code-copy-btn{ .pl-js-code-copy-btn{
width:inherit; width: inherit;
max-width: 4rem; max-width: var(--size-8);
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment