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

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