BookStack/resources/assets/sass/_blocks.scss
2016-10-30 10:19:45 +00:00

176 lines
2.7 KiB
SCSS

/*
* This file container all block styling including background shading,
* margins, paddings & borders.
*/
/*
* Background Shading
*/
.shaded {
background-color: #f1f1f1;
&.pos {
background-color: lighten($positive, 40%);
}
&.neg {
background-color: lighten($negative, 20%);
}
&.primary {
background-color: lighten($primary, 40%);
}
&.secondary {
background-color: lighten($secondary, 30%);
}
}
/*
* Bordering
*/
.bordered {
border: 1px solid #BBB;
&.pos {
border-color: $positive;
}
&.neg {
border-color: $negative;
}
&.primary {
border-color: $primary;
}
&.secondary {
border-color: $secondary;
}
&.thick {
border-width: 2px;
}
}
.rounded {
border-radius: 3px;
}
/*
* Padding
*/
.nopadding {
padding: 0;
}
.padded {
padding: $-l;
&.large {
padding: $-xl;
}
>h1, >h2, >h3, >h4 {
&:first-child {
margin-top: 0.1em;
}
}
}
.padded-vertical, .padded-top {
padding-top: $-m;
&.large {
padding-top: $-xl;
}
}
.padded-vertical, .padded-bottom {
padding-bottom: $-m;
&.large {
padding-bottom: $-xl;
}
}
.padded-horizontal, .padded-left {
padding-left: $-m;
&.large {
padding-left: $-xl;
}
}
.padded-horizontal, .padded-right {
padding-right: $-m;
&.large {
padding-right: $-xl;
}
}
/*
* Margins
*/
.margins {
margin: $-l;
&.large {
margin: $-xl;
}
}
.margins-vertical, .margin-top {
margin-top: $-m;
&.large {
margin-top: $-xl;
}
}
.margins-vertical, .margin-bottom {
margin-bottom: $-m;
&.large {
margin-bottom: $-xl;
}
}
.margins-horizontal, .margin-left {
margin-left: $-m;
&.large {
margin-left: $-xl;
}
}
.margins-horizontal, .margin-right {
margin-right: $-m;
&.large {
margin-right: $-xl;
}
}
/**
* Callouts
*/
.callout {
border-left: 3px solid #BBB;
background-color: #EEE;
padding: $-s;
display: flex;
&:before {
font-family: 'Material-Design-Iconic-Font';
padding-right: $-s;
display: inline-block;
}
&.success {
border-left-color: $positive;
background-color: lighten($positive, 45%);
color: darken($positive, 16%);
}
&.success:before {
content: '\f269';
}
&.danger {
border-left-color: $negative;
background-color: lighten($negative, 34%);
color: darken($negative, 20%);
}
&.danger:before {
content: '\f1f2';
}
&.info {
border-left-color: $info;
background-color: lighten($info, 50%);
color: darken($info, 16%);
}
&.info:before {
content: '\f1f8';
}
&.warning {
border-left-color: $warning;
background-color: lighten($warning, 36%);
color: darken($warning, 16%);
}
&.warning:before {
content: '\f1f1';
}
}