ustyle 1.12.6 → 1.14.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.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/dist/ustyle-content.css +1 -1
  3. data/dist/ustyle-latest.css +1 -1
  4. data/dist/ustyle.js +0 -301
  5. data/dist/ustyle.json +1 -1
  6. data/dist/ustyle.min.js +1 -1
  7. data/lib/ustyle/version.rb +1 -1
  8. data/package.json +1 -1
  9. data/styleguide/assets/images/favicon/android-chrome-192x192.png +0 -0
  10. data/styleguide/assets/images/favicon/android-chrome-512x512.png +0 -0
  11. data/styleguide/assets/images/favicon/apple-touch-icon-114x114.png +0 -0
  12. data/styleguide/assets/images/favicon/apple-touch-icon-120x120.png +0 -0
  13. data/styleguide/assets/images/favicon/apple-touch-icon-144x144.png +0 -0
  14. data/styleguide/assets/images/favicon/apple-touch-icon-152x152.png +0 -0
  15. data/styleguide/assets/images/favicon/apple-touch-icon-180x180.png +0 -0
  16. data/styleguide/assets/images/favicon/apple-touch-icon-57x57.png +0 -0
  17. data/styleguide/assets/images/favicon/apple-touch-icon-60x60.png +0 -0
  18. data/styleguide/assets/images/favicon/apple-touch-icon-72x72.png +0 -0
  19. data/styleguide/assets/images/favicon/apple-touch-icon-76x76.png +0 -0
  20. data/styleguide/assets/images/favicon/apple-touch-icon.png +0 -0
  21. data/styleguide/assets/images/favicon/browserconfig.xml +9 -0
  22. data/styleguide/assets/images/favicon/favicon-16x16.png +0 -0
  23. data/styleguide/assets/images/favicon/favicon-32x32.png +0 -0
  24. data/styleguide/assets/images/favicon/favicon.ico +0 -0
  25. data/styleguide/assets/images/favicon/manifest.json +18 -0
  26. data/styleguide/assets/images/favicon/mstile-144x144.png +0 -0
  27. data/styleguide/assets/images/favicon/mstile-150x150.png +0 -0
  28. data/styleguide/assets/images/favicon/mstile-310x150.png +0 -0
  29. data/styleguide/assets/images/favicon/mstile-310x310.png +0 -0
  30. data/styleguide/assets/images/favicon/mstile-70x70.png +0 -0
  31. data/styleguide/assets/images/favicon/safari-pinned-tab.svg +46 -0
  32. data/styleguide/assets/javascripts/app.js +2 -6
  33. data/styleguide/content/design/typography.md +64 -26
  34. data/styleguide/partials/_head.tpl +6 -0
  35. data/vendor/assets/javascripts/ustyle.js +1 -4
  36. data/vendor/assets/stylesheets/ustyle/_all.scss +0 -1
  37. data/vendor/assets/stylesheets/ustyle/_global.scss +0 -4
  38. data/vendor/assets/stylesheets/ustyle/basics/_variables.scss +2 -24
  39. data/vendor/assets/stylesheets/ustyle/components/_tabs.scss +0 -2
  40. metadata +25 -11
  41. data/vendor/assets/javascripts/ustyle/anchor.js +0 -300
  42. data/vendor/assets/javascripts/ustyle/login/login.js +0 -165
  43. data/vendor/assets/javascripts/ustyle/login/password-helper.js +0 -151
  44. data/vendor/assets/stylesheets/ustyle/basics/_font-face-ie.scss +0 -31
  45. data/vendor/assets/stylesheets/ustyle/basics/_font-face.scss +0 -31
  46. data/vendor/assets/stylesheets/ustyle/components/_anchor.scss +0 -134
  47. data/vendor/assets/stylesheets/ustyle/login/_base.scss +0 -81
  48. data/vendor/assets/stylesheets/ustyle/login/_password-help.scss +0 -61
  49. data/vendor/assets/stylesheets/ustyle/login/_social.scss +0 -63
