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