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

   1 /*
   2 * This file contains styling for custom block formats.
   3 */
   4
   5
   6 /**
   7  * Callouts
   8  */
   9
  10 .callout {
  11   border-left: 3px solid #BBB;
  12   background-color: #EEE;
  13   padding: $-s $-s $-s $-xl;
  14   display: block;
  15   position: relative;
  16   &:before {
  17     background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
  18     background-repeat: no-repeat;
  19     content: '';
  20     width: 1.2em;
  21     height: 1.2em;
  22     left: $-xs + 1px;
  23     top: 50%;
  24     margin-top: -9px;
  25     display: inline-block;
  26     position: absolute;
  27     line-height: 1;
  28     opacity: 0.8;
  29   }
  30   &.success {
  31     border-left-color: $positive;
  32     background-color: lighten($positive, 45%);
  33     color: darken($positive, 16%);
  34   }
  35   &.success:before {
  36     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
  37   }
  38   &.danger {
  39     border-left-color: $negative;
  40     background-color: lighten($negative, 34%);
  41     color: darken($negative, 20%);
  42   }
  43   &.danger:before {
  44     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
  45   }
  46   &.info {
  47     border-left-color: $info;
  48     background-color: lighten($info, 50%);
  49     color: darken($info, 16%);
  50   }
  51   &.warning {
  52     border-left-color: $warning;
  53     background-color: lighten($warning, 36%);
  54     color: darken($warning, 16%);
  55   }
  56   &.warning:before {
  57     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
  58   }
  59 }
  60
  61 .card {
  62   background-color: #FFF;
  63   box-shadow: $bs-card;
  64   border-radius: 3px;
  65   border: 1px solid transparent;
  66   h3 {
  67     padding: $-m;
  68     padding-bottom: $-xs;
  69     margin: 0;
  70     font-size: $fs-m;
  71     color: #222;
  72     fill: #222;
  73     font-weight: 400;
  74   }
  75   h3 a {
  76     line-height: 1;
  77   }
  78   .body, p.empty-text {
  79     padding: $-m;
  80   }
  81   a, p {
  82     word-wrap: break-word;
  83     word-break: break-word;
  84   }
  85 }
  86
  87 .sidebar .card {
  88   .body, .empty-text {
  89     padding: $-s $-m;
  90   }
  91   h3 + .body {
  92     padding-top: $-xs;
  93   }
  94 }
  95
  96 .card.drag-card {
  97   border: 1px solid #DDD;
  98   border-radius: 4px;
  99   display: flex;
 100   padding: 0;
 101   padding-left: $-s + 28px;
 102   margin: $-s 0;
 103   position: relative;
 104   .drag-card-action {
 105     cursor: pointer;
 106   }
 107   .handle, .drag-card-action {
 108     display: flex;
 109     padding: 0;
 110     align-items: center;
 111     text-align: center;
 112     justify-content: center;
 113     width: 28px;
 114     flex-grow: 0;
 115     padding-left: $-xs;
 116     padding-right: $-xs;
 117     &:hover {
 118       background-color: #EEE;
 119     }
 120     .svg-icon {
 121       margin-right: 0px;
 122     }
 123   }
 124   > div .outline input {
 125     margin: $-s 0;
 126     width: 100%;
 127   }
 128   .handle {
 129     background-color: #EEE;
 130     left: 0;
 131     position: absolute;
 132     top: 0;
 133     bottom: 0;
 134   }
 135   > div {
 136     padding: 0 $-s;
 137     max-width: 80%;
 138     flex: 1;
 139   }
 140 }
 141
 142 .well {
 143   background-color: #F8F8F8;
 144   padding: $-m;
 145   border: 1px solid #DDD;
 146 }
 147
 148 .tag-item {
 149   display: inline-flex;
 150   margin-bottom: $-xs;
 151   margin-right: $-xs;
 152   border-radius: 4px;
 153   border: 1px solid #CCC;
 154   overflow: hidden;
 155   font-size: 0.85em;
 156   a, a:hover, a:active {
 157     padding: 4px 8px;
 158     color: #777;
 159     transition: background-color ease-in-out 80ms;
 160     text-decoration: none;
 161   }
 162   a:hover {
 163     background-color: rgba(255, 255, 255, 0.7);
 164   }
 165   svg {
 166     fill: #888;
 167   }
 168   .tag-value {
 169     border-left: 1px solid #DDD;
 170     background-color: rgba(255, 255, 255, 0.5);
 171   }
 172 }
 173
 174 .tag-list div:last-child .tag-item {
 175   margin-bottom: 0;
 176 }
 177
 178 .grid-card {
 179   display: flex;
 180   flex-direction: column;
 181   border: 1px solid #ddd;
 182   margin-bottom: $-l;
 183   border-radius: 4px;
 184   overflow: hidden;
 185   min-width: 100px;
 186   color: $text-dark;
 187   transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
 188   &:hover {
 189     color: $text-dark;
 190     text-decoration: none;
 191     box-shadow: $bs-card;
 192   }
 193   h2 {
 194     width: 100%;
 195     font-size: 1.5em;
 196     margin: 0 0 10px;
 197   }
 198   p {
 199     font-size: .7rem;
 200     margin: 0;
 201     line-height: 1.6em;
 202   }
 203   .grid-card-content {
 204     flex: 1;
 205     border-top: 0;
 206     border-bottom-width: 2px;
 207   }
 208   .grid-card-content, .grid-card-footer {
 209     padding: $-l;
 210   }
 211   .grid-card-content + .grid-card-footer {
 212     padding-top: 0;
 213   }
 214 }
 215
 216 .bookshelf-grid-item .grid-card-content h2 a  {
 217   color: $color-bookshelf;
 218   fill: $color-bookshelf;
 219 }
 220
 221 .book-grid-item .grid-card-footer {
 222   p.small {
 223     font-size: .8em;
 224     margin: 0;
 225   }
 226 }
 227
 228 .content-wrap.card {
 229   padding: $-l $-xxl;
 230   margin-left: auto;
 231   margin-right: auto;
 232   margin-bottom: $-xl;
 233   overflow: auto;
 234   min-height: 60vh;
 235   &.auto-height {
 236     min-height: 0;
 237   }
 238   &.fill-width {
 239     width: 100%;
 240   }
 241 }
 242 @include smaller-than($m) {
 243   .content-wrap.card {
 244     padding: $-m $-l;
 245   }
 246 }