active_frontend 16.1.6 → 16.1.7

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.
@@ -318,7 +318,7 @@
318
318
 
319
319
  // Media Queries
320
320
  // ==================================================
321
- @media only screen and (max-width: 767px) {
321
+ @media only screen and (max-width: 812px) {
322
322
  .btn-block-responsive {
323
323
  display: block;
324
324
  min-width: 100%;
@@ -63,6 +63,6 @@ svg:not(:root) {
63
63
 
64
64
  // Media Queries
65
65
  // ==================================================
66
- @media only screen and (max-width: 767px) {
66
+ @media only screen and (max-width: 812px) {
67
67
  .img-responsive { max-width: 60%; }
68
68
  }
@@ -177,6 +177,7 @@ body {
177
177
  font-weight: text-weight(semilight);
178
178
  letter-spacing: -0.4px;
179
179
  line-height: text-line-height(b);
180
+ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
180
181
  text-align: left;
181
182
  text-decoration: none;
182
183
  text-transform: none;
@@ -85,7 +85,7 @@
85
85
 
86
86
  // Media Queries
87
87
  // ==================================================
88
- @media only screen and (max-width: 767px) {
88
+ @media only screen and (max-width: 812px) {
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: 767px) {
253
+ @media only screen and (max-width: 812px) {
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: 767px) {
128
+ @media only screen and (max-width: 812px) {
129
129
  .carousel-control {
130
130
  .icon-prev,
131
131
  .icon-next {
@@ -94,19 +94,19 @@
94
94
  .hidden-desktop { display: inherit; }
95
95
  .hidden-laptop { display: none; }
96
96
  }
97
- @media only screen and (min-width: 768px) and (max-width: 959px) {
97
+ @media only screen and (min-width: 813px) and (max-width: 959px) {
98
98
  @each $name, $widths in $grid-container-widths {
99
99
  $width: nth($widths, 2);
100
100
 
101
101
  @if $width {
102
- .container-fixed-#{$name} { width: 760px; }
102
+ .container-fixed-#{$name} { width: 813px; }
103
103
  }
104
104
  }
105
105
 
106
106
  .hidden-desktop { display: inherit; }
107
107
  .hidden-tablet { display: none; }
108
108
  }
109
- @media only screen and (max-width: 767px) {
109
+ @media only screen and (max-width: 812px) {
110
110
  @each $name, $margin in $grid-row-margins {
111
111
  .#{dasherize(row-responsive, $name)} { margin-bottom: $margin; }
112
112
  }
@@ -117,7 +117,7 @@
117
117
  $width: nth($widths, $i);
118
118
 
119
119
  @if $width {
120
- .#{dasherize($type, $name)} { width: calc(100% - 20px); }
120
+ .#{dasherize($type, $name)} { width: calc(100% - (20px + env(safe-area-inset-right) + env(safe-area-inset-left))); }
121
121
  }
122
122
  }
123
123
  }
@@ -126,10 +126,10 @@
126
126
 
127
127
  // Media Queries
128
128
  // ==================================================
129
- @media only screen and (min-width: 768px) and (max-width: 959px) {
129
+ @media only screen and (min-width: 813px) and (max-width: 959px) {
130
130
  .header-search { width: 220px; }
131
131
  }
132
- @media only screen and (max-width: 767px) {
132
+ @media only screen and (max-width: 812px) {
133
133
  .header {
134
134
  height: 54px;
135
135
  padding: 12px 0;
@@ -49,7 +49,7 @@
49
49
  &.fixed + .layout-body { width: 100%; }
50
50
  }
51
51
  }
52
- @media only screen and (min-width: 768px) and (max-width: 959px) {
52
+ @media only screen and (min-width: 813px) and (max-width: 959px) {
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: 767px) {
60
+ @media only screen and (max-width: 812px) {
61
61
  .layout-body,
62
62
  .layout-sidebar {
63
63
  height: initial;
@@ -76,7 +76,7 @@
76
76
  height: initial;
77
77
  padding-top: 54px;
78
78
 
79
- &.with-sticky-navbar { padding-bottom: 54px; }
79
+ &.with-sticky-navbar { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
80
80
  }
81
81
  }
82
82
  .layout-sidebar {
@@ -137,11 +137,11 @@
137
137
 
138
138
  // Media Queries
139
139
  // ==================================================
140
- @media only screen and (max-width: 767px) {
140
+ @media only screen and (max-width: 812px) {
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: 767px) {
144
+ @media only screen and (min-width: 480px) and (max-width: 812px) {
145
145
  .modal { width: calc(100% - 120px); }
146
146
  .modal-body { max-height: 140px; }
147
147
  }
@@ -13,7 +13,7 @@
13
13
  border-top: 1px solid color(haze);
14
14
  box-sizing: border-box;
15
15
  display: table;
16
- height: 54px;
16
+ height: calc(54px + env(safe-area-inset-bottom));
17
17
  line-height: 1;
18
18
  table-layout: fixed;
19
19
  width: 100%;
@@ -23,8 +23,9 @@
23
23
  float: none;
24
24
  font-size: text-size(xxs);
25
25
  font-weight: text-weight(semibold);
26
+ padding-top: 9px;
26
27
  text-align: center;
27
- vertical-align: middle;
28
+ vertical-align: top;
28
29
  width: 1%;
29
30
 
30
31
  &.primary {
@@ -55,6 +56,6 @@
55
56
 
56
57
  // Media Queries
57
58
  // ==================================================
58
- @media only screen and (min-width: 768px) {
59
+ @media only screen and (min-width: 813px) {
59
60
  .navbar { display: none; }
60
61
  }
@@ -43,7 +43,7 @@
43
43
  text-align: center;
44
44
  }
45
45
  .sidebar-body,
46
- .sidebar-subtitle { padding: 0 15px; }
46
+ .sidebar-subtitle { padding: 0 calc(15px + env(safe-area-inset-right) + env(safe-area-inset-left)); }
47
47
  .sidebar-subtitle {
48
48
  background: color(light-haze);
49
49
  border-bottom: 1px solid;
@@ -57,7 +57,7 @@
57
57
  border-bottom-width: 1px;
58
58
  box-sizing: border-box;
59
59
  display: block;
60
- padding: 20px 15px;
60
+ padding: 20px calc(15px + env(safe-area-inset-right) + env(safe-area-inset-left));
61
61
  width: 100%;
62
62
  }
63
63
  > ul {
@@ -66,7 +66,7 @@
66
66
  border-bottom-style: solid;
67
67
  border-bottom-width: 1px;
68
68
  list-style: none;
69
- padding: 15px 30px;
69
+ padding: 15px calc(30px + env(safe-area-inset-right) + env(safe-area-inset-left));
70
70
 
71
71
  a {
72
72
  display: block;
@@ -56,7 +56,7 @@
56
56
 
57
57
  // Media Queries
58
58
  // ==================================================
59
- @media only screen and (max-width: 767px) {
59
+ @media only screen and (max-width: 812px) {
60
60
  .subheader {
61
61
  &.absolute,
62
62
  &.fixed {
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.6
4
+ version: 16.1.7
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-25 00:00:00.000000000 Z
11
+ date: 2018-05-26 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails