tungsten 0.1.46 → 0.1.47
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 +4 -4
- data/app/assets/stylesheets/tungsten/components/_copy-input.scss +6 -0
- data/app/assets/stylesheets/tungsten/components/_progress-bar.scss +64 -56
- data/app/assets/stylesheets/tungsten/core/_globals.scss +1 -3
- data/app/assets/stylesheets/tungsten/core/_sections.scss +21 -0
- data/app/helpers/tungsten/form_helper.rb +1 -0
- data/app/helpers/tungsten/progress_bar_helper.rb +7 -6
- data/app/helpers/tungsten/section_helper.rb +16 -4
- data/lib/tungsten/version.rb +1 -1
- data/public/{code-0.1.46.js → code-0.1.47.js} +1 -1
- data/public/{code-0.1.46.js.gz → code-0.1.47.js.gz} +0 -0
- data/public/{code-0.1.46.map.json → code-0.1.47.map.json} +0 -0
- data/public/{tungsten-0.1.46.css → tungsten-0.1.47.css} +51 -30
- data/public/tungsten-0.1.47.css.gz +0 -0
- data/public/{tungsten-0.1.46.js → tungsten-0.1.47.js} +1 -1
- data/public/{tungsten-0.1.46.js.gz → tungsten-0.1.47.js.gz} +0 -0
- data/public/{tungsten-0.1.46.map.json → tungsten-0.1.47.map.json} +0 -0
- metadata +10 -12
- data/public/code-0.1.45.js +0 -17927
- data/public/tungsten-0.1.45.js +0 -6609
- data/public/tungsten-0.1.46.css.gz +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 79baf52fa69ab8f77a4feefd5f2c7efdab76f3c0
|
|
4
|
+
data.tar.gz: 1b0f8595b5d5dfb25557c7f01c64818997562831
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1e338023b82003c5e870bca90188dbbfc2bd07d28bd25d386090b1c229691dcdd7cc983151629c4a45580e666b9492c15d2c333888398f8383da52da177865ed
|
|
7
|
+
data.tar.gz: 56099352589cfc6fada25aa10991d1c6123057dcd7537a4357c8e6cf9fbf8d70b51f921f5bceba7955fbed2cc4b2a1993abc8512aed6be1329b5eb04e07cd454
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
background: linear-gradient( 60deg, rgba(#fff, 0), #fff 30%)
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
+
|
|
26
|
+
// Magic Number: Push absolute positioned copy-button
|
|
27
|
+
// down to account for label on top
|
|
28
|
+
.standard-label + .button-wrapper .copy-button {
|
|
29
|
+
top: 1.75em;
|
|
30
|
+
}
|
|
25
31
|
}
|
|
26
32
|
|
|
27
33
|
.copy-button {
|
|
@@ -12,74 +12,82 @@
|
|
|
12
12
|
|
|
13
13
|
.progress-bar-wrapper {
|
|
14
14
|
padding: 10px 0;
|
|
15
|
-
@include at-least(500px){
|
|
16
|
-
display: table-row;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.progress-bar-label {
|
|
21
|
-
padding-bottom: 5px;
|
|
22
|
-
@include at-least(500px){
|
|
23
|
-
display: table-cell;
|
|
24
|
-
white-space: nowrap;
|
|
25
|
-
word-wrap: break-word;
|
|
26
|
-
padding: 10px 15px 10px 0;
|
|
27
|
-
}
|
|
28
15
|
}
|
|
29
16
|
|
|
17
|
+
// Progress bar
|
|
30
18
|
.progress-bar {
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
display: flex;
|
|
20
|
+
width: 100%;
|
|
21
|
+
|
|
22
|
+
&-outline {
|
|
23
|
+
background-color: rgba(#fff, 0);
|
|
24
|
+
border-radius: 20px;
|
|
25
|
+
box-shadow: $input-shadow;
|
|
26
|
+
max-width: 350px;
|
|
27
|
+
padding: 2px;
|
|
28
|
+
position: relative;
|
|
29
|
+
transition: background-color .5s $timing;
|
|
33
30
|
width: 100%;
|
|
34
|
-
|
|
35
|
-
}
|
|
31
|
+
top: 1px;
|
|
36
32
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
padding: 2px;
|
|
42
|
-
background-color: rgba(#fff, 0);
|
|
43
|
-
transition: background-color .5s $timing;
|
|
44
|
-
position: relative;
|
|
45
|
-
top: 1px;
|
|
46
|
-
}
|
|
33
|
+
&.full-width {
|
|
34
|
+
max-width: 100%;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
47
37
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
38
|
+
&-fill {
|
|
39
|
+
background-color: $blue-04;
|
|
40
|
+
height: .7em;
|
|
41
|
+
border-radius: 10px;
|
|
42
|
+
position: relative;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
animation: expand-width 2s $timing;
|
|
45
|
+
transition: width 1.5s $timing;
|
|
46
|
+
box-shadow: 0 0 1px 1px rgba(#fff, .2) inset;
|
|
47
|
+
transition: background-color .5s $timing;
|
|
57
48
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
49
|
+
&:before {
|
|
50
|
+
background-size: 50px 50px;
|
|
51
|
+
animation: move-background 2s linear infinite;
|
|
52
|
+
content: "";
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: 0; left: 0; bottom: 0; right: 0;
|
|
55
|
+
background-image: linear-gradient(
|
|
56
|
+
-45deg,
|
|
57
|
+
rgba(#fff, .15) 25%,
|
|
58
|
+
transparent 25%,
|
|
59
|
+
transparent 50%,
|
|
60
|
+
rgba(#fff, .15) 50%,
|
|
61
|
+
rgba(#fff, .15) 75%,
|
|
62
|
+
transparent 75%,
|
|
63
|
+
transparent
|
|
64
|
+
);
|
|
65
|
+
}
|
|
74
66
|
}
|
|
67
|
+
}
|
|
75
68
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
69
|
+
// Progress bar with label
|
|
70
|
+
.progress-bar-wrapper.with-label {
|
|
71
|
+
@include at-least(500px){
|
|
72
|
+
display: table-row;
|
|
73
|
+
}
|
|
74
|
+
.progress-bar-label {
|
|
75
|
+
padding-bottom: 5px;
|
|
76
|
+
@include at-least(500px){
|
|
77
|
+
display: table-cell;
|
|
78
|
+
white-space: nowrap;
|
|
79
|
+
word-wrap: break-word;
|
|
80
|
+
padding: 10px 15px 10px 0;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
.progress-bar {
|
|
84
|
+
@include at-least(500px){
|
|
85
|
+
display: table-cell;
|
|
86
|
+
}
|
|
80
87
|
}
|
|
81
88
|
}
|
|
82
89
|
|
|
90
|
+
// Progress bar status fill color
|
|
83
91
|
@mixin progress-bar-status($color, $opacity: 0.2) {
|
|
84
92
|
.progress-bar-outline{ background-color: rgba($color, $opacity); }
|
|
85
93
|
.progress-bar-fill { background: $color; }
|
|
@@ -7,6 +7,20 @@
|
|
|
7
7
|
flex-wrap: wrap;
|
|
8
8
|
padding-bottom: $card-padding;
|
|
9
9
|
|
|
10
|
+
&:target {
|
|
11
|
+
position: relative;
|
|
12
|
+
|
|
13
|
+
&:after {
|
|
14
|
+
content: "";
|
|
15
|
+
background-color: #FFFFDD;
|
|
16
|
+
position: absolute;
|
|
17
|
+
top: 0; bottom: 0; right: 0; left: 0;
|
|
18
|
+
z-index: -1;
|
|
19
|
+
box-shadow: 0 0 10px 2px #FFFFDD;
|
|
20
|
+
animation: fade-out $timing 2.5s forwards;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
10
24
|
~ .app-section {
|
|
11
25
|
border-top: 1px solid $gray-04;
|
|
12
26
|
padding-top: $card-padding;
|
|
@@ -24,6 +38,13 @@
|
|
|
24
38
|
}
|
|
25
39
|
}
|
|
26
40
|
|
|
41
|
+
&-title-anchor {
|
|
42
|
+
&, &:hover {
|
|
43
|
+
color: inherit;
|
|
44
|
+
text-decoration: none;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
27
48
|
&-content {
|
|
28
49
|
flex: 2 1 500px;
|
|
29
50
|
@include at-least($large-width) {
|
|
@@ -12,7 +12,8 @@ module Tungsten
|
|
|
12
12
|
|
|
13
13
|
label = block_given? ? capture(&block) : options.delete(:label)
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
outline_class = "progress-bar-outline #{ 'full-width' if options[:full_width] }".strip
|
|
16
|
+
fill_class = "progress-bar-fill #{options.delete(:color)}".strip
|
|
16
17
|
|
|
17
18
|
set_aria! options, {
|
|
18
19
|
role: 'progressbar',
|
|
@@ -22,13 +23,13 @@ module Tungsten
|
|
|
22
23
|
valuetext: strip_tags(label)
|
|
23
24
|
}
|
|
24
25
|
|
|
25
|
-
content_tag( :div, class: "progress-bar-wrapper" ) {
|
|
26
|
+
content_tag( :div, class: "progress-bar-wrapper #{ 'with-label' if label }" ) {
|
|
26
27
|
concat content_tag( :div, class: 'progress-bar-label') {
|
|
27
|
-
concat content_tag( :div, class: 'progress-bar-label-content' ) { label }
|
|
28
|
-
}
|
|
28
|
+
concat content_tag( :div, class: 'progress-bar-label-content' ) { label }
|
|
29
|
+
} if label
|
|
29
30
|
concat content_tag( :div, options ) {
|
|
30
|
-
concat content_tag( :div, class:
|
|
31
|
-
tag.div class:
|
|
31
|
+
concat content_tag( :div, class: outline_class ) {
|
|
32
|
+
tag.div class: fill_class, style: "width: #{completion}%"
|
|
32
33
|
}
|
|
33
34
|
concat content_tag( :div, class: 'progress-bar-percentage') { "#{completion}%" } if options[:show_percentage]
|
|
34
35
|
}
|
|
@@ -3,8 +3,15 @@ module Tungsten
|
|
|
3
3
|
class Section < Tungsten::Helper
|
|
4
4
|
|
|
5
5
|
def initialize( title = nil, options = {} )
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
if title.is_a? Hash
|
|
7
|
+
@options = title
|
|
8
|
+
@title = nil
|
|
9
|
+
else
|
|
10
|
+
@options = options
|
|
11
|
+
@title = title
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
@id = @options[:id]
|
|
8
15
|
end
|
|
9
16
|
|
|
10
17
|
def display( body )
|
|
@@ -18,8 +25,13 @@ module Tungsten
|
|
|
18
25
|
def title( text = nil, options = {}, &block )
|
|
19
26
|
options[:class] = "app-section-title #{options[:class]}".strip
|
|
20
27
|
|
|
21
|
-
|
|
22
|
-
|
|
28
|
+
if text
|
|
29
|
+
text = content_tag( :a, text, href: "##{@id}", class: 'app-section-title-anchor' ) unless @id.nil?
|
|
30
|
+
text = content_tag( :h2, text, class: 'app-section-heading' )
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
tag = content_tag( :div, options ) {
|
|
34
|
+
concat text
|
|
23
35
|
concat content_tag( :div, class: 'app-section-description', &block) if block_given?
|
|
24
36
|
}
|
|
25
37
|
end
|
data/lib/tungsten/version.rb
CHANGED
|
Binary file
|
|
File without changes
|
|
@@ -1017,8 +1017,7 @@ a {
|
|
|
1017
1017
|
-webkit-text-decoration-color: rgba(0, 148, 253, 0.5);
|
|
1018
1018
|
text-decoration-color: rgba(0, 148, 253, 0.5);
|
|
1019
1019
|
-webkit-transition: color 0.25s;
|
|
1020
|
-
transition: color 0.25s;
|
|
1021
|
-
a, a:visited {
|
|
1020
|
+
transition: color 0.25s;
|
|
1022
1021
|
color: #0094fd; }
|
|
1023
1022
|
a:hover, a:focus, a:active {
|
|
1024
1023
|
color: #006dff; }
|
|
@@ -1085,6 +1084,20 @@ pre {
|
|
|
1085
1084
|
-ms-flex-wrap: wrap;
|
|
1086
1085
|
flex-wrap: wrap;
|
|
1087
1086
|
padding-bottom: 20px; }
|
|
1087
|
+
.app-section:target {
|
|
1088
|
+
position: relative; }
|
|
1089
|
+
.app-section:target:after {
|
|
1090
|
+
content: "";
|
|
1091
|
+
background-color: #FFFFDD;
|
|
1092
|
+
position: absolute;
|
|
1093
|
+
top: 0;
|
|
1094
|
+
bottom: 0;
|
|
1095
|
+
right: 0;
|
|
1096
|
+
left: 0;
|
|
1097
|
+
z-index: -1;
|
|
1098
|
+
box-shadow: 0 0 10px 2px #FFFFDD;
|
|
1099
|
+
-webkit-animation: fade-out cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards;
|
|
1100
|
+
animation: fade-out cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards; }
|
|
1088
1101
|
.app-section ~ .app-section {
|
|
1089
1102
|
border-top: 1px solid #dfe3e6;
|
|
1090
1103
|
padding-top: 20px; }
|
|
@@ -1098,6 +1111,9 @@ pre {
|
|
|
1098
1111
|
@media all and (min-width: 600px) {
|
|
1099
1112
|
.app-section-heading {
|
|
1100
1113
|
padding: 20px 0 0; } }
|
|
1114
|
+
.app-section-title-anchor, .app-section-title-anchor:hover {
|
|
1115
|
+
color: inherit;
|
|
1116
|
+
text-decoration: none; }
|
|
1101
1117
|
.app-section-content {
|
|
1102
1118
|
-webkit-box-flex: 2;
|
|
1103
1119
|
-ms-flex: 2 1 500px;
|
|
@@ -3530,6 +3546,8 @@ table.card {
|
|
|
3530
3546
|
box-shadow: none;
|
|
3531
3547
|
background: -webkit-linear-gradient(30deg, rgba(255, 255, 255, 0), #fff 30%);
|
|
3532
3548
|
background: linear-gradient(60deg, rgba(255, 255, 255, 0), #fff 30%); }
|
|
3549
|
+
.copy-input .standard-label + .button-wrapper .copy-button {
|
|
3550
|
+
top: 1.75em; }
|
|
3533
3551
|
|
|
3534
3552
|
.copy-button.copied svg {
|
|
3535
3553
|
fill: #5aa700; }
|
|
@@ -3562,35 +3580,25 @@ table.card {
|
|
|
3562
3580
|
width: 0; } }
|
|
3563
3581
|
.progress-bar-wrapper {
|
|
3564
3582
|
padding: 10px 0; }
|
|
3565
|
-
@media all and (min-width: 500px) {
|
|
3566
|
-
.progress-bar-wrapper {
|
|
3567
|
-
display: table-row; } }
|
|
3568
|
-
|
|
3569
|
-
.progress-bar-label {
|
|
3570
|
-
padding-bottom: 5px; }
|
|
3571
|
-
@media all and (min-width: 500px) {
|
|
3572
|
-
.progress-bar-label {
|
|
3573
|
-
display: table-cell;
|
|
3574
|
-
white-space: nowrap;
|
|
3575
|
-
word-wrap: break-word;
|
|
3576
|
-
padding: 10px 15px 10px 0; } }
|
|
3577
|
-
|
|
3578
|
-
@media all and (min-width: 500px) {
|
|
3579
|
-
.progress-bar {
|
|
3580
|
-
display: table-cell;
|
|
3581
|
-
width: 100%; } }
|
|
3582
3583
|
|
|
3584
|
+
.progress-bar {
|
|
3585
|
+
display: -webkit-box;
|
|
3586
|
+
display: -ms-flexbox;
|
|
3587
|
+
display: flex;
|
|
3588
|
+
width: 100%; }
|
|
3583
3589
|
.progress-bar-outline {
|
|
3584
|
-
|
|
3590
|
+
background-color: rgba(255, 255, 255, 0);
|
|
3585
3591
|
border-radius: 20px;
|
|
3586
3592
|
box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.2) inset, 0 0 0 transparent;
|
|
3593
|
+
max-width: 350px;
|
|
3587
3594
|
padding: 2px;
|
|
3588
|
-
|
|
3595
|
+
position: relative;
|
|
3589
3596
|
-webkit-transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3590
3597
|
transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3591
|
-
|
|
3598
|
+
width: 100%;
|
|
3592
3599
|
top: 1px; }
|
|
3593
|
-
|
|
3600
|
+
.progress-bar-outline.full-width {
|
|
3601
|
+
max-width: 100%; }
|
|
3594
3602
|
.progress-bar-fill {
|
|
3595
3603
|
background-color: #006dff;
|
|
3596
3604
|
height: .7em;
|
|
@@ -3599,9 +3607,11 @@ table.card {
|
|
|
3599
3607
|
overflow: hidden;
|
|
3600
3608
|
-webkit-animation: expand-width 2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3601
3609
|
animation: expand-width 2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3602
|
-
-webkit-transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1)
|
|
3603
|
-
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1)
|
|
3604
|
-
box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2) inset;
|
|
3610
|
+
-webkit-transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3611
|
+
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3612
|
+
box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2) inset;
|
|
3613
|
+
-webkit-transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3614
|
+
transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
3605
3615
|
.progress-bar-fill:before {
|
|
3606
3616
|
background-size: 50px 50px;
|
|
3607
3617
|
-webkit-animation: move-background 2s linear infinite;
|
|
@@ -3614,10 +3624,21 @@ table.card {
|
|
|
3614
3624
|
right: 0;
|
|
3615
3625
|
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
3616
3626
|
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3627
|
+
|
|
3628
|
+
@media all and (min-width: 500px) {
|
|
3629
|
+
.progress-bar-wrapper.with-label {
|
|
3630
|
+
display: table-row; } }
|
|
3631
|
+
.progress-bar-wrapper.with-label .progress-bar-label {
|
|
3632
|
+
padding-bottom: 5px; }
|
|
3633
|
+
@media all and (min-width: 500px) {
|
|
3634
|
+
.progress-bar-wrapper.with-label .progress-bar-label {
|
|
3635
|
+
display: table-cell;
|
|
3636
|
+
white-space: nowrap;
|
|
3637
|
+
word-wrap: break-word;
|
|
3638
|
+
padding: 10px 15px 10px 0; } }
|
|
3639
|
+
@media all and (min-width: 500px) {
|
|
3640
|
+
.progress-bar-wrapper.with-label .progress-bar {
|
|
3641
|
+
display: table-cell; } }
|
|
3621
3642
|
|
|
3622
3643
|
.progress-bar[data-status="complete"] .progress-bar-outline {
|
|
3623
3644
|
background-color: rgba(90, 167, 0, 0.2); }
|
|
Binary file
|