dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1074 from tagliala/add-autoprefixer

Browse Source 
Add autoprefixer
This commit is contained in:
Igor Kulikov 2018-10-04 14:26:36 +03:00 committed by GitHub
commit 175b04754c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 104 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/.stylelintrc
View File

@ -251,7 +251,7 @@
"fill", "fill",
"stroke" "stroke"
], ],
"property-no-vendor-prefix": null, "property-no-vendor-prefix": true,
"rule-empty-line-before": ["always", { "rule-empty-line-before": ["always", {
"except": ["first-nested"], "except": ["first-nested"],
"ignore": ["after-comment"] "ignore": ["after-comment"]
@ -272,7 +272,7 @@
"selector-max-type": 5, "selector-max-type": 5,
"selector-max-universal": 1, "selector-max-universal": 1,
"selector-no-qualifying-type": null, "selector-no-qualifying-type": null,
"selector-no-vendor-prefix": null, "selector-no-vendor-prefix": true,
"selector-type-no-unknown": [true, { "selector-type-no-unknown": [true, {
"ignoreTypes": [ "ignoreTypes": [
"/^md-/", "/^md-/",
@ -287,6 +287,6 @@
"value-list-comma-newline-after": "always-multi-line", "value-list-comma-newline-after": "always-multi-line",
"value-list-comma-newline-before": "never-multi-line", "value-list-comma-newline-before": "never-multi-line",
"value-list-comma-space-after": "always-single-line", "value-list-comma-space-after": "always-single-line",
"value-no-vendor-prefix": null "value-no-vendor-prefix": true
} }
} }

16
ui/package.json
View File

@ -119,7 +119,7 @@
"ng-annotate-loader": "^0.1.1", "ng-annotate-loader": "^0.1.1",
"ngtemplate-loader": "^1.3.1", "ngtemplate-loader": "^1.3.1",
"node-sass": "^4.5.3", "node-sass": "^4.5.3",
"postcss-loader": "^0.13.0", "postcss-loader": "^3.0.0",
"raw-loader": "^0.5.1", "raw-loader": "^0.5.1",
"react-hot-loader": "^3.0.0-beta.6", "react-hot-loader": "^3.0.0-beta.6",
"sass-loader": "^4.0.2", "sass-loader": "^4.0.2",
@ -145,5 +145,19 @@
"node_modules", "node_modules",
"target" "target"
] ]
},
"browserslist": [
"> 0.5%",
"last 2 versions",
"Firefox ESR",
"not ie <= 10",
"not ie_mob <= 10",
"not bb <= 10",
"not op_mob <= 12.1"
],
"postcss": {
"plugins": {
"autoprefixer": true
}
} }
} }

4
ui/src/app/components/dashboard.scss
View File

