active_frontend 9.0.1 → 9.1.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
  SHA1:
3
- metadata.gz: 5e80837105b26e194a38e1948c033fee88ef67ec
4
- data.tar.gz: 997707d37ada39f0051d008dd8d81a96af4d0678
3
+ metadata.gz: a8221bf26788b952840f0715397c855ec0e92ca9
4
+ data.tar.gz: d08d666dae82ae7e551e510d597d0400d93afb34
5
5
  SHA512:
6
- metadata.gz: c04320f46d2c0a087f5c7ee1d60ad080eadbec193fa84c6a5f7d2bb988125f16aa01b8c6a9e9ddb955b4773f94dc08697203ab0b2c83de727f14f8ddaa7a90ea
7
- data.tar.gz: ca65a5a3168d639b9df33d713617dc33fbcc46f3c5e8e5a909984134bb055540f71e4a9949fc793d98f315d7e63427c9738ddbcf7084134ee731ca08f049e151
6
+ metadata.gz: 2f7fcedc6dec72ccb62e5d8fdfb19ee2db2649bb19c645955da7fee90fd1e95d941235e2fa2da4419cfa797ed2de262368925ce484a05358d5403a32f406d78c
7
+ data.tar.gz: 98fb8da1a59eebf77a17f95176dc65fb23413a670ae8d93a8c3b3979090cb59f41e3754886d1462a6a1a28c00e0d32fac03b8600924fdb1c545b4e63bc8db575
data/README.md CHANGED
@@ -66,6 +66,7 @@ Add the CSS files you want to include:
66
66
  *= require swoggle.css
67
67
  *= require table.css
68
68
  *= require timepicker.css
69
+ *= require toolbar.css
69
70
  *= require tooltip.css
70
71
  *= require popover.css (place after tooltip)
71
72
  *= require transition.css
@@ -1,3 +1,3 @@
1
1
  module ActiveFrontend
2
- VERSION = "9.0.1"
2
+ VERSION = "9.1.0"
3
3
  end
@@ -7,11 +7,12 @@
7
7
  /* # Canvas
8
8
  ================================================== */
9
9
  .canvas {
10
- height: 100%;
11
10
  min-height: 100%;
11
+ height: 100%;
12
12
  }
13
13
  .canvas-content,
