furatto 1.0.1 → 1.0.2

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.
@@ -34,7 +34,6 @@ html {
34
34
 
35
35
  html, body {
36
36
  overflow-x: hidden;
37
- height: 100%;
38
37
  font-size: $base-font-size;
39
38
  font-weight: $base-font-weight;
40
39
  @include hyphens(auto);
@@ -63,6 +62,7 @@ body {
63
62
  margin: 0;
64
63
  font-family: $base-font-family;
65
64
  line-height: $base-line-height;
65
+ height: 100%;
66
66
  }
67
67
 
68
68
  img,
@@ -174,9 +174,9 @@ $button-block-media-query-width: px-to-rems(480) !default;
174
174
  @mixin button($background-color: $button-default-background-color,
175
175
  $padding: $button-default,
176
176
  $font-size: $button-font-default,
177
- $include-radius-style: true,
178
- $include-block-style: true,
179
- $include-pill-style: true) {
177
+ $include-radius-style: false,
178
+ $include-block-style: false,
179
+ $include-pill-style: false) {
180
180
  @include button-base;
181
181
  @include button-style($background-color);
182
182
  @include button-size($padding, $font-size);
@@ -76,6 +76,7 @@ label {
76
76
  cursor: $form-label-cursor;
77
77
  font-size: $form-label-font-size;
78
78
  font-weight: $form-label-font-weight;
79
+ color: $form-label-color;
79
80
 
80
81
  &.error {
81
82
  color: $form-label-error-color;
@@ -206,6 +207,8 @@ select {
206
207
  url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat $form-select-backgroun-x-position center;
207
208
  ;
208
209
 
210
+ height: $form-input-height;
211
+
209
212
  //Firefox fix
210
213
  text-indent: 0.01px;
211
214
  text-overflow: "";
@@ -16,8 +16,16 @@ $row-text-rendering: optimizespeed !default;
16
16
  $row-next-to-row-separation: 0.14285714rem !default;
17
17
 
18
18
  //Columns settings
19
- $col-padding: 0.57142857rem !default;
19
+ $col-top-padding: 8px !default;
20
+ $col-right-padding: 8px !default;
21
+ $col-bottom-padding: 8px !default;
22
+ $col-left-padding: 0 !default;
23
+ $col-padding: $col-top-padding $col-right-padding $col-bottom-padding $col-left-padding !default;
24
+
25
+ //Stack columns
20
26
  $stack-column-separation: 2px !default;
27
+ $stack-column-padding-right: 0 !default;
28
+ $stack-column-padding-left: 0 !default;
21
29
 
22
30
  //Media
23
31
  $grid-max-width: 54.85714286rem !default;
@@ -41,9 +49,7 @@ $col-border-alpha: 0.5 !default;
41
49
 
42
50
  @for $i from 1 through $columns {
43
51
  .col-#{$i} {
44
- $current-width: ($column-width * $i) - $column-separation-factor;
45
- width: percentage($current-width / 100);
46
- margin-left: percentage($column-separation-factor / 100);
52
+ width: percentage(($column-width * $i) / 100);
47
53
  }
48
54
  }
49
55
  }
@@ -75,10 +81,6 @@ $col-border-alpha: 0.5 !default;
75
81
 
76
82
  //Columns
77
83
  @include grid-columns;
78
-
79
- [class*="col-"]:first-child {
80
- margin-left: 0;
81
- }
82
84
  }
83
85
 
84
86
  //Separation between rows
@@ -134,9 +136,11 @@ $col-border-alpha: 0.5 !default;
134
136
  }
135
137
  }
136
138
  }
137
- .row > [class *= "col-"] {
139
+ .row > [class*="col-"] {
138
140
  width: 100%;
139
141
  margin-left: 0;
140
142
  margin-bottom: $stack-column-separation;
143
+ padding-right: $stack-column-padding-right;
144
+ padding-left: $stack-column-padding-left;
141
145
  }
142
146
  }
@@ -141,3 +141,22 @@
141
141
  -ms-flex: $value;
142
142
  flex: $value;
143
143
  }
144
+
145
+ //Inline navigation mixin
146
+
147
+ @mixin inline-list($list-style: none,
148
+ $list-style-position: inside,
149
+ $padding: 10px,
150
+ $left-list-item-margin: 10px) {
151
+ @extend %clearfix;
152
+ margin: 0;
153
+ display: block;
154
+ list-style: $list-style;
155
+ list-style-position: $list-style-position;
156
+ padding: $padding;
157
+
158
+ & > li {
159
+ float: left;
160
+ margin-left: $left-list-item-margin;
161
+ }
162
+ }
@@ -6,6 +6,7 @@
6
6
 
7
7
  //General settings
8
8
  $modal-width: 80% !default;
9
+ $modal-margin-left: ((40 * $modal-width) / 80) !default;
9
10
  $modal-z-index: 1050 !default;
10
11
  $modal-color: #FFF !default;
11
12
  $modal-top-position: px-to-rems(80) !default;
@@ -72,7 +73,7 @@ $include-super-scaled-effect: true !default;
72
73
  color: $modal-color;
73
74
  top: $modal-top-position;
74
75
  width: $modal-width;
75
- margin-left: -40%;
76
+ margin-left: -$modal-margin-left;
76
77
  left: 50%;
77
78
 
78
79
  &.modal-show {
@@ -65,6 +65,9 @@ $navigation-bar-dropdown-divider-height: px-to-rems(1) !default;
65
65
  $navigation-bar-dropdown-anchor-height: 45px !default;
66
66
  $navigation-bar-dropdown-anchor-line-height: $navigation-bar-dropdown-anchor-height !default;
67
67
  $navigation-bar-dropdown-right-position: 0px !default;
68
+ $navigation-bar-dropdown-border: 1px solid lighten($navigation-bar-background, 10%);
69
+ $include-navigation-bar-dropdown-top-border: false;
70
+ $navigation-bar-dropdown-radius: 3px;
68
71
 
69
72
 
70
73
  //Media
@@ -217,6 +220,13 @@ $navigation-bar-uncollapse-query: "#{$media-display} and (min-width: #{$media-co
217
220
  left: 0;
218
221
  z-index: $navigation-bar-dropdown-z-index;
219
222
  min-width: 100%;
223
+ @include border-radius(0px 0px $navigation-bar-dropdown-radius $navigation-bar-dropdown-radius);
224
+ border: $navigation-bar-dropdown-border;
225
+
226
+ //Handle the top border on dropdowns as not always should be there
227
+ @if $include-navigation-bar-dropdown-top-border == false {
228
+ border-top: none;
229
+ }
220
230
 
221
231
  li {
222
232
  width: 100%;
@@ -1,199 +1,199 @@
1
- //Toolbars
2
-
3
- @import 'functions';
4
-
5
- //
6
- //@variables
7
- //
8
-
9
- $toolbar-background-color: #232323 !default;
10
- $toolbar-border-radius: 0px !default;
11
- $toolbar-item-height: 34px !default;
12
- $toolbar-item-line-height: $toolbar-item-height !default;
13
- $toolbar-item-width: 44px !default;
14
- $toolbar-item-color: #FFF !default;
15
- $toolbar-arrow-border-width: 7px !default;
16
-
17
-
18
- //Toolbar variations
19
- $include-toolbar-variations: false !default;
20
- $toolbar-primary-background-color: #3498db !default;
21
- $toolbar-danger-background-color: #e74c3c !default;
22
- $toolbar-warning-background-color: #f39c12 !default;
23
-
24
- //Toolbar positions
25
- $include-toolbar-top-position: true !default;
26
- $include-toolbar-bottom-position: true !default;
27
- $include-toolbar-left-position: true !default;
28
- $include-toolbar-right-position: true !default;
29
-
30
- .tool-container {
31
- background-color: $toolbar-background-color;
32
- position: absolute;
33
- @include border-radius($toolbar-border-radius);
34
-
35
- &.tool-top,
36
- &.tool-bottom {
37
- height: $toolbar-item-height;
38
- }
39
-
40
- @if($include-toolbar-variations) {
41
- &.primary {
42
- background: $toolbar-primary-background-color;
43
- }
44
- &.danger {
45
- background: $toolbar-danger-background-color;
46
- }
47
- &.warning {
48
- background: $toolbar-warning-background-color;
49
- }
50
- }
51
- }
52
-
53
- .tool-items {
54
- height: 100%;
55
-
56
- a {
57
- color: $toolbar-item-color;
58
- }
59
- }
60
-
61
- .tool-top .tool-item, .tool-bottom .tool-item {
62
- float: left;
63
- }
64
-
65
- .tool-left .tool-item, .tool-right .tool-item {
66
- height: $toolbar-item-height;
67
- }
68
-
69
-
70
- .tool-item {
71
- height: 100%;
72
- display: block;
73
- width: $toolbar-item-width;
74
- text-align: center;
75
-
76
- &:hover { text-decoration: none;}
77
-
78
- i {
79
- line-height: $toolbar-item-line-height;
80
- }
81
- }
82
-
83
- .tool-item.selected, .tool-item:hover {
84
- background: darken($toolbar-background-color, 5%);
85
-
86
- @if($include-toolbar-variations) {
87
- &.primary {
88
- background: darken($toolbar-primary-background-color, 5%);
89
- }
90
-
91
- &.danger {
92
- background: darken($toolbar-danger-background-color, 5%);
93
- }
94
-
95
- &.warning {
96
- background: darken($toolbar-warning-background-color, 5%);
97
- }
98
- }
99
- }
100
-
101
- .tool-container .arrow {
102
- width:0;
103
- height:0;
104
- position: absolute;
105
- border-width: $toolbar-arrow-border-width;
106
- border-style: solid;
107
- }
108
-
109
- @if ($include-toolbar-top-position) {
110
- .tool-container.tool-top .arrow {
111
- border-color: $toolbar-bg-color transparent transparent;
112
- left: 50%;
113
- bottom: calculate-toolbar-arrow-position($toolbar-arrow-border-width);
114
- margin-left: -1 * $toolbar-arrow-border-width;
115
-
116
- @if($include-toolbar-variations) {
117
- &.primary {
118
- border-color: $toolbar-primary-background-color transparent transparent;
119
- }
120
-
121
- &.danger {
122
- border-color: $toolbar-danger-background-color transparent transparent;
123
- }
124
-
125
- &.warning {
126
- border-color: $toolbar-warning-background-color transparent transparent;
127
- }
128
- }
129
- }
130
- }
131
-
132
- @if ($include-toolbar-bottom-position) {
133
- .tool-container.tool-bottom .arrow {
134
- border-color: transparent transparent $toolbar-background-color;
135
- left: 50%;
136
- top: calculate-toolbar-arrow-position($toolbar-arrow-border-width);
137
- margin-left: -1 * $toolbar-arrow-border-width;
138
-
139
- @if($include-toolbar-variations) {
140
- &.primary {
141
- border-color: transparent transparent $toolbar-primary-background-color;
142
- }
143
-
144
- &.danger {
145
- border-color: transparent transparent $toolbar-danger-background-color;
146
- }
147
-
148
- &.warning {
149
- border-color: transparent transparent $toolbar-warning-background-color;
150
- }
151
- }
152
- }
153
- }
154
-
155
- @if ($include-toolbar-left-position) {
156
- .tool-container.tool-left .arrow {
157
- border-color: transparent transparent transparent $toolbar-background-color;
158
- top: 50%;
159
- right: calculate-toolbar-arrow-position($toolbar-arrow-border-width);
160
- margin-top: -1 * $toolbar-arrow-border-width;
161
-
162
- @if($include-toolbar-variations) {
163
- &.primary {
164
- border-color: transparent transparent transparent $toolbar-primary-background-color;
165
- }
166
-
167
- &.danger {
168
- border-color: transparent transparent transparent $toolbar-danger-background-color;
169
- }
170
-
171
- &.warning {
172
- border-color: transparent transparent transparent $toolbar-warning-background-color;
173
- }
174
- }
175
- }
176
- }
177
-
178
- @if ($include-toolbar-right-position) {
179
- .tool-container.tool-right .arrow {
180
- border-color: transparent $toolbar-background-color transparent transparent;
181
- top: 50%;
182
- left: calculate-toolbar-arrow-position($toolbar-arrow-border-width);
183
- margin-top: -1 * $toolbar-arrow-border-width;
184
-
185
- @if($include-toolbar-variations) {
186
- &.primary {
187
- border-color: transparent $toolbar-primary-background-color transparent transparent;
188
- }
189
-
190
- &.danger {
191
- border-color: transparent $toolbar-danger-background-color transparent transparent;
192
- }
193
-
194
- &.warning {
195
- border-color: transparent $toolbar-warning-background-color transparent transparent;
196
- }
197
- }
198
- }
199
- }
1
+ //Toolbars
2
+
3
+ @import 'functions';
4
+
5
+ //
6
+ //@variables
7
+ //
8
+
9
+ $toolbar-background-color: #232323 !default;
10
+ $toolbar-border-radius: 0px !default;
11
+ $toolbar-item-height: 34px !default;
12
+ $toolbar-item-line-height: $toolbar-item-height !default;
13
+ $toolbar-item-width: 44px !default;
14
+ $toolbar-item-color: #FFF !default;
15
+ $toolbar-arrow-border-width: 7px !default;
16
+
17
+
18
+ //Toolbar variations
19
+ $include-toolbar-variations: false !default;
20
+ $toolbar-primary-background-color: #3498db !default;
21
+ $toolbar-danger-background-color: #e74c3c !default;
22
+ $toolbar-warning-background-color: #f39c12 !default;
23
+
24
+ //Toolbar positions
25
+ $include-toolbar-top-position: true !default;
26
+ $include-toolbar-bottom-position: true !default;
27
+ $include-toolbar-left-position: true !default;
28
+ $include-toolbar-right-position: true !default;
29
+
30
+ .tool-container {
31
+ background-color: $toolbar-background-color;
32
+ position: absolute;
33
+ @include border-radius($toolbar-border-radius);
34
+
35
+ &.tool-top,
36
+ &.tool-bottom {
37
+ height: $toolbar-item-height;
38
+ }
39
+
40
+ @if($include-toolbar-variations) {
41
+ &.primary {
42
+ background: $toolbar-primary-background-color;
43
+ }
44
+ &.danger {
45
+ background: $toolbar-danger-background-color;
46
+ }
47
+ &.warning {
48
+ background: $toolbar-warning-background-color;
49
+ }
50
+ }
51
+ }
52
+
53
+ .tool-items {
54
+ height: 100%;
55
+
56
+ a {
57
+ color: $toolbar-item-color;
58
+ }
59
+ }
60
+
61
+ .tool-top .tool-item, .tool-bottom .tool-item {
62
+ float: left;
63
+ }
64
+
65
+ .tool-left .tool-item, .tool-right .tool-item {
66
+ height: $toolbar-item-height;
67
+ }
68
+
69
+
70
+ .tool-item {
71
+ height: 100%;
72
+ display: block;
73
+ width: $toolbar-item-width;
74
+ text-align: center;
75
+
76
+ &:hover { text-decoration: none;}
77
+
78
+ i {
79
+ line-height: $toolbar-item-line-height;
80
+ }
81
+ }
82
+
83
+ .tool-item.selected, .tool-item:hover {
84
+ background: darken($toolbar-background-color, 5%);
85
+
86
+ @if($include-toolbar-variations) {
87
+ &.primary {
88
+ background: darken($toolbar-primary-background-color, 5%);
89
+ }
90
+
91
+ &.danger {
92
+ background: darken($toolbar-danger-background-color, 5%);
93
+ }
94
+
95
+ &.warning {
96
+ background: darken($toolbar-warning-background-color, 5%);
97
+ }
98
+ }
99
+ }
100
+
101
+ .tool-container .arrow {
102
+ width:0;
103
+ height:0;
104
+ position: absolute;
105
+ border-width: $toolbar-arrow-border-width;
106
+ border-style: solid;
107
+ }
108
+
109
+ @if ($include-toolbar-top-position) {
110
+ .tool-container.tool-top .arrow {
111
+ border-color: $toolbar-bg-color transparent transparent;
112
+ left: 50%;
113
+ bottom: calculate-toolbar-arrow-position($toolbar-arrow-border-width);
114
+ margin-left: -1 * $toolbar-arrow-border-width;
115
+
116
+ @if($include-toolbar-variations) {
117
+ &.primary {
118
+ border-color: $toolbar-primary-background-color transparent transparent;
119
+ }
120
+
121
+ &.danger {
122
+ border-color: $toolbar-danger-background-color transparent transparent;
123
+ }
124
+
125
+ &.warning {
126
+ border-color: $toolbar-warning-background-color transparent transparent;
127
+ }
128
+ }
129
+ }
130
+ }
131
+
132
+ @if ($include-toolbar-bottom-position) {
133
+ .tool-container.tool-bottom .arrow {
134
+ border-color: transparent transparent $toolbar-background-color;
135
+ left: 50%;
136
+ top: calculate-toolbar-arrow-position($toolbar-arrow-border-width);
137
+ margin-left: -1 * $toolbar-arrow-border-width;
138
+
139
+ @if($include-toolbar-variations) {
140
+ &.primary {
141
+ border-color: transparent transparent $toolbar-primary-background-color;
142
+ }
143
+
144
+ &.danger {
145
+ border-color: transparent transparent $toolbar-danger-background-color;
146
+ }
147
+
148
+ &.warning {
149
+ border-color: transparent transparent $toolbar-warning-background-color;
150
+ }
151
+ }
152
+ }
153
+ }
154
+
155
+ @if ($include-toolbar-left-position) {
156
+ .tool-container.tool-left .arrow {
157
+ border-color: transparent transparent transparent $toolbar-background-color;
158
+ top: 50%;
159
+ right: calculate-toolbar-arrow-position($toolbar-arrow-border-width);
160
+ margin-top: -1 * $toolbar-arrow-border-width;
161
+
162
+ @if($include-toolbar-variations) {
163
+ &.primary {
164
+ border-color: transparent transparent transparent $toolbar-primary-background-color;
165
+ }
166
+
167
+ &.danger {
168
+ border-color: transparent transparent transparent $toolbar-danger-background-color;
169
+ }
170
+
171
+ &.warning {
172
+ border-color: transparent transparent transparent $toolbar-warning-background-color;
173
+ }
174
+ }
175
+ }
176
+ }
177
+
178
+ @if ($include-toolbar-right-position) {
179
+ .tool-container.tool-right .arrow {
180
+ border-color: transparent $toolbar-background-color transparent transparent;
181
+ top: 50%;
182
+ left: calculate-toolbar-arrow-position($toolbar-arrow-border-width);
183
+ margin-top: -1 * $toolbar-arrow-border-width;
184
+
185
+ @if($include-toolbar-variations) {
186
+ &.primary {
187
+ border-color: transparent $toolbar-primary-background-color transparent transparent;
188
+ }
189
+
190
+ &.danger {
191
+ border-color: transparent $toolbar-danger-background-color transparent transparent;
192
+ }
193
+
194
+ &.warning {
195
+ border-color: transparent $toolbar-warning-background-color transparent transparent;
196
+ }
197
+ }
198
+ }
199
+ }