cactu 0.18.1 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c2a585e2363f60570bbb6e449789afe557e82102ff9964c06dacc56c99261f24
4
- data.tar.gz: fbcc4ed37666436ba4769aa615a12e8627cdb0278b0c127f06dae6b04a51db9e
3
+ metadata.gz: 6bfacaa91debe34ff5eff279d850f34ea53ff5b88180b6a368e386514e8cf4a4
4
+ data.tar.gz: 3995002eb8779ddc00be649fad921905a4599a468bff096dd73d4940b448a719
5
5
  SHA512:
6
- metadata.gz: fef40e5f4919f77800f6b6d744b0f1cad0f5b5595c24a4d5fa7810f60ed408cd8090d7c4b3d8523c1364fc0e09b06e1665c8573e690d46014d3ff5bf24e3d22b
7
- data.tar.gz: 024fca53b50f02685d7a98e5bc70a3b5ef916ea6c6827be9488b239f881cd2bd90da55112171f1901431de155bf34afa5e214b8d6074bcd710ee94cf3690f515
6
+ metadata.gz: 3d539bd3bb7eae4a5ab71f81783d468d954615c72e32c7341e1ffaf5fba36a964ef63bb44ba7ab530a49d7fb28cf7c7f9cd16b8b47d2531be05bb53f755640e9
7
+ data.tar.gz: b6384e9bdfbb280ef59775836db75fd91dc4d48a19aa774183a0e0cad5a8bb652d4c84c73b21349578721f59b09914d41fc480e6d11835f30e44f4740fb39870
data/README.md CHANGED
@@ -11,7 +11,7 @@ Cactu is a Sass framework to create webs easily, created to be simple, semantic,
11
11
  Add this line to your application's Gemfile:
12
12
 
13
13
  ```ruby
14
- gem 'cactu', '~> 0.18.1'
14
+ gem 'cactu', '~> 0.19.0'
15
15
  ```
16
16
 
17
17
  Ensure that `sprockets-rails` is at least v2.3.2.
@@ -59,4 +59,4 @@ $speed: .15s !default;
59
59
  $line-height: 1.5 !default;
60
60
  $transition-all: all $speed ease-in-out !default;
61
61
  $outline-width: .125rem !default;
62
- $zindex-top: 1000 !default;
62
+ $zindex-top: 1000 !default;
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Cactu v0.18.1 (http://cactu.site/)
2
+ * Cactu v0.19.0 (http://cactu.site/)
3
3
  * Copyright 2018 Giovanni Mendoza
4
4
  * Licensed under MIT (https://github.com/mendozagioo/cactu/blob/master/LICENSE)
5
5
  */
@@ -9,9 +9,11 @@
9
9
  @import "base/blocks";
10
10
 
11
11
  @import "functions/colors";
12
+ @import "functions/converters";
12
13
  @import "functions/strings";
13
14
 
14
15
  @import "mixins/alerts";
16
+ @import "mixins/badge";
15
17
  @import "mixins/breakpoints";
16
18
  @import "mixins/buttons";
17
19
  @import "mixins/forms";
@@ -22,6 +24,7 @@
22
24
  @import "mixins/positions";
23
25
  @import "mixins/transition";
24
26
 
27
+ @import "elements/badge";
25
28
  @import "elements/button";
26
29
  @import "elements/code";
27
30
  @import "elements/icon";
@@ -43,4 +46,4 @@
43
46
  @import "components/tooltips";
44
47
 
45
48
  @import "utilities/classes";
46
- @import "utilities/syntax";
49
+ @import "utilities/syntax";
@@ -41,8 +41,12 @@ $alert-color: theme-color-level($alert-color-base, $alert-color-l
41
41
  box-shadow: none !important;
42
42
  background-color: transparent;
43
43
 
44
- @include hover-focus {
44
+ @include hover-focus-active {
45
45
  color: darken($alert-background, 80%);
46
+ // Used !important be cause the base style is set with:
47
+ // &:not(:disabled):not(.disabled):active,
48
+ // &:not(:disabled):not(.disabled).active
49
+ background-color: transparent !important;
46
50
  }
47
51
  }
48
52
  }
@@ -18,6 +18,8 @@ $button-background-selected: darken($gray-200, 10%) !default;
18
18
  .button {
19
19
  z-index: 2;
20
20
 
21
+ &:not(:last-child) { margin-right: 0; }
22
+
21
23
  &:focus,
22
24
  &:active,
23
25
  &.active {
@@ -27,11 +29,6 @@ $button-background-selected: darken($gray-200, 10%) !default;
27
29
  &.selected {
28
30
  background-color: $button-background-selected;
29
31
  }
30
-
31
- & ~ button,
32
- & ~ .button {
33
- margin-left: 0;
34
- }
35
32
  }
36
33
  }
37
34
 
@@ -79,4 +76,4 @@ $button-background-selected: darken($gray-200, 10%) !default;
79
76
  border-radius: $vertical-button-last-radius;
80
77
  }
81
78
  }
82
- }
79
+ }
@@ -18,12 +18,15 @@ $disabled-color: darken($gray-500, 15%) !default;
18
18
  $help-font-size: .75rem !default;
