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

   1 /*
   2  * Header Styles
   3  */
   4
   5 h1 {
   6   font-size: 3.625em;
   7   line-height: 1.22222222em;
   8   margin-top: 0.48888889em;
   9   margin-bottom: 0.48888889em;
  10   //padding-bottom: 0.3333em;
  11   //border-bottom: 1px solid #EAEAEA;
  12   //margin-left: -$-xxl;
  13   //margin-right: -$-xxl;
  14 }
  15 h2 {
  16   font-size: 2.8275em;
  17   line-height: 1.294117647em;
  18   margin-top: 0.8627451em;
  19   margin-bottom: 0.43137255em;
  20 }
  21 h3 {
  22   font-size: 1.75em;
  23   line-height: 1.571428572em;
  24   margin-top: 0.78571429em;
  25   margin-bottom: 0.43137255em;
  26 }
  27 h4 {
  28   font-size: 1em;
  29   line-height: 1.375em;
  30   margin-top: 0.78571429em;
  31   margin-bottom: 0.43137255em;
  32 }
  33
  34 h1, h2, h3, h4 {
  35   font-weight: 500;
  36   position: relative;
  37   display: block;
  38   color: #555;
  39   .subheader {
  40     display: block;
  41     font-size: 0.5em;
  42     line-height: 1em;
  43     color: lighten($text-dark, 16%);
  44   }
  45 }
  46
  47 /*
  48  * Link styling
  49  */
  50 a {
  51   color: $primary;
  52   cursor: pointer;
  53   text-decoration: none;
  54   transition: color ease-in-out 80ms;
  55   &:hover {
  56     text-decoration: underline;
  57     color: darken($primary, 20%);
  58   }
  59   i {
  60     padding-right: $-s;
  61   }
  62   i.zmdi-hc-flip-horizontal {
  63     padding-right: 0;
  64     padding-left: $-s;
  65   }
  66 }
  67
  68 /*
  69  * Other HTML Text Elements
  70  */
  71 p, ul, ol, pre, table, blockquote {
  72   margin-top: 0.3em;
  73   margin-bottom: 1.375em;
  74 }
  75
  76 hr {
  77   border: 0;
  78   height: 1px;
  79   border: 0;
  80   background: #EAEAEA;
  81   margin-bottom: $-l;
  82   &.faded {
  83     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
  84   }
  85   &.margin-top, &.even {
  86     margin-top: $-l;
  87   }
  88 }
  89
  90 strong, b, .bold, .strong {
  91   font-weight: bold;
  92   > strong, > b, > .bold, > .strong {
  93     font-weight: bolder;
  94   }
  95 }
  96
  97 em, i, .italic {
  98   font-style: italic;
  99 }
 100
 101 small, p.small, span.small, .text-small {
 102   font-size: 0.8em;
 103   color: lighten($text-dark, 20%);
 104 }
 105
 106 sup, .superscript {
 107   vertical-align: super;
 108   font-size: 0.8em;
 109 }
 110
 111 pre {
 112   font-family: monospace;
 113   white-space:pre;
 114 }
 115
 116 blockquote {
 117   display: block;
 118   position: relative;
 119   border-left: 4px solid $primary;
 120   background-color: #F8F8F8;
 121   padding: $-s $-m $-s $-xl;
 122   &:before {
 123     content: "\201C";
 124     font-size: 2em;
 125     font-weight: bold;
 126     position: absolute;
 127     top: $-s;
 128     left: $-s;
 129     color: lighten($text-dark, 20%);
 130   }
 131 }
 132
 133 .code-base {
 134     background-color: #F8F8F8;
 135     font-family: monospace;
 136     font-size: 0.80em;
 137     border: 1px solid #DDD;
 138     border-radius: 3px;
 139 }
 140
 141 code {
 142   @extend .code-base;
 143   display: inline;
 144   padding: 1px 3px;
 145   white-space:pre;
 146   line-height: 1.2em;
 147   margin-bottom: 1.2em;
 148 }
 149
 150 span.code {
 151   @extend .code-base;
 152   padding: 1px $-xs;
 153 }
 154 /*
 155  * Text colors
 156  */
 157 p.pos, p .pos, span.pos, .text-pos {
 158   color: $positive;
 159   &:hover {
 160     color: $positive;
 161   }
 162 }
 163
 164 p.neg, p .neg, span.neg, .text-neg {
 165   color: $negative;
 166   &:hover {
 167     color: $negative;
 168   }
 169 }
 170
 171 p.muted, p .muted, span.muted, .text-muted {
 172         color: lighten($text-dark, 26%);
 173     &.small, .small {
 174       color: lighten($text-dark, 42%);
 175     }
 176 }
 177
 178 p.primary, p .primary, span.primary, .text-primary {
 179         color: $primary;
 180   &:hover {
 181     color: $primary;
 182   }
 183 }
 184
 185 p.secondary, p .secondary, span.secondary, .text-secondary {
 186         color: $secondary;
 187   &:hover {
 188     color: $secondary;
 189   }
 190 }
 191
 192 /*
 193  * Lists
 194  */
 195 ul {
 196   list-style: disc;
 197   margin-left: $-m;
 198 }
 199
 200 /*
 201  * Generic text styling classes
 202  */
 203 .underlined {
 204   text-decoration: underline;
 205 }
 206
 207 .text-center {
 208   text-align: center;
 209 }
 210
 211 .text-left {
 212   text-align: left;
 213 }
 214
 215 .text-right {
 216   text-align: right;
 217 }
 218
 219 /**
 220  * Grouping
 221  */
 222 .header-group {
 223   margin: $-m 0;
 224   h1, h2, h3, h4, h5, h6 {
 225     margin: 0;
 226   }
 227 }
 228
 229 .list > * {
 230   display: block;
 231 }
 232
 233 /**
 234   * Icons
 235   */
 236 i {
 237   padding-right: $-xs;
 238 }