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:
+//
+//
+// 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:
+//
+// 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:
//
//
// 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'",