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