selfdefined/assets/css/components/_definitions.scss
Matthew Shields 909c90f776
⚠️ Adds content warning guidelines (#156)
* Move speech definition into main template

* Remove speech definition from definition-content.njk

* add margin top helper

* add content flag components

* Add selection styling to .box class

* Change content warning flag styling

* Add additional content warning guidance and change styling

* Expand examples list

* reworded topic[s] after testing in screen reader

* Also adjust wording on avoid content guidelines block

* Output title into content warning example

* Update 11ty/_includes/components/content-warning.njk

Co-authored-by: Tatiana Mac <github@tatianamac.com>

* Update 11ty/_includes/components/content-warning-flag.njk

Co-authored-by: Tatiana Mac <github@tatianamac.com>

* Update 11ty/_includes/components/content-warning.njk

Co-authored-by: Tatiana Mac <github@tatianamac.com>

Co-authored-by: Tatiana Mac <github@tatianamac.com>
2020-05-28 16:08:35 -07:00

57 lines
1003 B
SCSS

.word__type {
font-family: $con-sans;
font-size: 0.85rem;
padding-right: 1rem;
text-align: right;
text-transform: uppercase;
}
.word__link {
border-bottom: darkgrey solid 0.1em;
color: black;
font-family: $ext-sans;
text-decoration: none;
}
.word__breakdown {
border-left: 0.1rem solid lightgrey;
font-family: $sans-serif;
padding-left: 1rem;
}
.content-flag {
background-color: $lt-background-color-warning;
overflow: hidden;
padding: 0 1rem 0 3rem;
position: relative;
&:before {
content: "⚠️";
left: 1rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&--avoid {
background-color: $pink;
&:before {
content: "🚨";
}
}
}
.content-warning {
background-color: $lt-background-color-warning;
border-left: 4px $yellow solid;
overflow: hidden;
padding: 1rem 1.5rem;
position: relative;
&--avoid {
background-color: $pink;
border-left-color: red;
}
}