Skip to content

Instantly share code, notes, and snippets.

@BenjaminRCooper
Created November 18, 2015 15:49
Show Gist options
  • Save BenjaminRCooper/9baeb4c437301d97d83f to your computer and use it in GitHub Desktop.
Save BenjaminRCooper/9baeb4c437301d97d83f to your computer and use it in GitHub Desktop.
// =============================
// Button Component Styling
// =============================
//
// The Button Component provides no styling which is reusable to all modifiers currently at this level.
// Note - It is recommended you don't use this component direct and just extend upon.
//
.button,
%button {
// .button--stacked
//
// The Button Component Stacked Modifier provides structural styling which displays a button component
// at block level.
//
&--stacked {
@extend %button !optional;
text-align: center;
display: block;
width: 100%;
}
// .button--inline
//
// The Button Component Inline Modifier provides structural styling which displays a button component
// at inline level.
//
&--inline {
@extend %button !optional;
display: inline-block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment