125 lines
1.8 KiB
SCSS
125 lines
1.8 KiB
SCSS
// Elements
|
|
//
|
|
// Extend Bulma basic HTML elements in `.content` blocks. It includes color classes.
|
|
//
|
|
// .is-blue - color
|
|
// .is-marine - color
|
|
// .is-berry - color
|
|
// .is-cinnamon - color
|
|
// .is-dark - color
|
|
// .is-grey - color
|
|
// .is-dandelion - color
|
|
//
|
|
// Styleguide: Base.Elements
|
|
|
|
.content {
|
|
blockquote,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
&.is-blue {
|
|
color: $blue;
|
|
}
|
|
&.is-marine {
|
|
color: $marine;
|
|
}
|
|
&.is-berry {
|
|
color: $berry;
|
|
}
|
|
&.is-cinnamon {
|
|
color: $cinnamon;
|
|
}
|
|
&.is-dark {
|
|
color: $dark;
|
|
}
|
|
&.is-grey {
|
|
color: $grey;
|
|
}
|
|
&.is-dandelion {
|
|
color: $dandelion;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
label {
|
|
font-variant-caps: all-small-caps;
|
|
}
|
|
label::after {
|
|
content: ':';
|
|
}
|
|
}
|
|
|
|
// Links
|
|
|
|
|
|
a {
|
|
// color: $;
|
|
&:hover {
|
|
color: $link-hover;
|
|
background-color: $link-hover-background;
|
|
padding: $link-hover-padding;
|
|
margin: -$link-hover-padding;
|
|
}
|
|
&:focus {
|
|
color: $link-focus;
|
|
background-color: $link-hover-background;
|
|
padding: $link-hover-padding;
|
|
margin: -$link-hover-padding;
|
|
}
|
|
&:active {
|
|
color: $link-active;
|
|
background-color: $link-hover-background;
|
|
padding: $link-hover-padding;
|
|
margin: -$link-hover-padding;
|
|
}
|
|
}
|
|
|
|
// Rule
|
|
//
|
|
// Adds big border
|
|
//
|
|
// Styleguide: Base.Elements.Rule
|
|
|
|
%bigborder {
|
|
border-top: 4px solid $blue-dark;
|
|
}
|
|
|
|
hr {
|
|
@extend %bigborder;
|
|
}
|
|
|
|
|
|
// Titles
|
|
//
|
|
// Extends Bulma `.title` and `.subtitle` classes
|
|
//
|
|
// .is-compact - remove margins and spacing
|
|
//
|
|
// Styleguide: Base.Elements.Titles
|
|
|
|
.is-compact {
|
|
&.subtitle,
|
|
&.title {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
|
|
// Byline
|
|
//
|
|
// Styleguide: Base.Elements.Byline
|
|
|
|
.byline {
|
|
color: $blue-light;
|
|
a {
|
|
&:hover {
|
|
color: $blue;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|