@ -22,7 +22,7 @@ div.tb-widget {
overflow: hidden; overflow: hidden;
outline: none; outline: none;
@include transition(all .2s ease-in-out); transition: all .2s ease-in-out;
.tb-widget-title { .tb-widget-title {
max-height: 60px; max-height: 60px;
@ -99,7 +99,7 @@ md-content.tb-dashboard-content {
outline: none; outline: none;
.gridster-item { .gridster-item {
@include transition(none); transition: none;
} }
} }

4
ui/src/app/components/grid.scss
View File

@ -20,7 +20,7 @@
} }
.tb-card-item { .tb-card-item {
@include transition(all .2s ease-in-out); transition: all .2s ease-in-out;
md-card-content { md-card-content {
max-height: 53px; max-height: 53px;
@ -46,7 +46,7 @@
.tb-current-item { .tb-current-item {
opacity: .5; opacity: .5;
@include transform(scale(1.05)); transform: scale(1.05);
} }
#tb-vertical-container { #tb-vertical-container {

6
ui/src/app/components/menu-link.scss
View File

@ -16,7 +16,7 @@
@import "~compass-sass-mixins/lib/compass"; @import "~compass-sass-mixins/lib/compass";
.md-button-toggle .md-toggle-icon.tb-toggled { .md-button-toggle .md-toggle-icon.tb-toggled {
@include transform(rotateZ(180deg)); transform: rotateZ(180deg);
} }
.tb-menu-toggle-list.ng-hide { .tb-menu-toggle-list.ng-hide {
@ -28,7 +28,7 @@
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
@include transition(.75s cubic-bezier(.35, 0, .25, 1)); transition: .75s cubic-bezier(.35, 0, .25, 1);
@include transition-property(height); transition-property: height;
} }

11
ui/src/app/components/react/json-form.scss
View File

@ -28,7 +28,7 @@ $input-label-float-scale: .75 !default;
line-height: 12px; line-height: 12px;
color: rgb(244, 67, 54); color: rgb(244, 67, 54);
@include transition(all 450ms cubic-bezier(.23, 1, .32, 1) 0ms); transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
} }
.tb-container { .tb-container {
@ -77,14 +77,13 @@ label.tb-label {
bottom: 100%; bottom: 100%;
left: 0; left: 0;
color: rgba(0, 0, 0, .54); color: rgba(0, 0, 0, .54);
transition: transform $swift-ease-out-timing-function $swift-ease-out-duration, width $swift-ease-out-timing-function $swift-ease-out-duration;
transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
transform-origin: left top; transform-origin: left top;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
@include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
width $swift-ease-out-timing-function $swift-ease-out-duration);
&.tb-focused { &.tb-focused {
color: rgb(96, 125, 139); color: rgb(96, 125, 139);
} }

2
ui/src/app/components/side-menu.scss
View File

@ -53,7 +53,7 @@
margin: auto 0 auto auto; margin: auto 0 auto auto;
background-size: 100% auto; background-size: 100% auto;
@include transition(transform .3s, ease-in-out); transition: transform .3s, ease-in-out;
} }
.tb-side-menu .md-button { .tb-side-menu .md-button {

4
ui/src/app/dashboard/dashboard-card.scss
View File

@ -16,12 +16,12 @@
.tb-dashboard-assigned-customers { .tb-dashboard-assigned-customers {
display: block; display: block;
display: -webkit-box; display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
height: 34px; height: 34px;
margin-bottom: 4px; margin-bottom: 4px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical; /* stylelint-disable-line property-no-vendor-prefix */
} }

4
ui/src/app/dashboard/dashboard-toolbar.scss
View File

@ -31,7 +31,7 @@ tb-dashboard-toolbar {
&.md-fab { &.md-fab {
opacity: 1; opacity: 1;
@include transition(opacity .3s cubic-bezier(.55,0,.55,.2)); transition: opacity .3s cubic-bezier(.55, 0, .55, .2);
.md-fab-toolbar-background { .md-fab-toolbar-background {
background-color: $primary-default !important; background-color: $primary-default !important;
@ -50,7 +50,7 @@ tb-dashboard-toolbar {
line-height: 36px; line-height: 36px;
opacity: .5; opacity: .5;
@include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s); transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s;
md-icon { md-icon {
position: absolute; position: absolute;

8
ui/src/app/dashboard/dashboard.scss
View File

@ -75,13 +75,13 @@ section.tb-dashboard-toolbar {
&.tb-dashboard-toolbar-opened { &.tb-dashboard-toolbar-opened {
right: 0; right: 0;
// @include transition(right .3s cubic-bezier(.55,0,.55,.2)); // transition: right .3s cubic-bezier(.55, 0, .55, .2);
} }
&.tb-dashboard-toolbar-closed { &.tb-dashboard-toolbar-closed {
right: 18px; right: 18px;
@include transition(right .3s cubic-bezier(.55,0,.55,.2) .2s); transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
} }
} }
@ -102,14 +102,14 @@ section.tb-dashboard-toolbar {
margin-top: $toolbar-height; margin-top: $toolbar-height;
} }
@include transition(margin-top .3s cubic-bezier(.55,0,.55,.2)); transition: margin-top .3s cubic-bezier(.55, 0, .55, .2);
} }
} }
&.tb-dashboard-toolbar-closed { &.tb-dashboard-toolbar-closed {
margin-top: 0; margin-top: 0;
@include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s); transition: margin-top .3s cubic-bezier(.55, 0, .55, .2) .2s;
} }
.tb-dashboard-layouts { .tb-dashboard-layouts {

2
ui/src/app/layout/home.scss
View File

@ -42,7 +42,7 @@
border: none; border: none;
opacity: .75; opacity: .75;
@include transition(opacity .35s); transition: opacity .35s;
} }
a:hover, a:hover,

16
ui/src/app/rulechain/rulechain.scss
View File

@ -84,9 +84,6 @@
.tb-panel-title { .tb-panel-title {
min-width: 150px; min-width: 150px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
} }
@ -163,10 +160,6 @@
.fc-canvas { .fc-canvas {
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
outline: none; outline: none;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -441,13 +434,7 @@
} }
.fc-noselect { .fc-noselect {
-webkit-touch-callout: none; /* iOS Safari */ user-select: none;
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
} }
.fc-edge-label { .fc-edge-label {
@ -495,7 +482,6 @@
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
span { span {

2
ui/src/app/rulechain/script/node-script-test.scss
View File

@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog {
} }
.tb-split { .tb-split {
@include box-sizing(border-box); box-sizing: border-box;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }

2
ui/src/app/widget/lib/rpc/knob.scss
View File

@ -37,8 +37,6 @@ $background-color: #e6e7e8 !default;
position: relative; position: relative;
&[draggable] { &[draggable] {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none; user-select: none;
} }

8
ui/src/app/widget/lib/rpc/led-indicator.scss
View File

@ -60,19 +60,11 @@ $background-color: #e6e7e8 !default;
.led { .led {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background-image: -owg-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
background-image: -o-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25)); background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
border-radius: 50%; border-radius: 50%;
transition: background-color .5s, box-shadow .5s; transition: background-color .5s, box-shadow .5s;
&.disabled { &.disabled {
background-image: -owg-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
background-image: -o-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1)); background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
} }
} }

95
ui/src/app/widget/lib/rpc/round-switch.scss
View File

@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default;
.switch { .switch {
position: relative; position: relative;
box-sizing: border-box;
width: 260px; width: 260px;
min-width: 260px; min-width: 260px;
height: 260px; height: 260px;
@ -69,21 +71,14 @@ $background-color: #e6e7e8 !default;
color: #424242; color: #424242;
cursor: pointer; cursor: pointer;
-pie-background: -pie-linear-gradient(270deg, #bbb, #ddd);
background: #ddd; background: #ddd;
background: -owg-linear-gradient(270deg, #bbb, #ddd);
background: -webkit-linear-gradient(270deg, #bbb, #ddd);
background: -moz-linear-gradient(270deg, #bbb, #ddd);
background: -o-linear-gradient(270deg, #bbb, #ddd);
background: linear-gradient(180deg, #bbb, #ddd); background: linear-gradient(180deg, #bbb, #ddd);
border-radius: 130px; border-radius: 130px;
@include box-sizing(border-box); box-shadow:
0 0 0 8px rgba(0, 0, 0, .1),
@include box-shadow( 0 0 3px 1px rgba(0, 0, 0, .1),
0 0 0 8px rgba(0,0,0,.1) inset 0 8px 3px -8px rgba(255, 255, 255, .4);
,0 0 3px 1px rgba(0,0,0,.1)
,inset 0 8px 3px -8px rgba(255,255,255,.4));
input { input {
display: none; display: none;
@ -95,7 +90,7 @@ $background-color: #e6e7e8 !default;
width: 100%; width: 100%;
text-align: center; text-align: center;
@include text-shadow(1px 1px 4px #4a4a4a); text-shadow: 1px 1px 4px #4a4a4a;
} }
.on { .on {
@ -103,15 +98,15 @@ $background-color: #e6e7e8 !default;
font-family: sans-serif; font-family: sans-serif;
color: #444; color: #444;
@include transition(all .1s); transition: all .1s;
} }
.off { .off {
bottom: 5px; bottom: 5px;
@include transition(all .1s); transition: all .1s;
@include transform(scaleY(.85)); transform: scaleY(.85);
} }
.but { .but {
@ -125,90 +120,82 @@ $background-color: #e6e7e8 !default;
border-bottom-width: 0; border-bottom-width: 0;
border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px; border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
@include box-shadow(inset 8px 6px 5px -7px #a2a2a2, box-shadow:
inset -8px 6px 5px -7px #a2a2a2, inset 8px 6px 5px -7px #a2a2a2,
inset 0 -3px 2px -2px rgba(200, 200, 200, .5), inset -8px 6px 5px -7px #a2a2a2,
0 3px 3px -2px #fff, inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
inset 0 -230px 60px -200px rgba(255, 255, 255, .2), 0 3px 3px -2px #fff,
inset 0 220px 40px -200px rgba(0, 0, 0, .3)); inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
inset 0 220px 40px -200px rgba(0, 0, 0, .3);
@include transition(all .2s); transition: all .2s;
} }
.back { .back {
box-sizing: border-box;
width: 210px; width: 210px;
height: 210px; height: 210px;
padding: 4px 4px; padding: 4px 4px;
cursor: pointer; cursor: pointer;
background-color: #888787; background-color: #888787;
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%);
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%);
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%);
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%);
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%); 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%);
border-radius: 105px; border-radius: 105px;
@include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, .3), box-shadow:
-30px 30px 30px -20px rgba(58, 58, 58, .3), 30px 30px 30px -20px rgba(58, 58, 58, .3),
0 30px 30px 0 rgba(16, 16, 16, .3), -30px 30px 30px -20px rgba(58, 58, 58, .3),
inset 0 -1px 0 0 #484848); 0 30px 30px 0 rgba(16, 16, 16, .3),
inset 0 -1px 0 0 #484848;
@include box-sizing(border-box); transition: all .2s;
@include transition(all .2s);
} }
input:checked + .back .on, input:checked + .back .on,
input:checked + .back .off{ input:checked + .back .off{
@include text-shadow(1px 1px 4px #4a4a4a); text-shadow: 1px 1px 4px #4a4a4a;
} }
input:checked + .back .on{ input:checked + .back .on{
top: 10px; top: 10px;
color: #4c4c4c; color: #4c4c4c;
@include transform(scaleY(.85)); transform: scaleY(.85);
} }
input:checked + .back .off{ input:checked + .back .off{
bottom: 5px; bottom: 5px;
color: #444; color: #444;
@include transform(scaleY(1)); transform: scaleY(1);
} }
input:checked + .back .but{ input:checked + .back .but{
margin-top: 20px; margin-top: 20px;
background: #dcdcdc; background: #dcdcdc;
background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
background-image: -webkit-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
background-image: -moz-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
background-image: -o-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent); background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px; border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;
@include box-shadow(inset 8px -4px 5px -7px #a9a9a9, box-shadow:
inset -8px -4px 5px -7px #808080, inset 8px -4px 5px -7px #a9a9a9,
0 -3px 8px -4px rgba(50, 50, 50, .4), inset -8px -4px 5px -7px #808080,
inset 0 3px 4px -2px #9c9c9c, 0 -3px 8px -4px rgba(50, 50, 50, .4),
inset 0 280px 40px -200px rgba(0, 0, 0, .2), inset 0 3px 4px -2px #9c9c9c,
inset 0 -200px 40px -200px rgba(180, 180, 180, .2)); inset 0 280px 40px -200px rgba(0, 0, 0, .2),
inset 0 -200px 40px -200px rgba(180, 180, 180, .2);
} }
input:checked + .back{ input:checked + .back{
padding: 2px 4px; padding: 2px 4px;
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%);
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%);
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%);
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%);
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%); 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%);
@include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, .1), box-shadow:
-30px 30px 30px -20px rgba(111, 111, 111, .1), 30px 30px 30px -20px rgba(49, 49, 49, .1),
0 30px 30px 0 rgba(0, 0, 0, .2), -30px 30px 30px -20px rgba(111, 111, 111, .1),
inset 0 1px 2px 0 rgba(167, 167, 167, .6)); 0 30px 30px 0 rgba(0, 0, 0, .2),
inset 0 1px 2px 0 rgba(167, 167, 167, .6);
} }
} }
} }

