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

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