Commit 175b04754c28dbb7e6d51553697f3a203934447a
Committed by
GitHub
Merge pull request #1074 from tagliala/add-autoprefixer
Add autoprefixer
Showing
20 changed files
with
104 additions
and
132 deletions
@@ -251,7 +251,7 @@ | @@ -251,7 +251,7 @@ | ||
251 | "fill", | 251 | "fill", |
252 | "stroke" | 252 | "stroke" |
253 | ], | 253 | ], |
254 | - "property-no-vendor-prefix": null, | 254 | + "property-no-vendor-prefix": true, |
255 | "rule-empty-line-before": ["always", { | 255 | "rule-empty-line-before": ["always", { |
256 | "except": ["first-nested"], | 256 | "except": ["first-nested"], |
257 | "ignore": ["after-comment"] | 257 | "ignore": ["after-comment"] |
@@ -272,7 +272,7 @@ | @@ -272,7 +272,7 @@ | ||
272 | "selector-max-type": 5, | 272 | "selector-max-type": 5, |
273 | "selector-max-universal": 1, | 273 | "selector-max-universal": 1, |
274 | "selector-no-qualifying-type": null, | 274 | "selector-no-qualifying-type": null, |
275 | - "selector-no-vendor-prefix": null, | 275 | + "selector-no-vendor-prefix": true, |
276 | "selector-type-no-unknown": [true, { | 276 | "selector-type-no-unknown": [true, { |
277 | "ignoreTypes": [ | 277 | "ignoreTypes": [ |
278 | "/^md-/", | 278 | "/^md-/", |
@@ -287,6 +287,6 @@ | @@ -287,6 +287,6 @@ | ||
287 | "value-list-comma-newline-after": "always-multi-line", | 287 | "value-list-comma-newline-after": "always-multi-line", |
288 | "value-list-comma-newline-before": "never-multi-line", | 288 | "value-list-comma-newline-before": "never-multi-line", |
289 | "value-list-comma-space-after": "always-single-line", | 289 | "value-list-comma-space-after": "always-single-line", |
290 | - "value-no-vendor-prefix": null | 290 | + "value-no-vendor-prefix": true |
291 | } | 291 | } |
292 | } | 292 | } |
@@ -119,7 +119,7 @@ | @@ -119,7 +119,7 @@ | ||
119 | "ng-annotate-loader": "^0.1.1", | 119 | "ng-annotate-loader": "^0.1.1", |
120 | "ngtemplate-loader": "^1.3.1", | 120 | "ngtemplate-loader": "^1.3.1", |
121 | "node-sass": "^4.5.3", | 121 | "node-sass": "^4.5.3", |
122 | - "postcss-loader": "^0.13.0", | 122 | + "postcss-loader": "^3.0.0", |
123 | "raw-loader": "^0.5.1", | 123 | "raw-loader": "^0.5.1", |
124 | "react-hot-loader": "^3.0.0-beta.6", | 124 | "react-hot-loader": "^3.0.0-beta.6", |
125 | "sass-loader": "^4.0.2", | 125 | "sass-loader": "^4.0.2", |
@@ -145,5 +145,19 @@ | @@ -145,5 +145,19 @@ | ||
145 | "node_modules", | 145 | "node_modules", |
146 | "target" | 146 | "target" |
147 | ] | 147 | ] |
148 | + }, | ||
149 | + "browserslist": [ | ||
150 | + "> 0.5%", | ||
151 | + "last 2 versions", | ||
152 | + "Firefox ESR", | ||
153 | + "not ie <= 10", | ||
154 | + "not ie_mob <= 10", | ||
155 | + "not bb <= 10", | ||
156 | + "not op_mob <= 12.1" | ||
157 | + ], | ||
158 | + "postcss": { | ||
159 | + "plugins": { | ||
160 | + "autoprefixer": true | ||
161 | + } | ||
148 | } | 162 | } |
149 | } | 163 | } |
@@ -22,7 +22,7 @@ div.tb-widget { | @@ -22,7 +22,7 @@ div.tb-widget { | ||
22 | overflow: hidden; | 22 | overflow: hidden; |
23 | outline: none; | 23 | outline: none; |
24 | 24 | ||
25 | - @include transition(all .2s ease-in-out); | 25 | + transition: all .2s ease-in-out; |
26 | 26 | ||
27 | .tb-widget-title { | 27 | .tb-widget-title { |
28 | max-height: 60px; | 28 | max-height: 60px; |
@@ -99,7 +99,7 @@ md-content.tb-dashboard-content { | @@ -99,7 +99,7 @@ md-content.tb-dashboard-content { | ||
99 | outline: none; | 99 | outline: none; |
100 | 100 | ||
101 | .gridster-item { | 101 | .gridster-item { |
102 | - @include transition(none); | 102 | + transition: none; |
103 | } | 103 | } |
104 | } | 104 | } |
105 | 105 |
@@ -20,7 +20,7 @@ | @@ -20,7 +20,7 @@ | ||
20 | } | 20 | } |
21 | 21 | ||
22 | .tb-card-item { | 22 | .tb-card-item { |
23 | - @include transition(all .2s ease-in-out); | 23 | + transition: all .2s ease-in-out; |
24 | 24 | ||
25 | md-card-content { | 25 | md-card-content { |
26 | max-height: 53px; | 26 | max-height: 53px; |
@@ -46,7 +46,7 @@ | @@ -46,7 +46,7 @@ | ||
46 | .tb-current-item { | 46 | .tb-current-item { |
47 | opacity: .5; | 47 | opacity: .5; |
48 | 48 | ||
49 | - @include transform(scale(1.05)); | 49 | + transform: scale(1.05); |
50 | } | 50 | } |
51 | 51 | ||
52 | #tb-vertical-container { | 52 | #tb-vertical-container { |
@@ -16,7 +16,7 @@ | @@ -16,7 +16,7 @@ | ||
16 | @import "~compass-sass-mixins/lib/compass"; | 16 | @import "~compass-sass-mixins/lib/compass"; |
17 | 17 | ||
18 | .md-button-toggle .md-toggle-icon.tb-toggled { | 18 | .md-button-toggle .md-toggle-icon.tb-toggled { |
19 | - @include transform(rotateZ(180deg)); | 19 | + transform: rotateZ(180deg); |
20 | } | 20 | } |
21 | 21 | ||
22 | .tb-menu-toggle-list.ng-hide { | 22 | .tb-menu-toggle-list.ng-hide { |
@@ -28,7 +28,7 @@ | @@ -28,7 +28,7 @@ | ||
28 | z-index: 1; | 28 | z-index: 1; |
29 | overflow: hidden; | 29 | overflow: hidden; |
30 | 30 | ||
31 | - @include transition(.75s cubic-bezier(.35, 0, .25, 1)); | 31 | + transition: .75s cubic-bezier(.35, 0, .25, 1); |
32 | 32 | ||
33 | - @include transition-property(height); | 33 | + transition-property: height; |
34 | } | 34 | } |
@@ -28,7 +28,7 @@ $input-label-float-scale: .75 !default; | @@ -28,7 +28,7 @@ $input-label-float-scale: .75 !default; | ||
28 | line-height: 12px; | 28 | line-height: 12px; |
29 | color: rgb(244, 67, 54); | 29 | color: rgb(244, 67, 54); |
30 | 30 | ||
31 | - @include transition(all 450ms cubic-bezier(.23, 1, .32, 1) 0ms); | 31 | + transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms; |
32 | } | 32 | } |
33 | 33 | ||
34 | .tb-container { | 34 | .tb-container { |
@@ -77,13 +77,12 @@ label.tb-label { | @@ -77,13 +77,12 @@ label.tb-label { | ||
77 | bottom: 100%; | 77 | bottom: 100%; |
78 | left: 0; | 78 | left: 0; |
79 | color: rgba(0, 0, 0, .54); | 79 | color: rgba(0, 0, 0, .54); |
80 | - transform-origin: left top; | ||
81 | - -webkit-font-smoothing: antialiased; | ||
82 | 80 | ||
83 | - @include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale)); | 81 | + transition: transform $swift-ease-out-timing-function $swift-ease-out-duration, width $swift-ease-out-timing-function $swift-ease-out-duration; |
84 | 82 | ||
85 | - @include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration, | ||
86 | - width $swift-ease-out-timing-function $swift-ease-out-duration); | 83 | + transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale); |
84 | + transform-origin: left top; | ||
85 | + -webkit-font-smoothing: antialiased; | ||
87 | 86 | ||
88 | &.tb-focused { | 87 | &.tb-focused { |
89 | color: rgb(96, 125, 139); | 88 | color: rgb(96, 125, 139); |
@@ -53,7 +53,7 @@ | @@ -53,7 +53,7 @@ | ||
53 | margin: auto 0 auto auto; | 53 | margin: auto 0 auto auto; |
54 | background-size: 100% auto; | 54 | background-size: 100% auto; |
55 | 55 | ||
56 | - @include transition(transform .3s, ease-in-out); | 56 | + transition: transform .3s, ease-in-out; |
57 | } | 57 | } |
58 | 58 | ||
59 | .tb-side-menu .md-button { | 59 | .tb-side-menu .md-button { |
@@ -16,12 +16,12 @@ | @@ -16,12 +16,12 @@ | ||
16 | 16 | ||
17 | .tb-dashboard-assigned-customers { | 17 | .tb-dashboard-assigned-customers { |
18 | display: block; | 18 | display: block; |
19 | - display: -webkit-box; | 19 | + display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */ |
20 | height: 34px; | 20 | height: 34px; |
21 | margin-bottom: 4px; | 21 | margin-bottom: 4px; |
22 | overflow: hidden; | 22 | overflow: hidden; |
23 | text-overflow: ellipsis; | 23 | text-overflow: ellipsis; |
24 | -webkit-line-clamp: 2; | 24 | -webkit-line-clamp: 2; |
25 | - -webkit-box-orient: vertical; | 25 | + -webkit-box-orient: vertical; /* stylelint-disable-line property-no-vendor-prefix */ |
26 | } | 26 | } |
27 | 27 |
@@ -31,7 +31,7 @@ tb-dashboard-toolbar { | @@ -31,7 +31,7 @@ tb-dashboard-toolbar { | ||
31 | &.md-fab { | 31 | &.md-fab { |
32 | opacity: 1; | 32 | opacity: 1; |
33 | 33 | ||
34 | - @include transition(opacity .3s cubic-bezier(.55,0,.55,.2)); | 34 | + transition: opacity .3s cubic-bezier(.55, 0, .55, .2); |
35 | 35 | ||
36 | .md-fab-toolbar-background { | 36 | .md-fab-toolbar-background { |
37 | background-color: $primary-default !important; | 37 | background-color: $primary-default !important; |
@@ -50,7 +50,7 @@ tb-dashboard-toolbar { | @@ -50,7 +50,7 @@ tb-dashboard-toolbar { | ||
50 | line-height: 36px; | 50 | line-height: 36px; |
51 | opacity: .5; | 51 | opacity: .5; |
52 | 52 | ||
53 | - @include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s); | 53 | + transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s; |
54 | 54 | ||
55 | md-icon { | 55 | md-icon { |
56 | position: absolute; | 56 | position: absolute; |
@@ -75,13 +75,13 @@ section.tb-dashboard-toolbar { | @@ -75,13 +75,13 @@ section.tb-dashboard-toolbar { | ||
75 | 75 | ||
76 | &.tb-dashboard-toolbar-opened { | 76 | &.tb-dashboard-toolbar-opened { |
77 | right: 0; | 77 | right: 0; |
78 | - // @include transition(right .3s cubic-bezier(.55,0,.55,.2)); | 78 | + // transition: right .3s cubic-bezier(.55, 0, .55, .2); |
79 | } | 79 | } |
80 | 80 | ||
81 | &.tb-dashboard-toolbar-closed { | 81 | &.tb-dashboard-toolbar-closed { |
82 | right: 18px; | 82 | right: 18px; |
83 | 83 | ||
84 | - @include transition(right .3s cubic-bezier(.55,0,.55,.2) .2s); | 84 | + transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s; |
85 | } | 85 | } |
86 | } | 86 | } |
87 | 87 | ||
@@ -102,14 +102,14 @@ section.tb-dashboard-toolbar { | @@ -102,14 +102,14 @@ section.tb-dashboard-toolbar { | ||
102 | margin-top: $toolbar-height; | 102 | margin-top: $toolbar-height; |
103 | } | 103 | } |
104 | 104 | ||
105 | - @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2)); | 105 | + transition: margin-top .3s cubic-bezier(.55, 0, .55, .2); |
106 | } | 106 | } |
107 | } | 107 | } |
108 | 108 | ||
109 | &.tb-dashboard-toolbar-closed { | 109 | &.tb-dashboard-toolbar-closed { |
110 | margin-top: 0; | 110 | margin-top: 0; |
111 | 111 | ||
112 | - @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s); | 112 | + transition: margin-top .3s cubic-bezier(.55, 0, .55, .2) .2s; |
113 | } | 113 | } |
114 | 114 | ||
115 | .tb-dashboard-layouts { | 115 | .tb-dashboard-layouts { |
@@ -84,9 +84,6 @@ | @@ -84,9 +84,6 @@ | ||
84 | 84 | ||
85 | .tb-panel-title { | 85 | .tb-panel-title { |
86 | min-width: 150px; | 86 | min-width: 150px; |
87 | - -webkit-user-select: none; | ||
88 | - -moz-user-select: none; | ||
89 | - -ms-user-select: none; | ||
90 | user-select: none; | 87 | user-select: none; |
91 | } | 88 | } |
92 | 89 | ||
@@ -163,10 +160,6 @@ | @@ -163,10 +160,6 @@ | ||
163 | .fc-canvas { | 160 | .fc-canvas { |
164 | min-width: 100%; | 161 | min-width: 100%; |
165 | min-height: 100%; | 162 | min-height: 100%; |
166 | - -webkit-user-select: none; | ||
167 | - -khtml-user-select: none; | ||
168 | - -moz-user-select: none; | ||
169 | - -ms-user-select: none; | ||
170 | user-select: none; | 163 | user-select: none; |
171 | outline: none; | 164 | outline: none; |
172 | -webkit-touch-callout: none; | 165 | -webkit-touch-callout: none; |
@@ -441,13 +434,7 @@ | @@ -441,13 +434,7 @@ | ||
441 | } | 434 | } |
442 | 435 | ||
443 | .fc-noselect { | 436 | .fc-noselect { |
444 | - -webkit-touch-callout: none; /* iOS Safari */ | ||
445 | - -webkit-user-select: none; /* Safari */ | ||
446 | - -khtml-user-select: none; /* Konqueror HTML */ | ||
447 | - -moz-user-select: none; /* Firefox */ | ||
448 | - -ms-user-select: none; /* Internet Explorer/Edge */ | ||
449 | - user-select: none; /* Non-prefixed version, currently | ||
450 | - supported by Chrome and Opera */ | 437 | + user-select: none; |
451 | } | 438 | } |
452 | 439 | ||
453 | .fc-edge-label { | 440 | .fc-edge-label { |
@@ -495,7 +482,6 @@ | @@ -495,7 +482,6 @@ | ||
495 | font-weight: 600; | 482 | font-weight: 600; |
496 | text-align: center; | 483 | text-align: center; |
497 | white-space: nowrap; | 484 | white-space: nowrap; |
498 | - -webkit-transform: translate(-50%, -50%); | ||
499 | transform: translate(-50%, -50%); | 485 | transform: translate(-50%, -50%); |
500 | 486 | ||
501 | span { | 487 | span { |
@@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog { | @@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog { | ||
29 | } | 29 | } |
30 | 30 | ||
31 | .tb-split { | 31 | .tb-split { |
32 | - @include box-sizing(border-box); | 32 | + box-sizing: border-box; |
33 | overflow-x: hidden; | 33 | overflow-x: hidden; |
34 | overflow-y: auto; | 34 | overflow-y: auto; |
35 | } | 35 | } |
@@ -37,8 +37,6 @@ $background-color: #e6e7e8 !default; | @@ -37,8 +37,6 @@ $background-color: #e6e7e8 !default; | ||
37 | position: relative; | 37 | position: relative; |
38 | 38 | ||
39 | &[draggable] { | 39 | &[draggable] { |
40 | - -moz-user-select: none; | ||
41 | - -webkit-user-select: none; | ||
42 | user-select: none; | 40 | user-select: none; |
43 | } | 41 | } |
44 | 42 |
@@ -60,19 +60,11 @@ $background-color: #e6e7e8 !default; | @@ -60,19 +60,11 @@ $background-color: #e6e7e8 !default; | ||
60 | .led { | 60 | .led { |
61 | position: relative; | 61 | position: relative; |
62 | cursor: pointer; | 62 | cursor: pointer; |
63 | - background-image: -owg-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25)); | ||
64 | - background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25)); | ||
65 | - background-image: -moz-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25)); | ||
66 | - background-image: -o-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25)); | ||
67 | background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25)); | 63 | background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25)); |
68 | border-radius: 50%; | 64 | border-radius: 50%; |
69 | transition: background-color .5s, box-shadow .5s; | 65 | transition: background-color .5s, box-shadow .5s; |
70 | 66 | ||
71 | &.disabled { | 67 | &.disabled { |
72 | - background-image: -owg-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1)); | ||
73 | - background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1)); | ||
74 | - background-image: -moz-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1)); | ||
75 | - background-image: -o-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1)); | ||
76 | background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1)); | 68 | background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1)); |
77 | } | 69 | } |
78 | } | 70 | } |
@@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default; | @@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default; | ||
59 | 59 | ||
60 | .switch { | 60 | .switch { |
61 | position: relative; | 61 | position: relative; |
62 | + | ||
63 | + box-sizing: border-box; | ||
62 | width: 260px; | 64 | width: 260px; |
63 | min-width: 260px; | 65 | min-width: 260px; |
64 | height: 260px; | 66 | height: 260px; |
@@ -69,21 +71,14 @@ $background-color: #e6e7e8 !default; | @@ -69,21 +71,14 @@ $background-color: #e6e7e8 !default; | ||
69 | 71 | ||
70 | color: #424242; | 72 | color: #424242; |
71 | cursor: pointer; | 73 | cursor: pointer; |
72 | - -pie-background: -pie-linear-gradient(270deg, #bbb, #ddd); | ||
73 | background: #ddd; | 74 | background: #ddd; |
74 | - background: -owg-linear-gradient(270deg, #bbb, #ddd); | ||
75 | - background: -webkit-linear-gradient(270deg, #bbb, #ddd); | ||
76 | - background: -moz-linear-gradient(270deg, #bbb, #ddd); | ||
77 | - background: -o-linear-gradient(270deg, #bbb, #ddd); | ||
78 | background: linear-gradient(180deg, #bbb, #ddd); | 75 | background: linear-gradient(180deg, #bbb, #ddd); |
79 | border-radius: 130px; | 76 | border-radius: 130px; |
80 | 77 | ||
81 | - @include box-sizing(border-box); | ||
82 | - | ||
83 | - @include box-shadow( | ||
84 | - 0 0 0 8px rgba(0,0,0,.1) | ||
85 | - ,0 0 3px 1px rgba(0,0,0,.1) | ||
86 | - ,inset 0 8px 3px -8px rgba(255,255,255,.4)); | 78 | + box-shadow: |
79 | + 0 0 0 8px rgba(0, 0, 0, .1), | ||
80 | + 0 0 3px 1px rgba(0, 0, 0, .1), | ||
81 | + inset 0 8px 3px -8px rgba(255, 255, 255, .4); | ||
87 | 82 | ||
88 | input { | 83 | input { |
89 | display: none; | 84 | display: none; |
@@ -95,7 +90,7 @@ $background-color: #e6e7e8 !default; | @@ -95,7 +90,7 @@ $background-color: #e6e7e8 !default; | ||
95 | width: 100%; | 90 | width: 100%; |
96 | text-align: center; | 91 | text-align: center; |
97 | 92 | ||
98 | - @include text-shadow(1px 1px 4px #4a4a4a); | 93 | + text-shadow: 1px 1px 4px #4a4a4a; |
99 | } | 94 | } |
100 | 95 | ||
101 | .on { | 96 | .on { |
@@ -103,15 +98,15 @@ $background-color: #e6e7e8 !default; | @@ -103,15 +98,15 @@ $background-color: #e6e7e8 !default; | ||
103 | font-family: sans-serif; | 98 | font-family: sans-serif; |
104 | color: #444; | 99 | color: #444; |
105 | 100 | ||
106 | - @include transition(all .1s); | 101 | + transition: all .1s; |
107 | } | 102 | } |
108 | 103 | ||
109 | .off { | 104 | .off { |
110 | bottom: 5px; | 105 | bottom: 5px; |
111 | 106 | ||
112 | - @include transition(all .1s); | 107 | + transition: all .1s; |
113 | 108 | ||
114 | - @include transform(scaleY(.85)); | 109 | + transform: scaleY(.85); |
115 | } | 110 | } |
116 | 111 | ||
117 | .but { | 112 | .but { |
@@ -125,90 +120,82 @@ $background-color: #e6e7e8 !default; | @@ -125,90 +120,82 @@ $background-color: #e6e7e8 !default; | ||
125 | border-bottom-width: 0; | 120 | border-bottom-width: 0; |
126 | border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px; | 121 | border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px; |
127 | 122 | ||
128 | - @include box-shadow(inset 8px 6px 5px -7px #a2a2a2, | ||
129 | - inset -8px 6px 5px -7px #a2a2a2, | ||
130 | - inset 0 -3px 2px -2px rgba(200, 200, 200, .5), | ||
131 | - 0 3px 3px -2px #fff, | ||
132 | - inset 0 -230px 60px -200px rgba(255, 255, 255, .2), | ||
133 | - inset 0 220px 40px -200px rgba(0, 0, 0, .3)); | 123 | + box-shadow: |
124 | + inset 8px 6px 5px -7px #a2a2a2, | ||
125 | + inset -8px 6px 5px -7px #a2a2a2, | ||
126 | + inset 0 -3px 2px -2px rgba(200, 200, 200, .5), | ||
127 | + 0 3px 3px -2px #fff, | ||
128 | + inset 0 -230px 60px -200px rgba(255, 255, 255, .2), | ||
129 | + inset 0 220px 40px -200px rgba(0, 0, 0, .3); | ||
134 | 130 | ||
135 | - @include transition(all .2s); | 131 | + transition: all .2s; |
136 | } | 132 | } |
137 | 133 | ||
138 | .back { | 134 | .back { |
135 | + | ||
136 | + box-sizing: border-box; | ||
139 | width: 210px; | 137 | width: 210px; |
140 | height: 210px; | 138 | height: 210px; |
141 | padding: 4px 4px; | 139 | padding: 4px 4px; |
142 | cursor: pointer; | 140 | cursor: pointer; |
143 | background-color: #888787; | 141 | background-color: #888787; |
144 | - background-image: -owg-linear-gradient(0deg, transparent 30%, transparent 70%), -owg-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%); | ||
145 | - background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 70%), -webkit-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%); | ||
146 | - background-image: -moz-linear-gradient(0deg, transparent 30%, transparent 70%), -moz-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%); | ||
147 | - background-image: -o-linear-gradient(0deg, transparent 30%, transparent 70%), -o-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%); | ||
148 | background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%); | 142 | background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%); |
149 | border-radius: 105px; | 143 | border-radius: 105px; |
150 | 144 | ||
151 | - @include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, .3), | ||
152 | - -30px 30px 30px -20px rgba(58, 58, 58, .3), | ||
153 | - 0 30px 30px 0 rgba(16, 16, 16, .3), | ||
154 | - inset 0 -1px 0 0 #484848); | ||
155 | - | ||
156 | - @include box-sizing(border-box); | 145 | + box-shadow: |
146 | + 30px 30px 30px -20px rgba(58, 58, 58, .3), | ||
147 | + -30px 30px 30px -20px rgba(58, 58, 58, .3), | ||
148 | + 0 30px 30px 0 rgba(16, 16, 16, .3), | ||
149 | + inset 0 -1px 0 0 #484848; | ||
157 | 150 | ||
158 | - @include transition(all .2s); | 151 | + transition: all .2s; |
159 | } | 152 | } |
160 | 153 | ||
161 | 154 | ||
162 | input:checked + .back .on, | 155 | input:checked + .back .on, |
163 | input:checked + .back .off{ | 156 | input:checked + .back .off{ |
164 | - @include text-shadow(1px 1px 4px #4a4a4a); | 157 | + text-shadow: 1px 1px 4px #4a4a4a; |
165 | } | 158 | } |
166 | 159 | ||
167 | input:checked + .back .on{ | 160 | input:checked + .back .on{ |
168 | top: 10px; | 161 | top: 10px; |
169 | color: #4c4c4c; | 162 | color: #4c4c4c; |
170 | 163 | ||
171 | - @include transform(scaleY(.85)); | 164 | + transform: scaleY(.85); |
172 | } | 165 | } |
173 | 166 | ||
174 | input:checked + .back .off{ | 167 | input:checked + .back .off{ |
175 | bottom: 5px; | 168 | bottom: 5px; |
176 | color: #444; | 169 | color: #444; |
177 | 170 | ||
178 | - @include transform(scaleY(1)); | 171 | + transform: scaleY(1); |
179 | } | 172 | } |
180 | 173 | ||
181 | input:checked + .back .but{ | 174 | input:checked + .back .but{ |
182 | margin-top: 20px; | 175 | margin-top: 20px; |
183 | background: #dcdcdc; | 176 | background: #dcdcdc; |
184 | - background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent); | ||
185 | - background-image: -webkit-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent); | ||
186 | - background-image: -moz-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent); | ||
187 | - background-image: -o-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent); | ||
188 | background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent); | 177 | background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent); |
189 | border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px; | 178 | border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px; |
190 | 179 | ||
191 | - @include box-shadow(inset 8px -4px 5px -7px #a9a9a9, | ||
192 | - inset -8px -4px 5px -7px #808080, | ||
193 | - 0 -3px 8px -4px rgba(50, 50, 50, .4), | ||
194 | - inset 0 3px 4px -2px #9c9c9c, | ||
195 | - inset 0 280px 40px -200px rgba(0, 0, 0, .2), | ||
196 | - inset 0 -200px 40px -200px rgba(180, 180, 180, .2)); | 180 | + box-shadow: |
181 | + inset 8px -4px 5px -7px #a9a9a9, | ||
182 | + inset -8px -4px 5px -7px #808080, | ||
183 | + 0 -3px 8px -4px rgba(50, 50, 50, .4), | ||
184 | + inset 0 3px 4px -2px #9c9c9c, | ||
185 | + inset 0 280px 40px -200px rgba(0, 0, 0, .2), | ||
186 | + inset 0 -200px 40px -200px rgba(180, 180, 180, .2); | ||
197 | } | 187 | } |
198 | 188 | ||
199 | input:checked + .back{ | 189 | input:checked + .back{ |
200 | padding: 2px 4px; | 190 | padding: 2px 4px; |
201 | 191 | ||
202 | - background-image: -owg-linear-gradient(90deg, #868686 30%, transparent 70%), -owg-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%); | ||
203 | - background-image: -webkit-linear-gradient(90deg, #868686 30%, transparent 70%), -webkit-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%); | ||
204 | - background-image: -moz-linear-gradient(90deg, #868686 30%, transparent 70%), -moz-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%); | ||
205 | - background-image: -o-linear-gradient(90deg, #868686 30%, transparent 70%), -o-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%); | ||
206 | background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%); | 192 | background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%); |
207 | 193 | ||
208 | - @include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, .1), | ||
209 | - -30px 30px 30px -20px rgba(111, 111, 111, .1), | ||
210 | - 0 30px 30px 0 rgba(0, 0, 0, .2), | ||
211 | - inset 0 1px 2px 0 rgba(167, 167, 167, .6)); | 194 | + box-shadow: |
195 | + 30px 30px 30px -20px rgba(49, 49, 49, .1), | ||
196 | + -30px 30px 30px -20px rgba(111, 111, 111, .1), | ||
197 | + 0 30px 30px 0 rgba(0, 0, 0, .2), | ||
198 | + inset 0 1px 2px 0 rgba(167, 167, 167, .6); | ||
212 | } | 199 | } |
213 | } | 200 | } |
214 | } | 201 | } |
@@ -19,7 +19,7 @@ $edit-toolbar-height: 40px !default; | @@ -19,7 +19,7 @@ $edit-toolbar-height: 40px !default; | ||
19 | 19 | ||
20 | .tb-editor { | 20 | .tb-editor { |
21 | .tb-split { | 21 | .tb-split { |
22 | - @include box-sizing(border-box); | 22 | + box-sizing: border-box; |
23 | overflow-x: hidden; | 23 | overflow-x: hidden; |
24 | overflow-y: auto; | 24 | overflow-y: auto; |
25 | } | 25 | } |
@@ -15,34 +15,34 @@ | @@ -15,34 +15,34 @@ | ||
15 | */ | 15 | */ |
16 | @import "~compass-sass-mixins/lib/animate"; | 16 | @import "~compass-sass-mixins/lib/animate"; |
17 | 17 | ||
18 | -@include keyframes(tbMoveFromTopFade) { | 18 | +@keyframes tbMoveFromTopFade { |
19 | from { | 19 | from { |
20 | opacity: 0; | 20 | opacity: 0; |
21 | 21 | ||
22 | - @include transform(translate(0, -100%)); | 22 | + transform: translate(0, -100%); |
23 | } | 23 | } |
24 | } | 24 | } |
25 | 25 | ||
26 | -@include keyframes(tbMoveToTopFade) { | 26 | +@keyframes tbMoveToTopFade { |
27 | to { | 27 | to { |
28 | opacity: 0; | 28 | opacity: 0; |
29 | 29 | ||
30 | - @include transform(translate(0, -100%)); | 30 | + transform: translate(0, -100%); |
31 | } | 31 | } |
32 | } | 32 | } |
33 | 33 | ||
34 | -@include keyframes(tbMoveFromBottomFade) { | 34 | +@keyframes tbMoveFromBottomFade { |
35 | from { | 35 | from { |
36 | opacity: 0; | 36 | opacity: 0; |
37 | 37 | ||
38 | - @include transform(translate(0, 100%)); | 38 | + transform: translate(0, 100%); |
39 | } | 39 | } |
40 | } | 40 | } |
41 | 41 | ||
42 | -@include keyframes(tbMoveToBottomFade) { | 42 | +@keyframes tbMoveToBottomFade { |
43 | to { | 43 | to { |
44 | opacity: 0; | 44 | opacity: 0; |
45 | 45 | ||
46 | - @include transform(translate(0, 150%)); | 46 | + transform: translate(0, 150%); |
47 | } | 47 | } |
48 | } | 48 | } |
@@ -42,7 +42,7 @@ textarea { | @@ -42,7 +42,7 @@ textarea { | ||
42 | word-wrap: normal; | 42 | word-wrap: normal; |
43 | white-space: nowrap; | 43 | white-space: nowrap; |
44 | direction: ltr; | 44 | direction: ltr; |
45 | - -webkit-font-feature-settings: "liga"; | 45 | + -webkit-font-feature-settings: "liga"; /* stylelint-disable-line property-no-vendor-prefix */ |
46 | } | 46 | } |
47 | 47 | ||
48 | a { | 48 | a { |
@@ -51,7 +51,7 @@ a { | @@ -51,7 +51,7 @@ a { | ||
51 | text-decoration: none; | 51 | text-decoration: none; |
52 | border-bottom: 1px solid rgba(64, 84, 178, .25); | 52 | border-bottom: 1px solid rgba(64, 84, 178, .25); |
53 | 53 | ||
54 | - @include transition(border-bottom .35s); | 54 | + transition: border-bottom .35s; |
55 | } | 55 | } |
56 | 56 | ||
57 | a:hover, | 57 | a:hover, |
@@ -258,13 +258,7 @@ label { | @@ -258,13 +258,7 @@ label { | ||
258 | } | 258 | } |
259 | 259 | ||
260 | .tb-noselect { | 260 | .tb-noselect { |
261 | - -webkit-touch-callout: none; /* iOS Safari */ | ||
262 | - -webkit-user-select: none; /* Safari */ | ||
263 | - -khtml-user-select: none; /* Konqueror HTML */ | ||
264 | - -moz-user-select: none; /* Firefox */ | ||
265 | - -ms-user-select: none; /* Internet Explorer/Edge */ | ||
266 | - user-select: none; /* Non-prefixed version, currently | ||
267 | - supported by Chrome and Opera */ | 261 | + user-select: none; |
268 | } | 262 | } |
269 | 263 | ||
270 | .tb-readonly-label { | 264 | .tb-readonly-label { |
@@ -556,7 +550,7 @@ $previewSize: 100px !default; | @@ -556,7 +550,7 @@ $previewSize: 100px !default; | ||
556 | } | 550 | } |
557 | 551 | ||
558 | .tb-error-message.ng-animate { | 552 | .tb-error-message.ng-animate { |
559 | - @include transition(all .3s cubic-bezier(.55, 0, .55, .2)); | 553 | + transition: all .3s cubic-bezier(.55, 0, .55, .2); |
560 | } | 554 | } |
561 | 555 | ||
562 | .tb-error-message.ng-enter-prepare, | 556 | .tb-error-message.ng-enter-prepare, |
@@ -652,13 +646,13 @@ section.tb-top-header-buttons { | @@ -652,13 +646,13 @@ section.tb-top-header-buttons { | ||
652 | } | 646 | } |
653 | 647 | ||
654 | .tb-header-buttons .tb-btn-header { | 648 | .tb-header-buttons .tb-btn-header { |
655 | - @include animation(tbMoveFromTopFade .3s ease both); | ||
656 | position: relative !important; | 649 | position: relative !important; |
657 | display: inline-block !important; | 650 | display: inline-block !important; |
651 | + animation: tbMoveFromTopFade .3s ease both; | ||
658 | } | 652 | } |
659 | 653 | ||
660 | .tb-header-buttons .tb-btn-header.ng-hide { | 654 | .tb-header-buttons .tb-btn-header.ng-hide { |
661 | - @include animation(tbMoveToTopFade .3s ease both); | 655 | + animation: tbMoveToTopFade .3s ease both; |
662 | } | 656 | } |
663 | 657 | ||
664 | /*********************** | 658 | /*********************** |
@@ -674,19 +668,19 @@ section.tb-footer-buttons { | @@ -674,19 +668,19 @@ section.tb-footer-buttons { | ||
674 | } | 668 | } |
675 | 669 | ||
676 | .tb-footer-buttons .tb-btn-footer { | 670 | .tb-footer-buttons .tb-btn-footer { |
677 | - @include animation(tbMoveFromBottomFade .3s ease both); | ||
678 | position: relative !important; | 671 | position: relative !important; |
679 | display: inline-block !important; | 672 | display: inline-block !important; |
673 | + animation: tbMoveFromBottomFade .3s ease both; | ||
680 | } | 674 | } |
681 | 675 | ||
682 | .tb-footer-buttons .tb-btn-footer.ng-hide { | 676 | .tb-footer-buttons .tb-btn-footer.ng-hide { |
683 | - @include animation(tbMoveToBottomFade .3s ease both); | 677 | + animation: tbMoveToBottomFade .3s ease both; |
684 | } | 678 | } |
685 | 679 | ||
686 | ._md-toast-open-bottom .tb-footer-buttons { | 680 | ._md-toast-open-bottom .tb-footer-buttons { |
687 | - @include transition(all .4s cubic-bezier(.25, .8, .25, 1)); | 681 | + transition: all .4s cubic-bezier(.25, .8, .25, 1); |
688 | 682 | ||
689 | - @include transform(translate3d(0, -42px, 0)); | 683 | + transform: translate3d(0, -42px, 0); |
690 | } | 684 | } |
691 | 685 | ||
692 | /*********************** | 686 | /*********************** |
@@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
15 | */ | 15 | */ |
16 | @import "~compass-sass-mixins/lib/compass"; | 16 | @import "~compass-sass-mixins/lib/compass"; |
17 | 17 | ||
18 | +/* stylelint-disable selector-no-vendor-prefix */ | ||
18 | @mixin input-placeholder { | 19 | @mixin input-placeholder { |
19 | // replaces compass/css/user-interface/input-placeholder() | 20 | // replaces compass/css/user-interface/input-placeholder() |
20 | 21 | ||
@@ -36,6 +37,7 @@ | @@ -36,6 +37,7 @@ | ||
36 | @content; | 37 | @content; |
37 | } | 38 | } |
38 | } | 39 | } |
40 | +/* stylelint-enable selector-no-vendor-prefix */ | ||
39 | 41 | ||
40 | @mixin line-clamp($numLines: 1, $lineHeight: 1.412) { | 42 | @mixin line-clamp($numLines: 1, $lineHeight: 1.412) { |
41 | position: relative; | 43 | position: relative; |