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 {
  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.88em;
 137     border: 1px solid #DDD;
 138     border-radius: 3px;
 139 }
 140
 141 code {
 142   @extend .code-base;
 143   display: block;
 144   white-space:pre;
 145   line-height: 1.2em;
 146   margin-bottom: 1.2em;
 147 }
 148
 149 span.code {
 150   @extend .code-base;
 151   padding: 1px $-xs;
 152 }
 153 /*
 154  * Text colors
 155  */
 156 p.pos, p .pos, span.pos, .text-pos {
 157   color: $positive;
 158   &:hover {
 159     color: $positive;
 160   }
 161 }
 162
 163 p.neg, p .neg, span.neg, .text-neg {
 164   color: $negative;
 165   &:hover {
 166     color: $negative;
 167   }
 168 }
 169
 170 p.muted, p .muted, span.muted, .text-muted {
 171         color: lighten($text-dark, 26%);
 172 }
 173
 174 p.primary, p .primary, span.primary, .text-primary {
 175         color: $primary;
 176   &:hover {
 177     color: $primary;
 178   }
 179 }
 180
 181 p.secondary, p .secondary, span.secondary, .text-secondary {
 182         color: $secondary;
 183   &:hover {
 184     color: $secondary;
 185   }
 186 }
 187
 188 /*
 189  * Lists
 190  */
 191 ul {
 192   list-style: disc;
 193   margin-left: $-m;
 194 }
 195
 196 /*
 197  * Generic text styling classes
 198  */
 199 .underlined {
 200   text-decoration: underline;
 201 }
 202
 203 .text-center {
 204   text-align: center;
 205 }
 206
 207 .text-left {
 208   text-align: left;
 209 }
 210
 211 .text-right {
 212   text-align: right;
 213 }
 214
 215 /**
 216  * Grouping
 217  */
 218 .header-group {
 219   margin: $-m 0;
 220   h1, h2, h3, h4, h5, h6 {
 221     margin: 0;
 222   }
 223 }
 224
 225 .list > * {
 226   display: block;
 227 }