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 }
  92
  93 // Loading icon
  94 $loadingSize: 10px;
  95 .loading-container {
  96   position: relative;
  97   display: block;
  98   height: $loadingSize;
  99   margin: $-xl auto;
 100   > div {
 101     width: $loadingSize;
 102     height: $loadingSize;
 103     border-radius: $loadingSize;
 104     display: inline-block;
 105     vertical-align: top;
 106     transform: translate3d(0, 0, 0);
 107     animation-name: loadingBob;
 108     animation-duration: 1.4s;
 109     animation-iteration-count: infinite;
 110     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 111     margin-right: 4px;
 112     background-color: $color-page;
 113     animation-delay: 0.3s;
 114   }
 115   > div:first-child {
 116       left: -($loadingSize+$-xs);
 117       background-color: $color-book;
 118       animation-delay: 0s;
 119   }
 120   > div:last-child {
 121     left: $loadingSize+$-xs;
 122     background-color: $color-chapter;
 123     animation-delay: 0.6s;
 124   }
 125 }
 126
 127
 128 // Search results
 129 .search-results > h3 a {
 130   font-size: 0.66em;
 131   color: $primary;
 132   padding-left: $-m;
 133   i {
 134     padding-right: $-s;
 135   }
 136 }
 137
 138 // Back to top link
 139 $btt-size: 40px;
 140 #back-to-top {
 141   background-color: rgba($primary, 0.4);
 142   position: fixed;
 143   bottom: $-m;
 144   right: $-l;
 145   padding: $-xs $-s;
 146   cursor: pointer;
 147   color: #FFF;
 148   width: $btt-size;
 149   height: $btt-size;
 150   border-radius: $btt-size;
 151   transition: all ease-in-out 180ms;
 152   opacity: 0;
 153   z-index: 999;
 154   overflow: hidden;
 155   &:hover {
 156     width: $btt-size*3.4;
 157     background-color: rgba($primary, 1);
 158     span {
 159       display: inline-block;
 160     }
 161   }
 162   .inner {
 163     width: $btt-size*3.4;
 164   }
 165   i {
 166     margin: 0;
 167     font-size: 28px;
 168     padding: 0 $-s 0 0;
 169   }
 170   span {
 171     line-height: 12px;
 172     position: relative;
 173     top: -5px;
 174   }
 175 }