active_frontend 16.1.7 → 16.2.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ab420a9e6b904ee93686a276f84a3479cc9c0be7b04f9aa17c731199c6301140
4
- data.tar.gz: 0e56e89daf58a7a5a4e611f8aa0ed38d775269a9c3ae0dea6a2b07c6c6f3ff80
3
+ metadata.gz: 18f082396a23bef9efc98e2d1e003f5ca6066a2b3b7659ac686c06a2c829493a
4
+ data.tar.gz: dc005e66664f06274a73dd89c3ef7decba68b39333b5c3734c90a3089b74f901
5
5
  SHA512:
6
- metadata.gz: 998fb098d3d7f2956dc0b720958ebacaa46b22c6f9ae61e8b0be3a1ef9eb89951221916ca76fb7d7dd8a104a982e32544f1762080399d72e9ef11af22fe8b205
7
- data.tar.gz: 0ce326f5e72c804832ca650a2e9e452082260412f88e008ae4360f87f14bb120af415e8ffac94d6d0864296cd97a52b7985edfe05cc4ff90af6f00edac101284
6
+ metadata.gz: bb4ee4734bf127add30163f26762eaf55e7c32b61f1d63f44e633f9e4bdc9c10603ee5f770b9254c2e0fbc0b29da59f80bc2fb2230cd975df6101c833f4c0418
7
+ data.tar.gz: 0b7c3c5da8760d8fe7633671d3f96cb6d1c836a9005e72f7433b74f672bb3d6ace99be8acf3427d9d38d5a90d1e709a8942522b65672167e9a117d860fc2527a
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ActiveFrontend
4
- VERSION ||= '16.1.7'
4
+ VERSION ||= '16.2.0'
5
5
  end
@@ -26,6 +26,16 @@
26
26
 
27
27
  // Helper Funtions
28
28
  // ==================================================
