Files
sage/resources/css/global/framework/_spacing.scss

111 lines
1.8 KiB
SCSS

.brand {
display: block;
width: $brandWidth;
height: $brandHeight;
svg,
img {
display: block;
width: $brandWidth;
height: $brandHeight;
}
.knockout & {
@media screen {
.fill-primary {
fill: $white;
}
.fill-grey {
fill: rgba($white, 0.8);
}
}
}
}
.container {
width: 90%;
margin: auto;
&-large { max-width: $containerLarge; }
&-medium { max-width: $containerMedium; }
&-small { max-width: $containerSmall; }
&-narrow { max-width: $containerNarrow; }
}
.section {
padding: $sectionMedium 0;
&-small { padding: $sectionSmall 0; }
&-medium { padding: $sectionMedium 0; }
&-large { padding: $sectionLarge 0; }
&-zero-top { padding-top: 0; }
&-zero-bottom { padding-bottom: 0; }
}
.inner {
padding: $innerMedium;
&-small { padding: $innerSmall; }
&-large { padding: $innerLarge; }
&-zero-x {
padding-left: 0;
padding-right: 0;
}
&-zero-y {
padding-top: 0;
padding-top: 0;
}
}
.rounded {
border-radius: $borderRadius;
&-top {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&-bottom {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
.border {
border-style: solid;
border-width: $borderWidth;
&-thin { border-width: 0.0625em; }
&-regular { border-width: $borderWidth; }
&-thick { border-width: $borderThick; }
&-thicker { border-width: $borderThicker; }
&-top {
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}
&-right {
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}
&-bottom {
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
}
&-left {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
}
}