BookStack/resources/assets/sass/_blocks.scss
2018-02-17 19:49:00 +00:00

261 lines
No EOL
4.2 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 $-s $-s $-xl;
display: block;
position: relative;
&:before {
background-image: url("/icon/info-filled.svg?color=015380");
background-repeat: no-repeat;
content: '';
width: 1.2em;
height: 1.2em;
left: $-xs + 1px;
top: 50%;
margin-top: -9px;
display: inline-block;
position: absolute;
line-height: 1;
opacity: 0.8;
}
&.success {
border-left-color: $positive;
background-color: lighten($positive, 45%);
color: darken($positive, 16%);
}
&.success:before {
background-image: url("/icon/check-circle.svg?color=376c39");
}
&.danger {
border-left-color: $negative;
background-color: lighten($negative, 34%);
color: darken($negative, 20%);
}
&.danger:before {
background-image: url("/icon/danger.svg?color=b91818");
}
&.info {
border-left-color: $info;
background-color: lighten($info, 50%);
color: darken($info, 16%);
}
&.warning {
border-left-color: $warning;
background-color: lighten($warning, 36%);
color: darken($warning, 16%);
}
&.warning:before {
background-image: url("/icon/warning.svg?color=b6531c");
}
}
.card {
margin: $-m;
background-color: #FFF;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
h3 {
padding: $-m;
border-bottom: 1px solid #E8E8E8;
margin: 0;
font-size: $fs-s;
color: #888;
fill: #888;
font-weight: 400;
text-transform: uppercase;
}
h3 a {
line-height: 1;
}
.body, p.empty-text {
padding: $-m;
}
a, p {
word-wrap: break-word;
word-break: break-word;
}
}
.card.drag-card {
border: 1px solid #DDD;
border-radius: 4px;
display: flex;
padding: 0;
padding-left: $-s + 28px;
margin: $-s 0;
position: relative;
.drag-card-action {
cursor: pointer;
}
.handle, .drag-card-action {
display: flex;
padding: 0;
align-items: center;
text-align: center;
width: 28px;
padding-left: $-xs;
padding-right: $-xs;
&:hover {
background-color: #EEE;
}
i {
flex: 1;
padding: 0;
}
}
> div .outline input {
margin: $-s 0;
}
> div.padded {
padding: $-s 0 !important;
}
.handle {
background-color: #EEE;
left: 0;
position: absolute;
top: 0;
bottom: 0;
}
> div {
padding: 0 $-s;
max-width: 80%;
}
}
.well {
background-color: #F8F8F8;
padding: $-m;
border: 1px solid #DDD;
}