resources/web/style/base_styles.pcss (143 lines of code) (raw):
html {
/*
NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
When scrolling to a heading, the heading should
go below the sticky marketing header. The value
of the padding depends on the height of the header.
*/
@media screen and (min-width: 1200px) {
scroll-padding-top: 92px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
scroll-padding-top: 151px;
}
}
#guide {
* {
font-family: Inter, sans-serif;
}
hr {
margin: .5em 0;
}
.blockquote {
font-size: 1rem;
}
dt span {
font-weight: bold;
code {
font-size: 16px;
}
}
dd {
margin: 0 0 0.5em 2em;
}
p {
margin-bottom: 1.15em;
}
details {
margin-bottom: 1.15em;
border: 1px #D3DAE6 solid;
border-radius: 3px;
summary {
list-style-type: none;
display: inline-block;
width: 100%;
padding: 10px;
&:before {
content: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.14898 5.10103C5.81704 4.76909 5.81704 4.2309 6.14898 3.89895C6.48093 3.56701 7.01912 3.56701 7.35107 3.89895L11.8511 8.39895C12.183 8.7309 12.183 9.26909 11.8511 9.60103L7.35107 14.101C7.01912 14.433 6.48093 14.433 6.14898 14.101C5.81704 13.7691 5.81704 13.2309 6.14898 12.899L10.0479 8.99999L6.14898 5.10103Z" fill="black"/></svg>');
display: inline-block;
transform: translate(0px, 3.5px) rotate(0deg);
transition: .1s ease-in-out;
margin-right: 8px;
}
&::-webkit-details-marker {
display: none;
}
}
.content {
padding: 5px 20px 0px 36px;
}
}
details[open] {
> summary {
&:before {
transform: translate(-3.5px, 0px) rotate(90deg);
transition: .1s ease-in-out;
}
}
}
.container-fluid {
@media screen and (min-width: 1560px) {
max-width: 1500px;
}
}
.sticky-top-md {
position: -webkit-relative;
position: relative;
@media screen and (min-width: 1200px) {
position: -webkit-sticky;
position: sticky;
top: 72px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
position: -webkit-sticky;
position: sticky;
top: 131px;
}
}
.sticky-top-lg {
position: -webkit-relative;
position: relative;
@media screen and (min-width: 1200px) {
position: -webkit-sticky;
position: sticky;
/*
NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
This is dependent on the height of the header.
*/
top: 72px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
position: -webkit-sticky;
position: sticky;
/*
NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
This is dependent on the height of the header.
*/
top: 131px;
}
}
.h-almost-full-md {
@media screen and (min-width: 769px) {
/*
NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
This is dependent on the height of the header.
*/
height: 90vh;
}
}
.h-almost-full-lg {
@media screen and (min-width: 993px) {
/*
NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
This is dependent on the height of the header.
*/
height: 90vh;
}
}
#left_col {
overflow: auto;
}
.aside-heading {
font-weight: 600;
margin-top: 20px;
margin-bottom: 10px;
}
.media-type {
opacity: 0.6;
text-transform: uppercase;
font-size: 80%;
font-weight: 400;
margin-bottom: 0px;
}
}