diff --git a/assets/scss/6-components/button/_button.scss b/assets/scss/6-components/button/_button.scss index cd4e2f22..0470fe87 100644 --- a/assets/scss/6-components/button/_button.scss +++ b/assets/scss/6-components/button/_button.scss @@ -7,6 +7,7 @@ // .c-button--xs - Two steps down from default // .c-button--circle - Circular button (experimentally used for back to top) // .c-button--outline - Hover effect of outline (used on social) +// .c-button--compact - Removes vertical padding (used on social) // // Markup: 6-components/button/button.html // @@ -73,6 +74,11 @@ } } } + + &--compact { + padding-top: 0; + padding-bottom: 0; + } } // Link button (c-link-button) diff --git a/assets/scss/6-components/story-body/_story-body.scss b/assets/scss/6-components/story-body/_story-body.scss index 4c533502..9609a0e5 100644 --- a/assets/scss/6-components/story-body/_story-body.scss +++ b/assets/scss/6-components/story-body/_story-body.scss @@ -29,16 +29,16 @@ $story-narrow-bp: ($story-narrow / 1rem) + $story-padding-buffer; } - ul { + > ul { list-style: disc; padding: 0 $size-b 0 3.5rem; - - } - li { - margin-bottom: $size-b; + li { + margin-bottom: $size-b; + } } + sub, sup { position: initial; } @@ -46,4 +46,4 @@ $story-narrow-bp: ($story-narrow / 1rem) + $story-padding-buffer; hr { margin: $size-xl auto; } -} \ No newline at end of file +} diff --git a/assets/scss/7-layout/_grid-legacy.scss b/assets/scss/7-layout/_grid-legacy.scss index c38c46b9..1511463a 100644 --- a/assets/scss/7-layout/_grid-legacy.scss +++ b/assets/scss/7-layout/_grid-legacy.scss @@ -9,7 +9,7 @@ // grid_container--xl - 1080px // grid_container--xxl - 1300px // -// Markup:
Container
+// Markup:
{{ className }} ()
// // Styleguide 7.0.1 // @@ -32,6 +32,56 @@ // // Styleguide 7.0.1 // + + +// Grid Padded (grid_padded) +// +// Deprecated: Adds side padding at various viewport widths. Note: Demo is best viewed in [standalone preview](/pages/layout/grid_padded/raw-preview.html). {{isHelper}} +// +// .grid_padded - Left/right padding:
`.92rem` mobile
`1.1rem` tablet - desktop
`0` large desktop +// .grid_padded--temp - Left/right padding:
`0` mobile - small desktop
`1.1rem` desktop
`0` large desktop +// .grid_padded--s - Left/right padding:
`1.1rem` mobile
`0` tablet+ +// .grid_padded--m - Left/right padding:
`1.1rem` tablet
`0` small desktop+ +// .grid_padded--l - Left/right padding:
`1.1rem` small desktop
`0` desktop+ +// .grid_padded--xl - Left/right padding:
`1.1rem` desktop
`0` large desktop+ +// .grid_padded--xxl - Left/right padding:
`1.1rem` large desktop
`0` large desktop+ +// +// Markup:
{{ className }}
+// +// +// Styleguide 7.0.1 +// + +// Hide (hide_--) +// +// Deprecated: Adds varying amounts side padding. Note: Demo is best viewed in [standalone preview](/pages/layout/grid_padded/raw-preview.html). {{isHelper}} +// +// .hide_from--s - Hide from large mobile onward; Show small mobile only +// .hide_from--m - Hide from tablet onward; Show on all mobile +// .hide_from--l - Hide from small desktop onward; Show on all mobile and tablet +// .hide_from--xl - Hide from desktop onward; Show on all mobile, tablet, and small desktop +// .hide_from--xxl - Hide from large desktop onward; Show on all mobile, tablet, small desktop, and desktop +// .hide_until--s - Hide until large mobile; Show on large mobile, tablet, desktop +// .hide_until--m - Hide until tablet; Show tablet, desktop +// .hide_until--l - Hide until small desktop; Show all desktop +// .hide_until--xl - Hide until desktop; Show desktop, large desktop +// .hide_until--xxl - Hide until large desktop; Show on large desktop only +// +// Markup:
{{ className }}: Resize to see me appear/disappear
+// +// Styleguide 7.0.1 +// + + +// Section Padding (section_padded) +// +// Deprecated: Adds top/bottom padding for sections. Usually used with grid_padded. +// +// +// Markup:
section_padded
+// +// Styleguide 7.0.1 +// $grid-columns: 12; $grid-gutter: $size-b; $grid-gutter-px: 17.6; @@ -357,11 +407,11 @@ $column-slug: col !default; margin-right: 0; } -// .section_padded { -// padding-top: $size-xgiant; -// padding-bottom: $size-xgiant; -// @include mq($until: bp-m) { -// padding-top: $size-xl; -// padding-bottom: $size-xl; -// } -// } +.section_padded { + padding-top: $size-xxxl; + padding-bottom: $size-xxxl; + @include mq($until: bp-m) { + padding-top: $size-xl; + padding-bottom: $size-xl; + } +} diff --git a/assets/scss/7-layout/_grid.scss b/assets/scss/7-layout/_grid.scss index 5317f442..2f1b322d 100644 --- a/assets/scss/7-layout/_grid.scss +++ b/assets/scss/7-layout/_grid.scss @@ -2,9 +2,14 @@ // // This is a flexbox based grid. In the future, we'll start to rely more on CSS grid and slowly phase out this grid, piece by piece. // -// _Replacements so far:_ -// grid_separator => **has--btm-marg** | -// grid_container => **l-container** +// _Replacements so far:_
+// grid_separator => [**has-{size}-btm-marg**](/pages/utilities/index.html#margin-has-size-btm-marg)
+// grid_container => [**l-container**](#container-l-container)
+// grid_padded => [**has-page-padding**](/pages/utilities/index.html#padding-has-padding)
+// section_padded => [**has-section-padding**](/pages/utilities/index.html#padding-has-padding)
+// grid_padded--temp => [**has-page-padding-at-bp-l**](/pages/utilities/index.html#padding-has-padding)
+// col_adunit300x250 => Removed
+// hide_from--{size}/hide_until--{size} => [**is-hidden-from-{size}/is-hidden-until-{size}**](pages/utilities/index.html#hidden-is-hidden-specifier) // // Markup: 7-layout/grid.html // @@ -77,11 +82,6 @@ $column-slug: col !default; } } -.col_adunit300x250 { - @extend %flex-col; - margin-right: 0; - max-width: 310px; -} .grid { display: flex; @@ -94,29 +94,6 @@ $column-slug: col !default; flex-wrap: nowrap; } - // .grid_padded -- DEFAULT - // adds left/right padding on small screens - &_padded { - padding: 0 $size-xs; - - @include mq($from: bp-m, $until: bp-xl) { - padding: 0 $size-b; - } - - @include mq($from: bp-xl) { - padding: 0; - } - } - - // Custom setting for story page lead art - // adds left/right padding on middle-size screens - &_padded--temp { - padding: 0; - - @include mq($from: bp-l, $until: bp-xl) { - padding: 0 $size-b; - } - } &_order { &--primary { @@ -189,7 +166,7 @@ $column-slug: col !default; /** Use the following two classes in tandem, - probably with .col and .col_adunit300x250 + probably with .col and .col_300x250 together in a row. It flips the order at different breakpoints, which can be useful when stacking. @@ -240,50 +217,6 @@ $column-slug: col !default; } } } - - .col_adunit300x250 { - flex: 0 1 100%; - margin-right: 0; - max-width: 100%; - - @include mq($from: $bp) { - margin-left: 0; - margin-right: 0; - max-width: 310px; - } - } - } - - // Set left/right padded until a breakpoint - // grid_padded--m = 1.1rem padding until bp-m - .grid_padded--#{$size} { - @include mq($until: $bp-xs) { - padding: 0 $size-xs; - } - - @include mq($until: $bp) { - padding: 0 $size-b; - } - } - - // Hide element screens > $bp - // i.e. display until $bp - .hide_from { - &--#{$size} { - @include mq($from: $bp) { - display: none !important; - } - } - } - - // Hide element screens < $bp - // i.e. display from $bp - .hide_until { - &--#{$size} { - @include mq($until: $bp) { - display: none !important; - } - } } } diff --git a/assets/scss/utilities/_hidden.scss b/assets/scss/utilities/_hidden.scss index 7bcfe6b7..88ac7104 100644 --- a/assets/scss/utilities/_hidden.scss +++ b/assets/scss/utilities/_hidden.scss @@ -20,7 +20,7 @@ // .is-hidden-until-bp-default - Hide until bp-default // .is-transparent - Removes opacity. (Use this to fade elements out.) // -// Markup:
Resize to see me appear/disappear
+// Markup:
{{ className }}: Resize to see me appear/disappear
// // // Styleguide 8.0.1 diff --git a/assets/scss/utilities/_spacing.scss b/assets/scss/utilities/_spacing.scss index e2b5aaef..0994fe84 100644 --- a/assets/scss/utilities/_spacing.scss +++ b/assets/scss/utilities/_spacing.scss @@ -33,11 +33,13 @@ // Not all sizes are accounted for. Often, specific padding rules should go on a component. {{isHelper}} // // .has-padding - All-around padding with $size-b -// .has-xs-padding - All-around padding with $size-xs -// .has-xl-padding - All-around padding with $size-xl -// .has-reset-padding - Removes padding +// .has-xs-padding - All-around padding with $size-xs +// .has-xl-padding - All-around padding with $size-xl +// .has-page-padding - Left/right padding on small screens +// .has-page-padding-at-bp-l - Custom setting for story page lead art +// .has-section-padding - Top/bottom responsive padding // -// Markup:
Example
+// Markup:
{{ className }}
// // // Styleguide 8.0.1 @@ -56,4 +58,29 @@ .has-reset-padding { padding: 0; +} + +.has-page-padding { + padding: 0 $size-xs; + @include mq($from: bp-m, $until: bp-xl) { + padding: 0 $size-b; + } + @include mq($from: bp-xl) { + padding: 0 + } +} + +.has-page-padding-at-bp-l { + @include mq($from: bp-l, $until: bp-xl) { + padding: 0 $size-b; + } +} + +.has-section-padding { + padding-top: $size-xxxl; + padding-bottom: $size-xxxl; + @include mq($until: bp-m) { + padding-top: $size-xl; + padding-bottom: $size-xl; + } } \ No newline at end of file diff --git a/package.json b/package.json index abe46318..a859bbc3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@texastribune/queso-ui", - "version": "1.2.0-1", + "version": "2.0.0-2", "description": "Asset library of SCSS and SVG files", "scripts": { "prettier": "prettier --write './docs/**/*.js'",