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 }
  64 .padded-vertical, .padded-top {
  65   padding-top: $-m;
  66   &.large {
  67     padding-top: $-xl;
  68   }
  69 }
  70 .padded-vertical, .padded-bottom {
  71   padding-bottom: $-m;
  72   &.large {
  73     padding-bottom: $-xl;
  74   }
  75 }
  76 .padded-horizontal, .padded-left {
  77   padding-left: $-m;
  78   &.large {
  79     padding-left: $-xl;
  80   }
  81 }
  82 .padded-horizontal, .padded-right {
  83   padding-right: $-m;
  84   &.large {
  85     padding-right: $-xl;
  86   }
  87 }
  88
  89 /*
  90 * Margins
  91 */
  92 .margins {
  93   margin: $-l;
  94   &.large {
  95     margin: $-xl;
  96   }
  97 }
  98 .margins-vertical, .margin-top {
  99   margin-top: $-m;
 100   &.large {
 101     margin-top: $-xl;
 102   }
 103 }
 104 .margins-vertical, .margin-bottom {
 105   margin-bottom: $-m;
 106   &.large {
 107     margin-bottom: $-xl;
 108   }
 109 }
 110 .margins-horizontal, .margin-left {
 111   margin-left: $-m;
 112   &.large {
 113     margin-left: $-xl;
 114   }
 115 }
 116 .margins-horizontal, .margin-right {
 117   margin-right: $-m;
 118   &.large {
 119     margin-right: $-xl;
 120   }
 121 }