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 }
  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 {
  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 }
 111
 112 blockquote {
 113   display: block;
 114   position: relative;
 115   border-left: 4px solid $primary;
 116   background-color: #F8F8F8;
 117   padding: $-s $-m $-s $-xl;
 118   &:before {
 119     content: "\201C";
 120     font-size: 2em;
 121     font-weight: bold;
 122     position: absolute;
 123     top: $-s;
 124     left: $-s;
 125     color: lighten($text-dark, 20%);
 126   }
 127 }
 128
 129 .code-base {
 130     background-color: #F8F8F8;
 131     font-family: monospace;
 132     font-size: 0.88em;
 133     border: 1px solid #DDD;
 134     border-radius: 3px;
 135 }
 136
 137 code {
 138   @extend .code-base;
 139   display: block;
 140   white-space:pre;
 141   line-height: 1.2em;
 142   margin-bottom: 1.2em;
 143 }
 144
 145 span.code {
 146   @extend .code-base;
 147   padding: 1px $-xs;
 148 }
 149 /*
 150  * Text colors
 151  */
 152 p.pos, p .pos, span.pos, .text-pos {
 153   color: $positive;
 154   &:hover {
 155     color: $positive;
 156   }
 157 }
 158
 159 p.neg, p .neg, span.neg, .text-neg {
 160   color: $negative;
 161   &:hover {
 162     color: $negative;
 163   }
 164 }
 165
 166 p.muted, p .muted, span.muted, .text-muted {
 167         color: lighten($text-dark, 26%);
 168 }
 169
 170 p.primary, p .primary, span.primary, .text-primary {
 171         color: $primary;
 172   &:hover {
 173     color: $primary;
 174   }
 175 }
 176
 177 p.secondary, p .secondary, span.secondary, .text-secondary {
 178         color: $secondary;
 179   &:hover {
 180     color: $secondary;
 181   }
 182 }
 183
 184 /*
 185  * Lists
 186  */
 187 ul {
 188   list-style: disc;
 189   margin-left: $-m;
 190 }
 191
 192 /*
 193  * Generic text styling classes
 194  */
 195 .underlined {
 196   text-decoration: underline;
 197 }
 198
 199 .text-center {
 200   text-align: center;
 201 }
 202
 203 .text-left {
 204   text-align: left;
 205 }
 206
 207 .text-right {
 208   text-align: right;
 209 }
 210
 211 /**
 212  * Grouping
 213  */
 214 .header-group {
 215   margin: $-m 0;
 216   h1, h2, h3, h4, h5, h6 {
 217     margin: 0;
 218   }
 219 }
 220
 221 .list > * {
 222   display: block;
 223 }