14
- .canvas-sidebar {
14
+ .canvas-sidebar,
15
+ .canvas-toolbar {
15
16
  box-sizing: border-box;
16
17
  display: block;
17
18
  float: left;
@@ -29,24 +30,38 @@
29
30
  max-width: calc(100% - 280px);
30
31
  width: calc(100% - 280px);
31
32
  }
33
+ .canvas-content.canvas-content-with-toolbar {
34
+ max-width: calc(100% - 55px);
35
+ width: calc(100% - 55px);
36
+ }
37
+ .canvas-content.canvas-content-with-sidebar-and-toolbar {
38
+ max-width: calc(100% - 335px);
39
+ width: calc(100% - 335px);
40
+ }
32
41
  .canvas-with-header > .canvas-content,
33
- .canvas-with-header > .canvas-sidebar { margin-top: 65px; }
42
+ .canvas-with-header > .canvas-sidebar,
43
+ .canvas-with-header > .canvas-toolbar { margin-top: 65px; }
34
44
  .canvas-with-footer > .canvas-content { padding-bottom: 90px; }
35
45
  .canvas-sidebar {
36
46
  max-width: 280px;
37
47
  width: 280px;
38
48
  }
39
- .canvas-with-header .sidebar {
40
- height: calc(100% - 60px);
41
- max-height: calc(100% - 60px);
49
+ .canvas-toolbar {
50
+ max-width: 55px;
51
+ width: 55px;
52
+ }
53
+ .canvas-with-header .sidebar,
54
+ .canvas-with-header .toolbar {
55
+ max-height: calc(100% - 65px);
56
+ height: calc(100% - 65px);
42
57
  }
43
58
 
44
59
  /* # Alternate
45
60
  ================================================== */
46
61
  .canvas-app.canvas-with-header > .canvas-sidebar { margin-top: 0; }
47
62
  .canvas-app.canvas-with-header .sidebar {
48
- height: 100%;
49
63
  max-height: 100%;
64
+ height: 100%;
50
65
  }
51
66
 
52
67
  /* # Media Queries
@@ -56,6 +71,10 @@
56
71
  max-width: calc(100% - 250px);
57
72
  width: calc(100% - 250px);
58
73
  }
74
+ .canvas-content.canvas-content-with-sidebar-and-toolbar {
75
+ max-width: calc(100% - 305px);
76
+ width: calc(100% - 305px);
77
+ }
59
78
  .canvas-sidebar {
60
79
  max-width: 250px;
61
80
  width: 250px;
@@ -66,6 +85,10 @@
66
85
  max-width: calc(100% - 220px);
67
86
  width: calc(100% - 220px);
68
87
  }
88
+ .canvas-content.canvas-content-with-sidebar-and-toolbar {
89
+ max-width: calc(100% - 275px);
90
+ width: calc(100% - 275px);
91
+ }
69
92
  .canvas-sidebar {
70
93
  max-width: 220px;
71
94
  width: 220px;
@@ -76,12 +99,33 @@
76
99
  max-width: 100%;
77
100
  width: 100%;
78
101
  }
102
+ .canvas-content.canvas-content-with-toolbar,
103
+ .canvas-content.canvas-content-with-sidebar-and-toolbar {
104
+ max-width: calc(100% - 55px);
105
+ width: calc(100% - 55px);
106
+ }
79
107
  .canvas-sidebar { display: none; }
80
108
  }
81
109
  @media only screen and (max-width: 767px) {
82
- .canvas-with-header > .canvas-content {
83
- margin-top: 50px;
84
- padding-bottom: 50px;
110
+ .canvas-content.canvas-content-with-toolbar,
111
+ .canvas-content.canvas-content-with-sidebar-and-toolbar {
112
+ max-width: calc(100% - 45px);
113
+ width: calc(100% - 45px);
85
114
  }
115
+ .canvas-toolbar {
116
+ max-width: 45px;
117
+ width: 45px;
118
+ }
119
+ .canvas-with-header > .canvas-content,
120
+ .canvas-with-header > .canvas-toolbar { margin-top: 50px; }
121
+ .canvas-with-header > .canvas-content { padding-bottom: 50px; }
86
122
  .canvas-with-footer > .canvas-content { padding-bottom: 80px; }
123
+ .canvas-with-header .toolbar {
124
+ max-height: calc(100% - 50px);
125
+ height: calc(100% - 50px);
126
+ }
127
+ .canvas-toolbar-with-navbar .toolbar {
128
+ max-height: calc(100% - 99px);
129
+ height: calc(100% - 99px);
130
+ }
87
131
  }
@@ -89,6 +89,15 @@
89
89
  color: $color-black-light;
90
90
  text-decoration: none;
91
91
  }
92
+ .header-nav > li.lined > a {
93
+ border-radius: 0 !important;
94
+ border-bottom: 3px solid transparent;
95
+ padding-bottom: 24px;
96
+ }
97
+ .header-nav > li.lined > a:hover,
98
+ .header-nav > li.lined > a.active,
99
+ .header-nav > li.lined > a:active,
100
+ .header-nav > li.lined > a:focus { border-color: $color-primary; }
92
101
  .header-nav-alt > li > a { padding: 10px 0 9px 0; }
93
102
  .header-toolchain > li > a {
94
103
  font-size: 26px;
@@ -69,6 +69,7 @@
69
69
  width: 100%;
70
70
  }
71
71
  .timepicker-widget > table td > a:hover,
72
+ .timepicker-widget > table td > a.active,
72
73
  .timepicker-widget > table td > a:active,
73
74
  .timepicker-widget > table td > a:focus {
74
75
  color: $color-primary;
@@ -0,0 +1,80 @@
1
+ /* Table of Contents
2
+ ==================================================
3
+ # Toolbar
4
+ # Colors
5
+ # Media Queries */
6
+
7
+ /* # Toolbar
8
+ ================================================== */
9
+ .toolbar {
10
+ background: $color-white;
11
+ border-right: 1px solid $color-haze;
12
+ box-sizing: border-box;
13
+ height: 100%;
14
+ min-width: 55px;
15
+ -webkit-overflow-scrolling: touch;
16
+ overflow-scrolling: touch;
17
+ overflow-x: hidden;
18
+ overflow-y: auto;
19
+ position: fixed;
20
+ width: 55px;
21
+ }
22
+ .toolbar-alt {
23
+ border-left: 1px solid $color-haze;
24
+ border-right: 0;
25
+ }
26
+ .toolbar > a {
27
+ background: transparent;
28
+ box-sizing: border-box;
29
+ color: $color-black-light;
30
+ display: block;
31
+ font-size: 21px;
32
+ height: 55px;
33
+ line-height: 60px;
34
+ text-align: center;
35
+ width: 55px;
36
+ }
37
+ .toolbar > a:hover,
38
+ .toolbar > a.active,
39
+ .toolbar > a:active
40
+ .toolbar > a:focus {
41
+ background: $color-primary;
42
+ color: $color-white;
43
+ }
44
+
45
+ /* # Colors
46
+ ================================================== */
47
+ .toolbar-dark,
48
+ .toolbar-dark.toolbar-alt {
49
+ background: $color-black;
50
+ border-color: $color-black-dark;
51
+ }
52
+ .toolbar-dark > a { color: $color-gray; }
53
+ .toolbar-light,
54
+ .toolbar-light.toolbar-alt {
55
+ background: $color-haze-light;
56
+ border-color: $color-haze-dark;
57
+ }
58
+
59
+ /* # Media Queries
60
+ ================================================== */
61
+ @media only screen and (max-width: 767px) {
62
+ .toolbar {
63
+ min-width: 45px;
64
+ width: 45px;
65
+ }
66
+ .toolbar > a {
67
+ height: 45px;
68
+ line-height: 49px;
69
+ width: 45px;
70
+ }
71
+ }
72
+ @media
73
+ only screen and (-webkit-min-device-pixel-ratio: 2),
74
+ only screen and ( min--moz-device-pixel-ratio: 2),
75
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
76
+ only screen and ( min-device-pixel-ratio: 2),
77
+ only screen and ( min-resolution: 192dpi),
78
+ only screen and ( min-resolution: 2dppx) {
79
+ .toolbar { border-width: 0.5px; }
80
+ }
@@ -55,6 +55,7 @@ $color-primary: $color-blue;
55
55
  @import 'swoggle';
56
56
  @import 'table';
57
57
  @import 'timepicker';
58
+ @import 'toolbar';
58
59
  @import 'tooltip';
59
60
  @import 'transition';
60
61
  @import 'trunk';
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: 9.0.1
4
+ version: 9.1.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: 2015-08-06 00:00:00.000000000 Z
11
+ date: 2015-08-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -150,6 +150,7 @@ files:
150
150
  - vendor/assets/stylesheets/_swoggle.scss
151
151
  - vendor/assets/stylesheets/_table.scss
152
152
  - vendor/assets/stylesheets/_timepicker.scss
153
+ - vendor/assets/stylesheets/_toolbar.scss
153
154
  - vendor/assets/stylesheets/_tooltip.scss
154
155
  - vendor/assets/stylesheets/_transition.scss
155
156
  - vendor/assets/stylesheets/_trunk.scss