dream-theme 0.1.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 +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +48 -0
- data/_includes/head.html +17 -0
- data/_includes/navigation.html +17 -0
- data/_layouts/home.html +29 -0
- data/_layouts/page.html +5 -0
- data/_layouts/post.html +16 -0
- data/_sass/base/_base.scss +14 -0
- data/_sass/base/_buttons.scss +43 -0
- data/_sass/base/_forms.scss +95 -0
- data/_sass/base/_layout.scss +18 -0
- data/_sass/base/_lists.scss +19 -0
- data/_sass/base/_media.scss +9 -0
- data/_sass/base/_tables.scss +29 -0
- data/_sass/base/_typography.scss +45 -0
- data/_sass/base/_variables.scss +41 -0
- data/_sass/bourbon/_bourbon.scss +54 -0
- data/_sass/bourbon/bourbon/helpers/_buttons-list.scss +14 -0
- data/_sass/bourbon/bourbon/helpers/_scales.scss +27 -0
- data/_sass/bourbon/bourbon/helpers/_text-inputs-list.scss +26 -0
- data/_sass/bourbon/bourbon/library/_border-color.scss +26 -0
- data/_sass/bourbon/bourbon/library/_border-radius.scss +85 -0
- data/_sass/bourbon/bourbon/library/_border-style.scss +25 -0
- data/_sass/bourbon/bourbon/library/_border-width.scss +25 -0
- data/_sass/bourbon/bourbon/library/_buttons.scss +84 -0
- data/_sass/bourbon/bourbon/library/_clearfix.scss +25 -0
- data/_sass/bourbon/bourbon/library/_contrast-switch.scss +81 -0
- data/_sass/bourbon/bourbon/library/_ellipsis.scss +36 -0
- data/_sass/bourbon/bourbon/library/_font-face.scss +65 -0
- data/_sass/bourbon/bourbon/library/_font-stacks.scss +249 -0
- data/_sass/bourbon/bourbon/library/_hide-text.scss +24 -0
- data/_sass/bourbon/bourbon/library/_hide-visually.scss +70 -0
- data/_sass/bourbon/bourbon/library/_margin.scss +37 -0
- data/_sass/bourbon/bourbon/library/_modular-scale.scss +120 -0
- data/_sass/bourbon/bourbon/library/_overflow-wrap.scss +24 -0
- data/_sass/bourbon/bourbon/library/_padding.scss +36 -0
- data/_sass/bourbon/bourbon/library/_position.scss +62 -0
- data/_sass/bourbon/bourbon/library/_prefixer.scss +37 -0
- data/_sass/bourbon/bourbon/library/_shade.scss +32 -0
- data/_sass/bourbon/bourbon/library/_size.scss +50 -0
- data/_sass/bourbon/bourbon/library/_strip-unit.scss +17 -0
- data/_sass/bourbon/bourbon/library/_text-inputs.scss +163 -0
- data/_sass/bourbon/bourbon/library/_timing-functions.scss +38 -0
- data/_sass/bourbon/bourbon/library/_tint.scss +32 -0
- data/_sass/bourbon/bourbon/library/_triangle.scss +82 -0
- data/_sass/bourbon/bourbon/library/_value-prefixer.scss +37 -0
- data/_sass/bourbon/bourbon/settings/_settings.scss +75 -0
- data/_sass/bourbon/bourbon/utilities/_assign-inputs.scss +28 -0
- data/_sass/bourbon/bourbon/utilities/_compact-shorthand.scss +39 -0
- data/_sass/bourbon/bourbon/utilities/_contrast-ratio.scss +31 -0
- data/_sass/bourbon/bourbon/utilities/_directional-property.scss +70 -0
- data/_sass/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss +16 -0
- data/_sass/bourbon/bourbon/utilities/_font-source-declaration.scss +51 -0
- data/_sass/bourbon/bourbon/utilities/_gamma.scss +21 -0
- data/_sass/bourbon/bourbon/utilities/_lightness.scss +24 -0
- data/_sass/bourbon/bourbon/utilities/_unpack-shorthand.scss +29 -0
- data/_sass/bourbon/bourbon/validators/_contains-falsy.scss +20 -0
- data/_sass/bourbon/bourbon/validators/_contains.scss +26 -0
- data/_sass/bourbon/bourbon/validators/_is-color.scss +13 -0
- data/_sass/bourbon/bourbon/validators/_is-length.scss +15 -0
- data/_sass/bourbon/bourbon/validators/_is-number.scss +15 -0
- data/_sass/bourbon/bourbon/validators/_is-size.scss +18 -0
- data/_sass/home.scss +55 -0
- data/_sass/main.scss +73 -0
- data/_sass/navigation.scss +45 -0
- data/_sass/neat/_neat.scss +26 -0
- data/_sass/neat/neat/functions/_neat-append-grid-visual.scss +21 -0
- data/_sass/neat/neat/functions/_neat-column-default.scss +23 -0
- data/_sass/neat/neat/functions/_neat-column-ratio.scss +24 -0
- data/_sass/neat/neat/functions/_neat-column-width.scss +25 -0
- data/_sass/neat/neat/functions/_neat-float-direction.scss +22 -0
- data/_sass/neat/neat/functions/_neat-merge-defaults.scss +23 -0
- data/_sass/neat/neat/functions/_neat-opposite-direction.scss +22 -0
- data/_sass/neat/neat/functions/_neat-parse-columns.scss +22 -0
- data/_sass/neat/neat/functions/_neat-parse-media.scss +20 -0
- data/_sass/neat/neat/functions/_retrieve-neat-settings.scss +19 -0
- data/_sass/neat/neat/mixins/_grid-collapse.scss +35 -0
- data/_sass/neat/neat/mixins/_grid-column.scss +39 -0
- data/_sass/neat/neat/mixins/_grid-container.scss +31 -0
- data/_sass/neat/neat/mixins/_grid-media.scss +67 -0
- data/_sass/neat/neat/mixins/_grid-push.scss +37 -0
- data/_sass/neat/neat/mixins/_grid-shift.scss +36 -0
- data/_sass/neat/neat/mixins/_grid-visual.scss +41 -0
- data/_sass/neat/neat/settings/_settings.scss +74 -0
- data/_sass/post.scss +24 -0
- data/assets/Linkedin.svg +17 -0
- data/assets/Twitter.svg +18 -0
- data/assets/github.png +0 -0
- data/assets/gitlab.svg +53 -0
- data/assets/icon.jpg +0 -0
- data/assets/icon.svg +95 -0
- data/assets/linkedin.png +0 -0
- data/assets/styles.scss +4 -0
- metadata +179 -0
@@ -0,0 +1,41 @@
|
|
1
|
+
// Typography
|
2
|
+
$base-font-family: $font-stack-system;
|
3
|
+
$heading-font-family: $base-font-family;
|
4
|
+
|
5
|
+
// Line height
|
6
|
+
$base-line-height: 1.5;
|
7
|
+
$heading-line-height: 1.2;
|
8
|
+
|
9
|
+
// Other Sizes
|
10
|
+
$base-border-radius: 3px;
|
11
|
+
$base-spacing: 1.5em;
|
12
|
+
$small-spacing: $base-spacing / 2;
|
13
|
+
$base-z-index: 0;
|
14
|
+
|
15
|
+
// Colors
|
16
|
+
$blue: #1565c0;
|
17
|
+
$dark-gray: #333;
|
18
|
+
$medium-gray: #999;
|
19
|
+
$light-gray: #ddd;
|
20
|
+
|
21
|
+
// Font Colors
|
22
|
+
$base-font-color: $dark-gray;
|
23
|
+
$action-color: $blue;
|
24
|
+
|
25
|
+
// Border
|
26
|
+
$base-border-color: $light-gray;
|
27
|
+
$base-border: 1px solid $base-border-color;
|
28
|
+
|
29
|
+
// Background Colors
|
30
|
+
$base-background-color: #fff;
|
31
|
+
$secondary-background-color: tint($base-border-color, 75%);
|
32
|
+
|
33
|
+
// Focus
|
34
|
+
$focus-outline-color: transparentize($action-color, 0.4);
|
35
|
+
$focus-outline-width: 3px;
|
36
|
+
$focus-outline: $focus-outline-width solid $focus-outline-color;
|
37
|
+
$focus-outline-offset: 2px;
|
38
|
+
|
39
|
+
// Animations
|
40
|
+
$base-duration: 150ms;
|
41
|
+
$base-timing: ease;
|
@@ -0,0 +1,54 @@
|
|
1
|
+
// Bourbon 5.0.0-beta.8
|
2
|
+
// http://bourbon.io
|
3
|
+
// Copyright 2011-2017 thoughtbot, inc.
|
4
|
+
// MIT License
|
5
|
+
|
6
|
+
@import "bourbon/helpers/buttons-list";
|
7
|
+
@import "bourbon/helpers/scales";
|
8
|
+
@import "bourbon/helpers/text-inputs-list";
|
9
|
+
|
10
|
+
@import "bourbon/settings/settings";
|
11
|
+
|
12
|
+
@import "bourbon/validators/contains";
|
13
|
+
@import "bourbon/validators/contains-falsy";
|
14
|
+
@import "bourbon/validators/is-color";
|
15
|
+
@import "bourbon/validators/is-length";
|
16
|
+
@import "bourbon/validators/is-number";
|
17
|
+
@import "bourbon/validators/is-size";
|
18
|
+
|
19
|
+
@import "bourbon/utilities/assign-inputs";
|
20
|
+
@import "bourbon/utilities/compact-shorthand";
|
21
|
+
@import "bourbon/utilities/directional-property";
|
22
|
+
@import "bourbon/utilities/fetch-bourbon-setting";
|
23
|
+
@import "bourbon/utilities/font-source-declaration";
|
24
|
+
@import "bourbon/utilities/gamma";
|
25
|
+
@import "bourbon/utilities/lightness";
|
26
|
+
@import "bourbon/utilities/contrast-ratio";
|
27
|
+
@import "bourbon/utilities/unpack-shorthand";
|
28
|
+
|
29
|
+
@import "bourbon/library/border-color";
|
30
|
+
@import "bourbon/library/border-radius";
|
31
|
+
@import "bourbon/library/border-style";
|
32
|
+
@import "bourbon/library/border-width";
|
33
|
+
@import "bourbon/library/buttons";
|
34
|
+
@import "bourbon/library/clearfix";
|
35
|
+
@import "bourbon/library/contrast-switch";
|
36
|
+
@import "bourbon/library/ellipsis";
|
37
|
+
@import "bourbon/library/font-face";
|
38
|
+
@import "bourbon/library/font-stacks";
|
39
|
+
@import "bourbon/library/hide-text";
|
40
|
+
@import "bourbon/library/hide-visually";
|
41
|
+
@import "bourbon/library/margin";
|
42
|
+
@import "bourbon/library/modular-scale";
|
43
|
+
@import "bourbon/library/overflow-wrap";
|
44
|
+
@import "bourbon/library/padding";
|
45
|
+
@import "bourbon/library/position";
|
46
|
+
@import "bourbon/library/prefixer";
|
47
|
+
@import "bourbon/library/shade";
|
48
|
+
@import "bourbon/library/size";
|
49
|
+
@import "bourbon/library/strip-unit";
|
50
|
+
@import "bourbon/library/text-inputs";
|
51
|
+
@import "bourbon/library/timing-functions";
|
52
|
+
@import "bourbon/library/tint";
|
53
|
+
@import "bourbon/library/triangle";
|
54
|
+
@import "bourbon/library/value-prefixer";
|
@@ -0,0 +1,27 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
////
|
4
|
+
/// Pre-defined scales for use with the `modular-scale` function.
|
5
|
+
///
|
6
|
+
/// @type number (unitless)
|
7
|
+
///
|
8
|
+
/// @see {function} modular-scale
|
9
|
+
////
|
10
|
+
|
11
|
+
$minor-second: 1.067;
|
12
|
+
$major-second: 1.125;
|
13
|
+
$minor-third: 1.2;
|
14
|
+
$major-third: 1.25;
|
15
|
+
$perfect-fourth: 1.333;
|
16
|
+
$augmented-fourth: 1.414;
|
17
|
+
$perfect-fifth: 1.5;
|
18
|
+
$minor-sixth: 1.6;
|
19
|
+
$golden: 1.618;
|
20
|
+
$major-sixth: 1.667;
|
21
|
+
$minor-seventh: 1.778;
|
22
|
+
$major-seventh: 1.875;
|
23
|
+
$octave: 2;
|
24
|
+
$major-tenth: 2.5;
|
25
|
+
$major-eleventh: 2.667;
|
26
|
+
$major-twelfth: 3;
|
27
|
+
$double-octave: 4;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// A list of all _text-based_ HTML inputs.
|
4
|
+
///
|
5
|
+
/// @type list
|
6
|
+
///
|
7
|
+
/// @access private
|
8
|
+
|
9
|
+
$_text-inputs-list: (
|
10
|
+
"[type='color']",
|
11
|
+
"[type='date']",
|
12
|
+
"[type='datetime']",
|
13
|
+
"[type='datetime-local']",
|
14
|
+
"[type='email']",
|
15
|
+
"[type='month']",
|
16
|
+
"[type='number']",
|
17
|
+
"[type='password']",
|
18
|
+
"[type='search']",
|
19
|
+
"[type='tel']",
|
20
|
+
"[type='text']",
|
21
|
+
"[type='time']",
|
22
|
+
"[type='url']",
|
23
|
+
"[type='week']",
|
24
|
+
"input:not([type])",
|
25
|
+
"textarea",
|
26
|
+
);
|
@@ -0,0 +1,26 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise, one-line method for setting `border-color` on specific
|
4
|
+
/// edges of a box. Use a `null` value to “skip” edges of the box with standard
|
5
|
+
/// CSS shorthand.
|
6
|
+
///
|
7
|
+
/// @argument {list} $values
|
8
|
+
/// List of colors; accepts CSS shorthand.
|
9
|
+
///
|
10
|
+
/// @example scss
|
11
|
+
/// .element {
|
12
|
+
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
|
13
|
+
/// }
|
14
|
+
///
|
15
|
+
/// // CSS Output
|
16
|
+
/// .element {
|
17
|
+
/// border-left-color: #e8ae1a;
|
18
|
+
/// border-right-color: #76cd9c;
|
19
|
+
/// border-top-color: #a60b55;
|
20
|
+
/// }
|
21
|
+
///
|
22
|
+
/// @require {mixin} _directional-property
|
23
|
+
|
24
|
+
@mixin border-color($values) {
|
25
|
+
@include _directional-property(border, color, $values);
|
26
|
+
}
|
@@ -0,0 +1,85 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise, one-line method for setting `border-radius` on both the
|
4
|
+
/// top-left and top-right of a box.
|
5
|
+
///
|
6
|
+
/// @argument {number (with unit)} $radii
|
7
|
+
///
|
8
|
+
/// @example scss
|
9
|
+
/// .element {
|
10
|
+
/// @include border-top-radius(4px);
|
11
|
+
/// }
|
12
|
+
///
|
13
|
+
/// // CSS Output
|
14
|
+
/// .element {
|
15
|
+
/// border-top-left-radius: 4px;
|
16
|
+
/// border-top-right-radius: 4px;
|
17
|
+
/// }
|
18
|
+
|
19
|
+
@mixin border-top-radius($radii) {
|
20
|
+
border-top-left-radius: $radii;
|
21
|
+
border-top-right-radius: $radii;
|
22
|
+
}
|
23
|
+
|
24
|
+
/// Provides a concise, one-line method for setting `border-radius` on both the
|
25
|
+
/// top-right and bottom-right of a box.
|
26
|
+
///
|
27
|
+
/// @argument {number (with unit)} $radii
|
28
|
+
///
|
29
|
+
/// @example scss
|
30
|
+
/// .element {
|
31
|
+
/// @include border-right-radius(3px);
|
32
|
+
/// }
|
33
|
+
///
|
34
|
+
/// // CSS Output
|
35
|
+
/// .element {
|
36
|
+
/// border-bottom-right-radius: 3px;
|
37
|
+
/// border-top-right-radius: 3px;
|
38
|
+
/// }
|
39
|
+
|
40
|
+
@mixin border-right-radius($radii) {
|
41
|
+
border-bottom-right-radius: $radii;
|
42
|
+
border-top-right-radius: $radii;
|
43
|
+
}
|
44
|
+
|
45
|
+
/// Provides a concise, one-line method for setting `border-radius` on both the
|
46
|
+
/// bottom-left and bottom-right of a box.
|
47
|
+
///
|
48
|
+
/// @argument {number (with unit)} $radii
|
49
|
+
///
|
50
|
+
/// @example scss
|
51
|
+
/// .element {
|
52
|
+
/// @include border-bottom-radius(2px);
|
53
|
+
/// }
|
54
|
+
///
|
55
|
+
/// // CSS Output
|
56
|
+
/// .element {
|
57
|
+
/// border-bottom-left-radius: 2px;
|
58
|
+
/// border-bottom-right-radius: 2px;
|
59
|
+
/// }
|
60
|
+
|
61
|
+
@mixin border-bottom-radius($radii) {
|
62
|
+
border-bottom-left-radius: $radii;
|
63
|
+
border-bottom-right-radius: $radii;
|
64
|
+
}
|
65
|
+
|
66
|
+
/// Provides a concise, one-line method for setting `border-radius` on both the
|
67
|
+
/// top-left and bottom-left of a box.
|
68
|
+
///
|
69
|
+
/// @argument {number (with unit)} $radii
|
70
|
+
///
|
71
|
+
/// @example scss
|
72
|
+
/// .element {
|
73
|
+
/// @include border-left-radius(1px);
|
74
|
+
/// }
|
75
|
+
///
|
76
|
+
/// // CSS Output
|
77
|
+
/// .element {
|
78
|
+
/// border-bottom-left-radius: 1px;
|
79
|
+
/// border-top-left-radius: 1px;
|
80
|
+
/// }
|
81
|
+
|
82
|
+
@mixin border-left-radius($radii) {
|
83
|
+
border-bottom-left-radius: $radii;
|
84
|
+
border-top-left-radius: $radii;
|
85
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise, one-line method for setting `border-style` on specific
|
4
|
+
/// edges of a box. Use a `null` value to “skip” edges of the box with standard
|
5
|
+
/// CSS shorthand.
|
6
|
+
///
|
7
|
+
/// @argument {list} $values
|
8
|
+
/// List of border styles; accepts CSS shorthand.
|
9
|
+
///
|
10
|
+
/// @example scss
|
11
|
+
/// .element {
|
12
|
+
/// @include border-style(dashed null solid);
|
13
|
+
/// }
|
14
|
+
///
|
15
|
+
/// // CSS Output
|
16
|
+
/// .element {
|
17
|
+
/// border-bottom-style: solid;
|
18
|
+
/// border-top-style: dashed;
|
19
|
+
/// }
|
20
|
+
///
|
21
|
+
/// @require {mixin} _directional-property
|
22
|
+
|
23
|
+
@mixin border-style($values) {
|
24
|
+
@include _directional-property(border, style, $values);
|
25
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise, one-line method for setting `border-width` on specific
|
4
|
+
/// edges of a box. Use a `null` value to “skip” edges of the box with standard
|
5
|
+
/// CSS shorthand.
|
6
|
+
///
|
7
|
+
/// @argument {list} $values
|
8
|
+
/// List of border widths; accepts CSS shorthand.
|
9
|
+
///
|
10
|
+
/// @example scss
|
11
|
+
/// .element {
|
12
|
+
/// @include border-width(1em null 20px);
|
13
|
+
/// }
|
14
|
+
///
|
15
|
+
/// // CSS Output
|
16
|
+
/// .element {
|
17
|
+
/// border-bottom-width: 20px;
|
18
|
+
/// border-top-width: 1em;
|
19
|
+
/// }
|
20
|
+
///
|
21
|
+
/// @require {mixin} _directional-property
|
22
|
+
|
23
|
+
@mixin border-width($values) {
|
24
|
+
@include _directional-property(border, width, $values);
|
25
|
+
}
|
@@ -0,0 +1,84 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
////
|
4
|
+
/// @type list
|
5
|
+
///
|
6
|
+
/// @require {function} _assign-inputs
|
7
|
+
///
|
8
|
+
/// @require {variable} $_buttons-list
|
9
|
+
////
|
10
|
+
|
11
|
+
/// A list of all HTML button elements. Please note that you must interpolate
|
12
|
+
/// the variable (`#{}`) to use it as a selector.
|
13
|
+
///
|
14
|
+
/// @example scss
|
15
|
+
/// #{$all-buttons} {
|
16
|
+
/// background-color: #f00;
|
17
|
+
/// }
|
18
|
+
///
|
19
|
+
/// // CSS Output
|
20
|
+
/// button,
|
21
|
+
/// [type='button'],
|
22
|
+
/// [type='reset'],
|
23
|
+
/// [type='submit'] {
|
24
|
+
/// background-color: #f00;
|
25
|
+
/// }
|
26
|
+
|
27
|
+
$all-buttons: _assign-inputs($_buttons-list);
|
28
|
+
|
29
|
+
/// A list of all HTML button elements with the `:active` pseudo-class applied.
|
30
|
+
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
31
|
+
/// selector.
|
32
|
+
///
|
33
|
+
/// @example scss
|
34
|
+
/// #{$all-buttons-active} {
|
35
|
+
/// background-color: #00f;
|
36
|
+
/// }
|
37
|
+
///
|
38
|
+
/// // CSS Output
|
39
|
+
/// button:active,
|
40
|
+
/// [type='button']:active,
|
41
|
+
/// [type='reset']:active,
|
42
|
+
/// [type='submit']:active {
|
43
|
+
/// background-color: #00f;
|
44
|
+
/// }
|
45
|
+
|
46
|
+
$all-buttons-active: _assign-inputs($_buttons-list, active);
|
47
|
+
|
48
|
+
/// A list of all HTML button elements with the `:focus` pseudo-class applied.
|
49
|
+
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
50
|
+
/// selector.
|
51
|
+
///
|
52
|
+
/// @example scss
|
53
|
+
/// #{$all-buttons-focus} {
|
54
|
+
/// background-color: #0f0;
|
55
|
+
/// }
|
56
|
+
///
|
57
|
+
/// // CSS Output
|
58
|
+
/// button:focus,
|
59
|
+
/// [type='button']:focus,
|
60
|
+
/// [type='reset']:focus,
|
61
|
+
/// [type='submit']:focus {
|
62
|
+
/// background-color: #0f0;
|
63
|
+
/// }
|
64
|
+
|
65
|
+
$all-buttons-focus: _assign-inputs($_buttons-list, focus);
|
66
|
+
|
67
|
+
/// A list of all HTML button elements with the `:hover` pseudo-class applied.
|
68
|
+
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
69
|
+
/// selector.
|
70
|
+
///
|
71
|
+
/// @example scss
|
72
|
+
/// #{$all-buttons-hover} {
|
73
|
+
/// background-color: #0f0;
|
74
|
+
/// }
|
75
|
+
///
|
76
|
+
/// // CSS Output
|
77
|
+
/// button:hover,
|
78
|
+
/// [type='button']:hover,
|
79
|
+
/// [type='reset']:hover,
|
80
|
+
/// [type='submit']:hover {
|
81
|
+
/// background-color: #0f0;
|
82
|
+
/// }
|
83
|
+
|
84
|
+
$all-buttons-hover: _assign-inputs($_buttons-list, hover);
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides an easy way to include a clearfix for containing floats.
|
4
|
+
///
|
5
|
+
/// @link https://goo.gl/yP5hiZ
|
6
|
+
///
|
7
|
+
/// @example scss
|
8
|
+
/// .element {
|
9
|
+
/// @include clearfix;
|
10
|
+
/// }
|
11
|
+
///
|
12
|
+
/// // CSS Output
|
13
|
+
/// .element::after {
|
14
|
+
/// clear: both;
|
15
|
+
/// content: "";
|
16
|
+
/// display: block;
|
17
|
+
/// }
|
18
|
+
|
19
|
+
@mixin clearfix {
|
20
|
+
&::after {
|
21
|
+
clear: both;
|
22
|
+
content: "";
|
23
|
+
display: block;
|
24
|
+
}
|
25
|
+
}
|