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

   1 @import "reset";
   2 @import "variables";
   3 @import "mixins";
   4 @import "html";
   5 @import "text";
   6 @import "grid";
   7 @import "blocks";
   8 @import "buttons";
   9 @import "forms";
  10 @import "tables";
  11 @import "animations";
  12 @import "tinymce";
  13 @import "highlightjs";
  14 @import "image-manager";
  15 @import "header";
  16 @import "lists";
  17 @import "pages";
  18
  19 [v-cloak], [v-show] {display: none;}
  20
  21 // Jquery Sortable Styles
  22 .dragged {
  23   position: absolute;
  24   opacity: 0.5;
  25   z-index: 2000;
  26 }
  27 body.dragging, body.dragging * {
  28   cursor: move !important;
  29 }
  30
  31 // User Avatar Images
  32 .avatar {
  33   border-radius: 100%;
  34   background-color: #EEE;
  35   width: 30px;
  36   height: 30px;
  37   &.med {
  38     width: 40px;
  39     height: 40px;
  40   }
  41   &.large {
  42     width: 80px;
  43     height: 80px;
  44   }
  45 }
  46
  47 // System wide notifications
  48 .notification {
  49   position: fixed;
  50   top: 0;
  51   right: 0;
  52   margin: $-xl*2 $-xl;
  53   padding: $-l $-xl;
  54   background-color: #EEE;
  55   border-radius: 3px;
  56   box-shadow: $bs-med;
  57   z-index: 999999;
  58   display: table;
  59   cursor: pointer;
  60   max-width: 480px;
  61   i, span {
  62     display: table-cell;
  63   }
  64   i {
  65     font-size: 2em;
  66     padding-right: $-l;
  67   }
  68   span {
  69     vertical-align: middle;
  70   }
  71   &.pos {
  72     background-color: $positive;
  73     color: #EEE;
  74   }
  75   &.neg {
  76     background-color: $negative;
  77     color: #EEE;
  78   }
  79 }
  80
  81 // Loading icon
  82 $loadingSize: 10px;
  83 .loading-container {
  84   position: relative;
  85   display: block;
  86   height: $loadingSize;
  87   margin: $-xl auto;
  88   > div {
  89     width: $loadingSize;
  90     height: $loadingSize;
  91     border-radius: $loadingSize;
  92     display: inline-block;
  93     vertical-align: top;
  94     transform: translate3d(0, 0, 0);
  95     animation-name: loadingBob;
  96     animation-duration: 1.4s;
  97     animation-iteration-count: infinite;
  98     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
  99     margin-right: 4px;
 100     background-color: $color-page;
 101     animation-delay: 0.3s;
 102   }
 103   > div:first-child {
 104       left: -($loadingSize+$-xs);
 105       background-color: $color-book;
 106       animation-delay: 0s;
 107   }
 108   > div:last-child {
 109     left: $loadingSize+$-xs;
 110     background-color: $color-chapter;
 111     animation-delay: 0.6s;
 112   }
 113 }
 114
 115
 116 // Search results
 117 .search-results > h3 a {
 118   font-size: 0.66em;
 119   color: $primary;
 120   padding-left: $-m;
 121   i {
 122     padding-right: $-s;
 123   }
 124 }