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   &.med {
  36     width: 40px;
  37     height: 40px;
  38   }
  39 }
  40
  41 // System wide notifications
  42 .notification {
  43   position: fixed;
  44   top: 0;
  45   right: 0;
  46   margin: $-xl*2 $-xl;
  47   padding: $-l $-xl;
  48   background-color: #EEE;
  49   border-radius: 3px;
  50   box-shadow: $bs-med;
  51   z-index: 999999;
  52   display: table;
  53   cursor: pointer;
  54   max-width: 480px;
  55   i, span {
  56     display: table-cell;
  57   }
  58   i {
  59     font-size: 2em;
  60     padding-right: $-l;
  61   }
  62   span {
  63     vertical-align: middle;
  64   }
  65   &.pos {
  66     background-color: $positive;
  67     color: #EEE;
  68   }
  69   &.neg {
  70     background-color: $negative;
  71     color: #EEE;
  72   }
  73 }
  74
  75 // Loading icon
  76 $loadingSize: 10px;
  77 .loading-container {
  78   position: relative;
  79   display: block;
  80   height: $loadingSize;
  81   margin: $-xl auto;
  82   > div {
  83     width: $loadingSize;
  84     height: $loadingSize;
  85     border-radius: $loadingSize;
  86     display: inline-block;
  87     vertical-align: top;
  88     transform: translate3d(0, 0, 0);
  89     animation-name: loadingBob;
  90     animation-duration: 1.4s;
  91     animation-iteration-count: infinite;
  92     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
  93     margin-right: 4px;
  94     background-color: $color-page;
  95     animation-delay: 0.3s;
  96   }
  97   > div:first-child {
  98       left: -($loadingSize+$-xs);
  99       background-color: $color-book;
 100       animation-delay: 0s;
 101   }
 102   > div:last-child {
 103     left: $loadingSize+$-xs;
 104     background-color: $color-chapter;
 105     animation-delay: 0.6s;
 106   }
 107 }
 108
 109
 110 // Search results
 111 .search-results > h3 a {
 112   font-size: 0.66em;
 113   color: $primary;
 114   padding-left: $-m;
 115   i {
 116     padding-right: $-s;
 117   }
 118 }