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

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