29
+ @function breakpoint-min-width($size) {
30
+ $widths: map-get($grid-container-widths, $size);
31
+
32
+ @return nth($widths, 2);
33
+ }
34
+ @function breakpoint-max-width($size) {
35
+ $width: breakpoint-min-width($size);
36
+
37
+ @return $width - 1px;
38
+ }
29
39
  @function text-color-on($color) {
30
40
  @if index($colors-black-text, $color) {
31
41
  @return color(slate);
@@ -206,7 +206,7 @@ $grid-container-widths: (
206
206
  l: (calc(100% - 260px), 1360px),
207
207
  m: (calc(100% - 140px), 1180px),
208
208
  b: (calc(100% - 60px), 960px),
209
- s: (calc(100% - 20px), 760px),
209
+ s: (calc(100% - 20px), 813px),
210
210
  null: (100%, null)
211
211
  );
212
212
  $grid-row-margins: (
@@ -318,7 +318,7 @@
318
318
 
319
319
  // Media Queries
320
320
  // ==================================================
321
- @media only screen and (max-width: 812px) {
321
+ @media only screen and (max-width: breakpoint-max-width(s)) {
322
322
  .btn-block-responsive {
323
323
  display: block;
324
324
  min-width: 100%;
@@ -67,11 +67,18 @@ textarea,
67
67
  &:focus,
68
68
  &.focus {
69
69
  border-color: color(blue);
70
+ box-shadow: inset 0 0 4px color(blue);
70
71
 
71
72
  &:invalid,
72
- &.invalid { border-color: color(red); }
73
+ &.invalid {
74
+ border-color: color(red);
75
+ box-shadow: inset 0 0 4px color(red);
76
+ }
73
77
 
74
- &.without-border { border-color: color(transparent); }
78
+ &.without-border {
79
+ border-color: color(transparent);
80
+ box-shadow: none;
81
+ }
75
82
  }
76
83
 
77
84
  &.dark {
@@ -448,6 +455,7 @@ textarea {
448
455
  input:focus {
449
456
  background: color(transparent);
450
457
  border: 0;
458
+ box-shadow: none;
451
459
  display: inline-block;
452
460
  outline: none;
453
461
  margin: 0;
@@ -569,6 +577,8 @@ textarea {
569
577
  display: table-cell;
570
578
  margin: 0;
571
579
  vertical-align: middle;
580
+
581
+ + .form-addon { border-left: 0; }
572
582
  }
573
583
 
574
584
  .form-addon {
@@ -581,6 +591,8 @@ textarea {
581
591
  white-space: nowrap;
582
592
  width: 1%;
583
593
 
594
+ &:not(:last-child) { border-right: 0; }
595
+
584
596
  i {
585
597
  display: inline-block;
586
598
  margin-top: -2px;
@@ -614,7 +626,6 @@ textarea {
614
626
  }
615
627
  }
616
628
 
617
- *:not(:first-child) { border-left: 0; }
618
629
  *:first-child {
619
630
  border-bottom-left-radius: border-radius(b);
620
631
  border-top-left-radius: border-radius(b);
@@ -63,6 +63,6 @@ svg:not(:root) {
63
63
 
64
64
  // Media Queries
65
65
  // ==================================================
66
- @media only screen and (max-width: 812px) {
66
+ @media only screen and (max-width: breakpoint-max-width(s)) {
67
67
  .img-responsive { max-width: 60%; }
68
68
  }
@@ -195,7 +195,19 @@ thead {
195
195
  // ==================================================
196
196
  @each $name, $color in $colors {
197
197
  .table-row-color-#{$name} {
198
- > td { color: color($name); }
198
+ td {
199
+ background: tint($name, 87.5%);
200
+ color: color($name);
201
+ }
202
+ }
203
+ }
204
+ .table-hover {
205
+ tbody {
206
+ @each $name, $color in $colors {
207
+ tr.table-row-color-#{$name}:hover {
208
+ td { background: tint($name, 82.5%); }
209
+ }
210
+ }
199
211
  }
200
212
  }
201
213
 
@@ -210,7 +222,7 @@ thead {
210
222
 
211
223
  // Media Queries
212
224
  // ==================================================
213
- @media only screen and (max-width: 960px) {
225
+ @media only screen and (max-width: breakpoint-max-width(b)) {
214
226
  .table-responsive {
215
227
  @include overflow-scrolling(touch);
216
228
  background: color(transparent);
@@ -85,7 +85,7 @@
85
85
 
86
86
  // Media Queries
87
87
  // ==================================================
88
- @media only screen and (max-width: 812px) {
88
+ @media only screen and (max-width: breakpoint-max-width(s)) {
89
89
  .ad {
90
90
  &.responsive {
91
91
  height: 60px;
@@ -250,7 +250,7 @@ table.calendar-border-separate {
250
250
 
251
251
  // Media Queries
252
252
  // ==================================================
253
- @media only screen and (max-width: 812px) {
253
+ @media only screen and (max-width: breakpoint-max-width(s)) {
254
254
  .calendar-header td { display: block; }
255
255
  .calendar-header-left,
256
256
  .calendar-header-center,
@@ -125,7 +125,7 @@
125
125
 
126
126
  // Media Queries
127
127
  // ==================================================
128
- @media only screen and (max-width: 812px) {
128
+ @media only screen and (max-width: breakpoint-max-width(s)) {
129
129
  .carousel-control {
130
130
  .icon-prev,
131
131
  .icon-next {
@@ -102,7 +102,7 @@
102
102
 
103
103
  // Media Queries
104
104
  // ==================================================
105
- @media only screen and (max-width: 960px) {
105
+ @media only screen and (max-width: breakpoint-max-width(b)) {
106
106
  .cohort-container {
107
107
  .table-responsive {
108
108
  border-radius: 0;
@@ -82,7 +82,7 @@
82
82
 
83
83
  // Media Queries
84
84
  // ==================================================
85
- @media only screen and (min-width: 960px) and (max-width: 1365px) {
85
+ @media only screen and (min-width: breakpoint-min-width(b)) and (max-width: breakpoint-max-width(l)) {
86
86
  @each $name, $widths in $grid-container-widths {
87
87
  $width: nth($widths, 2);
88
88
 
@@ -94,7 +94,7 @@
94
94
  .hidden-desktop { display: inherit; }
95
95
  .hidden-laptop { display: none; }
96
96
  }
97
- @media only screen and (min-width: 813px) and (max-width: 959px) {
97
+ @media only screen and (min-width: breakpoint-min-width(s)) and (max-width: breakpoint-max-width(b)) {
98
98
  @each $name, $widths in $grid-container-widths {
99
99
  $width: nth($widths, 2);
100
100
 
@@ -106,7 +106,7 @@
106
106
  .hidden-desktop { display: inherit; }
107
107
  .hidden-tablet { display: none; }
108
108
  }
109
- @media only screen and (max-width: 812px) {
109
+ @media only screen and (max-width: breakpoint-max-width(s)) {
110
110
  @each $name, $margin in $grid-row-margins {
111
111
  .#{dasherize(row-responsive, $name)} { margin-bottom: $margin; }
112
112
  }
@@ -126,10 +126,10 @@
126
126
 
127
127
  // Media Queries
128
128
  // ==================================================
129
- @media only screen and (min-width: 813px) and (max-width: 959px) {
129
+ @media only screen and (min-width: breakpoint-min-width(s)) and (max-width: breakpoint-max-width(b)) {
130
130
  .header-search { width: 220px; }
131
131
  }
132
- @media only screen and (max-width: 812px) {
132
+ @media only screen and (max-width: breakpoint-max-width(s)) {
133
133
  .header {
134
134
  height: 54px;
135
135
  padding: 12px 0;
@@ -41,7 +41,7 @@
41
41
 
42
42
  // Media Queries
43
43
  // ==================================================
44
- @media only screen and (min-width: 960px) and (max-width: 1365px) {
44
+ @media only screen and (min-width: breakpoint-min-width(b)) and (max-width: breakpoint-max-width(l)) {
45
45
  .layout-sidebar {
46
46
  width: 260px;
47
47
 
@@ -49,7 +49,7 @@
49
49
  &.fixed + .layout-body { width: 100%; }
50
50
  }
51
51
  }
52
- @media only screen and (min-width: 813px) and (max-width: 959px) {
52
+ @media only screen and (min-width: breakpoint-min-width(s)) and (max-width: breakpoint-max-width(b)) {
53
53
  .layout-sidebar {
54
54
  width: 220px;
55
55
 
@@ -57,7 +57,7 @@
57
57
  &.fixed + .layout-body { width: 100%; }
58
58
  }
59
59
  }
60
- @media only screen and (max-width: 812px) {
60
+ @media only screen and (max-width: breakpoint-max-width(s)) {
61
61
  .layout-body,
62
62
  .layout-sidebar {
63
63
  height: initial;
@@ -137,11 +137,11 @@
137
137
 
138
138
  // Media Queries
139
139
  // ==================================================
140
- @media only screen and (max-width: 812px) {
140
+ @media only screen and (max-width: breakpoint-max-width(s)) {
141
141
  .modal { width: calc(100% - 20px); }
142
142
  .modal-body { max-height: 280px; }
143
143
  }
144
- @media only screen and (min-width: 480px) and (max-width: 812px) {
144
+ @media only screen and (min-width: (breakpoint-min-width(b) / 2)) and (max-width: breakpoint-max-width(s)) {
145
145
  .modal { width: calc(100% - 120px); }
146
146
  .modal-body { max-height: 140px; }
147
147
  }
@@ -56,6 +56,6 @@
56
56
 
57
57
  // Media Queries
58
58
  // ==================================================
59
- @media only screen and (min-width: 813px) {
59
+ @media only screen and (min-width: breakpoint-min-width(s)) {
60
60
  .navbar { display: none; }
61
61
  }
@@ -56,7 +56,7 @@
56
56
 
57
57
  // Media Queries
58
58
  // ==================================================
59
- @media only screen and (max-width: 812px) {
59
+ @media only screen and (max-width: breakpoint-max-width(s)) {
60
60
  .subheader {
61
61
  &.absolute,
62
62
  &.fixed {
@@ -2,6 +2,7 @@
2
2
  // ==================================================
3
3
  // Typeahead
4
4
 
5
+ // scss-lint:disable NestingDepth
5
6
  // scss-lint:disable SelectorDepth
6
7
 
7
8
  // Typeahead
@@ -9,11 +10,20 @@
9
10
  .typeahead {
10
11
  margin-top: 10px;
11
12
  z-index: 1061;
13
+ font-weight: text-weight(semilight);
12
14
 
13
- > li > a b,
15
+ > li > a b {
16
+ color: color(secondary);
17
+ font-weight: inherit;
18
+ text-decoration: underline;
19
+ }
14
20
  > li.active > a {
15
21
  color: color(primary);
16
- font-weight: text-weight(normal);
22
+
23
+ &:hover,
24
+ &:active,
25
+ &:focus {
26
+ > b { color: inherit; }
27
+ }
17
28
  }
18
- > li > a b { text-decoration: underline; }
19
29
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: active_frontend
3
3
  version: !ruby/object:Gem::Version
4
- version: 16.1.7
4
+ version: 16.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Juan Gomez
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2018-05-26 00:00:00.000000000 Z
11
+ date: 2018-05-30 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -824,7 +824,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
824
824
  version: '0'
825
825
  requirements: []
826
826
  rubyforge_project:
827
- rubygems_version: 2.7.6
827
+ rubygems_version: 2.7.7
828
828
  signing_key:
829
829
  specification_version: 4
830
830
  summary: ActiveFrontend Responsive Web Framework