19
19
  $help-margin-top: .25rem !default;
20
20
  $select-height: calc(2.25rem + 2px) !default;
21
+ $custom-select-padding: .375rem 1.75rem .375rem .75rem !default;
21
22
  $custom-select-padding-x: .75rem !default;
22
23
  $custom-select-indicator-padding: 1rem !default;
23
24
  $custom-select-indicator-color: $gray-800 !default;
24
25
  $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
26
+ $custom-select-multiple: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cg fill='#{$custom-select-indicator-color}' %3E%3Ccircle cx='4' cy='2.2' r='2' /%3E%3Ccircle cx='4' cy='7.8' r='2' /%3E%3C/g%3E%3C/svg%3E"), "#", "%23") !default;
25
27
  $custom-select-background-size: 8px 10px !default; // In pixels because image dimensions
26
28
  $select-background: $input-background $custom-select-indicator no-repeat right $custom-select-padding-x center !default;
29
+ $select-multiple-background: $input-background $custom-select-multiple no-repeat right $custom-select-padding-x center !default;
27
30
  $valid-color: $green !default;
28
31
  $invalid-color: $red !default;
29
32
 
@@ -36,6 +39,7 @@ textarea {
36
39
  border: $input-border;
37
40
  border-radius: $input-radius;
38
41
  box-shadow: $input-box-shadow;
42
+ appearance: none;
39
43
  background-color: $input-background;
40
44
 
41
45
  @include transition($input-transition);
@@ -75,11 +79,12 @@ input[type="range"] {
75
79
 
76
80
  select:not([size]):not([multiple]) {
77
81
  height: $select-height;
78
- padding: .375rem 1.75rem .375rem .75rem;
82
+ padding: $custom-select-padding;
79
83
  background: $select-background;
80
84
  background-size: $custom-select-background-size;
81
- appearance: none;
85
+ }
82
86
 
87
+ select:not([size]) {
83
88
  &:disabled { background-color: $input-disabled-background; }
84
89
 
85
90
  &::-ms-value {
@@ -89,6 +94,16 @@ select:not([size]):not([multiple]) {
89
94
  }
90
95
  }
91
96
 
97
+ // Select multiple, only on mobiles
98
+ // Including large mobile sizes
99
+ @include breakpoint-mobile-max ($medium-desktop-size - 1) {
100
+ select[multiple] {
101
+ padding: $custom-select-padding;
102
+ background: $select-multiple-background;
103
+ background-size: $custom-select-background-size;
104
+ }
105
+ }
106
+
92
107
  select {
93
108
  // Remove the outline focus on Firefox
94
109
  &:-moz-focusring {
@@ -114,9 +129,7 @@ select {
114
129
  [type="checkbox"],
115
130
  [type="radio"] {
116
131
  display: inline;
117
- width: .8125rem;
118
- height: 1rem;
119
- margin-right: .125rem;
132
+ width: auto;
120
133
  }
121
134
 
122
135
  .help,
@@ -126,9 +139,20 @@ select {
126
139
  margin-top: $help-margin-top;
127
140
  }
128
141
 
129
- .checkbox:not(:last-child),
130
- .radio:not(:last-child) {
131
- margin-right: 1rem;
142
+ .checkbox,
143
+ .checkbox-expanded,
144
+ .radio,
145
+ .radio-expanded {
146
+ position: relative;
147
+ padding-left: 1.25rem;
148
+
149
+ &:not(:last-child) { margin-right: 1rem; }
150
+
151
+ input {
152
+ position: absolute;
153
+ left: 0;
154
+ top: .25rem;
155
+ }
132
156
  }
133
157
  }
134
158
 
@@ -155,4 +179,4 @@ select {
155
179
  padding: 0;
156
180
  }
157
181
  }
158
- }
182
+ }
@@ -30,7 +30,6 @@ $pagination-item-active-background: darken($pagination-item-background-hover
30
30
  > *,
31
31
  > a {
32
32
  display: flex;
33
- @include transition($pagination-item-transition);
34
33
 
35
34
  &:not(:first-child) {
36
35
  margin-left: -$pagination-item-border-width;
@@ -56,6 +55,7 @@ $pagination-item-active-background: darken($pagination-item-background-hover
56
55
  a {
57
56
  padding: $pagination-item-padding;
58
57
  border: $pagination-item-border;
58
+ @include transition($pagination-item-transition);
59
59
 
60
60
  @include hover-focus {
61
61
  text-decoration: none;
@@ -46,4 +46,4 @@ th {
46
46
  th, td {
47
47
  border: 0;
48
48
  }
49
- }
49
+ }
@@ -0,0 +1,40 @@
1
+ //
2
+ // Badge element
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Variables
7
+ //
8
+ $badge-color: $text-color !default;
9
+ $badge-font-size: 80% !default;
10
+ $badge-padding: .125rem .375rem;
11
+ $badge-border-radius: $radius !default;
12
+ $badge-pill-border-radius: $radius-rounded !default;
13
+ $badge-background: $gray-400 !default;
14
+ $badge-link-color-hover: $badge-color !default;
15
+
16
+
17
+ .badge,
18
+ .badge-pill {
19
+ display: inline-block;
20
+ font-size: $badge-font-size;
21
+ text-align: center;
22
+ padding: $badge-padding;
23
+ border-radius: $badge-border-radius;
24
+ line-height: 1.3;
25
+ @include badge-theme($badge-background);
26
+
27
+ &[href] {
28
+ @include hover-focus {
29
+ text-decoration: none;
30
+ }
31
+ }
32
+
33
+ &:empty {
34
+ display: none;
35
+ }
36
+ }
37
+
38
+ .badge-pill {
39
+ border-radius: $badge-pill-border-radius;
40
+ }
@@ -45,6 +45,8 @@ button,
45
45
  @include button-size($button-padding-y, $button-padding-x, $button-font-size, $button-line-height, $button-border-radius);
46
46
  @include transition($button-transition);
47
47
 
48
+ &:not(:last-child) { margin-right: .5rem; }
49
+
48
50
  // Share hover and focus styles
49
51
  &:hover {
50
52
  color: $button-color;
@@ -86,9 +88,4 @@ button,
86
88
  box-shadow: $button-focus-box-shadow, $button-active-box-shadow;
87
89
  }
88
90
  }
89
-
90
- & ~ button,
91
- & ~ .button {
92
- margin-left: .5rem;
93
- }
94
91
  }
@@ -0,0 +1,13 @@
1
+ //
2
+ // Converters functions
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Converter pixels to rems
7
+ @function px-rem($px: 1px, $rem: $font-size) {
8
+ @if $px > 0 {
9
+ @return ($px / $rem) + rem;
10
+ } @else {
11
+ @return $px;
12
+ }
13
+ }
@@ -0,0 +1,16 @@
1
+ //
2
+ // Badge theme mixin
3
+ // --------------------------------------------------
4
+
5
+
6
+ @mixin badge-theme($background: $gray-400) {
7
+ color: color-yiq($background);
8
+ background-color: $background;
9
+
10
+ &[href] {
11
+ @include hover-focus {
12
+ color: color-yiq($background);
13
+ background-color: darken($background, 10%);
14
+ }
15
+ }
16
+ }
@@ -39,6 +39,45 @@
39
39
  }
40
40
  }
41
41
 
42
+ // Media of at least the minimum breakpoint width
43
+ // Special sizes only apply for mobiles screens
44
+ // Valid only if $min-size > 0
45
+ @mixin breakpoint-mobile-min($min-size: 0) {
46
+ @if $max-size > 0 {
47
+ @media only screen and (min-device-width: $min-size) {
48
+ @content;
49
+ }
50
+ } @else {
51
+ @content;
52
+ }
53
+ }
54
+
55
+ // Media of at most the maximum breakpoint width.
56
+ // Special sizes only apply for mobiles screens
57
+ // Valid only if $max-size > 0
58
+ @mixin breakpoint-mobile-max($max-size: 0) {
59
+ @if $max-size > 0 {
60
+ @media only screen and (max-device-width: $max-size) {
61
+ @content;
62
+ }
63
+ } @else {
64
+ @content;
65
+ }
66
+ }
67
+
68
+ // Media that spans multiple breakpoint widths.
69
+ // Special sizes only apply for mobiles screens
70
+ // Valid only with 2 values and just if $max-size > $min-size
71
+ @mixin breakpoint-mobile-between($min-size: 0, $max-size: 0) {
72
+ @if $min-size < $max-size and $max-size > $min-size {
73
+ @media only screen and (min-device-width: $min-size) and (max-device-width: $max-size) {
74
+ @content;
75
+ }
76
+ } @else {
77
+ @content;
78
+ }
79
+ }
80
+
42
81
  // Specific media queriues for this framework.
43
82
  // If you need a different breakpoints, use:
44
83
  // breakpoint-min, breakpoint-max or breakpoint-between
@@ -4,10 +4,10 @@
4
4
 
5
5
 
6
6
  @mixin navbar-theme($base-color: null, $theme: 'light') {
7
- $text: if($theme == 'light', rgba(0,0,0,.5), rgba(255,255,255,.5));
8
- $text-hover: if($theme == 'light', rgba(0,0,0,.7), rgba(255,255,255,.7));
9
- $text-active: if($theme == 'light', $black, $white);
10
- $text-disabled: if($theme == 'light', rgba(0,0,0,.3), rgba(255,255,255,.3));
7
+ $text: if($theme == 'light', rgba(0,0,0,.5), rgba(255,255,255,.5));
8
+ $text-hover: if($theme == 'light', rgba(0,0,0,.7), rgba(255,255,255,.7));
9
+ $text-active: if($theme == 'light', $black, $white);
10
+ $text-disabled: if($theme == 'light', rgba(0,0,0,.3), rgba(255,255,255,.3));
11
11
 
12
12
  @if $base-color == null {
13
13
  // Set default colors
@@ -35,6 +35,8 @@
35
35
 
36
36
  // Set selected
37
37
  } @else {
38
+ $toggler-outline: 0 0 0 $outline-width darken($base-color, 15%);
39
+
38
40
  border-bottom: $border-width solid theme-color-level($base-color, 1);
39
41
  background: $base-color;
40
42
 
@@ -51,6 +53,12 @@
51
53
 
52
54
  .navbar-brand { color: $text-active; }
53
55
 
56
+ .navbar-toggler {
57
+ background-color: transparent;
58
+
59
+ &:focus { box-shadow: $toggler-outline; }
60
+ }
61
+
54
62
  .disabled {
55
63
  color: $text-disabled;
56
64
  &:hover,
data/lib/cactu/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Cactu
2
- VERSION = "0.18.1"
2
+ VERSION = "0.19.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: cactu
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.18.1
4
+ version: 0.19.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Giovanni Mendoza
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-09-07 00:00:00.000000000 Z
11
+ date: 2018-09-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sassc
@@ -127,17 +127,13 @@ files:
127
127
  - README.md
128
128
  - Rakefile
129
129
  - assets/stylesheets/base/_blocks.scss
130
- - assets/stylesheets/base/_examples.scss
131
130
  - assets/stylesheets/base/_global-variables.scss
132
131
  - assets/stylesheets/base/_reboot.scss
133
- - assets/stylesheets/base/_reset.scss
134
132
  - assets/stylesheets/cactu.scss
135
133
  - assets/stylesheets/components/_alerts.scss
136
- - assets/stylesheets/components/_blockquotes.scss
137
134
  - assets/stylesheets/components/_buttons.scss
138
135
  - assets/stylesheets/components/_collapse.scss
139
136
  - assets/stylesheets/components/_dropdowns.scss
140
- - assets/stylesheets/components/_figures.scss
141
137
  - assets/stylesheets/components/_forms.scss
142
138
  - assets/stylesheets/components/_grids.scss
143
139
  - assets/stylesheets/components/_lists.scss
@@ -145,19 +141,19 @@ files:
145
141
  - assets/stylesheets/components/_navbars.scss
146
142
  - assets/stylesheets/components/_navs.scss
147
143
  - assets/stylesheets/components/_paginations.scss
148
- - assets/stylesheets/components/_sidebars.scss
149
144
  - assets/stylesheets/components/_tables.scss
150
145
  - assets/stylesheets/components/_tooltips.scss
146
+ - assets/stylesheets/elements/_badge.scss
151
147
  - assets/stylesheets/elements/_button.scss
152
148
  - assets/stylesheets/elements/_code.scss
153
149
  - assets/stylesheets/elements/_icon.scss
154
150
  - assets/stylesheets/elements/_image.scss
155
- - assets/stylesheets/elements/_link.scss
156
- - assets/stylesheets/elements/_type.scss
157
151
  - assets/stylesheets/elements/_typography.scss
158
152
  - assets/stylesheets/functions/_colors.scss
153
+ - assets/stylesheets/functions/_converters.scss
159
154
  - assets/stylesheets/functions/_strings.scss
160
155
  - assets/stylesheets/mixins/_alerts.scss
156
+ - assets/stylesheets/mixins/_badge.scss
161
157
  - assets/stylesheets/mixins/_breakpoints.scss
162
158
  - assets/stylesheets/mixins/_buttons.scss
163
159
  - assets/stylesheets/mixins/_forms.scss
@@ -1,12 +0,0 @@
1
- //
2
- // ----------------------------------------------------------------
3
- // Examples
4
- // ----------------------------------------------------------------
5
-
6
- .empty-column {
7
- width: 100%;
8
- padding: 1rem .5rem;
9
- margin-bottom: .7rem;
10
- font-size: 13px;
11
- background-color: $gray-200;
12
- }
@@ -1,61 +0,0 @@
1
- //
2
- // Grid mixins
3
- // --------------------------------------------------
4
- //
5
- // Based on:
6
- // http://meyerweb.com/eric/tools/css/reset/
7
- // v2.0 | 20110126
8
- // License: none (public domain)
9
- //
10
- // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
11
- // 2. Addition div tag for display: block
12
-
13
-
14
- *,
15
- *::before,
16
- *::after {
17
- box-sizing: border-box;
18
- }
19
-
20
- html, body, div, span, applet, object, iframe,
21
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
22
- a, abbr, acronym, address, big, cite, code,
23
- del, dfn, em, img, ins, kbd, q, s, samp,
24
- small, strike, strong, sub, sup, tt, var,
25
- b, u, i, center,ƒ
26
- dl, dt, dd, ol, ul, li,
27
- fieldset, form, label, legend,
28
- table, caption, tbody, tfoot, thead, tr, th, td,
29
- article, aside, canvas, details, embed,
30
- figure, figcaption, footer, header, hgroup,
31
- menu, nav, output, ruby, section, summary,
32
- time, mark, audio, video {
33
- margin: 0;
34
- padding: 0;
35
- border: 0;
36
- font-size: 100%;
37
- font: inherit;
38
- vertical-align: baseline;
39
- }
40
- div, article, aside, details, figcaption, figure,
41
- footer, header, hgroup, menu, nav, section {
42
- display: block;
43
- }
44
- body {
45
- line-height: 1;
46
- }
47
- ol, ul {
48
- list-style: none;
49
- }
50
- blockquote, q {
51
- quotes: none;
52
- }
53
- blockquote:before, blockquote:after,
54
- q:before, q:after {
55
- content: '';
56
- content: none;
57
- }
58
- table {
59
- border-collapse: collapse;
60
- border-spacing: 0;
61
- }
@@ -1,3 +0,0 @@
1
- //
2
- // Blockquotes
3
- // --------------------------------------------------
@@ -1,3 +0,0 @@
1
- //
2
- // Figures
3
- // --------------------------------------------------
@@ -1,15 +0,0 @@
1
- //
2
- // Sidebars
3
- // --------------------------------------------------
4
-
5
-
6
- .sidebar {
7
- height: calc(100vh - 3.5rem);
8
- position: sticky;
9
- border-right: 1px solid $border-color;
10
-
11
- @include breakpoint-cellphone {
12
- height: auto;
13
- border-right: 0;
14
- }
15
- }
@@ -1,41 +0,0 @@
1
- //
2
- // Link
3
- // --------------------------------------------------
4
-
5
-
6
- // Variables
7
- //
8
- $link-color: $blue !default;
9
- $link-decoration: none !default;
10
- $link-hover-color: darken($link-color, 10%) !default;
11
- $link-hover-decoration: underline !default;
12
- $link-transition: $transition-all !default;
13
-
14
-
15
- a {
16
- display: inline-block;
17
- color: $link-color;
18
- text-decoration: $link-decoration;
19
- background-color: transparent;
20
- @include transition($link-transition);
21
- -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
22
-
23
- @include hover-focus {
24
- color: $link-hover-color;
25
- text-decoration: $link-hover-decoration;
26
- }
27
- }
28
-
29
- a:not([href]):not([tabindex]) {
30
- color: inherit;
31
- text-decoration: none;
32
-
33
- @include hover-focus {
34
- color: inherit;
35
- text-decoration: none;
36
- }
37
-
38
- &:focus {
39
- outline: 0;
40
- }
41
- }
@@ -1,80 +0,0 @@
1
- //
2
- // Type
3
- // --------------------------------------------------
4
-
5
-
6
- // Variables
7
- //
8
- $headings-font-family: $font-family !default;
9
- $headings-font-weight: $font-weight-bold !default;
10
- $headings-color: $text-color !default;
11
- $headings-margins: 1rem 0 .5rem !default;
12
- $h1-font-size: $font-size * 2.6 !default;
13
- $h2-font-size: $font-size * 2.1 !default;
14
- $h3-font-size: $font-size * 1.8 !default;
15
- $h4-font-size: $font-size * 1.5 !default;
16
- $h5-font-size: $font-size * 1.2 !default;
17
- $h6-font-size: $font-size !default;
18
-
19
-
20
- abbr[title],
21
- abbr[data-original-title] {
22
- text-decoration: underline;
23
- text-decoration: underline dotted;
24
- cursor: help;
25
- border-bottom: 0;
26
- }
27
-
28
- address {
29
- margin-bottom: 1rem;
30
- font-style: normal;
31
- line-height: inherit;
32
- }
33
-
34
- blockquote {
35
- margin: 0 0 1rem;
36
- }
37
-
38
- b,
39
- strong {
40
- font-weight: bolder;
41
- }
42
-
43
- small {
44
- font-size: .8em; // 80%
45
- }
46
-
47
- span {
48
- font-style: inherit;
49
- font-weight: inherit;
50
- }
51
-
52
- sub,
53
- sup {
54
- position: relative;
55
- font-size: .75em; // 75%
56
- line-height: 0;
57
- vertical-align: baseline;
58
- }
59
-
60
- sub { bottom: -.25em; }
61
- sup { top: -.5em; }
62
-
63
- p { margin-bottom: .7rem; }
64
-
65
-
66
- // Headings
67
- //
68
- h1, h2, h3, h4, h5, h6 {
69
- margin: $headings-margins;
70
- font-family: $headings-font-family;
71
- font-weight: $headings-font-weight;
72
- color: $headings-color;
73
- }
74
-
75
- h1 { font-size: $h1-font-size; }
76
- h2 { font-size: $h2-font-size; }
77
- h3 { font-size: $h3-font-size; }
78
- h4 { font-size: $h4-font-size; }
79
- h5 { font-size: $h5-font-size; }
80
- h6 { font-size: $h6-font-size; }