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

   1
   2 /*
   3 * This file container all block styling including margins, paddings & borders.
   4 */
   5
   6
   7 /*
   8 * Padding
   9 * TODO - Remove these older styles
  10 */
  11 .nopadding {
  12   padding: 0;
  13 }
  14 .padded {
  15   padding: $-l;
  16   &.large {
  17     padding: $-xl;
  18   }
  19   >h1, >h2, >h3, >h4 {
  20     &:first-child {
  21       margin-top: 0.1em;
  22     }
  23   }
  24 }
  25 .padded-vertical, .padded-top {
  26   padding-top: $-m;
  27   &.large {
  28     padding-top: $-xl;
  29   }
  30 }
  31
  32 .padded-vertical, .padded-bottom {
  33   padding-bottom: $-m;
  34   &.large {
  35     padding-bottom: $-xl;
  36   }
  37 }
  38 .padded-horizontal, .padded-left {
  39   padding-left: $-m;
  40   &.large {
  41     padding-left: $-xl;
  42   }
  43 }
  44 .padded-horizontal, .padded-right {
  45   padding-right: $-m;
  46   &.large {
  47     padding-right: $-xl;
  48   }
  49 }
  50
  51 /*
  52 * Margins
  53 * TODO - Remove these older styles
  54 */
  55 .margins {
  56   margin: $-l;
  57   &.large {
  58     margin: $-xl;
  59   }
  60 }
  61 .margins-vertical, .margin-top {
  62   margin-top: $-m;
  63   &.large {
  64     margin-top: $-xl;
  65   }
  66 }
  67 .margins-vertical, .margin-bottom {
  68   margin-bottom: $-m;
  69   &.large {
  70     margin-bottom: $-xl;
  71   }
  72 }
  73 .margins-horizontal, .margin-left {
  74   margin-left: $-m;
  75   &.large {
  76     margin-left: $-xl;
  77   }
  78 }
  79 .margins-horizontal, .margin-right {
  80   margin-right: $-m;
  81   &.large {
  82     margin-right: $-xl;
  83   }
  84 }
  85
  86 @mixin spacing($prop, $propLetter) {
  87   @each $sizeLetter, $size in $spacing {
  88     .#{$propLetter}-#{$sizeLetter} {
  89       #{$prop}: $size;
  90     }
  91     .#{$propLetter}x-#{$sizeLetter} {
  92       #{$prop}-left: $size;
  93       #{$prop}-right: $size;
  94     }
  95     .#{$propLetter}y-#{$sizeLetter} {
  96       #{$prop}-top: $size;
  97       #{$prop}-bottom: $size;
  98     }
  99     .#{$propLetter}t-#{$sizeLetter} {
 100       #{$prop}-top: $size;
 101     }
 102     .#{$propLetter}r-#{$sizeLetter} {
 103       #{$prop}-right: $size;
 104     }
 105     .#{$propLetter}b-#{$sizeLetter} {
 106       #{$prop}-bottom: $size;
 107     }
 108     .#{$propLetter}l-#{$sizeLetter} {
 109       #{$prop}-left: $size;
 110     }
 111   }
 112
 113 }
 114
 115 @include spacing('margin', 'm')
 116 @include spacing('padding', 'p')
 117
 118
 119 /**
 120  * Callouts
 121  */
 122
 123 .callout {
 124   border-left: 3px solid #BBB;
 125   background-color: #EEE;
 126   padding: $-s $-s $-s $-xl;
 127   display: block;
 128   position: relative;
 129   &:before {
 130     background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
 131     background-repeat: no-repeat;
 132     content: '';
 133     width: 1.2em;
 134     height: 1.2em;
 135     left: $-xs + 1px;
 136     top: 50%;
 137     margin-top: -9px;
 138     display: inline-block;
 139     position: absolute;
 140     line-height: 1;
 141     opacity: 0.8;
 142   }
 143   &.success {
 144     border-left-color: $positive;
 145     background-color: lighten($positive, 45%);
 146     color: darken($positive, 16%);
 147   }
 148   &.success:before {
 149     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
 150   }
 151   &.danger {
 152     border-left-color: $negative;
 153     background-color: lighten($negative, 34%);
 154     color: darken($negative, 20%);
 155   }
 156   &.danger:before {
 157     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
 158   }
 159   &.info {
 160     border-left-color: $info;
 161     background-color: lighten($info, 50%);
 162     color: darken($info, 16%);
 163   }
 164   &.warning {
 165     border-left-color: $warning;
 166     background-color: lighten($warning, 36%);
 167     color: darken($warning, 16%);
 168   }
 169   &.warning:before {
 170     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
 171   }
 172 }
 173
 174 .card {
 175   background-color: #FFF;
 176   box-shadow: $bs-card;
 177   border-radius: 3px;
 178   padding-bottom: $-xs;
 179   h3 {
 180     padding: $-m;
 181     padding-bottom: $-xs;
 182     margin: 0;
 183     font-size: $fs-s;
 184     color: #444;
 185     fill: #666;
 186     font-weight: 400;
 187   }
 188   h3 a {
 189     line-height: 1;
 190   }
 191   .body, p.empty-text {
 192     padding: $-m;
 193   }
 194   a, p {
 195     word-wrap: break-word;
 196     word-break: break-word;
 197   }
 198 }
 199
 200 .sidebar .card {
 201   .body, .empty-text {
 202     padding: $-s $-m;
 203   }
 204   h3 + .body {
 205     padding-top: $-xs;
 206   }
 207 }
 208
 209 .card.drag-card {
 210   border: 1px solid #DDD;
 211   border-radius: 4px;
 212   display: flex;
 213   padding: 0;
 214   padding-left: $-s + 28px;
 215   margin: $-s 0;
 216   position: relative;
 217   .drag-card-action {
 218     cursor: pointer;
 219   }
 220   .handle, .drag-card-action {
 221     display: flex;
 222     padding: 0;
 223     align-items: center;
 224     text-align: center;
 225     justify-content: center;
 226     width: 28px;
 227     flex-grow: 0;
 228     padding-left: $-xs;
 229     padding-right: $-xs;
 230     &:hover {
 231       background-color: #EEE;
 232     }
 233     .svg-icon {
 234       margin-right: 0px;
 235     }
 236   }
 237   > div .outline input {
 238     margin: $-s 0;
 239     width: 100%;
 240   }
 241   > div.padded {
 242     padding: $-s 0 !important;
 243   }
 244   .handle {
 245     background-color: #EEE;
 246     left: 0;
 247     position: absolute;
 248     top: 0;
 249     bottom: 0;
 250   }
 251   > div {
 252     padding: 0 $-s;
 253     max-width: 80%;
 254     flex: 1;
 255   }
 256 }
 257
 258 .well {
 259   background-color: #F8F8F8;
 260   padding: $-m;
 261   border: 1px solid #DDD;
 262 }
 263
 264 .tag-item {
 265   display: inline-flex;
 266   margin-bottom: $-xs;
 267   margin-right: $-xs;
 268   border-radius: 4px;
 269   border: 1px solid #CCC;
 270   overflow: hidden;
 271   font-size: 0.85em;
 272   a, a:hover, a:active {
 273     padding: 4px 8px;
 274     color: #777;
 275     transition: background-color ease-in-out 80ms;
 276     text-decoration: none;
 277   }
 278   a:hover {
 279     background-color: rgba(255, 255, 255, 0.7);
 280   }
 281   svg {
 282     fill: #888;
 283   }
 284   .tag-value {
 285     border-left: 1px solid #DDD;
 286     background-color: rgba(255, 255, 255, 0.5);
 287   }
 288 }
 289
 290 .tag-list div:last-child .tag-item {
 291   margin-bottom: 0;
 292 }