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",
"stroke"
],
"property-no-vendor-prefix": null,
"property-no-vendor-prefix": true,
"rule-empty-line-before": ["always", {
"except": ["first-nested"],
"ignore": ["after-comment"]
@ -272,7 +272,7 @@
"selector-max-type": 5,
"selector-max-universal": 1,
"selector-no-qualifying-type": null,
"selector-no-vendor-prefix": null,
"selector-no-vendor-prefix": true,
"selector-type-no-unknown": [true, {
"ignoreTypes": [
"/^md-/",
@ -287,6 +287,6 @@
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-newline-before": "never-multi-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",
"ngtemplate-loader": "^1.3.1",
"node-sass": "^4.5.3",
"postcss-loader": "^0.13.0",
"postcss-loader": "^3.0.0",
"raw-loader": "^0.5.1",
"react-hot-loader": "^3.0.0-beta.6",
"sass-loader": "^4.0.2",
@ -145,5 +145,19 @@
"node_modules",
"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;
outline: none;
@include transition(all .2s ease-in-out);
transition: all .2s ease-in-out;
.tb-widget-title {
max-height: 60px;
@ -99,7 +99,7 @@ md-content.tb-dashboard-content {
outline: none;
.gridster-item {
@include transition(none);
transition: none;
}
}

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

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

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

@ -16,7 +16,7 @@
@import "~compass-sass-mixins/lib/compass";
.md-button-toggle .md-toggle-icon.tb-toggled {
@include transform(rotateZ(180deg));
transform: rotateZ(180deg);
}
.tb-menu-toggle-list.ng-hide {
@ -28,7 +28,7 @@
z-index: 1;
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;
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 {
@ -77,14 +77,13 @@ label.tb-label {
bottom: 100%;
left: 0;
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;
-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 {
color: rgb(96, 125, 139);
}

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

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

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

@ -16,12 +16,12 @@
.tb-dashboard-assigned-customers {
display: block;
display: -webkit-box;
display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
height: 34px;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
-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 {
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 {
background-color: $primary-default !important;
@ -50,7 +50,7 @@ tb-dashboard-toolbar {
line-height: 36px;
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 {
position: absolute;

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

@ -75,13 +75,13 @@ section.tb-dashboard-toolbar {
&.tb-dashboard-toolbar-opened {
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 {
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;
}
@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 {
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 {

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

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

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

@ -84,9 +84,6 @@
.tb-panel-title {
min-width: 150px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@ -163,10 +160,6 @@
.fc-canvas {
min-width: 100%;
min-height: 100%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-touch-callout: none;
@ -441,13 +434,7 @@
}
.fc-noselect {
-webkit-touch-callout: none; /* iOS Safari */
-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 */
user-select: none;
}
.fc-edge-label {
@ -495,7 +482,6 @@
font-weight: 600;
text-align: center;
white-space: nowrap;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
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 {
@include box-sizing(border-box);
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}

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

@ -37,8 +37,6 @@ $background-color: #e6e7e8 !default;
position: relative;
&[draggable] {
-moz-user-select: none;
-webkit-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 {
position: relative;
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));
border-radius: 50%;
transition: background-color .5s, box-shadow .5s;
&.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));
}
}

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

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

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

@ -15,34 +15,34 @@
*/
@import "~compass-sass-mixins/lib/animate";
@include keyframes(tbMoveFromTopFade) {
@keyframes tbMoveFromTopFade {
from {
opacity: 0;
@include transform(translate(0, -100%));
transform: translate(0, -100%);
}
}
@include keyframes(tbMoveToTopFade) {
@keyframes tbMoveToTopFade {
to {
opacity: 0;
@include transform(translate(0, -100%));
transform: translate(0, -100%);
}
}
@include keyframes(tbMoveFromBottomFade) {
@keyframes tbMoveFromBottomFade {
from {
opacity: 0;
@include transform(translate(0, 100%));
transform: translate(0, 100%);
}
}
@include keyframes(tbMoveToBottomFade) {
@keyframes tbMoveToBottomFade {
to {
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;
white-space: nowrap;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-feature-settings: "liga"; /* stylelint-disable-line property-no-vendor-prefix */
}
a {
@ -51,7 +51,7 @@ a {
text-decoration: none;
border-bottom: 1px solid rgba(64, 84, 178, .25);
@include transition(border-bottom .35s);
transition: border-bottom .35s;
}
a:hover,
@ -258,13 +258,7 @@ label {
}
.tb-noselect {
-webkit-touch-callout: none; /* iOS Safari */
-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 */
user-select: none;
}
.tb-readonly-label {
@ -556,7 +550,7 @@ $previewSize: 100px !default;
}
.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,
@ -652,13 +646,13 @@ section.tb-top-header-buttons {
}
.tb-header-buttons .tb-btn-header {
@include animation(tbMoveFromTopFade .3s ease both);
position: relative !important;
display: inline-block !important;
animation: tbMoveFromTopFade .3s ease both;
}
.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 {
@include animation(tbMoveFromBottomFade .3s ease both);
position: relative !important;
display: inline-block !important;
animation: tbMoveFromBottomFade .3s ease both;
}
.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 {
@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";
/* stylelint-disable selector-no-vendor-prefix */
@mixin input-placeholder {
// replaces compass/css/user-interface/input-placeholder()
@ -36,6 +37,7 @@
@content;
}
}
/* stylelint-enable selector-no-vendor-prefix */
@mixin line-clamp($numLines: 1, $lineHeight: 1.412) {
position: relative;