Skip to content

Commit

Permalink
Two fixes for b-c elements
Browse files Browse the repository at this point in the history
 * Removes resetting the vertical margins to 0. Allows for m-vXXX
   classes on b-c elements.
 * Makes explicit the width: 100% for a block element. Fixes centering
   inside of a flex-column container.

Also removes the "edge" classes, which are not in practice very useful.
Switched registry-certs over to just use full-width divs with b-c
elements inside of them.
  • Loading branch information
Fin Hopkins committed Jan 3, 2018
1 parent 8cdda23 commit 15aa11f
Showing 1 changed file with 3 additions and 17 deletions.
20 changes: 3 additions & 17 deletions stylesheets/components/block/_main.styl
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@
.b
// Block content
&-c
width: 100%
max-width: 66.67rem
margin: 0 auto
margin-left: auto
margin-right: auto
padding: $sizing-700 10%
position: relative

Expand Down Expand Up @@ -55,22 +57,6 @@
&--wbb
border-bottom: $border-100 dotted $grey-200

// Makes a block that "breaks out" of b-c and goes edge-to-edge
// (up to the above max-width), replicating the padding inside.
// Good for when you want a block to have a background that goes
// edge-to-edge.
&--hedge {
margin-left: -12.5%;
margin-right: -12.5%;
padding-left: 12.5%;
padding-right: 12.5%;
}

// compensates to remove the bottom padding from a b-c parent.
&--bedge {
margin-bottom: "calc(-1 * %s)" % ($sizing-700)
}

// Flex fill
&-ff
// Has to be just grow instead of the "flex" shorthand, otherwise
Expand Down

0 comments on commit 15aa11f

Please sign in to comment.