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   &.huge {
  51     width: 120px;
  52     height: 120px;
  53   }
  54   &.square {
  55     border-radius: 3px;
  56   }
  57 }
  58
  59 // System wide notifications
  60 .notification {
  61   position: fixed;
  62   top: 0;
  63   right: 0;
  64   margin: $-xl*2 $-xl;
  65   padding: $-l $-xl;
  66   background-color: #EEE;
  67   border-radius: 3px;
  68   box-shadow: $bs-med;
  69   z-index: 999999;
  70   display: table;
  71   cursor: pointer;
  72   max-width: 480px;
  73   i, span {
  74     display: table-cell;
  75   }
  76   i {
  77     font-size: 2em;
  78     padding-right: $-l;
  79   }
  80   span {
  81     vertical-align: middle;
  82   }
  83   &.pos {
  84     background-color: $positive;
  85     color: #EEE;
  86   }
  87   &.neg {
  88     background-color: $negative;
  89     color: #EEE;
  90   }
  91   &.warning {
  92     background-color: $secondary;
  93     color: #EEE;
  94   }
  95 }
  96
  97 // Loading icon
  98 $loadingSize: 10px;
  99 .loading-container {
 100   position: relative;
 101   display: block;
 102   height: $loadingSize;
 103   margin: $-xl auto;
 104   > div {
 105     width: $loadingSize;
 106     height: $loadingSize;
 107     border-radius: $loadingSize;
 108     display: inline-block;
 109     vertical-align: top;
 110     transform: translate3d(0, 0, 0);
 111     animation-name: loadingBob;
 112     animation-duration: 1.4s;
 113     animation-iteration-count: infinite;
 114     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 115     margin-right: 4px;
 116     background-color: $color-page;
 117     animation-delay: 0.3s;
 118   }
 119   > div:first-child {
 120       left: -($loadingSize+$-xs);
 121       background-color: $color-book;
 122       animation-delay: 0s;
 123   }
 124   > div:last-child {
 125     left: $loadingSize+$-xs;
 126     background-color: $color-chapter;
 127     animation-delay: 0.6s;
 128   }
 129 }
 130
 131
 132 // Search results
 133 .search-results > h3 a {
 134   font-size: 0.66em;
 135   color: $primary;
 136   padding-left: $-m;
 137   i {
 138     padding-right: $-s;
 139   }
 140 }
 141
 142 // Back to top link
 143 $btt-size: 40px;
 144 #back-to-top {
 145   background-color: $primary;
 146   position: fixed;
 147   bottom: $-m;
 148   right: $-l;
 149   padding: $-xs $-s;
 150   cursor: pointer;
 151   color: #FFF;
 152   width: $btt-size;
 153   height: $btt-size;
 154   border-radius: $btt-size;
 155   transition: all ease-in-out 180ms;
 156   opacity: 0;
 157   z-index: 999;
 158   overflow: hidden;
 159   &:hover {
 160     width: $btt-size*3.4;
 161     opacity: 1 !important;
 162     span {
 163       display: inline-block;
 164     }
 165   }
 166   .inner {
 167     width: $btt-size*3.4;
 168   }
 169   i {
 170     margin: 0;
 171     font-size: 28px;
 172     padding: 0 $-s 0 0;
 173   }
 174   span {
 175     line-height: 12px;
 176     position: relative;
 177     top: -5px;
 178   }
 179 }