2
ui/src/app/widget/widget-editor.scss
View File

@ -19,7 +19,7 @@ $edit-toolbar-height: 40px !default;
.tb-editor { .tb-editor {
.tb-split { .tb-split {
@include box-sizing(border-box); box-sizing: border-box;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }

16
ui/src/scss/animations.scss
View File

@ -15,34 +15,34 @@
*/ */
@import "~compass-sass-mixins/lib/animate"; @import "~compass-sass-mixins/lib/animate";
@include keyframes(tbMoveFromTopFade) { @keyframes tbMoveFromTopFade {
from { from {
opacity: 0; opacity: 0;
@include transform(translate(0, -100%)); transform: translate(0, -100%);
} }
} }
@include keyframes(tbMoveToTopFade) { @keyframes tbMoveToTopFade {
to { to {
opacity: 0; opacity: 0;
@include transform(translate(0, -100%)); transform: translate(0, -100%);
} }
} }
@include keyframes(tbMoveFromBottomFade) { @keyframes tbMoveFromBottomFade {
from { from {
opacity: 0; opacity: 0;
@include transform(translate(0, 100%)); transform: translate(0, 100%);
} }
} }
@include keyframes(tbMoveToBottomFade) { @keyframes tbMoveToBottomFade {
to { to {
opacity: 0; opacity: 0;
@include transform(translate(0, 150%)); transform: translate(0, 150%);
} }
} }

26
ui/src/scss/main.scss
View File

@ -42,7 +42,7 @@ textarea {
word-wrap: normal; word-wrap: normal;
white-space: nowrap; white-space: nowrap;
direction: ltr; direction: ltr;
-webkit-font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; /* stylelint-disable-line property-no-vendor-prefix */
} }
a { a {
@ -51,7 +51,7 @@ a {
text-decoration: none; text-decoration: none;
border-bottom: 1px solid rgba(64, 84, 178, .25); border-bottom: 1px solid rgba(64, 84, 178, .25);
@include transition(border-bottom .35s); transition: border-bottom .35s;
} }
a:hover, a:hover,
@ -258,13 +258,7 @@ label {
} }
.tb-noselect { .tb-noselect {
-webkit-touch-callout: none; /* iOS Safari */ user-select: none;
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
} }
.tb-readonly-label { .tb-readonly-label {
@ -556,7 +550,7 @@ $previewSize: 100px !default;
} }
.tb-error-message.ng-animate { .tb-error-message.ng-animate {
@include transition(all .3s cubic-bezier(.55, 0, .55, .2)); transition: all .3s cubic-bezier(.55, 0, .55, .2);
} }
.tb-error-message.ng-enter-prepare, .tb-error-message.ng-enter-prepare,
@ -652,13 +646,13 @@ section.tb-top-header-buttons {
} }
.tb-header-buttons .tb-btn-header { .tb-header-buttons .tb-btn-header {
@include animation(tbMoveFromTopFade .3s ease both);
position: relative !important; position: relative !important;
display: inline-block !important; display: inline-block !important;
animation: tbMoveFromTopFade .3s ease both;
} }
.tb-header-buttons .tb-btn-header.ng-hide { .tb-header-buttons .tb-btn-header.ng-hide {
@include animation(tbMoveToTopFade .3s ease both); animation: tbMoveToTopFade .3s ease both;
} }
/*********************** /***********************
@ -674,19 +668,19 @@ section.tb-footer-buttons {
} }
.tb-footer-buttons .tb-btn-footer { .tb-footer-buttons .tb-btn-footer {
@include animation(tbMoveFromBottomFade .3s ease both);
position: relative !important; position: relative !important;
display: inline-block !important; display: inline-block !important;
animation: tbMoveFromBottomFade .3s ease both;
} }
.tb-footer-buttons .tb-btn-footer.ng-hide { .tb-footer-buttons .tb-btn-footer.ng-hide {
@include animation(tbMoveToBottomFade .3s ease both); animation: tbMoveToBottomFade .3s ease both;
} }
._md-toast-open-bottom .tb-footer-buttons { ._md-toast-open-bottom .tb-footer-buttons {
@include transition(all .4s cubic-bezier(.25, .8, .25, 1)); transition: all .4s cubic-bezier(.25, .8, .25, 1);
@include transform(translate3d(0, -42px, 0)); transform: translate3d(0, -42px, 0);
} }
/*********************** /***********************

2
ui/src/scss/mixins.scss
View File

@ -15,6 +15,7 @@
*/ */
@import "~compass-sass-mixins/lib/compass"; @import "~compass-sass-mixins/lib/compass";
/* stylelint-disable selector-no-vendor-prefix */
@mixin input-placeholder { @mixin input-placeholder {
// replaces compass/css/user-interface/input-placeholder() // replaces compass/css/user-interface/input-placeholder()
@ -36,6 +37,7 @@
@content; @content;
} }
} }
/* stylelint-enable selector-no-vendor-prefix */
@mixin line-clamp($numLines: 1, $lineHeight: 1.412) { @mixin line-clamp($numLines: 1, $lineHeight: 1.412) {
position: relative; position: relative;