...
| Code Block |
|---|
// Events Article
.events {
&-category {
a {
color: $white;
&:hover, &:focus {
background-color: darken($gray-500, 15%);
}
}
}
// Event Tag
&-tag {
a {
@include tag-bg('%23002b5c');
}
}
&-tag.events-btn-light {
a {
&:hover, &:focus {
@include tag-bg('%23002b5c');
}
}
}
&-tag.events-btn-dark {
a {
&:hover, &:focus {
@include tag-bg('%23ffffff');
}
}
}
&-btn-light {
a {
background-color: $gray-100;
color: $gray-700;
&:hover, &:focus {
background-color: darken($gray-100, 7.5%);
color: $gray-700;
}
}
}
&-btn-dark {
a {
background-color: $gray-100;
color: $gray-700;
&:hover, &:focus {
background-color: $primary;
color: $white;
}
}
}
// end
} |
Be sure to include the new events.scss file in your main style.scss.
Make sure to change the color values to your colleges brand colors. One of the color values needs to ba be a data uri Basse64 value for the tag icon. Use the blah URL-encoder for SVG tool to convert a normal color hex value to into a color data uri valueBase64 value. The tool is normally used for svg graphics, but you can also use it for hex values.
Code Block // Event Tag &-tag { a { @include tag-bg('%23002b5c'); } } &-tag.events-btn-light { a { &:hover, &:focus { @include tag-bg('%23002b5c'); } } }Make sure that your .events-btn-dark css class is using your college primary colors.
| Code Block |
|---|
&-btn-dark {
a {
background-color: $gray-100;
color: $gray-700;
&:hover, &:focus {
background-color: $primary;
color: $white;
}
}
}
|
Be sure to include the new events.scss file in your main style.scss.
...