BookStack Code Mirror - bookstack/blob - resources/assets/sass/_blocks.scss

   1
   2 /*
   3 * This file container all block styling including background shading,
   4 * margins, paddings & borders.
   5 */
   6
   7
   8 /*
   9 * Background Shading
  10 */
  11 .shaded {
  12   background-color: #f1f1f1;
  13   &.pos {
  14     background-color: lighten($positive, 40%);
  15   }
  16   &.neg {
  17     background-color: lighten($negative, 20%);
  18   }
  19   &.primary {
  20     background-color: lighten($primary, 40%);
  21   }
  22   &.secondary {
  23     background-color: lighten($secondary, 30%);
  24   }
  25 }
  26
  27 /*
  28 * Bordering
  29 */
  30 .bordered {
  31   border: 1px solid #BBB;
  32   &.pos {
  33     border-color: $positive;
  34   }
  35   &.neg {
  36     border-color: $negative;
  37   }
  38   &.primary {
  39     border-color: $primary;
  40   }
  41   &.secondary {
  42     border-color: $secondary;
  43   }
  44   &.thick {
  45     border-width: 2px;
  46   }
  47 }
  48 .rounded {
  49   border-radius: 3px;
  50 }
  51
  52 /*
  53 * Padding
  54 */
  55 .nopadding {
  56   padding: 0;
  57 }
  58 .padded {
  59   padding: $-l;
  60   &.large {
  61     padding: $-xl;
  62   }
  63   >h1, >h2, >h3, >h4 {
  64     &:first-child {
  65       margin-top: 0.1em;
  66     }
  67   }
  68 }
  69 .padded-vertical, .padded-top {
  70   padding-top: $-m;
  71   &.large {
  72     padding-top: $-xl;
  73   }
  74 }
  75
  76 .padded-vertical, .padded-bottom {
  77   padding-bottom: $-m;
  78   &.large {
  79     padding-bottom: $-xl;
  80   }
  81 }
  82 .padded-horizontal, .padded-left {
  83   padding-left: $-m;
  84   &.large {
  85     padding-left: $-xl;
  86   }
  87 }
  88 .padded-horizontal, .padded-right {
  89   padding-right: $-m;
  90   &.large {
  91     padding-right: $-xl;
  92   }
  93 }
  94
  95 /*
  96 * Margins
  97 */
  98 .margins {
  99   margin: $-l;
 100   &.large {
 101     margin: $-xl;
 102   }
 103 }
 104 .margins-vertical, .margin-top {
 105   margin-top: $-m;
 106   &.large {
 107     margin-top: $-xl;
 108   }
 109 }
 110 .margins-vertical, .margin-bottom {
 111   margin-bottom: $-m;
 112   &.large {
 113     margin-bottom: $-xl;
 114   }
 115 }
 116 .margins-horizontal, .margin-left {
 117   margin-left: $-m;
 118   &.large {
 119     margin-left: $-xl;
 120   }
 121 }
 122 .margins-horizontal, .margin-right {
 123   margin-right: $-m;
 124   &.large {
 125     margin-right: $-xl;
 126   }
 127 }
 128
 129
 130 /**
 131  * Callouts
 132  */
 133
 134 .callout {
 135   border-left: 3px solid #BBB;
 136   background-color: #EEE;
 137   padding: $-s $-s $-s $-xl;
 138   display: block;
 139   position: relative;
 140   &:before {
 141     font-family: 'Material-Design-Iconic-Font';
 142     left: $-xs + 4px;
 143     top: 50%;
 144     margin-top: -9px;
 145     //top: $-xs + 5px;
 146     display: inline-block;
 147     position: absolute;
 148     font-size: 1.222em;
 149     line-height: 1;
 150   }
 151   &.success {
 152     border-left-color: $positive;
 153     background-color: lighten($positive, 45%);
 154     color: darken($positive, 16%);
 155   }
 156   &.success:before {
 157     content: '\f269';
 158   }
 159   &.danger {
 160     border-left-color: $negative;
 161     background-color: lighten($negative, 34%);
 162     color: darken($negative, 20%);
 163   }
 164   &.danger:before {
 165     content: '\f1f2';
 166   }
 167   &.info {
 168     border-left-color: $info;
 169     background-color: lighten($info, 50%);
 170     color: darken($info, 16%);
 171   }
 172   &.info:before {
 173     content: '\f1f8';
 174   }
 175   &.warning {
 176     border-left-color: $warning;
 177     background-color: lighten($warning, 36%);
 178     color: darken($warning, 16%);
 179   }
 180   &.warning:before {
 181     content: '\f1f1';
 182   }
 183 }
 184
 185 .card {
 186   margin: $-m;
 187   background-color: #FFF;
 188   box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
 189   h3 {
 190     padding: $-m;
 191     border-bottom: 1px solid #E8E8E8;
 192     margin: 0;
 193     font-size: $fs-s;
 194     color: #888;
 195     font-weight: 400;
 196     text-transform: uppercase;
 197   }
 198   .body, p.empty-text {
 199     padding: $-m;
 200   }
 201   a {
 202     word-wrap: break-word;
 203     word-break: break-word;
 204   }
 205 }
 206
 207 .card.drag-card {
 208   border: 1px solid #DDD;
 209   border-radius: 4px;
 210   display: flex;
 211   padding: 0;
 212   padding-left: $-s + 28px;
 213   margin: $-s 0;
 214   position: relative;
 215   .drag-card-action {
 216     cursor: pointer;
 217   }
 218   .handle, .drag-card-action {
 219     display: flex;
 220     padding: 0;
 221     align-items: center;
 222     text-align: center;
 223     width: 28px;
 224     padding-left: $-xs;
 225     padding-right: $-xs;
 226     &:hover {
 227       background-color: #EEE;
 228     }
 229     i {
 230       flex: 1;
 231       padding: 0;
 232     }
 233   }
 234   > div .outline input {
 235     margin: $-s 0;
 236   }
 237   > div.padded {
 238     padding: $-s 0 !important;
 239   }
 240   .handle {
 241     background-color: #EEE;
 242     left: 0;
 243     position: absolute;
 244     top: 0;
 245     bottom: 0;
 246   }
 247   > div {
 248     padding: 0 $-s;
 249     max-width: 80%;
 250   }
 251 }
 252
 253 .well {
 254   background-color: #F8F8F8;
 255   padding: $-m;
 256   border: 1px solid #DDD;
 257 }