Empty Styleguide

Styleguide.scss

// Empty Global Styleguide (SG)

// Define ONLY type styles in the silent clases, that way they can be reused.
// Get specific with colors, alignment, etc, in the actual declarations below where these silent classes are extended.

a {
}

%sg-h1 {
}

%sg-h2 {
}

%sg-h3 {
}

%sg-h4 {
}

%sg-body-copy {
}

// body-link is for links used within copy blocks. text-link is used for non-button links all alone in the design.
%sg-body-link {
}

%sg-text-link {
}

%sg-blockquote {
}

%sg-button {
  text-decoration: none;
  @include appearance(none);
  &:hover {
  }
  &.button-active {
  }
  &:active {
    @extend .button-active !optional;
  }
}

h1,h2,h3,h4,h5 {

}

h1, .h1 {
  @extend %sg-h1 !optional;
}

h2, .h2 {
  @extend %sg-h2 !optional;
}

h3, .h3 {
  @extend %sg-h3 !optional;
}

h4, .h4 {
  @extend %sg-h4 !optional;
}

h5, .h5 {
  @extend %sg-h5 !optional;
}

h6, .h6 {
  @extend %sg-h6 !optional;
}

p {
  @extend %sg-body-copy !optional;
  a {
    @extend %sg-body-link !optional;
  }
}

blockquote {
  p {
    @extend %sg-blockquote !optional;
  }
}

button {
 @extend %sg-button !optional;
}

.button {
  @extend %sg-button !optional;
}

.text-link {
  @extend %sg-text-link !optional;
}