fortitude-sass 0.5.0 → 0.5.1
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 +4 -4
- data/.gitignore +0 -1
- data/Gemfile.lock +1 -1
- data/app/assets/stylesheets/fortitude/api/blocks/_badge.scss +97 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_bare-list.scss +11 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_block-list.scss +41 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_box.scss +23 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_button.scss +163 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_container.scss +38 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_flag.scss +198 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_flashbar.scss +17 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_fluid-container.scss +8 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_inline-list.scss +11 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_input.scss +344 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_layout.scss +118 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_list-navigation.scss +22 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_media.scss +86 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_modal.scss +1 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_navigationbar.scss +1 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_shade.scss +18 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_table.scss +1 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_tabs-navigation.scss +45 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_tabs.scss +11 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_text.scss +1 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_tooltip.scss +149 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_ui-list.scss +50 -0
- data/app/assets/stylesheets/fortitude/api/blocks/_wings.scss +1 -0
- data/bower.json +1 -1
- data/lib/fortitude-sass/version.rb +1 -1
- metadata +25 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0774ffb923ccf750e6859d4a59c689fec01e5821
|
|
4
|
+
data.tar.gz: 0939a814be32028c173c7c9c4c8b4e3a24685971
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4b119e51e1aa20d645b989d9185bd6be147d3060958d1bd324e1d2e1e0a8c000dc9133ce19de379729b4d736ba811a247bcaaa21d98cdeb3efaaca938314bdec
|
|
7
|
+
data.tar.gz: 5cb852483f12f6482f34c4d372624b7d1dc6175ac64c011a5d999b034c650ff5917713cb7ab1f3e95fc5c2fec62aa74cbd8dfa580b497762a23e967e18b314a0
|
data/.gitignore
CHANGED
data/Gemfile.lock
CHANGED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/*------------------------------------*\
|
|
2
|
+
#BADGE
|
|
3
|
+
\*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A simple badge object.
|
|
7
|
+
**/
|
|
8
|
+
|
|
9
|
+
// Predefine the variables below in order to alter and enable specific features.
|
|
10
|
+
$fortitude-badge-height: $fortitude-base-spacing-unit * 1.3 !default;
|
|
11
|
+
$fortitude-badge-height--small: $fortitude-base-spacing-unit !default;
|
|
12
|
+
$fortitude-badge-height--large: double($fortitude-base-spacing-unit) !default;
|
|
13
|
+
$fortitude-badge-font-size: $fortitude-base-font-size !default;
|
|
14
|
+
|
|
15
|
+
$fortitude-badge-border-width: 0 !default;
|
|
16
|
+
$fortitude-badge-border-style: solid !default;
|
|
17
|
+
$fortitude-badge-border-radius: 0 !default;
|
|
18
|
+
|
|
19
|
+
$fortitude-enable-badge--small: false !default;
|
|
20
|
+
$fortitude-enable-badge--large: false !default;
|
|
21
|
+
$fortitude-enable-badge--pill: false !default;
|
|
22
|
+
|
|
23
|
+
@mixin fortitude-badge($fortitude-extension: null) {
|
|
24
|
+
/**
|
|
25
|
+
* 1. Allow us to style box model properties.
|
|
26
|
+
* 2. Line different sized badges up a little nicer.
|
|
27
|
+
* 3. Make badges inherit font styles (often necessary when styling `input`s as
|
|
28
|
+
* badges).
|
|
29
|
+
* 4. Reset/normalize some styles.
|
|
30
|
+
* 5. Fixes odd inner spacing in IE7.
|
|
31
|
+
* 6. Subtract the border size from the padding value so that badges do not
|
|
32
|
+
* grow larger as we add borders.
|
|
33
|
+
* 7. Set badge text to nowrap.
|
|
34
|
+
**/
|
|
35
|
+
border: $fortitude-badge-border-width $fortitude-badge-border-style transparent;
|
|
36
|
+
display: inline-block;
|
|
37
|
+
/* [1] */
|
|
38
|
+
vertical-align: middle;
|
|
39
|
+
/* [2] */
|
|
40
|
+
font: inherit;
|
|
41
|
+
/* [3] */
|
|
42
|
+
background-color: transparent;
|
|
43
|
+
/* [4] */
|
|
44
|
+
text-align: center;
|
|
45
|
+
/* [4] */
|
|
46
|
+
font-size: $fortitude-badge-font-size;
|
|
47
|
+
height: $fortitude-badge-height;
|
|
48
|
+
overflow: visible;
|
|
49
|
+
/* [5] */
|
|
50
|
+
white-space: nowrap;
|
|
51
|
+
/* [7] */
|
|
52
|
+
line-height: $fortitude-base-line-height;
|
|
53
|
+
@if $fortitude-extension == small {
|
|
54
|
+
@include fortitude-badge--small;
|
|
55
|
+
}
|
|
56
|
+
@else if $fortitude-extension == large {
|
|
57
|
+
@include fortitude-badge--large;
|
|
58
|
+
}
|
|
59
|
+
@else {
|
|
60
|
+
margin: fortitude-block-margin($fortitude-badge-height, $fortitude-badge-border-width) 0;
|
|
61
|
+
/* [4] */
|
|
62
|
+
padding: fortitude-block-padding($fortitude-badge-height, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit);
|
|
63
|
+
/* [6] */
|
|
64
|
+
}
|
|
65
|
+
@if $fortitude-extension == pill {
|
|
66
|
+
@include fortitude-badge--pill;
|
|
67
|
+
}
|
|
68
|
+
@else if $fortitude-badge-border-radius != 0 {
|
|
69
|
+
border-radius: $fortitude-badge-border-radius;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@mixin fortitude-badge--small {
|
|
74
|
+
margin: fortitude-block-margin($fortitude-badge-height--small, $fortitude-badge-border-width) 0;
|
|
75
|
+
/* [4] */
|
|
76
|
+
padding: fortitude-block-padding($fortitude-badge-height--small, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit);
|
|
77
|
+
/* [6] */
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@mixin fortitude-badge--large {
|
|
81
|
+
margin: fortitude-block-margin($fortitude-badge-height--large, $fortitude-badge-border-width) 0;
|
|
82
|
+
/* [4] */
|
|
83
|
+
padding: fortitude-block-padding($fortitude-badge-height--large, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit);
|
|
84
|
+
/* [6] */
|
|
85
|
+
@if $fortitude-block-height > $fortitude-block-line-height {
|
|
86
|
+
line-height: ceil($fortitude-block-height / $fortitude-block-line-height) * $fortitude-block-line-height;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@mixin fortitude-badge--pill {
|
|
91
|
+
/**
|
|
92
|
+
* 1. Overly-large value to ensure the radius rounds the whole end of the
|
|
93
|
+
* badge.
|
|
94
|
+
**/
|
|
95
|
+
border-radius: 10rem;
|
|
96
|
+
/* [1] */
|
|
97
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/*------------------------------------*\
|
|
2
|
+
#BLOCK-LIST
|
|
3
|
+
\*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* The block list object creates blocky list items out of a `ul` or `ol`.
|
|
7
|
+
**/
|
|
8
|
+
|
|
9
|
+
// Predefine the variables below in order to alter and enable specific features.
|
|
10
|
+
$fortitude-block-list-padding: $fortitude-base-spacing-unit !default;
|
|
11
|
+
$fortitude-block-list-padding--small: halve($fortitude-block-list-padding) !default;
|
|
12
|
+
$fortitude-block-list-padding--large: double($fortitude-block-list-padding) !default;
|
|
13
|
+
|
|
14
|
+
$fortitude-enable-block-list--small: false !default;
|
|
15
|
+
$fortitude-enable-block-list--large: false !default;
|
|
16
|
+
|
|
17
|
+
@mixin fortitude-block-list {
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 0;
|
|
20
|
+
list-style: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin fortitude-block-list__item($fortitude-extension: null) {
|
|
24
|
+
@if $fortitude-extension == small {
|
|
25
|
+
@include fortitude-block-list--small__item;
|
|
26
|
+
}
|
|
27
|
+
@else if $fortitude-extension == large {
|
|
28
|
+
@include fortitude-block-list--large__item;
|
|
29
|
+
}
|
|
30
|
+
@else {
|
|
31
|
+
padding: $fortitude-block-list-padding;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@mixin fortitude-block-list--small__item {
|
|
36
|
+
padding: $fortitude-block-list-padding--small;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@mixin fortitude-block-list--large__item {
|
|
40
|
+
padding: $fortitude-block-list-padding--large;
|
|
41
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/*------------------------------------*\
|
|
2
|
+
#BOX
|
|
3
|
+
\*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* The box object simply boxes off content.
|
|
7
|
+
**/
|
|
8
|
+
// Predefine the variables below in order to alter and enable specific features.
|
|
9
|
+
$fortitude-box-border-width: 0 !default;
|
|
10
|
+
$fortitude-box-border-style: solid !default;
|
|
11
|
+
$fortitude-box-border-radius--rounded: 0.2rem !default;
|
|
12
|
+
|
|
13
|
+
@mixin fortitude-box {
|
|
14
|
+
/**
|
|
15
|
+
* 1. So we can apply the `.box` class to naturally-inline elements.
|
|
16
|
+
* 2. So we can style the border colors in our extensions.
|
|
17
|
+
**/
|
|
18
|
+
@include fortitude-clearfix;
|
|
19
|
+
display: block;
|
|
20
|
+
/* [1] */
|
|
21
|
+
border: $fortitude-box-border-width $fortitude-box-border-style transparent;
|
|
22
|
+
/* [2] */
|
|
23
|
+
}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
/*------------------------------------*\
|
|
2
|
+
#BUTTON
|
|
3
|
+
\*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A simple button object.
|
|
7
|
+
**/
|
|
8
|
+
|
|
9
|
+
// Predefine the variables below in order to alter and enable specific features.
|
|
10
|
+
$fortitude-button-border-width: 0 !default;
|
|
11
|
+
$fortitude-button-border-style: solid !default;
|
|
12
|
+
$fortitude-button-border-radius: 0.2rem !default;
|
|
13
|
+
|
|
14
|
+
$fortitude-button-height: $fortitude-base-spacing-unit + 1.6rem !default;
|
|
15
|
+
$fortitude-button-horizontal-padding: fortitude-block-padding($fortitude-button-height, $fortitude-button-border-width) * 2 !default;
|
|
16
|
+
$fortitude-button-height--small: $fortitude-base-spacing-unit + 1rem !default;
|
|
17
|
+
$fortitude-button-horizontal-padding--small: fortitude-block-padding($fortitude-button-height--small, $fortitude-button-border-width) * 2 !default;
|
|
18
|
+
$fortitude-button-height--large: double($fortitude-base-spacing-unit) + 2rem !default;
|
|
19
|
+
$fortitude-button-horizontal-padding--large: fortitude-block-padding($fortitude-button-height--large, $fortitude-button-border-width) * 2 !default;
|
|
20
|
+
|
|
21
|
+
$fortitude-enable-button--small: false !default;
|
|
22
|
+
$fortitude-enable-button--large: false !default;
|
|
23
|
+
$fortitude-enable-button--full: false !default;
|
|
24
|
+
$fortitude-enable-button--pill: false !default;
|
|
25
|
+
|
|
26
|
+
// Here we set a variable assuming that `box-sizing: border-box;` is not set
|
|
27
|
+
// globally. If it has been previously been defined, the following variable will
|
|
28
|
+
// be overriden and will be set to `true`.
|
|
29
|
+
$fortitude-global-border-box: false !default;
|
|
30
|
+
|
|
31
|
+
@mixin fortitude-button($fortitude-extension: null) {
|
|
32
|
+
/**
|
|
33
|
+
* 1. Allow us to style box model properties.
|
|
34
|
+
* 2. Line different sized buttons up a little nicer.
|
|
35
|
+
* 3. Make buttons inherit font styles (often necessary when styling `input`s as
|
|
36
|
+
* buttons).
|
|
37
|
+
* 4. Reset/normalize some styles.
|
|
38
|
+
* 5. Force all button-styled elements to appear clickable.
|
|
39
|
+
* 6. Fixes odd inner spacing in IE7.
|
|
40
|
+
* 7. Subtract the border size from the padding value so that buttons do not
|
|
41
|
+
* grow larger as we add borders.
|
|
42
|
+
* 8. Set badge text to nowrap.
|
|
43
|
+
* 9. set position: relative in case if button has a `button__target`
|
|
44
|
+
* the position of the target will be inside of the button.
|
|
45
|
+
* 10. Required to combine fluid widths and fixed gutters.
|
|
46
|
+
**/
|
|
47
|
+
background-color: transparent;
|
|
48
|
+
border: $fortitude-button-border-width $fortitude-button-border-style transparent;
|
|
49
|
+
display: inline-block;
|
|
50
|
+
/* [1] */
|
|
51
|
+
vertical-align: middle;
|
|
52
|
+
/* [2] */
|
|
53
|
+
font: inherit;
|
|
54
|
+
/* [3] */
|
|
55
|
+
font-size: $fortitude-base-font-size;
|
|
56
|
+
text-align: center;
|
|
57
|
+
/* [4] */
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
/* [5] */
|
|
60
|
+
overflow: visible;
|
|
61
|
+
/* [6] */
|
|
62
|
+
white-space: nowrap;
|
|
63
|
+
/* [8] */
|
|
64
|
+
position: relative;
|
|
65
|
+
/* [9] */
|
|
66
|
+
@if $fortitude-extension == small {
|
|
67
|
+
@include fortitude-button--small;
|
|
68
|
+
}
|
|
69
|
+
@else if $fortitude-extension == large {
|
|
70
|
+
@include fortitude-button--large;
|
|
71
|
+
}
|
|
72
|
+
@else {
|
|
73
|
+
margin: fortitude-block-margin($fortitude-button-height, $fortitude-button-border-width) 0;
|
|
74
|
+
/* [4] */
|
|
75
|
+
padding: fortitude-block-padding($fortitude-button-height, $fortitude-button-border-width) $fortitude-button-horizontal-padding;
|
|
76
|
+
/* [7] */
|
|
77
|
+
}
|
|
78
|
+
@if $fortitude-extension == pill {
|
|
79
|
+
@include fortitude-button--pill;
|
|
80
|
+
}
|
|
81
|
+
@else if $fortitude-button-border-radius != 0 {
|
|
82
|
+
border-radius: $fortitude-button-border-radius;
|
|
83
|
+
}
|
|
84
|
+
@if $fortitude-extension == full {
|
|
85
|
+
@include fortitude-button--full;
|
|
86
|
+
}
|
|
87
|
+
@if $fortitude-global-border-box == false {
|
|
88
|
+
box-sizing: border-box;
|
|
89
|
+
/* [10] */
|
|
90
|
+
}
|
|
91
|
+
&,
|
|
92
|
+
&:hover,
|
|
93
|
+
&:active,
|
|
94
|
+
&:focus,
|
|
95
|
+
&:visited {
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
/* [4] */
|
|
98
|
+
}
|
|
99
|
+
&::-moz-focus-inner {
|
|
100
|
+
/**
|
|
101
|
+
* Fix a Firefox bug whereby `input type="submit"` gains 0.2rem extra padding.
|
|
102
|
+
**/
|
|
103
|
+
border: 0;
|
|
104
|
+
padding: 0;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@mixin fortitude-button--small {
|
|
109
|
+
/**
|
|
110
|
+
* 1. Reset/normalize some styles.
|
|
111
|
+
* 2. Subtract the border size from the padding value so that buttons do not
|
|
112
|
+
* grow larger as we add borders.
|
|
113
|
+
**/
|
|
114
|
+
margin: fortitude-block-margin($fortitude-button-height--small, $fortitude-button-border-width) 0;
|
|
115
|
+
/* [1] */
|
|
116
|
+
padding: fortitude-block-padding($fortitude-button-height--small, $fortitude-button-border-width) $fortitude-button-horizontal-padding--small;
|
|
117
|
+
/* [2] */
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@mixin fortitude-button--large {
|
|
121
|
+
/**
|
|
122
|
+
* 1. Reset/normalize some styles.
|
|
123
|
+
* 2. Subtract the border size from the padding value so that buttons do not
|
|
124
|
+
* grow larger as we add borders.
|
|
125
|
+
**/
|
|
126
|
+
margin: fortitude-block-margin($fortitude-button-height--large, $fortitude-button-border-width) 0;
|
|
127
|
+
/* [1] */
|
|
128
|
+
padding: fortitude-block-padding($fortitude-button-height--large, $fortitude-button-border-width) $fortitude-button-horizontal-padding--large;
|
|
129
|
+
/* [2] */
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@mixin fortitude-button--full {
|
|
133
|
+
width: 100%;
|
|
134
|
+
@if $fortitude-global-border-box == false {
|
|
135
|
+
/**
|
|
136
|
+
* Remove paddings so that widths and paddings don’t conflict.
|
|
137
|
+
**/
|
|
138
|
+
padding-right: 0;
|
|
139
|
+
padding-left: 0;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@mixin fortitude-button--pill {
|
|
144
|
+
/**
|
|
145
|
+
* 1. Overly-large value to ensure the radius rounds the whole end of the
|
|
146
|
+
* button.
|
|
147
|
+
**/
|
|
148
|
+
border-radius: 10rem;
|
|
149
|
+
/* [1] */
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@mixin fortitude-button__target {
|
|
153
|
+
position: absolute;
|
|
154
|
+
opacity: 0;
|
|
155
|
+
border: 0;
|
|
156
|
+
margin: 0;
|
|
157
|
+
padding: 0;
|
|
158
|
+
width: 100%;
|
|
159
|
+
height: 100%;
|
|
160
|
+
top: 0;
|
|
161
|
+
left: 0;
|
|
162
|
+
cursor: pointer;
|
|
163
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/*------------------------------------*\
|
|
2
|
+
#CONTAINER
|
|
3
|
+
\*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
$fortitude-container-breakpoints: (xs: 100%, sm: 72rem + $fortitude-base-spacing-unit, md: 94rem + $fortitude-base-spacing-unit, lg: 114rem + $fortitude-base-spacing-unit) !default;
|
|
6
|
+
|
|
7
|
+
// Here we set a variable assuming that `box-sizing: border-box;` is not set
|
|
8
|
+
// globally. If it has been previously been defined, the following variable will
|
|
9
|
+
// be overriden and will be set to `true`.
|
|
10
|
+
$fortitude-global-border-box: false !default;
|
|
11
|
+
|
|
12
|
+
@mixin fortitude-container {
|
|
13
|
+
@include fortitude-clearfix;
|
|
14
|
+
margin-right: auto;
|
|
15
|
+
margin-left: auto;
|
|
16
|
+
@each $fortitude-alias, $fortitude-breakpoint in $fortitude-breakpoints {
|
|
17
|
+
$fortitude-query: fortitude-query($fortitude-breakpoint);
|
|
18
|
+
@if not $fortitude-query {
|
|
19
|
+
// if there is no media query.
|
|
20
|
+
width: map-get($fortitude-container-breakpoints, $fortitude-alias);
|
|
21
|
+
}
|
|
22
|
+
@else {
|
|
23
|
+
// if there is a media query.
|
|
24
|
+
@media #{$fortitude-query} {
|
|
25
|
+
width: map-get($fortitude-container-breakpoints, $fortitude-alias);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
@if $fortitude-global-border-box == false {
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@mixin fortitude-container--fixed-top {
|
|
35
|
+
z-index: 2;
|
|
36
|
+
position: fixed;
|
|
37
|
+
top: 0;
|
|
38
|
+
}
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
/*------------------------------------*\
|
|
2
|
+
#FLAG
|
|
3
|
+
\*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* The flag object is a design pattern similar to the media object, however it
|
|
7
|
+
* utilises `display: table[-cell];` to give us control over the vertical
|
|
8
|
+
* alignments of the text and image. csswizardry.com/2013/05/the-flag-object
|
|
9
|
+
**/
|
|
10
|
+
|
|
11
|
+
// Predefine the variables below in order to alter and enable specific features.
|
|
12
|
+
$fortitude-flag-gutter: $fortitude-base-spacing-unit !default;
|
|
13
|
+
$fortitude-flag-gutter--small: halve($fortitude-flag-gutter) !default;
|
|
14
|
+
$fortitude-flag-gutter--large: double($fortitude-flag-gutter) !default;
|
|
15
|
+
|
|
16
|
+
$fortitude-enable-flag--small: false !default;
|
|
17
|
+
$fortitude-enable-flag--large: false !default;
|
|
18
|
+
$fortitude-enable-flag--rev: false !default;
|
|
19
|
+
$fortitude-enable-flag--flush: false !default;
|
|
20
|
+
$fortitude-enable-flag--top: false !default;
|
|
21
|
+
$fortitude-enable-flag--bottom: false !default;
|
|
22
|
+
$fortitude-enable-flag--responsive: false !default;
|
|
23
|
+
$fortitude-flag-collapse-at: 720px !default;
|
|
24
|
+
|
|
25
|
+
@mixin fortitude-flag {
|
|
26
|
+
/**
|
|
27
|
+
* 1. Allows us to control vertical alignments
|
|
28
|
+
* 2. Force the object to be the full width of its parent. Combined with [1],
|
|
29
|
+
* this makes the object behave in a quasi-`display: block;` manner.
|
|
30
|
+
**/
|
|
31
|
+
display: table;
|
|
32
|
+
/* [1] */
|
|
33
|
+
width: 100%;
|
|
34
|
+
/* [2] */
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin fortitude-flag__object {
|
|
38
|
+
/**
|
|
39
|
+
* 1. Default to aligning content to their middles.
|
|
40
|
+
**/
|
|
41
|
+
display: table-cell;
|
|
42
|
+
vertical-align: middle;
|
|
43
|
+
/* [1] */
|
|
44
|
+
padding-right: $fortitude-flag-gutter;
|
|
45
|
+
> img {
|
|
46
|
+
display: block;
|
|
47
|
+
margin-left: auto;
|
|
48
|
+
margin-right: auto;
|
|
49
|
+
max-width: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@mixin fortitude-flag__body {
|
|
54
|
+
/**
|
|
55
|
+
* The container for the main content of the flag object.
|
|
56
|
+
*
|
|
57
|
+
* 1. Forces the `.flag__body` to take up all remaining space.
|
|
58
|
+
* 2. Default to aligning content to their middles.
|
|
59
|
+
**/
|
|
60
|
+
display: table-cell;
|
|
61
|
+
width: 100%;
|
|
62
|
+
/* [1] */
|
|
63
|
+
vertical-align: middle;
|
|
64
|
+
/* [2] */
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@mixin fortitude-flag--small__object {
|
|
68
|
+
padding-right: $fortitude-flag-gutter--small;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@mixin fortitude-flag--small--rev__object {
|
|
72
|
+
padding-right: 0;
|
|
73
|
+
padding-left: $fortitude-flag-gutter--small;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@mixin fortitude-flag--large__object {
|
|
77
|
+
padding-right: $fortitude-flag-gutter--large;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@mixin fortitude-flag--large--rev__object {
|
|
81
|
+
padding-right: 0;
|
|
82
|
+
padding-left: $fortitude-flag-gutter--large;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@mixin fortitude-flag--rev {
|
|
86
|
+
/**
|
|
87
|
+
* 1. Swap the rendered direction of the object…
|
|
88
|
+
**/
|
|
89
|
+
direction: rtl;
|
|
90
|
+
/* [1] */
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@mixin fortitude-flag--rev__object {
|
|
94
|
+
/**
|
|
95
|
+
* 1. Swap the rendered direction of the object…
|
|
96
|
+
* 2. …and reset it.
|
|
97
|
+
* 3. Reassign margins to the correct sides.
|
|
98
|
+
**/
|
|
99
|
+
direction: ltr;
|
|
100
|
+
/* [2] */
|
|
101
|
+
padding-right: 0;
|
|
102
|
+
/* [3] */
|
|
103
|
+
padding-left: $fortitude-flag-gutter;
|
|
104
|
+
/* [3] */
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@mixin fortitude-flag--rev__body {
|
|
108
|
+
/**
|
|
109
|
+
* 2. …and reset it.
|
|
110
|
+
**/
|
|
111
|
+
direction: ltr;
|
|
112
|
+
/* [2] */
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@mixin fortitude-flag--flush__object {
|
|
116
|
+
padding-right: 0;
|
|
117
|
+
padding-left: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@mixin fortitude-flag--top__object {
|
|
121
|
+
vertical-align: top;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@mixin fortitude-flag--top__body {
|
|
125
|
+
vertical-align: top;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@mixin fortitude-flag--bottom__object {
|
|
129
|
+
vertical-align: bottom;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@mixin fortitude-flag--bottom__body {
|
|
133
|
+
vertical-align: bottom;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@mixin fortitude-flag--responsive {
|
|
137
|
+
/**
|
|
138
|
+
* Responsive flag objects.
|
|
139
|
+
*
|
|
140
|
+
* There is a very pragmatic, simple implementation of a responsive flag
|
|
141
|
+
* object, which simply places the text-content beneath the image-content.
|
|
142
|
+
*
|
|
143
|
+
* We use a `max-width` media query because:
|
|
144
|
+
*
|
|
145
|
+
* a) it is the least verbose method in terms of amount of code required.
|
|
146
|
+
* b) the flag object’s default state is image-next-to-text, so its stacked
|
|
147
|
+
* state is the exception, rather than the rule.
|
|
148
|
+
**/
|
|
149
|
+
@media screen and (max-width: $fortitude-flag-collapse-at) {
|
|
150
|
+
@if $fortitude-enable-flag--rev == true {
|
|
151
|
+
/**
|
|
152
|
+
* Disable reversal of content because there is no concept of
|
|
153
|
+
* ‘reversed’ in a stacked layout.
|
|
154
|
+
**/
|
|
155
|
+
direction: ltr;
|
|
156
|
+
}
|
|
157
|
+
display: block;
|
|
158
|
+
@content;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@mixin fortitude-flag--responsive__object {
|
|
163
|
+
/**
|
|
164
|
+
* Rework the spacings on regular flag objects.
|
|
165
|
+
**/
|
|
166
|
+
display: block;
|
|
167
|
+
padding-right: 0;
|
|
168
|
+
padding-left: 0;
|
|
169
|
+
margin-bottom: $fortitude-flag-gutter;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
@mixin fortitude-flag--responsive__body {
|
|
173
|
+
display: block;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@mixin fortitude-flag--responsive--small__object {
|
|
177
|
+
/**
|
|
178
|
+
* Small responsive flags.
|
|
179
|
+
*
|
|
180
|
+
* Take a little more heavy-handed approach to reworking
|
|
181
|
+
* spacings on flags that are also small flags in their regular
|
|
182
|
+
* state.
|
|
183
|
+
**/
|
|
184
|
+
padding-right: 0;
|
|
185
|
+
padding-left: 0;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@mixin fortitude-flag--responsive--large__object {
|
|
189
|
+
/**
|
|
190
|
+
* Large responsive flags.
|
|
191
|
+
*
|
|
192
|
+
* Take a little more heavy-handed approach to reworking
|
|
193
|
+
* spacings on flags that are also large flags in their regular
|
|
194
|
+
* state.
|
|
195
|
+
**/
|
|
196
|
+
padding-right: 0;
|
|
197
|
+
padding-left: 0;
|
|
198
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/*------------------------------------*\
|
|
2
|
+
#FLASHBAR
|
|
3
|
+
\*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A simple flashbar object.
|
|
7
|
+
**/
|
|
8
|
+
|
|
9
|
+
@mixin fortitude-flashbar {
|
|
10
|
+
@include fortitude-clearfix;
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@mixin fortitude-flashbar__close {
|
|
15
|
+
position: absolute;
|
|
16
|
+
right: halve($fortitude-base-spacing-unit);
|
|
17
|
+
}
|