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.24444444em;
  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: 500;
  32   .subheader {
  33     display: block;
  34     font-size: 0.5em;
  35     line-height: 1em;
  36     color: lighten($text-dark, 16%);
  37   }
  38 }
  39
  40 /*
  41  * Link styling
  42  */
  43 a {
  44   color: $primary;
  45   cursor: pointer;
  46   text-decoration: none;
  47   transition: color ease-in-out 80ms;
  48   &:hover {
  49     text-decoration: underline;
  50     color: darken($primary, 20%);
  51   }
  52   i {
  53     padding-right: $-s;
  54   }
  55 }
  56
  57 /*
  58  * Other HTML Text Elements
  59  */
  60 p, ul, ol, pre, table, blockquote {
  61   margin-top: 0.3em;
  62   margin-bottom: 1.375em;
  63 }
  64
  65 hr {
  66   border: 0;
  67   height: 1px;
  68   border: 0;
  69   background: #e3e0e0;
  70   margin-bottom: $-l;
  71   &.faded {
  72     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
  73   }
  74   &.margin-top {
  75     margin-top: $-l;
  76   }
  77 }
  78
  79 strong, b, .bold, .strong {
  80   font-weight: bold;
  81   > strong, > b, > .bold, > .strong {
  82     font-weight: bolder;
  83   }
  84 }
  85
  86 em, i, .italic {
  87   font-style: italic;
  88 }
  89
  90 small, p.small, span.small, .text-small {
  91   font-size: 0.8em;
  92   color: lighten($text-dark, 20%);
  93 }
  94
  95 sup, .superscript {
  96   vertical-align: super;
  97   font-size: 0.8em;
  98 }
  99
 100 pre {
 101   font-family: monospace;
 102   white-space:pre;
 103 }
 104
 105 blockquote {
 106   display: block;
 107   position: relative;
 108   border-left: 4px solid $primary;
 109   background-color: #F8F8F8;
 110   padding: $-s $-m $-s $-xl;
 111   &:before {
 112     content: "\201C";
 113     font-size: 2em;
 114     font-weight: bold;
 115     position: absolute;
 116     top: $-s;
 117     left: $-s;
 118     color: lighten($text-dark, 20%);
 119   }
 120 }
 121
 122 .code-base {
 123     background-color: #F8F8F8;
 124     font-family: monospace;
 125     font-size: 0.88em;
 126     border: 1px solid #DDD;
 127     border-radius: 3px;
 128 }
 129
 130 code {
 131   @extend .code-base;
 132   display: block;
 133   white-space:pre;
 134   line-height: 1.2em;
 135   margin-bottom: 1.2em;
 136 }
 137
 138 span.code {
 139   @extend .code-base;
 140   padding: 1px $-xs;
 141 }
 142 /*
 143  * Text colors
 144  */
 145 p.pos, p .pos, span.pos, .text-pos {
 146         color: $positive;
 147 }
 148
 149 p.neg, p .neg, span.neg, .text-neg {
 150         color: $negative;
 151 }
 152
 153 p.muted, p .muted, span.muted, .text-muted {
 154         color: lighten($text-dark, 26%);
 155 }
 156
 157 p.primary, p .primary, span.primary, .text-primary {
 158         color: $primary;
 159 }
 160
 161 p.secondary, p .secondary, span.secondary, .text-secondary {
 162         color: $secondary;
 163 }
 164
 165 /*
 166  * Generic text styling classes
 167  */
 168 .underlined {
 169   text-decoration: underline;
 170 }
 171
 172 .text-center {
 173   text-align: center;
 174 }
 175
 176 .text-left {
 177   text-align: left;
 178 }
 179
 180 .text-right {
 181   text-align: right;
 182 }
 183
 184 /**
 185  * Grouping
 186  */
 187 .header-group {
 188   margin: $-m 0;
 189   h1, h2, h3, h4, h5, h6 {
 190     margin: 0;
 191   }
 192 }