diff --git a/platypush/backend/http/webapp/src/components/elements/Slider.vue b/platypush/backend/http/webapp/src/components/elements/Slider.vue index edd81a0dc8..a6573d0744 100644 --- a/platypush/backend/http/webapp/src/components/elements/Slider.vue +++ b/platypush/backend/http/webapp/src/components/elements/Slider.vue @@ -121,13 +121,19 @@ $label-width: 3em; .range-labels { width: 100%; + display: flex; &.with-label { width: calc(100% - $label-width); } + .left { + text-align: left; + } + .right { @extend .pull-right; + flex-grow: 1; } } diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue index 57d74bd9ea..b599e53d6b 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue @@ -8,7 +8,7 @@ :error="error" /> -
+
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue index b803280150..9f9f5ffc37 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue @@ -13,13 +13,13 @@
+ -
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue index 3e17c9530c..c4861af610 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue @@ -14,9 +14,9 @@
+ -
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/common.scss b/platypush/backend/http/webapp/src/components/panels/Entities/common.scss index 289b1ec85c..f89de230d8 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/common.scss +++ b/platypush/backend/http/webapp/src/components/panels/Entities/common.scss @@ -21,12 +21,10 @@ } .pull-right { - display: inline-flex; - align-items: center; - direction: rtl; padding-right: 0.5em; :deep(.power-switch) { + @include pull-right; margin-top: 0.25em; } } diff --git a/platypush/backend/http/webapp/src/style/layout.scss b/platypush/backend/http/webapp/src/style/layout.scss index f6c3268408..256e51083b 100644 --- a/platypush/backend/http/webapp/src/style/layout.scss +++ b/platypush/backend/http/webapp/src/style/layout.scss @@ -150,21 +150,26 @@ $widths: ( } .vertical-center { - display: flex; - align-items: center; + display: flex; + align-items: center; } .horizontal-center { - display: flex; - justify-content: center; - margin-left: auto; - margin-right: auto; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; +} + +@mixin pull-right { + display: inline-flex; + text-align: right; + justify-content: right; + flex-grow: 1; } .pull-right { - text-align: right; - float: right; - justify-content: right; + @include pull-right; } .hidden {