foundation-scss 6.3.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (90) hide show
  1. checksums.yaml +7 -0
  2. data/_vendor/normalize-scss/sass/_normalize.scss +3 -0
  3. data/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
  4. data/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
  5. data/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
  6. data/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
  7. data/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
  8. data/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
  9. data/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
  10. data/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
  11. data/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
  12. data/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
  13. data/foundation-scss.gemspec +9 -0
  14. data/lib/foundation/scss/in/sass_path.rb +6 -0
  15. data/scss/_global.scss +219 -0
  16. data/scss/components/_accordion-menu.scss +36 -0
  17. data/scss/components/_accordion.scss +150 -0
  18. data/scss/components/_badge.scss +63 -0
  19. data/scss/components/_breadcrumbs.scss +100 -0
  20. data/scss/components/_button-group.scss +253 -0
  21. data/scss/components/_button.scss +332 -0
  22. data/scss/components/_callout.scss +106 -0
  23. data/scss/components/_card.scss +121 -0
  24. data/scss/components/_close-button.scss +102 -0
  25. data/scss/components/_drilldown.scss +93 -0
  26. data/scss/components/_dropdown-menu.scss +226 -0
  27. data/scss/components/_dropdown.scss +72 -0
  28. data/scss/components/_flex-video.scss +1 -0
  29. data/scss/components/_flex.scss +34 -0
  30. data/scss/components/_float.scss +27 -0
  31. data/scss/components/_label.scss +64 -0
  32. data/scss/components/_media-object.scss +114 -0
  33. data/scss/components/_menu-icon.scss +9 -0
  34. data/scss/components/_menu.scss +376 -0
  35. data/scss/components/_off-canvas.scss +329 -0
  36. data/scss/components/_orbit.scss +196 -0
  37. data/scss/components/_pagination.scss +193 -0
  38. data/scss/components/_progress-bar.scss +64 -0
  39. data/scss/components/_responsive-embed.scss +70 -0
  40. data/scss/components/_reveal.scss +178 -0
  41. data/scss/components/_slider.scss +138 -0
  42. data/scss/components/_sticky.scss +38 -0
  43. data/scss/components/_switch.scss +247 -0
  44. data/scss/components/_table.scss +329 -0
  45. data/scss/components/_tabs.scss +196 -0
  46. data/scss/components/_thumbnail.scss +67 -0
  47. data/scss/components/_title-bar.scss +84 -0
  48. data/scss/components/_tooltip.scss +107 -0
  49. data/scss/components/_top-bar.scss +173 -0
  50. data/scss/components/_visibility.scss +132 -0
  51. data/scss/forms/_checkbox.scss +41 -0
  52. data/scss/forms/_error.scss +88 -0
  53. data/scss/forms/_fieldset.scss +54 -0
  54. data/scss/forms/_forms.scss +34 -0
  55. data/scss/forms/_help-text.scss +30 -0
  56. data/scss/forms/_input-group.scss +135 -0
  57. data/scss/forms/_label.scss +50 -0
  58. data/scss/forms/_meter.scss +110 -0
  59. data/scss/forms/_progress.scss +94 -0
  60. data/scss/forms/_range.scss +149 -0
  61. data/scss/forms/_select.scss +85 -0
  62. data/scss/forms/_text.scss +170 -0
  63. data/scss/foundation.scss +118 -0
  64. data/scss/grid/_classes.scss +176 -0
  65. data/scss/grid/_column.scss +112 -0
  66. data/scss/grid/_flex-grid.scss +312 -0
  67. data/scss/grid/_grid.scss +48 -0
  68. data/scss/grid/_gutter.scss +82 -0
  69. data/scss/grid/_layout.scss +76 -0
  70. data/scss/grid/_position.scss +76 -0
  71. data/scss/grid/_row.scss +99 -0
  72. data/scss/grid/_size.scss +24 -0
  73. data/scss/settings/_settings.scss +620 -0
  74. data/scss/typography/_alignment.scss +22 -0
  75. data/scss/typography/_base.scss +509 -0
  76. data/scss/typography/_helpers.scss +78 -0
  77. data/scss/typography/_print.scss +86 -0
  78. data/scss/typography/_typography.scss +26 -0
  79. data/scss/util/_breakpoint.scss +281 -0
  80. data/scss/util/_color.scss +126 -0
  81. data/scss/util/_direction.scss +31 -0
  82. data/scss/util/_flex.scss +85 -0
  83. data/scss/util/_math.scss +72 -0
  84. data/scss/util/_mixins.scss +276 -0
  85. data/scss/util/_selector.scss +41 -0
  86. data/scss/util/_typography.scss +26 -0
  87. data/scss/util/_unit.scss +152 -0
  88. data/scss/util/_util.scss +14 -0
  89. data/scss/util/_value.scss +160 -0
  90. metadata +144 -0
