active_frontend 16.1.7 → 16.2.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 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