diff options
Diffstat (limited to 'templates/@theme-base/reusable-components')
10 files changed, 1146 insertions, 501 deletions
diff --git a/templates/@theme-base/reusable-components/_design-system-colors.scss b/templates/@theme-base/reusable-components/_design-system-colors.scss index 3dfeda4..650d1aa 100644 --- a/templates/@theme-base/reusable-components/_design-system-colors.scss +++ b/templates/@theme-base/reusable-components/_design-system-colors.scss @@ -12,11 +12,14 @@ background-color: $pm-global-light; } .bg-global-border { - background-color: $pm-global-border; + background-color: var(--bordercolor-input, $pm-global-border); } .bg-global-muted { background-color: $pm-global-muted; } +.bg-global-muted-dm { + background-color: var(--bgcolor-muted, $pm-global-muted); +} .bg-global-success { background-color: $pm-global-success; } @@ -26,6 +29,9 @@ .bg-global-attention { background-color: $pm-global-attention; } +.bg-global-info { + background-color: $pm-global-info; +} .bg-pm-blue { background-color: $pm-blue; } @@ -35,9 +41,12 @@ .bg-pm-blue-light { background-color: $pm-blue-light; } +.bg-pm-blue-gradient { + background-image: $pm-blue-gradient; +} .bg-global-highlight { - background-color: var(--bgcolor-input, $pm-global-light); + background-color: var(--bgcolor-highlight, $pm-global-light); } @@ -83,6 +92,9 @@ .bg-inherit { background: inherit; } +.bg-currentColor { + background: currentColor; +} .fill-global-grey { fill: $pm-global-grey; @@ -93,6 +105,9 @@ .fill-global-light { fill: $pm-global-light; } +.fill-global-highlight { + fill: var(--bgcolor-highlight, $pm-global-light); +} .fill-global-border { fill: $pm-global-border; } @@ -131,6 +146,9 @@ .fill-white { fill: $white; } +.fill-white-dm { + fill: var(--bgcolor-main-area, $white); +} .fill-black { fill: $black; } @@ -241,6 +259,9 @@ .color-global-grey { color: $pm-global-grey; } +.color-global-grey-dm { + color: var(--color-main-area, $pm-global-grey); +} .color-global-altgrey { color: $pm-global-altgrey; } @@ -262,6 +283,9 @@ .color-global-attention { color: $pm-global-attention; } +.color-global-info { + color: $pm-global-info; +} .color-pm-blue { color: $pm-blue; } @@ -271,6 +295,9 @@ .color-pm-blue-light { color: $pm-blue-light; } +.color-subheader { + color: var(--bgcolor-subheader, $text-sub-header); +} .color-pv-green { color: $pv-green; diff --git a/templates/@theme-base/reusable-components/_design-system-config.scss b/templates/@theme-base/reusable-components/_design-system-config.scss index 6502e2f..98473cd 100644 --- a/templates/@theme-base/reusable-components/_design-system-config.scss +++ b/templates/@theme-base/reusable-components/_design-system-config.scss @@ -12,6 +12,10 @@ $size-h4 : 18 !default; $size-h5 : 17 !default; $size-h6 : 16 !default; +// Use typo helpers on demand +$use-other-typo-helpers : true !default; +$use-other-line-height-helpers: true !default; + $size-smallest : 9 !default; $size-smaller : 10 !default; $size-small : 12 !default; @@ -21,20 +25,24 @@ $size-biggest : 20 !default; // fonts $font-family : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default; - +$font-family-monospace : SFMono-Regular,Consolas,"Liberation Mono","Menlo",monospace,monospace !default; +// explanation for double monospace http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/ // project colors $pm-global-grey : #262a33 !default; $pm-global-altgrey : #3c414e !default; +$bluish-grey : #9799a6 !default; $pm-global-light : #f6f7fa !default; $pm-global-border : #dde6ec !default; -$pm-global-muted : #eeeff1 !default; +$pm-global-muted : #eeeff3 !default; +$pm-global-info : #008cff !default; $pm-global-success : #5db039 !default; $pm-global-warning : #ec5858 !default; $pm-global-attention : #eac819 !default; $pm-blue : #657ee4 !default; $pm-blue-dark : #526ee0 !default; $pm-blue-light : #788ee8 !default; +$pm-blue-gradient : linear-gradient(130deg, #657ee4 -7%, #7351d1 64%, #7350d1 127%); $white : #fff !default; $black : #000 !default; @@ -58,11 +66,20 @@ $pm-primary-dark : $pm-blue-dark !default; // not approved colors $pm-input-background : #fcfdff !default; $plan-logo-color : #8ed60f !default; -$conversation-selected-bg: #e3e7f6 !default; +$conversation-selected-bg: rgba($pm-blue, .5) !default; +$input-shadow-color : rgba(0, 0, 0, 0.16) !default; +$autocomplete-bg-color-hover : #f4f4f4 !default; +$text-sub-header : #767676 !default; // needed for darkmode $pm-secondary-grey : #2e323d !default; -$pm-tertiary-grey : #505560 !default; // border input +$pm-tertiary-grey : #505560 !default; // border input + +// needed globally +$calendar-selected-day-color: $pm-blue-light !default; +$calendar-today-color: $pm-primary-dark !default; + +$navigation-hover-bg-color: rgba(white, .05) !default; // colors $color-links : $pm-primary !default; @@ -80,6 +97,7 @@ $input-defaut-border : $pm-global-border !default; // main breakpoints $breakpoint-large : 1500 !default; +$breakpoint-medium-landscape : 1100 !default; $breakpoint-medium : 910 !default; $breakpoint-small : 680 !default; $breakpoint-tiny : 450 !default; @@ -90,6 +108,9 @@ $rtl-option : false !default; // to adapt a website in a language that is written from right to left // designed for multilingual websites with LTR et RTL +// Custom scrollbar everywhere +$custom-scroll : true !default; + // hyphens $hyphenation : false !default; @@ -99,9 +120,14 @@ $use-clearleft_right : false !default; $use-clearhidden : false !default; $use-clearfix : false !default; -// vertical rythm -// possible values : 'double_top_single_bottom', 'single_top', 'single_bottom' -$vertical-rythm : 'single_bottom' !default; +// color reset for mark tag +$use-color-reset-mark : true !default; +$default-bgColor-mark : #ff0 !default; + + +// vertical rhythm +// possible values : 'double_top_single_bottom', 'single_top_single_bottom', 'single_top', 'single_bottom' +$vertical-rhythm : 'single_bottom' !default; // units for typo // possible values : 'use_em', 'use_rem', 'use_rem_with_em_fallback' @@ -114,23 +140,34 @@ $root-equiv-10-px : true !default; // you should NEVER update this value, however… who can predict the future… $root-default-font-size: 16 !default; +// applies main colors on body tag +$apply-body-styles : true !default; + // others $use-reset-button : true !default; +$use-ie-calc-font-fallback: false !default; $use-old-ie-fallbacks : true !default; +$use-height-auto-img : true !default; +$use-height-auto-td : true !default; +$use-height-auto-table : true !default; // default config for webpack, can be overriden by "global config" in styles-pm.scss $path-images : '../../assets/img/shared/' !default; // variables for global layouts, allowing you to use calc for components and adapt quickly if needed -$aside-bar-width : 4.5rem !default; $header-height : 8rem !default; -$width-sidebar : 19rem !default; // main navigation +$width-sidebar : 24rem !default; // main navigation $toolbar-height : 5rem !default; -$subnav-width : 25rem !default; // quick nav on the right +$context-bar-width : 25vw !default; // context bar on the right +$context-bar-min-width : 30rem !default; +$context-bar-max-width : 40rem !default; + +$default-height-fields : 3.5rem !default; $conversations-column-width: 35% !default; // used also to align search bar on top +$pm-label-width: 18em !default; // Sass functions: don’t touch if you are not sure ;) @@ -176,45 +213,22 @@ $conversations-column-width: 35% !default; // used also to align search bar on @if $type-vr == 'double_top_single_bottom' { @return ( ($margin * $other_coef)*1em 0 ( ($margin/2) * $other_coef) *1em 0 ); } + @if $type-vr == 'single_top_single_bottom' { + @return ( ( ($margin/2) * $other_coef) *1em 0 ); + } @else if $type-vr == 'single_bottom' { @return ( 0 0 ( ($margin/2) * $other_coef) *1em 0 ); } @else if $type-vr == 'single_top' { @return ( ( ($margin/2) * $other_coef) *1em 0 0 0 ); } -} - - -@function margin-em-other ($font-size, $base-height, $base-font, $type-vr){ - - $coef: ceil(1 / ($base-height * $base-font / $font-size)); - $height: ($base-font * $base-height / $font-size) ; - $margin: ($height * $coef ); - - @return ( ($margin)*1em 0 ); - -} - - -@mixin flow-hr( $value, $type-vr: $vertical-rythm, $type-unit: $typo-unit ){ - - @if $type-unit == 'use_em' { - font-size: em($value); - } - @else if $type-unit == 'use_rem' { - font-size: rem($value); + @else if $type-vr == 'double_top_double_bottom_without_coef' { + @return (($margin *1em) 0); } - @else if $type-unit == 'use_rem_with_em_fallback' { - font-size: em($value); - font-size: rem($value); - } - line-height: line-height($value, $l-h, $base-font, $type-vr); - margin: margin-em($value, $l-h, $base-font, $type-vr) ; - } -@mixin flow-other( $value, $type-vr: $vertical-rythm, $type-unit: $typo-unit ){ +@mixin rhythm( $value, $type-vr: $vertical-rhythm, $type-unit: $typo-unit ){ @if $type-unit == 'use_em' { font-size: em($value); @@ -227,7 +241,7 @@ $conversations-column-width: 35% !default; // used also to align search bar on font-size: rem($value); } line-height: line-height($value, $l-h, $base-font, $type-vr); - margin: margin-em-other($value, $l-h, $base-font, $type-vr) ; + margin: margin-em($value, $l-h, $base-font, $type-vr) ; } @@ -377,7 +391,7 @@ $conversations-column-width: 35% !default; // used also to align search bar on } @else if $query-type == "min" { - @media (min-width: em($breakpoint, $root-default-font-size)) { + @media (min-width: em($breakpoint + 1, $root-default-font-size)) { @content; } } @@ -388,6 +402,12 @@ $conversations-column-width: 35% !default; // used also to align search bar on } } + @else if $query-type == "min-height" { + @media (min-height: em($breakpoint, $root-default-font-size)) { + @content; + } + } + @else { @warn "Type non supported."; } @@ -410,4 +430,52 @@ $conversations-column-width: 35% !default; // used also to align search bar on @warn "$value-content not specified"; } -}
\ No newline at end of file +} + + +// +// Easing functions for transitions and animations +// Learn more at http://easings.net/ +// + +@function easing($type: 'ease') { + + $value: ''; + + @if $type == 'linear' { $value: '0, 0, 1, 1'; } + @else if $type == 'ease' { $value: '0.25, 0.1, 0.25, 1'; } + @else if $type == 'easeIn' { $value: '0.42, 0, 1, 1'; } + @else if $type == 'easeOut' { $value: '0, 0, 0.58, 1'; } + @else if $type == 'easeInOut' { $value: '0.42, 0, 0.58, 1'; } + + @else if $type == 'easeInSine' { $value: '0.12, 0, 0.39, 0'; } + @else if $type == 'easeInQuad' { $value: '0.11, 0, 0.5, 0'; } + @else if $type == 'easeInCubic' { $value: '0.32, 0, 0.67, 0'; } + @else if $type == 'easeInQuart' { $value: '0.5 , 0, 0.75, 0'; } + @else if $type == 'easeInQuint' { $value: '0.64, 0, 0.78, 0'; } + @else if $type == 'easeInExpo' { $value: '0.7 , 0, 0.84, 0'; } + @else if $type == 'easeInCirc' { $value: '0.55, 0, 1, 0.45'; } + @else if $type == 'easeInBack' { $value: '0.36, 0, 0.66, -0.56'; } + + @else if $type == 'easeOutSine' { $value: '0.61, 1, 0.88, 1'; } + @else if $type == 'easeOutQuad' { $value: '0.5, 1, 0.89, 1'; } + @else if $type == 'easeOutCubic' { $value: '0.33, 1, 0.68, 1'; } + @else if $type == 'easeOutQuart' { $value: '0.25, 1, 0.5, 1'; } + @else if $type == 'easeOutQuint' { $value: '0.22, 1, 0.36, 1'; } + @else if $type == 'easeOutExpo' { $value: '0.16, 1, 0.3, 1'; } + @else if $type == 'easeOutCirc' { $value: '0, 0.55, 0.45, 1'; } + @else if $type == 'easeOutBack' { $value: '0.34, 1.56, 0.64, 1'; } + + @else if $type == 'easeInOutSine' { $value: '0.37, 0, 0.63, 1'; } + @else if $type == 'easeInOutQuad' { $value: '0.45, 0, 0.55, 1'; } + @else if $type == 'easeInOutCubic' { $value: '0.65, 0, 0.35, 1'; } + @else if $type == 'easeInOutQuart' { $value: '0.76, 0, 0.24, 1'; } + @else if $type == 'easeInOutQuint' { $value: '0.83, 0, 0.17, 1'; } + @else if $type == 'easeInOutExpo' { $value: '0.87, 0, 0.13, 1'; } + @else if $type == 'easeInOutCirc' { $value: '0.85, 0, 0.15, 1'; } + @else if $type == 'easeInOutBack' { $value: '0.68, -0.6, 0.32, 1.6'; } + + @else { @error "'#{$type}' is not a correct value for easing()."; } + + @return cubic-bezier(unquote($value)); +} diff --git a/templates/@theme-base/reusable-components/_design-system-forms.scss b/templates/@theme-base/reusable-components/_design-system-forms.scss index ead9aa3..8b34cdb 100644 --- a/templates/@theme-base/reusable-components/_design-system-forms.scss +++ b/templates/@theme-base/reusable-components/_design-system-forms.scss @@ -16,6 +16,7 @@ input[type="submit"][disabled], input[type="button"][disabled], input[type="reset"][disabled] { cursor: default; + pointer-events: none; } /* for field texts */ @@ -26,6 +27,7 @@ input[type="reset"][disabled] { /* avoid dummy resize */ textarea { resize: vertical; + cursor: auto; // fixes an issue on Chrome using CSS custom scroll } /* remove a Firefox difference on button tag */ button::-moz-focus-inner { border: 0; padding: 0; } @@ -34,6 +36,7 @@ label, button, input, select { + color: currentColor; vertical-align: middle; } @@ -59,6 +62,15 @@ input[type="image"] { border: 0; width: auto; } +// for components that rely on checkboxes +input[type="radio"], +input[type="checkbox"] { + opacity: 0; + // this is a crazy fix for Firefox - for having ::after stuff working on it for mail conversations + // to have increased area around checkbox for clicking + /* autoprefixer: ignore next */ + -moz-appearance: initial; +} /* to cancel input sizing or other if needed */ .auto { diff --git a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss index ce68eb0..8b2b5be 100644 --- a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss +++ b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss @@ -3,483 +3,679 @@ */ /* it depends, it exceeds (french joke) */ -img, -table, -td, +%reset-responsive-height-max-width { + height: auto; + max-width: 100%; +} + blockquote, code, pre, textarea, input, svg { - height: auto; - max-width: 100%; + @extend %reset-responsive-height-max-width; +} + +%reset-responsive-max-width-only { + max-width: 100%; +} + +@if $use-height-auto-td==true { + td { + @extend %reset-responsive-height-max-width; + } +} +@else { + td { + @extend %reset-responsive-max-width-only; + } +} + +@if $use-height-auto-img==true { + img { + @extend %reset-responsive-height-max-width; + } } +@else { + img { + @extend %reset-responsive-max-width-only; + } +} +@if $use-height-auto-table==true { + table { + @extend %reset-responsive-height-max-width; + } +} +@else { + table { + @extend %reset-responsive-max-width-only; + } +} + /* no reset on embed, object & video, some players don't like */ + +.hauto { + height: auto; +} + /* useful to manage floats */ /* containing floats */ .mod, .scroll-if-needed { - overflow: auto; + overflow: auto; } + .scroll-horizontal-if-needed { - overflow-x: auto; + overflow-x: auto; } + .mod--hidden, .no-scroll { - overflow: hidden; + overflow: hidden; } .scroll-smooth-touch { - -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: touch; } /* some floattings */ .left { - float: left; + float: left; } + .right { - float: right; + float: right; } -@if $rtl-option == true { - /* RTL */ - [dir="rtl"] .left { - float: right; - } - [dir="rtl"] .right { - float: left; - } +@if $rtl-option==true { + + /* RTL */ + [dir="rtl"] .left { + float: right; + } + + [dir="rtl"] .right { + float: left; + } } /* clear floats */ .clear { - clear: both; -} -@if $use-clearleft_right == true { - .clearleft { - clear: left; - } - .clearright { - clear: right; - } - @if $rtl-option == true { - /* RTL */ - [dir="rtl"] .clearleft { - clear: right; + clear: both; +} + +@if $use-clearleft_right==true { + .clearleft { + clear: left; + } + + .clearright { + clear: right; } - [dir="rtl"] .clearright { - clear: left; + + @if $rtl-option==true { + + /* RTL */ + [dir="rtl"] .clearleft { + clear: right; + } + + [dir="rtl"] .clearright { + clear: left; + } } - } } -@if $use-clearhidden == true { - .clearhidden { - clear: both; - margin: 0; - padding: 0; - visibility: hidden; - } + +@if $use-clearhidden==true { + .clearhidden { + clear: both; + margin: 0; + padding: 0; + visibility: hidden; + } } -@if $use-clearfix == true { - .clearfix:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } + +@if $use-clearfix==true { + .clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } } /* gut: "spacing" empty div */ .gut { - height: 1px; + height: 1px; } /* table-design in CSS */ .row { - display: table; - table-layout: fixed; + display: table; + table-layout: fixed; } + .inline-row { - display: inline-table; - table-layout: fixed; + display: inline-table; + table-layout: fixed; } + .line { - display: table-row; + display: table-row; } + .col { - display: table-cell; - vertical-align: top; + display: table-cell; + vertical-align: top; } + .col-noalign { - display: table-cell; + display: table-cell; } /* alignments */ .aligntop { - vertical-align: top; + vertical-align: top; } + .alignbottom { - vertical-align: bottom; + vertical-align: bottom; } + .alignmiddle { - vertical-align: middle; + vertical-align: middle; } + .alignbaseline { - vertical-align: baseline; + vertical-align: baseline; } + .alignsub { - vertical-align: sub; + vertical-align: sub; } /* block */ .bl { - display: block; + display: block; +} + +.inline { + display: inline; } /* inline-block, useful for grids, and not only */ .inbl { - display: inline-block; + display: inline-block; } /* grid = element of inline-grid */ .grid { - @extend .inbl; - @extend .aligntop; + @extend .inbl; + @extend .aligntop; } /* to relativize */ .relative { - position: relative; + position: relative; } /* centered block */ .center { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } /* to absolute */ .absolute { - position: absolute; - z-index: 1; + position: absolute; + z-index: 1; +} +.z667 { + z-index: 667; } /* to centered absolute */ .centered-absolute { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.centered-absolute-horizontal { + left: 50%; + transform: translate(-50%, 0%); +} + +.covered-absolute { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } /* to top right */ .top-right { - top: 0; - right: 0; -} -@if $rtl-option == true { - [dir="rtl"] { - .top-right { - left: 0; - right: auto; + top: 0; + right: 0; +} + +.bottom { + bottom: 0; +} + +@if $rtl-option==true { + [dir="rtl"] { + .top-right { + left: 0; + right: auto; + } } - } } -.right-icon { - top: 0; - right: .5em; - height: 3.5rem; // height of field +.right-icon, +.right-text { + top: 0; + right: .5em; + height: $default-height-fields; // height of field + align-content: center; +} +.right-text { + right: 1em; } -@if $rtl-option == true { - [dir="rtl"] { - .right-icon { - left: .5em; - right: auto; +.right-text-inner { + padding-bottom: .2rem; +} + +@if $rtl-option==true { + [dir="rtl"] { + .right-icon, + .right-text { + left: .5em; + right: auto; + } + .right-text { + left: 1em; + } } - } } + + .fixed { - position: fixed; + position: fixed; +} + + +.sticky { + &-top, + &-bottom { + position: sticky; + z-index: 1; + } + + &-top { + top: 0; + } + + &-bottom { + bottom: 0; + } } /* hardware-acceleration activation */ .hardware-accelerated { - @include vendor-prefix(transform, translateZ(0)); + @include vendor-prefix(transform, translateZ(0)); } /* block widths */ .w0 { - width: 0; + width: 0; } + .w1 { - width: 1%; + width: 1%; } + .w2 { - width: 2%; + width: 2%; } + .w3 { - width: 3%; + width: 3%; } + .w5 { - width: 5%; + width: 5%; } + .w10 { - width: 10%; + width: 10%; } + .w15 { - width: 15%; + width: 15%; } + .w20 { - width: 20%; + width: 20%; } + .w25 { - width: 25%; + width: 25%; } + .w30 { - width: 30%; + width: 30%; } + .w33 { - width: 33.333%; + width: 33.333%; } + .w40 { - width: 40%; + width: 40%; } + .w45 { - width: 45%; + width: 45%; } + .w49 { - width: 49%; + width: 49%; } + .w50 { - width: 50%; + width: 50%; } + .w60 { - width: 60%; + width: 60%; } + .w66 { - width: 66.666%; + width: 66.666%; } + .w70 { - width: 70%; + width: 70%; } + .w75 { - width: 75%; + width: 75%; } + .w80 { - width: 80%; + width: 80%; } + .w90 { - width: 90%; + width: 90%; } + .w95 { - width: 95%; + width: 95%; } + .w100 { - width: 100%; + width: 100%; } /* here you may add px widths */ -$list-width-px: 50, 150, 200, 500 !default; +$list-width-px: 40, 50, 70, 150, 200, 500 !default; // ex .w500p { width: 500px; } @each $width in $list-width-px { - .w#{$width}p { - width: #{$width}px; - } + .w#{$width}p { + width: #{$width}px; + } +} + +/* here you may add rem widths */ +$list-width-rem: 33 !default; // say 33 +// ex .w500p { width: 500px; } + +@each $width in $list-width-rem { + .w#{$width}r { + width: #{$width}rem; + } } /* here you may add em widths */ -$list-width-em: 400 !default; -// ex .w500e { width: 60em; } +$list-width-em: 2, 6, 8, 10, 11, 13, 14, 16 !default; +// ex .w16e { width: 16em; } @each $width in $list-width-em { - $size_em: em($width); - .w#{$width}e { - width: $size_em; - } + .w#{$width}e { + width: #{$width}em; + } } /* max-block widths */ /* here you may add max-widths % */ -$list-max-widths: 50, 80, 100 !default; +$list-max-widths: 50, 60, 80, 100 !default; @each $max-width in $list-max-widths { - .mw#{$max-width} { - max-width: #{$max-width * 1%}; - } + .mw#{$max-width} { + max-width: #{$max-width * 1%}; + } } /* here you may add pixel max-widths */ $list-max-width-px: 100, 650 !default; @each $max-width in $list-max-width-px { - .mw#{$max-width}p { - max-width: #{$max-width}px; - } + .mw#{$max-width}p { + max-width: #{$max-width}px; + } } /* here you may add ch max-widths */ $list-max-width-ch: 70 !default; @each $max-width in $list-max-width-ch { - .mw#{$max-width}ch { - max-width: #{$max-width}ch; - } + .mw#{$max-width}ch { + max-width: #{$max-width}ch; + } } /* here you may add em max-widths */ -$list-max-width-em: 8, 15, 40, 50 !default; +$list-max-width-em: 5, 7, 8, 13, 15, 18, 30, 37, 40, 50 !default; @each $max-width in $list-max-width-em { - .mw#{$max-width}e { - max-width: #{$max-width}em; - } + .mw#{$max-width}e { + max-width: #{$max-width}em; + } } -$list-min-width-em: 3, 5, 35 !default; +$list-min-width-em: 1.4, 3, 5, 14, 35 !default; @each $min-width in $list-min-width-em { - .min-w#{$min-width}e { - min-width: #{$min-width}em; - } + $fragment-class: str-replace(inspect($min-width), '.', '-'); // inspect to convert to string + + .min-w#{$fragment-class}e { + min-width: #{$min-width}em; + } } + +$list-min-height-em: 5, 16 !default; + +@each $min-height in $list-min-height-em { + .min-h#{$min-height}e { + min-height: #{$min-height}em; + } +} + + .h100 { - height: 100%; + height: 100%; } + .h100v { - height: 100vh; + height: 100vh; } /* margins */ .mt1r { - margin-top: 1rem; + margin-top: 1rem; +} + +.mt0-5r { + margin-top: .5rem; +} + +.mr0-5r { + margin-right: .5rem; } $list-margins: m, mt, mr, mb, ml !default; -$list-margins-values: 0, 0.25, 0.5, 0.75, 1, 1.5, 2 !default; // specify 2.5 if needed +$list-margins-values: 0, 0.1, 0.25, 0.4, 0.5, 0.6, 0.75, 1, 1.5, 2, 4 !default; // specify 2.5 if needed @include margin-generator($list-margins, $list-margins-values); .mtauto { - margin-top: auto; + margin-top: auto; } + .mrauto { - margin-right: auto; + margin-right: auto; } + .mbauto { - margin-bottom: auto; + margin-bottom: auto; } + .mlauto { - margin-left: auto; + margin-left: auto; } + .mauto { - margin: auto; + margin: auto; } -@if $rtl-option == true { - [dir="rtl"] { - .mrauto { - margin-right: 0; - margin-left: auto; - } - .mlauto { - margin-left: 0; - margin-right: auto; +@if $rtl-option==true { + [dir="rtl"] { + .mrauto { + margin-right: 0; + margin-left: auto; + } + + .mlauto { + margin-left: 0; + margin-right: auto; + } } - } } /* paddings */ $list-paddings: p, pt, pr, pb, pl !default; -$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 2, 3 !default; // specify 2.5 if needed +$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4 !default; // specify 2.5 if needed @include padding-generator($list-paddings, $list-paddings-values); /* to hide text with accessibility… a11y */ .invisible, .sr-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + top: 0; // needed for Safari dumb and 💩 behaviour } + .nonvisible { - visibility: hidden; + visibility: hidden; } .opacity-50 { - opacity: 0.5; + opacity: 0.5; } + .opacity-40 { - opacity: 0.4; + opacity: 0.4; } + .opacity-30 { - opacity: 0.3; + opacity: 0.3; } .filter-blur { - filter: blur(4px); + filter: blur(4px); } .hidden, -[hidden] { - display: none; -} /* hidden everywhere */ +[hidden], +.display-on-darkmode { + display: none; +} + +/* hidden everywhere */ .nodesktop { - display: none; -} /* hidden on desktop */ + display: none; +} + +/* hidden on desktop */ /*.noprint {} /* hidden on print */ /*.notablet {} /* hidden on tablets */ /*.nomobile {} /* hidden on mobile */ .list-2columns { - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; - -webkit-column-gap: 0; - -moz-column-gap: 0; - column-gap: 0; - - & > li { - -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ - page-break-inside: avoid; /* Firefox */ - break-inside: avoid; /* IE 10+ */ - break-inside: avoid-column; /* W3C */ - } + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + -webkit-column-gap: 0; + -moz-column-gap: 0; + column-gap: 0; + + & > * { + -webkit-column-break-inside: avoid; + /* Chrome, Safari, Opera */ + page-break-inside: avoid; + /* Firefox */ + break-inside: avoid; + /* IE 10+ */ + break-inside: avoid-column; + /* W3C */ + } } /* * ratio container (for responsive iframes/videos/etc.) */ [class*="ratio-container-"] { - width: 100%; - height: 0; - @extend .relative; + width: 100%; + height: 0; + @extend .relative; } + .ratio-container-square { - padding-top: 100%; + padding-top: 100%; } + .ratio-container-16-9 { - padding-top: 56.25%; + padding-top: 56.25%; +} + +.ratio-container-5-1 { + padding-top: 20%; } .inner-ratio-container { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } /* @@ -487,179 +683,238 @@ $list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 2, 3 !default; // specify 2. */ .inline-flex, .inline-flex-vcenter { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.flex { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.flex, +.flex-flex-children, +.flex-noMinChildren { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + .flex-row { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } + .flex-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + .flex-column { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + .flex-column-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; } + .flex-spacebetween { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + .flex-spacearound { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-around; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-around; } + .flex-justify-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + .flex-justify-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + .flex-justify-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + .flex-nowrap { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } /* fix aspect ratio */ -.flex > * { +.flex > *, +.no-min-dims { min-height: 0; min-width: 0; } +.flex-flex-children > * { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + .inline-flex-vcenter > *, .flex-item-centered-vert { - margin-top: auto; - margin-bottom: auto; - align-self: center; + margin-top: auto; + margin-bottom: auto; + align-self: center; } .flex-items-center { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + -ms-grid-row-align: center; + align-items: center; } + +.flex-items-baseline { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + -ms-grid-row-align: baseline; + align-items: baseline; +} + .flex-items-start { - -webkit-box-align: start; - -ms-flex-align: start; - -ms-grid-row-align: flex-start; - align-items: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + -ms-grid-row-align: flex-start; + align-items: flex-start; } + .flex-items-end { - -webkit-box-align: end; - -ms-flex-align: end; - -ms-grid-row-align: flex-end; - align-items: flex-end; + -webkit-box-align: end; + -ms-flex-align: end; + -ms-grid-row-align: flex-end; + align-items: flex-end; +} + +.flex-items-stretch { + align-items: stretch; } .flex-item-fluid { - -webkit-box-flex: 1; - -ms-flex: 1 1 0px; - flex: 1 1 0px; + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0px; } + .flex-item-fluid-auto { - flex: 1 1 auto; + flex: 1 1 auto; } .flex-item-noshrink { - -ms-flex-negative: 0; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } + .flex-item-nogrow { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; } + .flex-item-grow-2 { - -webkit-box-flex: 2; - -ms-flex-positive: 2; - flex-grow: 2; + -webkit-box-flex: 2; + -ms-flex-positive: 2; + flex-grow: 2; } + .flex-item-noflex { - -webkit-box-flex: 0; - -ms-flex: 0; - flex: 0; + -webkit-box-flex: 0; + -ms-flex: 0; + flex: 0; } .flex-self-vcenter { - -ms-flex-item-align: center; - align-self: center; + -ms-flex-item-align: center; + align-self: center; +} + +.flex-self-start { + -ms-flex-item-align: start; + align-self: flex-start; +} + +.flex-self-end { + -ms-flex-item-align: end; + align-self: flex-end; } .flex-autogrid { - margin: 0 -0.5em; - @extend .flex; - @extend .flex-spacebetween; + margin: 0 -0.5em; + @extend .flex; + @extend .flex-spacebetween; } + .flex-autogrid-item { - @extend .flex-item-fluid; - padding: 0 0.5em 1em; + @extend .flex-item-fluid; + padding: 0 0.5em 1em; } + .flex-autogrid-item.pb0 { - padding-bottom: 0; + padding-bottom: 0; +} + +.inline-grid-container { + display: inline-grid; } /* RTL/others */ -.mirror { - -webkit-transform: rotateY(180deg); - transform: rotateY(180deg); +.mirror, +[dir="rtl"] .on-rtl-mirror { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); } + .rotateX-180 { - -webkit-transform: rotateX(180deg); - transform: rotateX(180deg); + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); } + .rotateZ-90 { - -webkit-transform: rotateZ(90deg); - transform: rotateZ(90deg); + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); } + .rotateZ-270 { - -webkit-transform: rotateZ(270deg); - transform: rotateZ(270deg); + -webkit-transform: rotateZ(270deg); + transform: rotateZ(270deg); } + /* increase surface click/tap */ .increase-surface-click::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } + .no-pointer-events, .no-pointer-events-children * { - pointer-events: none; + pointer-events: none; } diff --git a/templates/@theme-base/reusable-components/_design-system-links-icons.scss b/templates/@theme-base/reusable-components/_design-system-links-icons.scss index f6b9ef1..0207be2 100644 --- a/templates/@theme-base/reusable-components/_design-system-links-icons.scss +++ b/templates/@theme-base/reusable-components/_design-system-links-icons.scss @@ -1,8 +1,10 @@ /* links */ + /* remember focus */ a, .link { color: $color-links; + text-decoration: underline; cursor: pointer; &:focus, @@ -12,12 +14,7 @@ a, text-decoration: underline; } } -/* avoid border on images in links + fix border image IE */ -a:link img, -a:visited img, -img { - border-style: none; -} + .nodecoration { text-decoration: none; } @@ -48,6 +45,15 @@ img { } } +.button-showOnHover:focus, +.button-showOnHover:hover { + .button-showOnHover-element { + visibility: visible; + } +} + + + /* links with icons, may use DATA-URI */ /* external links */ @@ -73,28 +79,29 @@ a[href^="mailto:"] { [class*="icon-"] { @extend .alignmiddle; @extend .inbl; + fill: currentColor; } -$list-icon-pixels: 12,16,20,25,40,100 !default; +$list-icon-pixels: 6,8,10,11,12,14,16,18,20,24,28,40,42,60,100 !default; @each $width in $list-icon-pixels { - .icon-#{$width}p { - width: #{$width}px; - height: #{$width}px; + .icon-#{$width}p { + width: #{$width}px; + height: #{$width}px; } } $list-icon-percent: 50 !default; @each $width in $list-icon-percent { - .icon-#{$width} { - width: percentage($width / 100); - height: percentage($width / 100); + .icon-#{$width} { + width: percentage($width / 100); + height: percentage($width / 100); } } .path2x { stroke-width: 1px; &.fill-global-light { - stroke: $pm-global-light; + stroke: $pm-global-light; } -}
\ No newline at end of file +} diff --git a/templates/@theme-base/reusable-components/_design-system-print.scss b/templates/@theme-base/reusable-components/_design-system-print.scss index fa339e4..eadc123 100644 --- a/templates/@theme-base/reusable-components/_design-system-print.scss +++ b/templates/@theme-base/reusable-components/_design-system-print.scss @@ -25,23 +25,73 @@ display: block; } + .is-printed-version { + .pm-modalContainer, + .pm-modal, + .pm-modalContentInner, + .pm-modalContent { + @extend .reset4print; + } + .pm-modalContentInner::before, + .pm-modalContentInner::after { + content: none; + } + } + body { padding: .5em; - overflow: auto; + overflow: auto; + + /* put back normal mode for print :) */ + --bgcolor-item-column-list: initial; + --bgcolor-unread-item-column-list: initial; + --bgcolor-view-column-detail: initial; + --bgcolor-main-area: initial; + --bgcolor-context-bar: initial; + --bgcolor-toolbar: initial; + --color-context-bar-link: initial; + --color-main-area: initial; + --fillcolor-icons: initial; + --bgcolor-disabled-checkboxes-radios: initial; + --bgcolor-item-column-active: initial; + --bordercolor-input: initial; + --bgcolor-input: initial; + --bgcolor-highlight: initial; + --color-input: initial; + + .pm-button:not(.pm-button--primary):not(.pm-button--link), .pm-button--info { + border-color: $pm-global-border; + background: $white; + color: $pm-global-grey; + } + } + /* hide unnecessary elements */ .noprint { display: none; } - + .is-printed-version { + .app-root, + .pm-modalOverlay, + .pm-modalHeader, + .pm-modalFooter, + .pm-modalContentInnerTopShadow, + .pm-modalContentInnerBottomShadow, + .item-icon, + [class^="scrollshadow-"] { + @extend .noprint; + } + } + /* display specific elements for print */ .onprint { display: block; } - + /* avoid problematic page break */ - blockquote, ul, ol { + ul, ol { page-break-inside: avoid; } h1, h2, h3, caption { diff --git a/templates/@theme-base/reusable-components/_design-system-reset.scss b/templates/@theme-base/reusable-components/_design-system-reset.scss index 10c91ed..3554888 100644 --- a/templates/@theme-base/reusable-components/_design-system-reset.scss +++ b/templates/@theme-base/reusable-components/_design-system-reset.scss @@ -12,7 +12,7 @@ html { box-sizing: border-box; } /* reset minimum */ html, body, blockquote, ul, ol, form, button, figure { margin: 0; padding: 0; } button, progress { border: 0; } -p, ul, ol, dl, blockquote, pre, td, th { +p, ul, ol, dl, blockquote, pre, menu, td, th { font-size: 1em; line-height: $l-h; margin: $l-h * 1em 0; @@ -26,70 +26,156 @@ p, ul, ol, dl, blockquote, pre, td, th { font: inherit; -webkit-appearance: none; } + // -webkit-appearance: none makes vocalization failing + input[type="checkbox"] { + -webkit-appearance: checkbox; + } + input[type="radio"] { + -webkit-appearance: radio; + } + +} +@else { + input, select, textarea, optgroup, button { + font: inherit; + } } /* fix display img/iframe */ img, iframe { vertical-align: middle; } -ul, ol { padding-left: 2em; } +ul, ol, menu { padding-left: 2em; } + +dd { margin-left: 2em; } -.unstyled { - padding-left: 0; - list-style-type: none; -} @if $rtl-option == true { /* RTL */ - [dir="rtl"] ul, - [dir="rtl"] ol { - padding-left: 0; - padding-right: 2em; - } - [dir="rtl"] .unstyled { - padding-right: 0; + [dir="rtl"] { + ul, + ol { + padding-left: 0; + padding-right: 2em; + } + dd { + margin-left: 0; + margin-right: 2em; + } } } @if $root-equiv-10-px == true { /* base font size at 10px */ - html { - font-size: 62.5%; - /* IE9-IE11 math fixing. See https://connect.microsoft.com/IE/feedback/details/816709/ */ - /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */ - font-size: calc(1em * 0.625); + html { + font-size: 62.5%; + @if ( $use-ie-calc-font-fallback == true ){ + font-size: calc(1em * 0.625); + } } } -body { - background: $pm-global-grey; - color: $pm-global-light; - font-family: $font-family; - text-rendering: geometricPrecision; - -webkit-font-smoothing: antialiased; - - @if $typo-unit == 'use_em' { - @if $root-equiv-10-px == true { - font-size: em($base-font, 10); - } - @else { - font-size: em($base-font, $root-default-font-size); - } - } - @else if $typo-unit == 'use_rem' { - font-size: var(--body-fontsize, rem($base-font)); - } - @else if $typo-unit == 'use_rem_with_em_fallback' { - @if $root-equiv-10-px == true { - font-size: em($base-font, 10); - } - @else { - font-size: em($base-font, $root-default-font-size); - } - font-size: rem($base-font); - } - line-height: $l-h; - min-height: 100%; + +@if $apply-body-styles == true { + body { + background: $pm-global-grey; + color: $pm-global-light; + font-family: $font-family; + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + + @if $typo-unit == 'use_em' { + @if $root-equiv-10-px == true { + font-size: em($base-font, 10); + } + @else { + font-size: em($base-font, $root-default-font-size); + } + } + @else if $typo-unit == 'use_rem' { + font-size: var(--body-fontsize, rem($base-font)); + } + @else if $typo-unit == 'use_rem_with_em_fallback' { + @if $root-equiv-10-px == true { + font-size: em($base-font, 10); + } + @else { + font-size: em($base-font, $root-default-font-size); + } + font-size: rem($base-font); + } + line-height: $l-h; + min-height: 100%; + } +} + + +// Sass placeholder, don't touch if you are not sure ;) +%bold { + font-weight: bold; +} +b, strong { + @extend %bold; } +/* harmonization between Chrome/Firefox */ +pre, code, kbd, samp { + font-family: $font-family-monospace; + font-size: 1em; +} +pre { + white-space: pre-wrap; + word-wrap: break-word; +} + +// tiny reset for mark tag +mark { + @if ( $use-color-reset-mark == true ) { + background-color: unset; + } + @else { + background-color: var(--bgcolor-mark, $default-bgColor-mark); + } + color: var(--color-mark, currentColor); + font-weight: bold; +} + +small { + font-size: 80%; +} + + +/* avoid border on images in links + fix border image IE */ +a:link img, +a:visited img, +img { + border-style: none; +} +/* tiny control */ +audio:not([controls]) { + display: none; + height: 0; +} + +/* important, abbr are good */ +/* only those with a title are shown */ +abbr[title] { + border-bottom: dotted 1px; + cursor: help; + text-decoration: none; + /* color inherited from text */ +} + + +code, +pre, +samp { + white-space: pre-wrap; +} +code { + line-height: 1; +} +dfn { + font-style: italic; +} diff --git a/templates/@theme-base/reusable-components/_design-system-responsive.scss b/templates/@theme-base/reusable-components/_design-system-responsive.scss index 5acf8e5..83edd6d 100644 --- a/templates/@theme-base/reusable-components/_design-system-responsive.scss +++ b/templates/@theme-base/reusable-components/_design-system-responsive.scss @@ -1,11 +1,35 @@ /* general case */ @include body-before ('desktop', true); + +/** + * medium/tablet landscape minor breakpoint + */ +@include respond-to($breakpoint-medium-landscape) { + + $list-paddings-medium-landscape: p, pt, pr, pb, pl !default; + $list-paddings-medium-landscape-values: 0, 1 !default; // specify 2.5 if needed + + @include padding-generator($list-paddings-medium-landscape, $list-paddings-medium-landscape-values, "ontablet-landscape-"); + +} + +/** + * medium/tablet breakpoint + */ +@include respond-to($breakpoint-medium, 'min') { + .ondesktop { + &-h100 { + height: 100%; + } + } +} + /** * medium/tablet breakpoint */ -@include respond-to($breakpoint-medium) { - +@include respond-to($breakpoint-medium) { + /** * layout/modules */ @@ -15,26 +39,26 @@ /* hide unnecessary elements */ .notablet { display: none; } - + /* linearization of floating content/table-layout */ .autotablet { float: none; display: block; width: auto; } - + /* margins */ - $list-margins-tablet: m, mt, mr, mb, ml; - $list-margins-tablet-values: 0, 1, 2; // specify 2.5 if needed + $list-margins-tablet: m, mt, mr, mb, ml !default; + $list-margins-tablet-values: 0, 1, 2 !default; // specify 2.5 if needed @include margin-generator($list-margins-tablet, $list-margins-tablet-values, "ontablet-"); /* paddings */ - $list-paddings-tablet: p, pt, pr, pb, pl; - $list-paddings-tablet-values: 0, 1, 2; // specify 2.5 if needed + $list-paddings-tablet: p, pt, pr, pb, pl !default; + $list-paddings-tablet-values: 0, 1, 2 !default; // specify 2.5 if needed @include padding-generator($list-paddings-tablet, $list-paddings-tablet-values, "ontablet-"); - + /* text aligns */ .ontablet- { &alignleft { text-align: left; } @@ -49,9 +73,27 @@ width: 100%; flex-basis: auto; } - } + } + + &w25 { width: 25%; } &w100 { width: 100%; } - &mw100 { max-width: 100% } + &mw100 { max-width: 100%; } + &wauto { width: auto; } + + @for $i from 2 through 3 { + &hideTd#{$i} { + td:nth-child(#{$i}) { + display: none; + } + } + } + + &list-1column { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; + } + } /** @@ -67,7 +109,7 @@ /** * small/mobile breakpoint */ -@include respond-to($breakpoint-small) { +@include respond-to($breakpoint-small) { /** * layout/modules @@ -85,19 +127,19 @@ display: block; width: auto; } - + /* margins */ - $list-margins-mobile: m, mt, mr, mb, ml; - $list-margins-mobile-values: 0, 0.5, 1, 2; // specify 2.5 if needed + $list-margins-mobile: m, mt, mr, mb, ml !default; + $list-margins-mobile-values: 0, 0.25, 0.5, 1, 2, 3.5 !default; // specify 2.5 if needed @include margin-generator($list-margins-mobile, $list-margins-mobile-values, "onmobile-"); - + /* paddings */ - $list-paddings-mobile: p, pt, pr, pb, pl; - $list-paddings-mobile-values: 0, 1, 2; // specify 2.5 if needed + $list-paddings-mobile: p, pt, pr, pb, pl !default; + $list-paddings-mobile-values: 0, 0.25, 0.5, 1, 2 !default; // specify 2.5 if needed @include padding-generator($list-paddings-mobile, $list-paddings-mobile-values, "onmobile-"); - + /* text aligns */ .onmobile- { &alignleft { text-align: left; } @@ -113,7 +155,10 @@ flex-basis: auto; } &.flex-autogrid { - margin: 0; + margin: 0; + &.mb1 { + margin-bottom: 1em; + } } & > .flex-autogrid-item { padding: 0; @@ -125,24 +170,64 @@ & > * { align-self: center; } - } - &wauto { - width: auto; - } - &flex-wrap { + } + &flex-item-fluid { + flex: 1 1 0px; + } + &flex-item-fluid-auto { + flex: 1 1 auto; + } + &no-flex { + flex: 0 0 auto; + } + &flex-shrink { + flex-shrink: 1; + } + &flex-self-start { + align-self: start; + } + &flex-wrap { flex-wrap: wrap; } - &min-w100 { + &mw100 { + max-width: 100%; + } + &min-w100 { min-width: 100%; } - &w100 { - width: 100%; + &wauto { + width: auto; } + &w25{ + width: 25%; + } + &w33{ + width: 33%; + } + &w100 { + width: 100%; + } + &no-border { + border: 0; + } + &static { position: static; - } + } + @for $i from 2 through 5 { + &hideTd#{$i} { + td:nth-child(#{$i}) { + display: none; + } + } + } + &list-1column { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; + } } - + /** * global structure adaptation (page / skip links / header / main content / footer) @@ -156,7 +241,7 @@ /** * tiny/small mobile breakpoint */ -@include respond-to($breakpoint-tiny) { +@include respond-to($breakpoint-tiny) { /** * layout/modules @@ -174,18 +259,37 @@ display: block; width: auto; } - + .ontinymobile- { + &wauto { + width: auto; + } + &flex-self-start { + align-self: flex-start; + } + &flex-column { + flex-direction: column; + & > * { + width: 100%; + flex-basis: auto; + } + } + &hideTd3 { + td:nth-child(3) { + display: none; + } + } + } /* margins */ - //$list-margins-tinymobile: m, mt, mr, mb, ml; - //$list-margins-tinymobile-values: 0, 1, 2; // specify 2.5 if needed + $list-margins-tinymobile: m, mt, mr, mb, ml !default; + $list-margins-tinymobile-values: 0, 1 !default; - //@include margin-generator($list-margins-tinymobile, $list-margins-tinymobile-values, "ontinymobile-"); + @include margin-generator($list-margins-tinymobile, $list-margins-tinymobile-values, "ontinymobile-"); /* paddings */ - //$list-paddings-tinymobile: p, pt, pr, pb, pl; - //$list-paddings-tinymobile-values: 0, 1, 2; // specify 2.5 if needed + //$list-paddings-tinymobile: p, pt, pr, pb, pl !default; + //$list-paddings-tinymobile-values: 0, 1, 2 !default; // specify 2.5 if needed - //@include padding-generator($list-paddings-tinymobile, $list-paddings-tinymobile-values, "ontinymobile-"); + //@include padding-generator($list-paddings-tinymobile, $list-paddings-tinymobile-values, "ontinymobile-"); /** * global structure adaptation (page / skip links / header / main content / footer) diff --git a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss index fe793a3..b54dd8f 100644 --- a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss +++ b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss @@ -6,6 +6,20 @@ dialog { border: 0; } border-collapse: collapse; } +.unstyled { + padding-left: 0; + list-style-type: none; +} + +@if $rtl-option == true { + /* RTL */ + [dir="rtl"] { + .unstyled { + padding-right: 0; + } + } +} + /* * taken from http://tinytypo.tetue.net/ made by @tetue * tuned with the help of https://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php @@ -28,21 +42,10 @@ q:after { content: close-quote; } -/* avoid ugly line-height */ -sup, -sub { - vertical-align: 0; - position: relative; -} -sup { - bottom: 1ex; -} -sub { - top: .5ex; -} +@import './_includes/_resets/typo-sub-sup'; /* avoid margin problems */ -@if $vertical-rythm == 'single_top' or $vertical-rythm == 'double_top_single_bottom' { +@if $vertical-rhythm == 'single_top' or $vertical-rhythm == 'double_top_single_bottom' { h1,.h1, h2,.h2, h3,.h3, @@ -63,7 +66,7 @@ sub { table { &:last-child { margin-bottom: 0; - } + } } } @@ -87,7 +90,7 @@ li ul { p { word-break: break-word; } - @supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) { + @supports (-webkit-hyphens: auto) or (hyphens: auto) { textarea, table, td, @@ -98,7 +101,7 @@ li ul { div, p { word-break: normal; - @include vendor-prefix(hyphens, auto, webkit ms); + @include vendor-prefix(hyphens, auto, webkit); } } } @@ -106,10 +109,10 @@ li ul { .cut { word-break: break-word; } - @supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) { + @supports (-webkit-hyphens: auto) or (hyphens: auto) { .cut { word-break: normal; - @include vendor-prefix(hyphens, auto, webkit ms); + @include vendor-prefix(hyphens, auto, webkit); } } } @@ -118,24 +121,19 @@ li ul { .nocut { word-wrap: normal; } -@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) { +@supports (-webkit-hyphens: auto) or (hyphens: auto) { .nocut { - @include vendor-prefix(hyphens, none, webkit ms); + @include vendor-prefix(hyphens, none, webkit); } } .break { - word-wrap: break-word; -} - -code, -pre, -samp { - white-space: pre-wrap; + word-break: break-word; } -code { - line-height: 1; +.hyphens { + @include vendor-prefix(hyphens, auto, webkit); } + kbd { border: solid 1px; border-top-left-radius: .5em; @@ -146,14 +144,6 @@ table { margin-bottom: 1.5em; table-layout: fixed; } -/* important, abbr are good */ -/* only those with a title are shown */ -abbr[title] { - border-bottom: dotted 1px; - cursor: help; - text-decoration: none; - /* color inherited from text */ -} /* text aligns */ .alignright { text-align: right; } @@ -168,15 +158,21 @@ abbr[title] { .ellipsis { overflow: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; white-space: nowrap; } +.ellipsis-two-lines, .ellipsis-four-lines { display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; + -webkit-box-orient: vertical; overflow: hidden; } +.ellipsis-two-lines { + -webkit-line-clamp: 2; +} +.ellipsis-four-lines { + -webkit-line-clamp: 4; +} .uppercase { text-transform: uppercase; @@ -184,9 +180,22 @@ abbr[title] { .capitalize { text-transform: capitalize; } +.capitalize-block { + text-transform: lowercase; + &:first-letter { + text-transform: uppercase; + } +} -b, strong, .strong, .bold { - font-weight: bold; +.strong, .bold { + @extend %bold; +} +.nobold { + font-weight: normal; +} + +.semibold { + font-weight: 600; } .italic { @@ -195,4 +204,19 @@ b, strong, .strong, .bold { .no-outline { outline: 0; -}
\ No newline at end of file +} + +.strike { + text-decoration: line-through; +} + +.pre-wrap { + white-space: pre-wrap; +} +.no-wrap { + white-space: nowrap; +} +.pre { + white-space: pre; +} + diff --git a/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss b/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss new file mode 100644 index 0000000..6e9b3d7 --- /dev/null +++ b/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss @@ -0,0 +1,12 @@ +/* avoid ugly line-height */ +sup, +sub { + vertical-align: 0; + position: relative; +} +sup { + bottom: 1ex; +} +sub { + top: .5ex; +} |