@@ -1,134 +0,0 @@
1
- // @page Pattern Library/JavaScript
2
- // @name Anchor
3
- //
4
- // @description
5
- // Anchor is a naive implementation of Tether by HubSpot. It creates an independent dropdown that is "anchored" to the bottom of the target element.
6
- // We've decided to only support IE9+, as the uses of Anchor throughout uSwitch are for progressive enhancement.
7
- //
8
- // @javascript
9
- // var anchor = new Anchor({
10
- // classPrefix: "us-anchor"
11
- // openEvent: "click"
12
- // showClose: true
13
- // isAjax: false
14
- // });
15
- //
16
- // @markup
17
- // <span class='us-btn js-example-anchor'>Click me!</span>
18
- // <div class='us-anchor__target js-example-anchor__target'>
19
- // <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>
20
- // </div>
21
-
22
- @keyframes anchor-show {
23
- 0% {
24
- transform: scale(0) translateZ(0);
25
- }
26
-
27
- 100% {
28
- transform: scale(1) translateZ(0);
29
- }
30
- }
31
-
32
- .us-anchor,
33
- .us-anchor__target {
34
- display: none;
35
- }
36
-
37
- .us-anchor {
38
- right: 0;
39
- opacity: .999;
40
- transform: translateZ(0);
41
- transition: opacity 300ms;
42
-
43
- @include respond-to(small-tablet) {
44
- right: auto;
45
- }
46
-
47
- .us-anchor__target {
48
- display: block;
49
- }
50
- }
51
-
52
- .us-anchor--open {
53
- display: block;
54
-
55
- .us-anchor__content {
56
- animation: anchor-show 300ms forwards;
57
- }
58
- }
59
-
60
- .us-anchor--after-open {
61
- opacity: 1;
62
- transition: none;
63
- }
64
-
65
- .us-anchor__content {
66
- @include normal-font;
67
- position: relative;
68
- max-width: 98%;
69
- padding: $gutter-width / 2 $gutter-width / 2 $gutter-width;
70
- margin-right: 1%;
71
- margin-left: 1%;
72
- background-color: #fff;
73
- border: 1px solid $c-typegrey;
74
- border-radius: 8px;
75
- transition: transform 300ms 100ms;
76
- transform-origin: 50%, -12px;
77
-
78
- @include respond-to(small-tablet, true) {
79
- padding: $gutter-width / 1.25 $gutter-width / 1.5 $gutter-width;
80
- margin: 0;
81
- }
82
-
83
- .us-anchor--bottom & {
84
- transform-origin: 50%, calc(100% + -12px);
85
- }
86
- }
87
-
88
- .us-anchor__arrow {
89
- position: absolute;
90
- z-index: 5;
91
- margin-left: -17.5px;
92
-
93
- .us-anchor--top & {
94
- @include arrow(35px, 15px, up, $c-typegrey);
95
- top: -15px;
96
- }
97
-
98
- .us-anchor--bottom & {
99
- @include arrow(35px, 15px, down, $c-typegrey);
100
- bottom: -15px;
101
- }
102
- }
103
-
104
- .us-anchor__arrow-inner {
105
- position: absolute;
106
- left: -17px;
107
-
108
- .us-anchor--top & {
109
- @include arrow(35px, 15px, up, #fff);
110
- top: 2px;
111
- }
112
-
113
- .us-anchor--bottom & {
114
- @include arrow(35px, 15px, down, #fff);
115
- bottom: 2px;
116
- }
117
- }
118
-
119
- .us-anchor__close-button {
120
- @include link-colors(#fff, #fff, #fff, #fff);
121
- position: absolute;
122
- top: -7.5px;
123
- right: -7.5px;
124
- width: 25px;
125
- height: 25px;
126
- text-align: center;
127
- background-color: #000;
128
- border-radius: 50%;
129
-
130
- &:before {
131
- font-size: 2em;
132
- content: "\00d7";
133
- }
134
- }
@@ -1,81 +0,0 @@
1
- // These are the stylings for sign up/sign in
2
- .us-login__hero--signup {
3
- @include respond-to(tablet, true) {
4
- margin-bottom: 0;
5
- }
6
- }
7
-
8
- .us-login__hero-title {
9
- margin-bottom: 1em;
10
- }
11
-
12
- .us-login {
13
- position: relative;
14
- width: 100%;
15
-
16
- @include respond-to(small-tablet, true) {
17
- width: em(340px);
18
- }
19
- }
20
-
21
- .us-login__container {
22
- position: relative;
23
- overflow: hidden;
24
-
25
- @if $html-grid-classes == false {
26
- * {
27
- box-sizing: border-box;
28
- }
29
-
30
- a {
31
- text-decoration: none;
32
- transition: color 333ms, border-color 333ms;
33
- }
34
- }
35
-
36
- .trailered {
37
- margin-bottom: $gutter-width / 2;
38
- }
39
- }
40
-
41
- .us-login__form {
42
- display: none;
43
- transition: transform 300ms;
44
-
45
- &.login-state--active {
46
- display: block;
47
- }
48
-
49
- .us-login__input {
50
- display: block;
51
- width: 100%;
52
- }
53
- }
54
-
55
- .us-login__title {
56
- @extend %heading-3;
57
- color: $c-typegrey;
58
- }
59
-
60
- .us-login__additional-link {
61
- @extend %small-font;
62
- @include link-colors($c-typegrey-2, $c-typecyan, $c-typegrey-2, $c-typegrey-2);
63
- display: block;
64
- }
65
-
66
- .us-login__extra {
67
- padding: 1.5em $gutter-width / 2;
68
- color: $c-typegrey-2;
69
- }
70
-
71
- .us-login__small-text {
72
- @extend %small-font;
73
- margin-top: .5em;
74
- color: $c-typegrey-2;
75
- }
76
-
77
- .us-login__newsletter {
78
- input {
79
- margin-right: .5em;
80
- }
81
- }
@@ -1,61 +0,0 @@
1
- .pass-helper__wrapper {
2
- > input {
3
- position: relative;
4
- z-index: 1;
5
- background-color: transparent;
6
- }
7
- }
8
-
9
- .pass-helper__meter {
10
- position: absolute;
11
- top: 0;
12
- right: 0;
13
- bottom: 0;
14
- left: 0;
15
- z-index: 0;
16
- background-color: #fff;
17
- border-radius: 3px;
18
-
19
- div {
20
- height: 100%;
21
- text-indent: -999em;
22
- transition: all 300ms ease-in-out;
23
- }
24
-
25
- .very-weak {
26
- width: 25%;
27
- background-color: #ffd;
28
- }
29
-
30
- .weak {
31
- width: 50%;
32
- background-color: #fddfd0;
33
- }
34
-
35
- .medium {
36
- width: 75%;
37
- background-color: #fff6c5;
38
- }
39
-
40
- .strong {
41
- width: 100%;
42
- background-color: #dffec2;
43
- }
44
- }
45
-
46
- .pass-helper__show-hide {
47
- position: absolute;
48
- top: 50%;
49
- right: .5em;
50
- z-index: 2;
51
- margin-top: -.5em;
52
- font-size: 12px;
53
- line-height: 1;
54
- color: $c-typecyan;
55
- text-transform: uppercase;
56
- cursor: pointer;
57
-
58
- @include respond-to(mobile) {
59
- font-size: 10px;
60
- }
61
- }
@@ -1,63 +0,0 @@
1
- // Social buttons - shared across login containers
2
- .us-social__container {
3
- @extend %clearfix;
4
- position: relative;
5
- }
6
-
7
- .us-social__cta {
8
- @extend %reset-box-model;
9
- padding-top: $gutter-width / 4;
10
- padding-bottom: $gutter-width / 4;
11
- }
12
-
13
- .us-social__buttons {
14
- position: absolute;
15
- top: 0;
16
- right: 0;
17
- }
18
-
19
- .us-social__btn {
20
- @include link-colors($c-blue, $c-typecyan, $c-blue, $c-blue, darken($c-blue, 15%));
21
- display: block;
22
- float: left;
23
- margin-left: .5em;
24
- text-decoration: none;
25
-
26
- &:hover {
27
- .us-social__btn-text {
28
- max-width: 400px;
29
- margin-left: 5px;
30
- }
31
- }
32
- }
33
-
34
- .us-social__btn-text,
35
- .us-social__btn-icon {
36
- position: relative;
37
- vertical-align: middle;
38
- }
39
-
40
- .us-social__btn-text {
41
- @extend %small-font;
42
- z-index: 1;
43
- display: inline-block;
44
- max-width: 0;
45
- overflow: hidden;
46
- transition: max-width 300ms;
47
- }
48
-
49
- .us-social__btn-icon {
50
- z-index: 5;
51
- font-size: 2em;
52
- line-height: 1.15em;
53
- }
54
-
55
- $social-buttons: ("facebook", #3b5998), ("google", #e74c3c), ("twitter", #55acee);
56
-
57
- @each $button in $social-buttons {
58
- .us-social__btn--#{nth($button, 1)} {
59
- .us-social__btn-icon {
60
- color: nth($button, 2);
61
- }
62
- }
63
- }