BookStack Code Mirror - website/blob - resources/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 "header";
 10 @import "photoswipe";
 11
 12 .md-margin-top {
 13   margin-top: $-xxl*1.6;
 14   @include smaller-than($screen-lg) {
 15     margin-top: $-m;
 16   }
 17 }
 18
 19 .md-margin-bottom {
 20   margin-bottom: $-xxl*1.6;
 21   @include smaller-than($screen-lg) {
 22     margin-bottom: $-m;
 23   }
 24 }
 25
 26 .screenshot-container {
 27   perspective: 1000px;
 28   perspective-origin: 50% 50%;
 29 }
 30 .screenshot {
 31   border-radius: 4px;
 32   display: inline-block;
 33   overflow: hidden;
 34   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
 35   border: 1px solid #DDD;
 36   position: absolute;
 37   max-width: 100%;
 38   transform: rotateY(0);
 39   transition: all ease-in-out 280ms;
 40   &:hover {
 41     transform: rotateY(-10deg);
 42   }
 43   @include smaller-than($screen-lg) {
 44     position: relative;
 45     width: 80%;
 46     display: block;
 47     margin-bottom: $-l;
 48   }
 49 }
 50
 51 header .menu, footer .menu {
 52   text-align: right;
 53   a {
 54     display: inline-block;
 55     padding: $-m;
 56     line-height: 1.9;
 57   }
 58   span.icon {
 59     font-size: 18px;
 60     vertical-align: top;
 61     padding-right: 4px;
 62     display: inline-block;
 63     position: relative;
 64     top: 2px;
 65   }
 66 }
 67
 68 header .menu a {
 69   color: #FFF;
 70 }
 71
 72 header #menu-button {
 73   display: none;
 74   background-color: transparent;
 75   border: 0;
 76   box-shadow: none;
 77   padding-top: $-m;
 78 }
 79
 80 @include smaller-than($xl) {
 81   body header {
 82     padding-top: $-xxl*2.2;
 83   }
 84   header .row.fix-mobile {
 85     top: 0;
 86     position: fixed;
 87     background-color: $primary;
 88     width: 100%;
 89     z-index: 99;
 90     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 91   }
 92   header #menu-button {
 93     display: inline-block;
 94   }
 95   header .menu .inner {
 96     display: none;
 97     right: $-m;
 98     position: fixed;
 99     border-radius: 3px;
 100     width: 240px;
 101     background-color: #FFF;
 102     z-index: 55;
 103     padding: 0;
 104     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
 105     &.showing {
 106       display: block;
 107     }
 108     a {
 109       color: #444;
 110       display: block;
 111       text-align: left;
 112       border-bottom: 1px solid #EEE;
 113       padding: $-m $-m*2;
 114     }
 115     a .icon svg {
 116       fill: #444;
 117     }
 118     &:after {
 119       width: 16px;
 120       height: 16px;
 121       content: '';
 122       display: block;
 123       background-color: #FFF;
 124       transform: rotate(45deg);
 125       position: absolute;
 126       top: -6px;
 127       border-radius: 2px;
 128       right: 22px;
 129     }
 130   }
 131   footer .menu {
 132     display: none;
 133   }
 134 }
 135
 136 footer {
 137   padding-top: $-l;
 138   padding-bottom: $-l;
 139   p {
 140     padding: $-m;
 141     margin: 0;
 142   }
 143 }
 144
 145 footer, .shaded-border {
 146   border-top: 1px solid #DDD;
 147 }
 148
 149
 150 h3 > i {
 151   color: $primary;
 152   vertical-align: top;
 153   padding-top: 8px;
 154   padding-right: $-s;
 155 }
 156
 157 p > i {
 158   vertical-align: top;
 159 }
 160
 161 label {
 162   display: inline-block;
 163   margin-top: $-s;
 164   font-weight: 500;
 165 }
 166
 167 input[type=text] {
 168   font-family: $text;
 169   font-size: 14px;
 170   padding: $-xs*1.2 $-s;
 171   width: 230px;
 172   border-radius: 2px;
 173   border: 1px solid #DDD;
 174   color: #666;
 175 }
 176
 177 .demo-box {
 178   display: inline-block;
 179   background: #FFF;
 180   border: 1px solid #DDD;
 181   padding: $-xl;
 182   border-radius: 3px;
 183 }
 184
 185 .my-gallery {
 186   figure img {
 187     border: 1px solid #DDD;
 188     border-radius: 4px;
 189     box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
 190     transform: translate3d(0, 0, 0);
 191     transition: all cubic-bezier(.62, .28, .23, .99) 160ms;
 192     &:hover {
 193       transform: translate3d(0, -6px, 0);
 194       box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1);
 195     }
 196   }
 197 }
 198
 199 .docs-content {
 200   padding-bottom: $-xxl;
 201   .edit-link {
 202     padding: $-xl 0;
 203     z-index: 1;
 204     position: relative;
 205     .icon {
 206       width: 24px;
 207       vertical-align: 4px;
 208     }
 209     svg {
 210       height: 18px;
 211       width: 20px;
 212     }
 213   }
 214 }
 215
 216 .sidebar, .docs-index {
 217   margin-top: $-xl;
 218   h4 {
 219     padding-top: 0;
 220     font-size: 1.2em;
 221   }
 222   ul {
 223     list-style: none;
 224     margin-left: 0;
 225   }
 226 }
 227
 228 .sidebar {
 229   border-right: 2px dotted #E5E5E5;
 230 }
 231
 232 h2.thin-margin {
 233   margin-top: 0;
 234 }
 235
 236 #content {
 237   min-height: 70vh;
 238 }
 239