BookStack Code Mirror - website/blob - themes/bookstack/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: rgba($primary, 10%);
  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: $-xxl*1.6;
  73   }
  74 }
  75
  76 .padded-vertical, .padded-bottom {
  77   padding-bottom: $-m;
  78   &.large {
  79     padding-bottom: $-xxl*1.6;
  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 .nomargin {
 105   margin: 0;
 106 }
 107 .margins-vertical, .margin-top {
 108   margin-top: $-m;
 109   &.large {
 110     margin-top: $-xl;
 111   }
 112 }
 113 .margins-vertical, .margin-bottom {
 114   margin-bottom: $-m;
 115   &.large {
 116     margin-bottom: $-xl;
 117   }
 118 }
 119 .margins-horizontal, .margin-left {
 120   margin-left: $-m;
 121   &.large {
 122     margin-left: $-xl;
 123   }
 124 }
 125 .margins-horizontal, .margin-right {
 126   margin-right: $-m;
 127   &.large {
 128     margin-right: $-xl;
 129   }
 130 }