@@ -0,0 +1,196 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group tabs
7
+ ////
8
+
9
+ /// Default margin of the tab bar.
10
+ /// @type Number
11
+ $tab-margin: 0 !default;
12
+
13
+ /// Default background color of a tab bar.
14
+ /// @type Color
15
+ $tab-background: $white !default;
16
+
17
+ /// Font color of tab item.
18
+ /// @type Color
19
+ $tab-color: $primary-color !default;
20
+
21
+ /// Active background color of a tab bar.
22
+ /// @type Color
23
+ $tab-background-active: $light-gray !default;
24
+
25
+ /// Active font color of tab item.
26
+ /// @type Color
27
+ $tab-active-color: $primary-color !default;
28
+
29
+ /// Font size of tab items.
30
+ /// @type Number
31
+ $tab-item-font-size: rem-calc(12) !default;
32
+
33
+ /// Default background color on hover for items in a Menu.
34
+ $tab-item-background-hover: $white !default;
35
+
36
+ /// Default padding of a tab item.
37
+ /// @type Number
38
+ $tab-item-padding: 1.25rem 1.5rem !default;
39
+
40
+ /// Maximum number of `expand-n` classes to include in the CSS.
41
+ /// @type Number
42
+ $tab-expand-max: 6 !default;
43
+
44
+ /// Default background color of tab content.
45
+ /// @type Color
46
+ $tab-content-background: $white !default;
47
+
48
+ /// Default border color of tab content.
49
+ /// @type Color
50
+ $tab-content-border: $light-gray !default;
51
+
52
+ /// Default text color of tab content.
53
+ /// @type Color
54
+ $tab-content-color: $body-font-color !default;
55
+
56
+ /// Default padding for tab content.
57
+ /// @type Number | List
58
+ $tab-content-padding: 1rem !default;
59
+
60
+ /// Adds styles for a tab container. Apply this to a `<ul>`.
61
+ @mixin tabs-container (
62
+ $margin: $tab-margin,
63
+ $background: $tab-background,
64
+ $border-color: $tab-content-border
65
+ ) {
66
+ @include clearfix;
67
+ margin: $margin;
68
+ border: 1px solid $border-color;
69
+ background: $background;
70
+ list-style-type: none;
71
+ }
72
+
73
+ /// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
74
+ @mixin tabs-container-vertical {
75
+ > li {
76
+ display: block;
77
+ float: none;
78
+ width: auto;
79
+ }
80
+ }
81
+
82
+ /// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
83
+ @mixin tabs-title (
84
+ $padding: $tab-item-padding,
85
+ $font-size: $tab-item-font-size,
86
+ $color: $tab-color,
87
+ $color-active: $tab-active-color,
88
+ $background-hover: $tab-item-background-hover,
89
+ $background-active: $tab-background-active
90
+ ) {
91
+ float: #{$global-left};
92
+
93
+ > a {
94
+ display: block;
95
+ padding: $padding;
96
+ font-size: $font-size;
97
+ line-height: 1;
98
+ color: $color;
99
+
100
+ &:hover {
101
+ background: $background-hover;
102
+ color: scale-color($color, $lightness: -14%);
103
+ }
104
+
105
+ &:focus,
106
+ &[aria-selected='true'] {
107
+ background: $background-active;
108
+ color: $color-active;
109
+ }
110
+ }
111
+ }
112
+
113
+ /// Adds styles for the wrapper that surrounds a tab group's content panes.
114
+ @mixin tabs-content (
115
+ $background: $tab-content-background,
116
+ $color: $tab-content-color,
117
+ $border-color: $tab-content-border
118
+ ) {
119
+ border: 1px solid $border-color;
120
+ border-top: 0;
121
+ background: $background;
122
+ color: $color;
123
+ transition: all 0.5s ease;
124
+ }
125
+
126
+ /// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
127
+ @mixin tabs-content-vertical (
128
+ $border-color: $tab-content-border
129
+ ) {
130
+ border: 1px solid $border-color;
131
+ border-#{$global-left}: 0;
132
+ }
133
+
134
+ /// Adds styles for an individual tab content panel within the tab content container.
135
+ @mixin tabs-panel (
136
+ $padding: $tab-content-padding
137
+ ) {
138
+ display: none;
139
+ padding: $padding;
140
+
141
+ &[aria-hidden="false"] {
142
+ display: block;
143
+ }
144
+ }
145
+
146
+ @mixin foundation-tabs {
147
+ .tabs {
148
+ @include tabs-container;
149
+ }
150
+
151
+ // Vertical
152
+ .tabs.vertical {
153
+ @include tabs-container-vertical;
154
+ }
155
+
156
+ // Simple
157
+ .tabs.simple {
158
+ > li > a {
159
+ padding: 0;
160
+
161
+ &:hover {
162
+ background: transparent;
163
+ }
164
+ }
165
+ }
166
+
167
+ // Primary color
168
+ .tabs.primary {
169
+ background: $primary-color;
170
+
171
+ > li > a {
172
+ color: color-pick-contrast($primary-color);
173
+
174
+ &:hover,
175
+ &:focus {
176
+ background: smart-scale($primary-color);
177
+ }
178
+ }
179
+ }
180
+
181
+ .tabs-title {
182
+ @include tabs-title;
183
+ }
184
+
185
+ .tabs-content {
186
+ @include tabs-content;
187
+ }
188
+
189
+ .tabs-content.vertical {
190
+ @include tabs-content-vertical;
191
+ }
192
+
193
+ .tabs-panel {
194
+ @include tabs-panel;
195
+ }
196
+ }
@@ -0,0 +1,67 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group thumbnail
7
+ ////
8
+
9
+ /// Border around thumbnail images.
10
+ /// @type Border
11
+ $thumbnail-border: solid 4px $white !default;
12
+
13
+ /// Bottom margin for thumbnail images.
14
+ /// @type Length
15
+ $thumbnail-margin-bottom: $global-margin !default;
16
+
17
+ /// Box shadow under thumbnail images.
18
+ /// @type Shadow
19
+ $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
20
+
21
+ /// Box shadow under thumbnail images.
22
+ /// @type Shadow
23
+ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
24
+
25
+ /// Transition proprties for thumbnail images.
26
+ /// @type Transition
27
+ $thumbnail-transition: box-shadow 200ms ease-out !default;
28
+
29
+ /// Default radius for thumbnail images.
30
+ /// @type Number
31
+ $thumbnail-radius: $global-radius !default;
32
+
33
+ /// Adds thumbnail styles to an element.
34
+ @mixin thumbnail {
35
+ display: inline-block;
36
+ max-width: 100%;
37
+ margin-bottom: $thumbnail-margin-bottom;
38
+
39
+ border: $thumbnail-border;
40
+ border-radius: $thumbnail-radius;
41
+ box-shadow: $thumbnail-shadow;
42
+
43
+ line-height: 0;
44
+ }
45
+
46
+ @mixin thumbnail-link {
47
+ transition: $thumbnail-transition;
48
+
49
+ &:hover,
50
+ &:focus {
51
+ box-shadow: $thumbnail-shadow-hover;
52
+ }
53
+
54
+ image {
55
+ box-shadow: none;
56
+ }
57
+ }
58
+
59
+ @mixin foundation-thumbnail {
60
+ .thumbnail {
61
+ @include thumbnail;
62
+ }
63
+
64
+ a.thumbnail {
65
+ @include thumbnail-link;
66
+ }
67
+ }
@@ -0,0 +1,84 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group title-bar
7
+ ////
8
+
9
+ /// Background color of a title bar.
10
+ /// @type Color
11
+ $titlebar-background: $black !default;
12
+
13
+ /// Color of text inside a title bar.
14
+ /// @type Color
15
+ $titlebar-color: $white !default;
16
+
17
+ /// Padding inside a title bar.
18
+ /// @type Length
19
+ $titlebar-padding: 0.5rem !default;
20
+
21
+ /// Font weight of text inside a title bar.
22
+ /// @type Weight
23
+ $titlebar-text-font-weight: bold !default;
24
+
25
+ /// Color of menu icons inside a title bar.
26
+ /// @type Color
27
+ $titlebar-icon-color: $white !default;
28
+
29
+ /// Color of menu icons inside a title bar on hover.
30
+ /// @type Color
31
+ $titlebar-icon-color-hover: $medium-gray !default;
32
+
33
+ /// Spacing between the menu icon and text inside a title bar.
34
+ /// @type Length
35
+ $titlebar-icon-spacing: 0.25rem !default;
36
+
37
+ @mixin foundation-title-bar {
38
+ .title-bar {
39
+ padding: $titlebar-padding;
40
+ background: $titlebar-background;
41
+ color: $titlebar-color;
42
+
43
+ @if $global-flexbox {
44
+ display: flex;
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ }
48
+ @else {
49
+ @include clearfix;
50
+ }
51
+
52
+ .menu-icon {
53
+ margin-#{$global-left}: $titlebar-icon-spacing;
54
+ margin-#{$global-right}: $titlebar-icon-spacing;
55
+ }
56
+ }
57
+
58
+ @if $global-flexbox {
59
+ .title-bar-left,
60
+ .title-bar-right {
61
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
62
+ }
63
+
64
+ .title-bar-right {
65
+ text-align: right;
66
+ }
67
+ }
68
+ @else {
69
+ .title-bar-left {
70
+ float: left;
71
+ }
72
+
73
+ .title-bar-right {
74
+ float: right;
75
+ text-align: right;
76
+ }
77
+ }
78
+
79
+ .title-bar-title {
80
+ display: inline-block;
81
+ vertical-align: middle;
82
+ font-weight: $titlebar-text-font-weight;
83
+ }
84
+ }
@@ -0,0 +1,107 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group tooltip
7
+ ////
8
+
9
+ /// Default font weight of the defined term.
10
+ /// @type Keyword | Number
11
+ $has-tip-font-weight: $global-weight-bold !default;
12
+
13
+ /// Default border bottom of the defined term.
14
+ /// @type List
15
+ $has-tip-border-bottom: dotted 1px $dark-gray !default;
16
+
17
+ /// Default color of the tooltip background.
18
+ /// @type Color
19
+ $tooltip-background-color: $black !default;
20
+
21
+ /// Default color of the tooltip font.
22
+ /// @type Color
23
+ $tooltip-color: $white !default;
24
+
25
+ /// Default padding of the tooltip background.
26
+ /// @type Number
27
+ $tooltip-padding: 0.75rem !default;
28
+
29
+ /// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
30
+ /// @type Number
31
+ $tooltip-font-size: $small-font-size !default;
32
+
33
+ /// Default pip width for tooltips.
34
+ /// @type Number
35
+ $tooltip-pip-width: 0.75rem !default;
36
+
37
+ /// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.
38
+ /// @type Number
39
+ $tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
40
+
41
+ /// Default radius for tooltips.
42
+ /// @type Number
43
+ $tooltip-radius: $global-radius !default;
44
+
45
+ @mixin has-tip {
46
+ position: relative;
47
+ display: inline-block;
48
+
49
+ border-bottom: $has-tip-border-bottom;
50
+ font-weight: $has-tip-font-weight;
51
+ cursor: help;
52
+ }
53
+
54
+ @mixin tooltip {
55
+ position: absolute;
56
+ top: calc(100% + #{$tooltip-pip-height});
57
+ z-index: 1200;
58
+
59
+ max-width: 10rem;
60
+ padding: $tooltip-padding;
61
+
62
+ border-radius: $tooltip-radius;
63
+ background-color: $tooltip-background-color;
64
+ font-size: $tooltip-font-size;
65
+ color: $tooltip-color;
66
+
67
+ &::before {
68
+ @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
69
+ position: absolute;
70
+ bottom: 100%;
71
+ left: 50%;
72
+ transform: translateX(-50%);
73
+ }
74
+
75
+ &.top::before {
76
+ @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
77
+ top: 100%;
78
+ bottom: auto;
79
+ }
80
+
81
+ &.left::before {
82
+ @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
83
+ top: 50%;
84
+ bottom: auto;
85
+ left: 100%;
86
+ transform: translateY(-50%);
87
+ }
88
+
89
+ &.right::before {
90
+ @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
91
+ top: 50%;
92
+ right: 100%;
93
+ bottom: auto;
94
+ left: auto;
95
+ transform: translateY(-50%);
96
+ }
97
+ }
98
+
99
+ @mixin foundation-tooltip {
100
+ .has-tip {
101
+ @include has-tip;
102
+ }
103
+
104
+ .tooltip {
105
+ @include tooltip;
106
+ }
107
+ }