You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by bo...@apache.org on 2023/01/08 20:13:32 UTC
[streampipes] branch dev updated: [#877] apply formatting and linting to scss module (#1053)
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 10a63c7a3 [#877] apply formatting and linting to scss module (#1053)
10a63c7a3 is described below
commit 10a63c7a32fd755efe24bb5af211c3de1870055f
Author: Tim <50...@users.noreply.github.com>
AuthorDate: Sun Jan 8 21:13:27 2023 +0100
[#877] apply formatting and linting to scss module (#1053)
---
ui/.eslintignore | 1 -
ui/.prettierignore | 1 -
ui/src/scss/_variables.scss | 21 +-
ui/src/scss/main.scss | 2 +-
ui/src/scss/sp/animations.ng1.scss | 106 +-
ui/src/scss/sp/buttons.ng1.scss | 129 ++-
ui/src/scss/sp/buttons.scss | 142 +--
ui/src/scss/sp/colors.scss | 12 +-
ui/src/scss/sp/data-explorer.scss | 16 +-
ui/src/scss/sp/dialog.ng5.scss | 6 +-
ui/src/scss/sp/dialog.scss | 82 +-
ui/src/scss/sp/documentation.ng1.scss | 38 +-
ui/src/scss/sp/feedback.ng1.scss | 38 +-
ui/src/scss/sp/forms.scss | 26 +-
ui/src/scss/sp/input.ng1.scss | 60 +-
ui/src/scss/sp/jsplumb.scss | 2 +-
ui/src/scss/sp/layout.scss | 155 +--
ui/src/scss/sp/main.scss | 1563 +++++++++++++-------------
ui/src/scss/sp/mat-tab.scss | 8 +-
ui/src/scss/sp/pipeline-assembly.scss | 1 -
ui/src/scss/sp/pipeline-element-loading.scss | 36 +-
ui/src/scss/sp/pipeline-element-options.scss | 131 ++-
ui/src/scss/sp/pipeline-element.scss | 26 +-
ui/src/scss/sp/pipeline-validation.scss | 12 +-
ui/src/scss/sp/progress-bar.scss | 4 +-
ui/src/scss/sp/shepherd-new.scss | 771 +++++++------
ui/src/scss/sp/sp-dialog.scss | 19 +-
ui/src/scss/sp/spinner.scss | 7 +-
ui/src/scss/sp/stepper.scss | 4 +-
ui/src/scss/sp/trafficlight.scss | 34 +-
ui/src/scss/sp/widgets.scss | 52 +-
31 files changed, 1833 insertions(+), 1672 deletions(-)
diff --git a/ui/.eslintignore b/ui/.eslintignore
index 90dae2017..3c89c9fc7 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -36,4 +36,3 @@ src/app/login
src/app/notifications
src/app/NS
src/app/pipeline-details
-src/scss
diff --git a/ui/.prettierignore b/ui/.prettierignore
index ad3b9f482..ffea33c3b 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -36,4 +36,3 @@ src/app/login
src/app/notifications
src/app/NS
src/app/pipeline-details
-src/scss
diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss
index 5d137a41c..ff4e87ab7 100644
--- a/ui/src/scss/_variables.scss
+++ b/ui/src/scss/_variables.scss
@@ -23,20 +23,19 @@ $sp-color-accent-light-blue: rgb(59, 92, 149);
$sp-color-accent-light: rgb(156, 156, 156);
$sp-color-accent-light-transparent: rgba(156, 156, 156, 0.4);
-$sp-color-stream: #FFEB3B;
+$sp-color-stream: #ffeb3b;
$sp-color-set: #ffa23b;
$sp-color-processor: #009688;
-$sp-color-sink: #3F51B5;
+$sp-color-sink: #3f51b5;
-$sp-color-error: #B71C1C;
+$sp-color-error: #b71c1c;
body {
- --color-data-view: rgb(122, 206, 227);
- --color-dashboard: rgb(76, 115, 164);
- --color-adapter: rgb(182, 140, 97);
- --color-data-source: #ffa23b;
- --color-pipeline: rgb(102, 185, 114);
- --color-measurement: rgb(39, 164, 155);
- --color-file: rgb(163, 98, 190);
-
+ --color-data-view: rgb(122, 206, 227);
+ --color-dashboard: rgb(76, 115, 164);
+ --color-adapter: rgb(182, 140, 97);
+ --color-data-source: #ffa23b;
+ --color-pipeline: rgb(102, 185, 114);
+ --color-measurement: rgb(39, 164, 155);
+ --color-file: rgb(163, 98, 190);
}
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index c50faa0dd..95757a391 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -23,7 +23,7 @@
@import '~@fortawesome/fontawesome-free/css/all.css';
@import '~@jsplumb/browser-ui/css/jsplumbtoolkit.css';
@import '~shepherd.js/dist/css/shepherd.css';
-@import "~@danielmoncada/angular-datetime-picker/assets/style/picker.min.css";
+@import '~@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
@import '~leaflet/dist/leaflet.css';
@import '~material-icons/iconfont/material-icons.css';
@import '~quill/dist/quill.snow.css';
diff --git a/ui/src/scss/sp/animations.ng1.scss b/ui/src/scss/sp/animations.ng1.scss
index 927cf554a..3979246cc 100644
--- a/ui/src/scss/sp/animations.ng1.scss
+++ b/ui/src/scss/sp/animations.ng1.scss
@@ -17,102 +17,102 @@
*/
@keyframes appear {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
@keyframes disappear {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
}
@keyframes appear-opacity {
- from {
- opacity: 0;
- }
- to {
- opacity: 0.8;
- }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 0.8;
+ }
}
@keyframes disappear-opacity {
- from {
- opacity: 0.8;
- }
- to {
- opacity: 0;
- }
+ from {
+ opacity: 0.8;
+ }
+ to {
+ opacity: 0;
+ }
}
@keyframes move-top-enter {
- from {
- top:100vh;
- }
- to {
- top:0vh;
- }
+ from {
+ top: 100vh;
+ }
+ to {
+ top: 0vh;
+ }
}
@keyframes move-top-leave {
- from {
- top: 0vh;
- }
- to {
- top: -100vh;
- }
+ from {
+ top: 0vh;
+ }
+ to {
+ top: -100vh;
+ }
}
.sp-move-top.ng-enter {
- position:absolute;
- width:100%;
- animation: 0.75s move-top-enter;
+ position: absolute;
+ width: 100%;
+ animation: 0.75s move-top-enter;
}
.sp-move-top.ng-leave {
- position:absolute;
- width:100%;
- animation: 0.75s move-top-leave;
+ position: absolute;
+ width: 100%;
+ animation: 0.75s move-top-leave;
}
.sp-fade-opacity.ng-enter {
- animation: 2s appear-opacity;
+ animation: 2s appear-opacity;
}
.sp-fade-opacity.ng-leave {
- animation: 1s disappear-opacity;
+ animation: 1s disappear-opacity;
}
.sp-fade-options.ng-hide {
- animation: 0.5s disappear;
+ animation: 0.5s disappear;
}
.sp-fade.ng-enter {
- animation: 2s appear;
+ animation: 2s appear;
}
.sp-fade.ng-leave {
- animation: 1s disappear;
+ animation: 1s disappear;
}
.sp-fade.ng-leave.ng-leave-active,
.sp-fade.ng-move,
.sp-fade.ng-enter {
- opacity:0;
- max-height:0;
+ opacity: 0;
+ max-height: 0;
}
.sp-fade.ng-leave,
.sp-fade.ng-move.ng-move-active,
.sp-fade.ng-enter.ng-enter-active {
- opacity:1;
- max-height:20px;
+ opacity: 1;
+ max-height: 20px;
}
.sp-fade-only-enter.ng-enter {
- animation: 1s appear;
-}
\ No newline at end of file
+ animation: 1s appear;
+}
diff --git a/ui/src/scss/sp/buttons.ng1.scss b/ui/src/scss/sp/buttons.ng1.scss
index 023737af4..d4843c30a 100644
--- a/ui/src/scss/sp/buttons.ng1.scss
+++ b/ui/src/scss/sp/buttons.ng1.scss
@@ -19,139 +19,138 @@
@import '../_variables';
.sp-navbar-item {
- background: var(--color-navigation-bg);
- //-webkit-transition: all 0.75s ease;
- //transition: all 0.75s ease;
+ background: var(--color-navigation-bg);
+ //-webkit-transition: all 0.75s ease;
+ //transition: all 0.75s ease;
}
.sp-navbar-item-selected {
- background: var(--color-navigation-bg-selected);
+ background: var(--color-navigation-bg-selected);
}
.sp-navbar-item:hover {
- color: var(--color-navigation-selected);
- background: var(--color-navigation-hover);
+ color: var(--color-navigation-selected);
+ background: var(--color-navigation-hover);
}
.sp-navbar-icon {
- color: var(--color-navigation-link-text);
+ color: var(--color-navigation-link-text);
}
.sp-navbar-icon-selected {
- color: var(--color-navigation-selected);
+ color: var(--color-navigation-selected);
}
.sp-icon-button:hover {
- color: var(--color-navigation-selected) !important;
+ color: var(--color-navigation-selected) !important;
}
.sp-icon-button-no-hover:hover {
-
}
.sp-button {
- display: inline-block ;
- vertical-align: middle;
- border: 0;
- border-radius: 3px;
- cursor: pointer;
- font-family: inherit;
- font-weight: bold;
- text-transform: uppercase;
- font-size: 0.9em;
- letter-spacing: 0.1em;
- line-height: 1em;
- padding: 0.75em 1.25em;
- margin-right:0.25em;
- margin-left: 0.25em;
- margin-top:0px;
+ display: inline-block;
+ vertical-align: middle;
+ border: 0;
+ border-radius: 3px;
+ cursor: pointer;
+ font-family: inherit;
+ font-weight: bold;
+ text-transform: uppercase;
+ font-size: 0.9em;
+ letter-spacing: 0.1em;
+ line-height: 1em;
+ padding: 0.75em 1.25em;
+ margin-right: 0.25em;
+ margin-left: 0.25em;
+ margin-top: 0px;
}
.sp-button.sp-button-small-padding {
- padding: 0.25em 0.75em;
- font-size: 0.8em;
- max-height: 20px;
+ padding: 0.25em 0.75em;
+ font-size: 0.8em;
+ max-height: 20px;
}
-.sp-button>i {
- vertical-align:middle;
- line-height: inherit;
+.sp-button > i {
+ vertical-align: middle;
+ line-height: inherit;
}
-.sp-button>span {
- vertical-align:middle;
+.sp-button > span {
+ vertical-align: middle;
}
.sp-button.sp-button-icon:enabled {
- color:$sp-color-accent;
- background: rgba(0, 0, 0, 0);
+ color: $sp-color-accent;
+ background: rgba(0, 0, 0, 0);
}
.sp-button.sp-button-icon:hover:enabled {
- color:$sp-color-accent-light-blue;
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ color: $sp-color-accent-light-blue;
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
.sp-button.sp-button-icon:disabled {
- color: #cdcdcd;
- background: rgba(0, 0, 0, 0);
+ color: #cdcdcd;
+ background: rgba(0, 0, 0, 0);
}
.sp-button.sp-button-flat:enabled {
- color: $sp-color-accent;
- background: rgba(0, 0, 0, 0);
+ color: $sp-color-accent;
+ background: rgba(0, 0, 0, 0);
}
.sp-button.sp-button-gray:enabled {
- background: #e5e5e5;
- color: rgba(0, 0, 0, 0.75);
+ background: #e5e5e5;
+ color: rgba(0, 0, 0, 0.75);
}
.sp-button.sp-button-blue:enabled {
- background: $sp-color-accent;
- color: rgba(255, 255, 255, 0.75);
+ background: $sp-color-accent;
+ color: rgba(255, 255, 255, 0.75);
}
.sp-button.sp-button-gray:hover:enabled {
- background: #cbcbcb;
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ background: #cbcbcb;
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
.sp-button.sp-button-flat:hover:enabled {
- background: #d9d9d9;
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ background: #d9d9d9;
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
.sp-button.sp-button-blue:hover:enabled {
- background: $sp-color-accent-light-blue;
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ background: $sp-color-accent-light-blue;
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
.sp-button.sp-button-blue:disabled {
- background: #ebebeb;
- color: #cdcdcd;
+ background: #ebebeb;
+ color: #cdcdcd;
}
.sp-button.sp-button-gray:disabled {
- background: #ebebeb;
- color: #cdcdcd;
+ background: #ebebeb;
+ color: #cdcdcd;
}
.sp-button-flat:disabled {
- color: #cdcdcd;
- background: rgba(0,0,0,0);
+ color: #cdcdcd;
+ background: rgba(0, 0, 0, 0);
}
.md-button.md-icon-button.settings-bar-icon-button:hover:enabled {
- background: #a8a8a8;
+ background: #a8a8a8;
}
.settings-bar-icon-button:hover:enabled {
- background:#a8a8a8;
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ background: #a8a8a8;
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
diff --git a/ui/src/scss/sp/buttons.scss b/ui/src/scss/sp/buttons.scss
index 277305103..98c163aed 100644
--- a/ui/src/scss/sp/buttons.scss
+++ b/ui/src/scss/sp/buttons.scss
@@ -18,62 +18,70 @@
@import '../_variables';
-.mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent {
- color: var(--color-accent);
-}
-
-.mat-button, .mat-raised-button, .mat-flat-button {
- display: inline-block;
- vertical-align: middle;
- border: 0;
- border-radius: 3px;
- cursor: pointer;
- font-family: inherit;
- font-weight: bold;
- text-transform: uppercase;
- font-size: 0.8em;
- letter-spacing: 0.05em;
- line-height: 0.8em;
- padding: 0.75em 1.25em;
- margin-right: 0.25em;
- margin-left: 0.25em;
- margin-top: 0;
- box-shadow: none !important;
+.mat-button.mat-accent,
+.mat-icon-button.mat-accent,
+.mat-stroked-button.mat-accent {
+ color: var(--color-accent);
+}
+
+.mat-button,
+.mat-raised-button,
+.mat-flat-button {
+ display: inline-block;
+ vertical-align: middle;
+ border: 0;
+ border-radius: 3px;
+ cursor: pointer;
+ font-family: inherit;
+ font-weight: bold;
+ text-transform: uppercase;
+ font-size: 0.8em;
+ letter-spacing: 0.05em;
+ line-height: 0.8em;
+ padding: 0.75em 1.25em;
+ margin-right: 0.25em;
+ margin-left: 0.25em;
+ margin-top: 0;
+ box-shadow: none !important;
}
-.mat-button > i, .mat-raised-button > i, .mat-flat-button > i {
- vertical-align: middle;
- line-height: inherit;
+.mat-button > i,
+.mat-raised-button > i,
+.mat-flat-button > i {
+ vertical-align: middle;
+ line-height: inherit;
}
-.mat-button > span, .mat-raised-button > span, .mat-flat-button > span {
- vertical-align: middle;
+.mat-button > span,
+.mat-raised-button > span,
+.mat-flat-button > span {
+ vertical-align: middle;
}
.mat-fab.mat-accent {
- background: var(--color-accent);
- color: rgba(255, 255, 255, 0.75);
+ background: var(--color-accent);
+ color: rgba(255, 255, 255, 0.75);
}
.mat-raised-button.mat-primary:enabled {
- background: var(--color-primary);
- color: rgba(255, 255, 255, 0.75);
+ background: var(--color-primary);
+ color: rgba(255, 255, 255, 0.75);
}
.mat-raised-button.mat-accent:hover:enabled {
- background: $sp-color-accent-light-blue;
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ background: $sp-color-accent-light-blue;
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
.mat-raised-button.mat-accent:disabled {
- background: #ebebeb;
- color: #cdcdcd;
+ background: #ebebeb;
+ color: #cdcdcd;
}
.mat-raised-button.mat-accent:enabled {
- background: var(--color-accent);
- color: rgba(255, 255, 255, 0.75);
+ background: var(--color-accent);
+ color: rgba(255, 255, 255, 0.75);
}
.mat-raised-button.small-button {
@@ -84,61 +92,61 @@
}
.mat-raised-button.small-button-add {
- padding: 0.25em 0.75em;
- font-size: 0.8em;
- max-height: 75px;
- line-height: 25px;
+ padding: 0.25em 0.75em;
+ font-size: 0.8em;
+ max-height: 75px;
+ line-height: 25px;
}
.mat-raised-button.small-button-add-inverted {
- padding: 0.25em 0.75em;
- font-size: 0.8em;
- max-height: 75px;
- line-height: 25px;
- background: white;
- border: 1.5px solid var(--color-accent);
- color: $sp-color-accent
+ padding: 0.25em 0.75em;
+ font-size: 0.8em;
+ max-height: 75px;
+ line-height: 25px;
+ background: white;
+ border: 1.5px solid var(--color-accent);
+ color: $sp-color-accent;
}
.mat-raised-button.mat-accent:hover:enabled {
- background: $sp-color-accent-light-blue;
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ background: $sp-color-accent-light-blue;
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
.mat-raised-button.mat-accent:disabled {
- background: #ebebeb;
- color: #cdcdcd;
+ background: #ebebeb;
+ color: #cdcdcd;
}
.mat-raised-button.mat-basic:enabled {
- background: #e5e5e5;
- color: rgba(0, 0, 0, 0.67);
+ background: #e5e5e5;
+ color: rgba(0, 0, 0, 0.67);
}
.mat-raised-button.mat-basic:hover:enabled {
- background: #cbcbcb;
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ background: #cbcbcb;
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
.mat-raised-button.mat-basic:disabled {
- background: #ebebeb;
- color: #cdcdcd;
+ background: #ebebeb;
+ color: #cdcdcd;
}
.mat-flat-button.mat-accent:enabled {
- color: var(--color-accent);
- background: rgba(0, 0, 0, 0);
+ color: var(--color-accent);
+ background: rgba(0, 0, 0, 0);
}
.mat-flat-button.mat-accent:hover:enabled {
- background: var(--color-bg-2);
- -webkit-transition: all 0.75s ease;
- transition: all 0.75s ease;
+ background: var(--color-bg-2);
+ -webkit-transition: all 0.75s ease;
+ transition: all 0.75s ease;
}
.mat-flat-button.mat-accent:disabled {
- color: #cdcdcd;
- background: rgba(0, 0, 0, 0);
+ color: #cdcdcd;
+ background: rgba(0, 0, 0, 0);
}
diff --git a/ui/src/scss/sp/colors.scss b/ui/src/scss/sp/colors.scss
index 60379b90f..5ee9e14c2 100644
--- a/ui/src/scss/sp/colors.scss
+++ b/ui/src/scss/sp/colors.scss
@@ -31,10 +31,9 @@
}
.sp-blue-100-border {
- border: 2px solid rgb(63,81,181);
+ border: 2px solid rgb(63, 81, 181);
}
-
.sp-gray-border {
border: 2px solid #cccccc;
}
@@ -66,11 +65,11 @@
}
.sp-lightblue {
- color: #D9E8F5;
+ color: #d9e8f5;
}
.sp-white {
- color:#FFFFFF;
+ color: #ffffff;
}
.sp-green {
@@ -78,7 +77,7 @@
}
.sp-darkgreen {
- color: #007F54;
+ color: #007f54;
}
.sp-accent {
@@ -102,7 +101,7 @@
}
.sp-primary-border-1px {
- border:1px solid $sp-color-primary;
+ border: 1px solid $sp-color-primary;
}
.sp-bg-lightgray {
@@ -112,4 +111,3 @@
.sp-tab-bg {
background-color: var(--color-bg-1);
}
-
diff --git a/ui/src/scss/sp/data-explorer.scss b/ui/src/scss/sp/data-explorer.scss
index a742b6e98..976582092 100644
--- a/ui/src/scss/sp/data-explorer.scss
+++ b/ui/src/scss/sp/data-explorer.scss
@@ -17,15 +17,15 @@
*/
.data-explorer-header {
- margin-right: 10px;
- padding: 5px;
- font-weight: bold;
+ margin-right: 10px;
+ padding: 5px;
+ font-weight: bold;
}
.data-explorer-options-panel {
- margin-top: 4px;
- margin-bottom: 4px;
- border: 1px solid var(--color-bg-3);
- background: var(--color-bg-1);
- padding-left: 5px;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ border: 1px solid var(--color-bg-3);
+ background: var(--color-bg-1);
+ padding-left: 5px;
}
diff --git a/ui/src/scss/sp/dialog.ng5.scss b/ui/src/scss/sp/dialog.ng5.scss
index be0725d07..3bfc53034 100644
--- a/ui/src/scss/sp/dialog.ng5.scss
+++ b/ui/src/scss/sp/dialog.ng5.scss
@@ -17,6 +17,6 @@
*/
.custom-dialog-container .mat-dialog-container {
- padding: 0px;
- overflow:auto;
-}
\ No newline at end of file
+ padding: 0px;
+ overflow: auto;
+}
diff --git a/ui/src/scss/sp/dialog.scss b/ui/src/scss/sp/dialog.scss
index 44b3f0690..12284efec 100644
--- a/ui/src/scss/sp/dialog.scss
+++ b/ui/src/scss/sp/dialog.scss
@@ -19,56 +19,58 @@
@import '../variables';
.sp-no-padding-dialog .mat-dialog-container {
- box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
- display: block;
- padding: 0px;
- border-radius: 2px;
- box-sizing: border-box;
- overflow: auto;
- outline: 0;
- width: 100%;
- height: 100%;
+ box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
+ 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+ display: block;
+ padding: 0px;
+ border-radius: 2px;
+ box-sizing: border-box;
+ overflow: auto;
+ outline: 0;
+ width: 100%;
+ height: 100%;
}
.sp.no-padding-dialog .mat-dialog-container .md-dialog {
- box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
- display: block;
- padding: 0px;
- border-radius: 2px;
- box-sizing: border-box;
- overflow: auto;
- outline: 0;
- width: 100%;
- height: 100%;
+ box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
+ 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+ display: block;
+ padding: 0px;
+ border-radius: 2px;
+ box-sizing: border-box;
+ overflow: auto;
+ outline: 0;
+ width: 100%;
+ height: 100%;
}
.sp-no-padding-dialog .mat-dialog-container .md-dialog .md-toolbar {
- background: var(--color-primary);
- color: white;
+ background: var(--color-primary);
+ color: white;
}
.sp-no-padding-dialog .mat-dialog-container .md-dialog .md-dialog-content {
- padding: 24px;
+ padding: 24px;
}
.sp-no-padding-dialog .mat-dialog-container .md-dialog .md-dialog-actions {
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-box-ordinal-group: 3;
- -webkit-order: 2;
- order: 2;
- box-sizing: border-box;
- -webkit-box-align: center;
- -webkit-align-items: center;
- align-items: center;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- justify-content: flex-end;
- margin-bottom: 0;
- padding-right: 8px;
- padding-left: 16px;
- min-height: 52px;
- overflow: hidden;
- border-top: 1px solid #cccccc;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-ordinal-group: 3;
+ -webkit-order: 2;
+ order: 2;
+ box-sizing: border-box;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ justify-content: flex-end;
+ margin-bottom: 0;
+ padding-right: 8px;
+ padding-left: 16px;
+ min-height: 52px;
+ overflow: hidden;
+ border-top: 1px solid #cccccc;
}
diff --git a/ui/src/scss/sp/documentation.ng1.scss b/ui/src/scss/sp/documentation.ng1.scss
index 7925e16eb..147c630e0 100644
--- a/ui/src/scss/sp/documentation.ng1.scss
+++ b/ui/src/scss/sp/documentation.ng1.scss
@@ -19,28 +19,28 @@
@import '../_variables';
.note {
- float: left;
- display: block;
- position: relative;
- padding: 1em;
- width: 100%;
- min-height:100%;
- background-color: white;
- box-shadow: 5px 5px 10px -2px rgba(33, 33, 33, .3);
- transition: transform .15s;
- z-index: 1;
- border-radius: 10px;
- margin-left: 5px;
- max-height:100%;
- overflow: auto;
+ float: left;
+ display: block;
+ position: relative;
+ padding: 1em;
+ width: 100%;
+ min-height: 100%;
+ background-color: white;
+ box-shadow: 5px 5px 10px -2px rgba(33, 33, 33, 0.3);
+ transition: transform 0.15s;
+ z-index: 1;
+ border-radius: 10px;
+ margin-left: 5px;
+ max-height: 100%;
+ overflow: auto;
}
p.note h2 {
- color:$sp-color-accent;
- font-size:20px;
+ color: $sp-color-accent;
+ font-size: 20px;
}
p.note h3 {
- color:green;
- font-size:16px;
-}
\ No newline at end of file
+ color: green;
+ font-size: 16px;
+}
diff --git a/ui/src/scss/sp/feedback.ng1.scss b/ui/src/scss/sp/feedback.ng1.scss
index c20b9db48..ebb874ab9 100644
--- a/ui/src/scss/sp/feedback.ng1.scss
+++ b/ui/src/scss/sp/feedback.ng1.scss
@@ -19,41 +19,41 @@
@import '../_variables';
.feedback-container {
- font-size:14pt;
- height: 600px;
- z-index: 100;
- //border-left: 2px solid $sp-color-primary;
- //border-bottom: 2px solid $sp-color-primary;
- //border-right: 2px solid $sp-color-primary;
- padding:24px;
- color: var(--color-default-text);
+ font-size: 14pt;
+ height: 600px;
+ z-index: 100;
+ //border-left: 2px solid $sp-color-primary;
+ //border-bottom: 2px solid $sp-color-primary;
+ //border-right: 2px solid $sp-color-primary;
+ padding: 24px;
+ color: var(--color-default-text);
}
.feedback-width-100 {
- width:100%;
+ width: 100%;
}
.feedback-height-100 {
- height:100%;
+ height: 100%;
}
.feedback-explainer {
- font-size:12pt;
+ font-size: 12pt;
}
.feedback-title {
- font-size:20pt;
- font-weight:bold;
- color: var(--color-accent);
- text-align: center;
+ font-size: 20pt;
+ font-weight: bold;
+ color: var(--color-accent);
+ text-align: center;
}
.feedback-font-size-small {
- font-size:11pt;
+ font-size: 11pt;
}
.feedback-status {
- font-size:16pt;
- margin-top:10px;
- margin-bottom:20px;
+ font-size: 16pt;
+ margin-top: 10px;
+ margin-bottom: 20px;
}
diff --git a/ui/src/scss/sp/forms.scss b/ui/src/scss/sp/forms.scss
index dee3437ec..85dbe36ad 100644
--- a/ui/src/scss/sp/forms.scss
+++ b/ui/src/scss/sp/forms.scss
@@ -17,30 +17,30 @@
*/
mat-form-field.mat-form-field.form-field-size {
- font-size: 12px;
+ font-size: 12px;
}
mat-form-field.mat-form-field.form-field-size-smaller {
- font-size: 10px;
+ font-size: 10px;
}
-.form-field-margin .mat-form-field-wrapper{
- margin-bottom: -1.25em;
- padding-bottom: 1.25em;
+.form-field-margin .mat-form-field-wrapper {
+ margin-bottom: -1.25em;
+ padding-bottom: 1.25em;
}
.smaller-button-font-size.mat-raised-button {
- font-size: 0.8em;
- letter-spacing: 0.05em;
+ font-size: 0.8em;
+ letter-spacing: 0.05em;
}
.icon-button-font-size.mat-button {
- font-size: 0.8em;
- letter-spacing: 0.05em;
+ font-size: 0.8em;
+ letter-spacing: 0.05em;
}
.button-icon.mat-button {
- min-width:0;
- border-radius: 0;
- padding: 0 4px;
-}
\ No newline at end of file
+ min-width: 0;
+ border-radius: 0;
+ padding: 0 4px;
+}
diff --git a/ui/src/scss/sp/input.ng1.scss b/ui/src/scss/sp/input.ng1.scss
index 642c6da8b..0e17a979a 100644
--- a/ui/src/scss/sp/input.ng1.scss
+++ b/ui/src/scss/sp/input.ng1.scss
@@ -19,62 +19,70 @@
@import '../_variables';
md-input-container {
- margin: 5px;
+ margin: 5px;
}
md-input-container.sp .md-input {
- border: 2px solid $sp-color-accent;
- border-radius: 3px;
- background: #f6f6f6;
+ border: 2px solid $sp-color-accent;
+ border-radius: 3px;
+ background: #f6f6f6;
}
md-input-container.sp.md-input-invalid {
- border-radius: 3px;
+ border-radius: 3px;
}
md-input-container.sp.md-input-invalid .md-input {
- border: 2px solid $sp-color-error;
- border-radius: 3px;
- background: white;
+ border: 2px solid $sp-color-error;
+ border-radius: 3px;
+ background: white;
}
md-input-container.sp {
- border-radius: 3px;
+ border-radius: 3px;
}
md-input-container.sp.md-input-focused.md-input-invalid {
- background: $sp-color-error;
+ background: $sp-color-error;
}
md-input-container.sp.md-input-focused {
- background: $sp-color-accent;
- -webkit-transition: background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
- transition: background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
- transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
- transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
+ background: $sp-color-accent;
+ -webkit-transition: background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s,
+ -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
+ transition: background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s,
+ -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
+ transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s,
+ background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
+ transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s,
+ background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s,
+ -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
}
md-input-container.sp label:not(.md-no-float) {
- //transform: translate3d(0, -28px, 0) scale(1);
+ //transform: translate3d(0, -28px, 0) scale(1);
}
-md-input-container.sp.md-input-focused label:not(.md-no-float), md-input-container.sp.md-input-has-placeholder label:not(.md-no-float), md-input-container.sp.md-input-has-value label:not(.md-no-float) {
- -webkit-transform: translate3d(0, 55px, 0) scale(0.75);
- color:white;
- }
+md-input-container.sp.md-input-focused label:not(.md-no-float),
+md-input-container.sp.md-input-has-placeholder label:not(.md-no-float),
+md-input-container.sp.md-input-has-value label:not(.md-no-float) {
+ -webkit-transform: translate3d(0, 55px, 0) scale(0.75);
+ color: white;
+}
md-input-container.sp label:not(.md-container-ignore).md-required:after {
- color:white;
+ color: white;
}
md-input-container.sp.md-input-focused .md-input {
- border-width: 2px;
+ border-width: 2px;
}
-md-input-container.sp label:not(.md-no-float):not(.md-container-ignore), md-input-container.sp .md-placeholder {
- padding-left:10px;
+md-input-container.sp label:not(.md-no-float):not(.md-container-ignore),
+md-input-container.sp .md-placeholder {
+ padding-left: 10px;
}
label {
- margin-bottom: 0px;
-}
\ No newline at end of file
+ margin-bottom: 0px;
+}
diff --git a/ui/src/scss/sp/jsplumb.scss b/ui/src/scss/sp/jsplumb.scss
index 9d828b526..69d0b4600 100644
--- a/ui/src/scss/sp/jsplumb.scss
+++ b/ui/src/scss/sp/jsplumb.scss
@@ -17,5 +17,5 @@
*/
.jtk-endpoint {
- z-index: 5;
+ z-index: 5;
}
diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss
index 408188e4f..1a73cdf87 100644
--- a/ui/src/scss/sp/layout.scss
+++ b/ui/src/scss/sp/layout.scss
@@ -16,190 +16,209 @@
*
*/
-
-
-
.p-0 {
- padding: 0;
+ padding: 0;
}
.p-5 {
- padding: 5px;
+ padding: 5px;
}
.p-10 {
- padding: 10px;
+ padding: 10px;
}
.pl-5 {
- padding-left: 5px;
+ padding-left: 5px;
}
.pl-10 {
- padding-left: 10px;
+ padding-left: 10px;
}
.pr-5 {
- padding-right: 5px;
+ padding-right: 5px;
}
.pr-10 {
- padding-right: 10px;
+ padding-right: 10px;
}
-
.ml-0 {
- margin-left: 0;
+ margin-left: 0;
}
.mr-0 {
- margin-right: 0;
+ margin-right: 0;
}
.m-5 {
- margin: 5px;
+ margin: 5px;
}
.mt-0 {
- margin-top: 0;
+ margin-top: 0;
}
.mt-10 {
- margin-top: 10px;
+ margin-top: 10px;
}
.mt-20 {
- margin-top: 20px;
+ margin-top: 20px;
}
.mt-30 {
- margin-top: 30px;
+ margin-top: 30px;
}
.mb-10 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.mr-10 {
- margin-right: 10px;
+ margin-right: 10px;
}
.mr-5 {
- margin-right: 5px;
+ margin-right: 5px;
}
.ml-5 {
- margin-left: 5px;
+ margin-left: 5px;
}
.mr-15 {
- margin-right: 15px;
+ margin-right: 15px;
}
.w-50-px {
- width: 50px;
+ width: 50px;
}
.w-100-px {
- width: 100px;
+ width: 100px;
}
.w-140-px {
- width: 140px;
+ width: 140px;
}
.w-100 {
- width: 100%;
+ width: 100%;
}
.h-100 {
- height: 100%;
+ height: 100%;
}
.page-container-nav {
- line-height:24px;
- height: 50px;
- border-bottom:1px solid var(--color-bg-3);
+ line-height: 24px;
+ height: 50px;
+ border-bottom: 1px solid var(--color-bg-3);
}
.text-center {
- text-align: center;
+ text-align: center;
}
.text-left {
- text-align: left;
+ text-align: left;
}
-
-h4, .h4 {
- font-size: 18px;
+h4,
+.h4 {
+ font-size: 18px;
}
-h3, .h3 {
- font-size: 24px;
+h3,
+.h3 {
+ font-size: 24px;
}
-h1, .h1, h2, .h2, h3, .h3 {
- margin-top: 20px;
- margin-bottom: 10px;
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
}
-h4, .h4, h5, .h5, h6, .h6 {
- margin-top: 10px;
- margin-bottom: 10px;
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+ margin-top: 10px;
+ margin-bottom: 10px;
}
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
- font-family: inherit;
- font-weight: 500;
- line-height: 1.1;
- color: inherit;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+ font-family: inherit;
+ font-weight: 500;
+ line-height: 1.1;
+ color: inherit;
}
img {
- vertical-align: middle;
+ vertical-align: middle;
}
img {
- border: 0;
+ border: 0;
}
.mat-expansion-panel-body {
- padding: 0 !important;
+ padding: 0 !important;
}
.small-select mat-select {
- background-color: rgba(58, 40, 8, 0.12);
- padding: 6px 10px 6px 10px;
- box-sizing: border-box;
- border-radius: 5px;
+ background-color: rgba(58, 40, 8, 0.12);
+ padding: 6px 10px 6px 10px;
+ box-sizing: border-box;
+ border-radius: 5px;
}
.small-select .mat-select-value {
- font-size: 16px;
- color: var(--color-accent);
+ font-size: 16px;
+ color: var(--color-accent);
}
.small-select .mat-form-field-underline {
- display: none;
+ display: none;
}
-.small-select mat-select-trigger div>i {
- margin-right: 8px;
+.small-select mat-select-trigger div > i {
+ margin-right: 8px;
}
.small-select .mat-form-field-infix {
- padding: 0;
- border-top: 0;
+ padding: 0;
+ border-top: 0;
}
.small-select .mat-form-field-wrapper {
- padding-bottom: 0;
+ padding-bottom: 0;
}
.large-checkbox .mat-checkbox-inner-container {
- width: 20px;
- height: 20px;
+ width: 20px;
+ height: 20px;
}
-.mat-menu-panel.large-menu { max-width: none; }
-
+.mat-menu-panel.large-menu {
+ max-width: none;
+}
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index a934bee79..a7480832f 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -19,103 +19,106 @@
@import '../_variables';
md-progress-linear.md-accent .md-container {
- background-color: rgb(168, 168, 168);
+ background-color: rgb(168, 168, 168);
}
.stream-endpoint {
- background: green;
+ background: green;
}
.gu-mirror {
- display: none; /* This fixes a bug with the dragular framework */
+ display: none; /* This fixes a bug with the dragular framework */
}
body {
- overflow: auto;
- background: #ffffff;
+ overflow: auto;
+ background: #ffffff;
- font-family: 'Roboto', 'Arial', sans-serif !important;
- height: auto !important;
- width: 100%;
+ font-family: 'Roboto', 'Arial', sans-serif !important;
+ height: auto !important;
+ width: 100%;
- --color-set: #{$sp-color-set};
- --color-stream: #{$sp-color-stream};
- --color-processor: #{$sp-color-processor};
- --color-sink: #{$sp-color-sink};
- --color-tab-border: var(--color-bg-3);
+ --color-set: #{$sp-color-set};
+ --color-stream: #{$sp-color-stream};
+ --color-processor: #{$sp-color-processor};
+ --color-sink: #{$sp-color-sink};
+ --color-tab-border: var(--color-bg-3);
}
pre.version {
- background-color: inherit;
- border: 0;
+ background-color: inherit;
+ border: 0;
}
.md-toolbar-tools {
- width: 100%;
- align-items: center;
+ width: 100%;
+ align-items: center;
}
-code[class*="language-"], pre[class*="language-"] {
- white-space:pre-wrap;
+code[class*='language-'],
+pre[class*='language-'] {
+ white-space: pre-wrap;
}
.ql-container {
- height: auto;
+ height: auto;
}
.CodeMirror-hints {
- z-index: 1000;
+ z-index: 1000;
}
.editor-error-notifications {
- position: absolute;
- left: -226px;
- top: 40px;
- z-index: 1;
- background: var(--color-bg-dialog);
- border: 2px solid var(--color-warn);
- border-radius: 5px;
- width: 300px;
- color: var(--color-default-text);
- padding: 5px;
- box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+ position: absolute;
+ left: -226px;
+ top: 40px;
+ z-index: 1;
+ background: var(--color-bg-dialog);
+ border: 2px solid var(--color-warn);
+ border-radius: 5px;
+ width: 300px;
+ color: var(--color-default-text);
+ padding: 5px;
+ box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+ 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
+ 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}
md-dialog.colored-frame {
- border-top: 4px solid $sp-color-primary;
- border-radius: 10px;
+ border-top: 4px solid $sp-color-primary;
+ border-radius: 10px;
}
md-dialog-actions {
- border-top: 1px solid #cccccc;
+ border-top: 1px solid #cccccc;
}
.mat-step-header .mat-step-icon {
- background-color: $sp-color-accent;
+ background-color: $sp-color-accent;
}
.cv-wrapper {
- font-size: 1em;
- width: 320px;
- height: 320px;
- overflow: hidden;
- position: absolute;
- left: -100px;
- top: -100px;
- border-radius: 50%;
- pointer-events: none;
- /*margin-left: -13em;*/
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- transition: all .3s ease;
- transform: scale(0.1);
- visibility: hidden;
+ font-size: 1em;
+ width: 320px;
+ height: 320px;
+ overflow: hidden;
+ position: absolute;
+ left: -100px;
+ top: -100px;
+ border-radius: 50%;
+ pointer-events: none;
+ /*margin-left: -13em;*/
+ -webkit-transition: all 0.3s ease;
+ -moz-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+ transform: scale(0.1);
+ visibility: hidden;
}
.opened-nav {
- /*border-radius: 50%;*/
- transform: scale(1);
- visibility: visible;
+ /*border-radius: 50%;*/
+ transform: scale(1);
+ visibility: visible;
}
/*.cv-wrapper li {*/
@@ -133,61 +136,59 @@ md-dialog-actions {
/*}*/
.cv-wrapper li {
- pointer-events: all;
- position: absolute;
- width: 160px;
- height: 160px;
- -webkit-transform-origin: 100% 100%;
- -moz-transform-origin: 100% 100%;
- -ms-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- overflow: hidden;
- left: 0%;
- top: 0%;
- /*margin-top: -20px;*/
- /*margin-left: -20px;*/
- -webkit-transition: border .3s ease;
- -moz-transition: border .3s ease;
- transition: border .3s ease;
- background: lightgray;
-
+ pointer-events: all;
+ position: absolute;
+ width: 160px;
+ height: 160px;
+ -webkit-transform-origin: 100% 100%;
+ -moz-transform-origin: 100% 100%;
+ -ms-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ overflow: hidden;
+ left: 0%;
+ top: 0%;
+ /*margin-top: -20px;*/
+ /*margin-left: -20px;*/
+ -webkit-transition: border 0.3s ease;
+ -moz-transition: border 0.3s ease;
+ transition: border 0.3s ease;
+ background: lightgray;
}
.cv-wrapper li a {
- cursor: pointer;
- pointer-events: all;
- display: block;
- height: 300px;
- width: 300px;
- position: absolute;
- right: -150px;
- bottom: -150px;
- border-radius: 50%;
- text-decoration: none;
- /*color: #fff;*/
- /*padding-top: 1.8em;*/
- text-align: center;
- -webkit-backface-visibility: hidden;
- -webkit-transition: opacity 0.3s, color 0.3s;
- -moz-transition: opacity 0.3s, color 0.3s;
- transition: opacity 0.3s, color 0.3s;
-
+ cursor: pointer;
+ pointer-events: all;
+ display: block;
+ height: 300px;
+ width: 300px;
+ position: absolute;
+ right: -150px;
+ bottom: -150px;
+ border-radius: 50%;
+ text-decoration: none;
+ /*color: #fff;*/
+ /*padding-top: 1.8em;*/
+ text-align: center;
+ -webkit-backface-visibility: hidden;
+ -webkit-transition: opacity 0.3s, color 0.3s;
+ -moz-transition: opacity 0.3s, color 0.3s;
+ transition: opacity 0.3s, color 0.3s;
}
.cv-wrapper li:nth-child(odd) a.sepa {
- background-color: #009688;
+ background-color: #009688;
}
.cv-wrapper li:nth-child(even) a.sepa {
- background-color: #00a496;
+ background-color: #00a496;
}
.cv-wrapper li:nth-child(odd) a.action {
- background-color: #3F51B5;
+ background-color: #3f51b5;
}
.cv-wrapper li:nth-child(even) a.action {
- background-color: #4f65e6;
+ background-color: #4f65e6;
}
/*!* active style *!*/
@@ -200,758 +201,760 @@ md-dialog-actions {
.cv-wrapper li a:hover,
.cv-wrapper li a:active,
.cv-wrapper li a:focus {
- background: rgba(255, 255, 255, 0.5) !important;
- border: 2px solid #919191;
+ background: rgba(255, 255, 255, 0.5) !important;
+ border: 2px solid #919191;
}
.cv-wrapper a:focus {
- position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
+ position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
}
md-toolbar:not(.md-menu-toolbar) {
- background: var(--color-primary);
+ background: var(--color-primary);
}
.md-list-item-text {
- font-family: Arial !important;
+ font-family: Arial !important;
}
.home-image-wrapper {
- margin-bottom: 10px;
- cursor: pointer;
+ margin-bottom: 10px;
+ cursor: pointer;
}
.home-image {
- opacity: 0.6;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(114, 160, 178, 0.8);
- background-size: cover;
+ opacity: 0.6;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(114, 160, 178, 0.8);
+ background-size: cover;
}
.home-image:hover {
- opacity: 1;
+ opacity: 1;
}
.home-image-caption {
- top: 0px;
- padding: 5px;
- margin-bottom: 0px;
- text-align: center;
- color: white;
- opacity: 0.9;
+ top: 0px;
+ padding: 5px;
+ margin-bottom: 0px;
+ text-align: center;
+ color: white;
+ opacity: 0.9;
}
.btn-6a {
- border: 4px solid #226fbe;
+ border: 4px solid #226fbe;
}
.btn-6 {
- color: #fff;
- background: #226fbe;
- -webkit-transition: none;
- -moz-transition: none;
- transition: none;
+ color: #fff;
+ background: #226fbe;
+ -webkit-transition: none;
+ -moz-transition: none;
+ transition: none;
}
.btn-t {
- border: none;
- font-family: inherit;
- font-size: inherit;
- color: inherit;
- background: none;
- cursor: pointer;
- padding: 25px 80px;
- display: inline-block;
- margin: 15px 30px;
- text-transform: uppercase;
- letter-spacing: 1px;
- font-weight: 700;
- outline: none;
- position: relative;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- transition: all 0.3s;
+ border: none;
+ font-family: inherit;
+ font-size: inherit;
+ color: inherit;
+ background: none;
+ cursor: pointer;
+ padding: 25px 80px;
+ display: inline-block;
+ margin: 15px 30px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-weight: 700;
+ outline: none;
+ position: relative;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
}
.angular-notifications-container {
- left: -7px !important;
+ left: -7px !important;
}
.angular-notifications-icon {
- right: -7px !important;
- top: -7px !important;
- background: $sp-color-accent !important;
+ right: -7px !important;
+ top: -7px !important;
+ background: $sp-color-accent !important;
}
.speech-bubble {
- position: relative;
- margin-top: 20px;
- padding: 20px;
+ position: relative;
+ margin-top: 20px;
+ padding: 20px;
}
.speech-bubble:after {
- content: '';
- position: absolute;
- top: 0;
- left: 0%;
- width: 0;
- height: 0;
- border: 20px solid transparent;
- border-bottom-color: rgb(63, 81, 181);
- border-top: 0;
- border-left: 0;
- margin-left: -10px;
- margin-top: -20px;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0%;
+ width: 0;
+ height: 0;
+ border: 20px solid transparent;
+ border-bottom-color: rgb(63, 81, 181);
+ border-top: 0;
+ border-left: 0;
+ margin-left: -10px;
+ margin-top: -20px;
}
.button-margin-iconbar {
- padding: 0px !important;
- margin: 0px !important;
+ padding: 0px !important;
+ margin: 0px !important;
}
md-content {
- background: #fff !important;
+ background: #fff !important;
}
.current-nav-page-box {
- //margin-top: 25px;
- //position: relative;
- //z-index: 1;
- white-space: nowrap;
- align-items: end;
- margin-top: 1px;
+ //margin-top: 25px;
+ //position: relative;
+ //z-index: 1;
+ white-space: nowrap;
+ align-items: end;
+ margin-top: 1px;
}
.current-nav-page-content {
- position: relative;
- display: inline-block;
- padding: 1.5em 1.5em 1em;
- color: inherit;
- text-decoration: none;
- margin: 0 -7px;
- top: -10px;
- height:40px;
+ position: relative;
+ display: inline-block;
+ padding: 1.5em 1.5em 1em;
+ color: inherit;
+ text-decoration: none;
+ margin: 0 -7px;
+ top: -10px;
+ height: 40px;
}
.current-nav-page-content::before {
- content: ''; /* To generate the box */
- position: absolute;
- top: 0;
- right: 0;
- bottom: .5em;
- left: 0;
- z-index: -1;
- border-radius: 10px 10px 0 0;
- background: #fff;
- box-shadow: 0 2px #fff inset;
- transform: perspective(4px) rotateX(-1deg);
- transform-origin: bottom;
- //height: calc(100% - 20px);
- border: 0px solid $sp-color-accent;
- border-bottom: .1em none #fff;
+ content: ''; /* To generate the box */
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0.5em;
+ left: 0;
+ z-index: -1;
+ border-radius: 10px 10px 0 0;
+ background: #fff;
+ box-shadow: 0 2px #fff inset;
+ transform: perspective(4px) rotateX(-1deg);
+ transform-origin: bottom;
+ //height: calc(100% - 20px);
+ border: 0px solid $sp-color-accent;
+ border-bottom: 0.1em none #fff;
}
.current-nav-page {
- padding: 10px;
- border-bottom: 2px solid #304269;
- display: inline-block;
- margin-top: 20px;
- background: white;
- border-bottom: 0px;
+ padding: 10px;
+ border-bottom: 2px solid #304269;
+ display: inline-block;
+ margin-top: 20px;
+ background: white;
+ border-bottom: 0px;
}
.page-container {
- margin: 10px;
- border: 1px solid var(--color-bg-3);
- min-height: calc(100% - 60px);
- //height: 100%;
+ margin: 10px;
+ border: 1px solid var(--color-bg-3);
+ min-height: calc(100% - 60px);
+ //height: 100%;
}
.sp-full-height {
- min-height: calc(100% - 20px);
+ min-height: calc(100% - 20px);
}
.page-container-padding-inner {
- margin: 10px;
+ margin: 10px;
}
.page-container-subheader {
-
}
.subsection-title {
- font-size: 12pt;
- font-weight: bold;
- margin-bottom: 10px;
+ font-size: 12pt;
+ font-weight: bold;
+ margin-bottom: 10px;
}
.page-container-no-border {
- margin: 10px;
- min-height: calc(100% - 20px);
+ margin: 10px;
+ min-height: calc(100% - 20px);
}
.page-container-inner-border {
- border: 1px solid #cccccc;
- margin-bottom: 1%;
+ border: 1px solid #cccccc;
+ margin-bottom: 1%;
}
.page-container-padding {
- padding-bottom: 20px;
+ padding-bottom: 20px;
}
#ship {
- border: 1px solid;
- padding: 10px;
- background: #dddddd;
- border-bottom-left-radius: 20em;
- border-bottom-right-radius: 20em;
+ border: 1px solid;
+ padding: 10px;
+ background: #dddddd;
+ border-bottom-left-radius: 20em;
+ border-bottom-right-radius: 20em;
}
md-toolbar.top-nav {
- min-height: 40px !important;
+ min-height: 40px !important;
}
.top-nav {
- height: 40px !important;
- border-bottom: 0px solid $sp-color-accent;
+ height: 40px !important;
+ border-bottom: 0px solid $sp-color-accent;
}
md-list-item > .md-button {
- padding: 0px;
- min-width: 0px;
+ padding: 0px;
+ min-width: 0px;
}
-md-list-item.md-no-proxy, md-list-item .md-no-style {
- padding: 0px 7px !important;
+md-list-item.md-no-proxy,
+md-list-item .md-no-style {
+ padding: 0px 7px !important;
}
md-list-item._md-button-wrap > div.md-button:first-child {
- padding: 0px 7px !important;
+ padding: 0px 7px !important;
}
.angular-google-map-container {
- height: 400px;
+ height: 400px;
}
.wizard-preview {
- height: 150px !important;
- width: 150px !important;
- box-shadow: 0 0 2px $sp-color-accent;
- display: inline-block;
- vertical-align: middle;
- background-color: white;
- line-height: 90px;
- text-align: center;
- margin-left: auto;
- margin-right: auto;
- display: block;
- font-size: 30px;
- font-family: Roboto;
- margin-top: 20px;
+ height: 150px !important;
+ width: 150px !important;
+ box-shadow: 0 0 2px $sp-color-accent;
+ display: inline-block;
+ vertical-align: middle;
+ background-color: white;
+ line-height: 90px;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ font-size: 30px;
+ font-family: Roboto;
+ margin-top: 20px;
}
.wizard-preview-selected {
- border: 5px solid $sp-color-accent;
+ border: 5px solid $sp-color-accent;
}
.letter-circle {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #ffffff;
- text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #ffffff;
+ text-align: center;
- font: 16px Arial, sans-serif;
+ font: 16px Arial, sans-serif;
}
.tutorial-image {
- float: left;
- position: relative;
-
+ float: left;
+ position: relative;
}
.tutorial-content {
- position: absolute; /* absolute position (so we can position it where we want)*/
- bottom: 0px; /* position will be on bottom */
- left: 0px;
- width: 100%;
- /* styling bellow */
- background-color: rgb(63, 81, 181);
- font-size: 15px;
- color: white;
- opacity: 0.9; /* transparency */
- filter: alpha(opacity=90); /* IE transparency */
- align-items: center;
- justify-content: center;
+ position: absolute; /* absolute position (so we can position it where we want)*/
+ bottom: 0px; /* position will be on bottom */
+ left: 0px;
+ width: 100%;
+ /* styling bellow */
+ background-color: rgb(63, 81, 181);
+ font-size: 15px;
+ color: white;
+ opacity: 0.9; /* transparency */
+ filter: alpha(opacity=90); /* IE transparency */
+ align-items: center;
+ justify-content: center;
}
.centered {
- align-items: center;
- justify-content: center;
- padding: 5px;
+ align-items: center;
+ justify-content: center;
+ padding: 5px;
}
.md-padding-left {
- padding-left: 16px;
+ padding-left: 16px;
}
-md-input-container.md-default-theme label, md-input-container label, md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder {
- color: rgba(0, 0, 0, 0.66);
+md-input-container.md-default-theme label,
+md-input-container label,
+md-input-container.md-default-theme .md-placeholder,
+md-input-container .md-placeholder {
+ color: rgba(0, 0, 0, 0.66);
}
-md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder {
- color: rgba(0, 0, 0, 0.66);
+md-select.md-default-theme .md-select-value.md-select-placeholder,
+md-select .md-select-value.md-select-placeholder {
+ color: rgba(0, 0, 0, 0.66);
}
.wizard-row:before {
- top: 210px;
- bottom: 0;
- position: absolute;
- content: " ";
- width: 80%;
- left: 10%;
- margin-right: auto;
- height: 0px;
- background-color: #ccc;
- z-order: 0;
+ top: 210px;
+ bottom: 0;
+ position: absolute;
+ content: ' ';
+ width: 80%;
+ left: 10%;
+ margin-right: auto;
+ height: 0px;
+ background-color: #ccc;
+ z-order: 0;
}
.wizard-row-stream {
- position: relative;
- z-index: 1;
-
+ position: relative;
+ z-index: 1;
}
.wizard-row-stream:before {
- border-top: 1px solid #ccc;
- content: "";
- margin: 0 auto; /* this centers the line to the full width specified */
- position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
- top: 37%;
- left: 0;
- right: 0;
- bottom: 0;
- width: 95%;
- z-index: -1;
+ border-top: 1px solid #ccc;
+ content: '';
+ margin: 0 auto; /* this centers the line to the full width specified */
+ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
+ top: 37%;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 95%;
+ z-index: -1;
}
.wizard-inactive {
- background-color: white !important;
- color: black !important;
- border: 2px solid $sp-color-accent !important;
+ background-color: white !important;
+ color: black !important;
+ border: 2px solid $sp-color-accent !important;
}
.popover {
- border: 1px solid $sp-color-accent;
- box-shadow: 0 0px 0px;
- -webkit-bow-shadow: none;
- border-radius: 0px;
- padding: 0px;
+ border: 1px solid $sp-color-accent;
+ box-shadow: 0 0px 0px;
+ -webkit-bow-shadow: none;
+ border-radius: 0px;
+ padding: 0px;
}
.arrow {
- color: $sp-color-accent;
+ color: $sp-color-accent;
}
.popover-title {
- background-color: $sp-color-accent;
- color: white;
- border-radius: 0px 0px 0 0;
+ background-color: $sp-color-accent;
+ color: white;
+ border-radius: 0px 0px 0 0;
}
.full-background {
- background: #FFF;
+ background: #fff;
}
.box-shadow-login {
- border: 1px solid #e0e0e0;
- border-radius: 5px;
- box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 1px 4px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
+ border: 1px solid #e0e0e0;
+ border-radius: 5px;
+ box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2),
+ 0px 1px 4px 0px rgba(0, 0, 0, 0.14),
+ 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
}
.logo-production {
- background: url('/assets/img/login/background.png') no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
+ background: url('/assets/img/login/background.png') no-repeat center center
+ fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
}
.circle {
- border-radius: 50%;
- width: 150px;
- height: 150px;
- font-size: 40px;
- color: #fff;
- line-height: 150px;
- text-align: center;
+ border-radius: 50%;
+ width: 150px;
+ height: 150px;
+ font-size: 40px;
+ color: #fff;
+ line-height: 150px;
+ text-align: center;
}
-.md-dialog-container, md-backdrop {
- position: fixed;
+.md-dialog-container,
+md-backdrop {
+ position: fixed;
}
.md-dialog-is-showing {
- overflow: visible;
+ overflow: visible;
}
.panel-margin {
- margin: 10px;
- padding: 10px;
+ margin: 10px;
+ padding: 10px;
}
.customize-item-main {
- border-radius: 5px;
- margin: 5px;
+ border-radius: 5px;
+ margin: 5px;
}
.customize-item-content {
- padding: 10px;
+ padding: 10px;
}
.customize-item-title {
- /* background: rgb(140,158,255); */
- color: white;
- font-size: 12pt;
- padding: 5px;
+ /* background: rgb(140,158,255); */
+ color: white;
+ font-size: 12pt;
+ padding: 5px;
}
.customize-item-main-help {
- border: 2px solid $sp-color-accent;
- border-radius: 5px;
- margin: 5px;
+ border: 2px solid $sp-color-accent;
+ border-radius: 5px;
+ margin: 5px;
}
.customize-item-title-help {
- background: $sp-color-accent;
- color: white;
- font-size: 12pt;
- padding: 5px;
+ background: $sp-color-accent;
+ color: white;
+ font-size: 12pt;
+ padding: 5px;
}
.ontology-panel-main {
- margin-top: 5px;
- margin-bottom: 5px;
- border-radius: 0px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ border-radius: 0px;
}
.ontology-panel-title {
- padding: 5px;
- font-size: 16pt;
- color: #ffffff;
+ padding: 5px;
+ font-size: 16pt;
+ color: #ffffff;
}
.ontology-panel-title-property {
- background: #009688;
+ background: #009688;
}
.ontology-panel-property {
- border: 1px solid #009688;
+ border: 1px solid #009688;
}
.ontology-panel-pipeline-configurator {
- border: 1px solid rgb(63, 81, 181);
+ border: 1px solid rgb(63, 81, 181);
}
.ontology-panel-title-concept {
- background: #F9A825;
+ background: #f9a825;
}
.ontology-panel-concept {
- border: 1px solid #F9A825;
+ border: 1px solid #f9a825;
}
.ontology-panel-title-instance {
- background: #9C27B0;
+ background: #9c27b0;
}
.ontology-panel-instance {
- border: 1px solid #9C27B0;
+ border: 1px solid #9c27b0;
}
.tree-node-title {
- color: black;
- padding: 3px;
- font-size: 12px;
+ color: black;
+ padding: 3px;
+ font-size: 12px;
}
.tree-node-action {
- width: 24px;
- height: 24px;
-
+ width: 24px;
+ height: 24px;
}
.tree-node {
- border: 1px solid #dae2ea;
- border-radius: 5px;
- background: #ffffff;
- color: rgb(63, 81, 181);
- margin: 5px;
+ border: 1px solid #dae2ea;
+ border-radius: 5px;
+ background: #ffffff;
+ color: rgb(63, 81, 181);
+ margin: 5px;
}
.color-instance {
- background: #F3E5F5;
- border: 1px solid #9C27B0;
+ background: #f3e5f5;
+ border: 1px solid #9c27b0;
}
.color-concept {
- background: #FFFDE7;
- border: 1px solid #F9A825;
+ background: #fffde7;
+ border: 1px solid #f9a825;
}
.color-property {
- background: #f8faff;
- border: 1px solid #009688;
+ background: #f8faff;
+ border: 1px solid #009688;
}
.sidebar-badge {
- display: inline-block;
- min-width: 24px;
- height: 24px;
- line-height: 24px;
- padding: 0 3px;
- font-size: 10px;
- text-align: center;
- white-space: nowrap;
- position: absolute;
- right: 16px;
- top: 25px;
- color: #ffffff;
- background-color: $sp-color-accent;
- vertical-align: middle;
+ display: inline-block;
+ min-width: 24px;
+ height: 24px;
+ line-height: 24px;
+ padding: 0 3px;
+ font-size: 10px;
+ text-align: center;
+ white-space: nowrap;
+ position: absolute;
+ right: 16px;
+ top: 25px;
+ color: #ffffff;
+ background-color: $sp-color-accent;
+ vertical-align: middle;
}
.panel-sources {
- background: #B2DFDB;
-
+ background: #b2dfdb;
}
.panel-streams {
- background: #B2EBF2;
+ background: #b2ebf2;
}
.panel-actions {
- background: #EF9A9A;
+ background: #ef9a9a;
}
.content-padding {
- padding-left: 5%;
- padding-right: 5%;
+ padding-left: 5%;
+ padding-right: 5%;
}
#sources {
- /*margin-left: 5%;*/
- width: 100%;
- height: 100px;
- margin-top: 1%;
- line-height: 5vh;
- font-weight: bold;
- margin-bottom: 1%;
+ /*margin-left: 5%;*/
+ width: 100%;
+ height: 100px;
+ margin-top: 1%;
+ line-height: 5vh;
+ font-weight: bold;
+ margin-bottom: 1%;
}
.clickable {
- display: inline-block;
- height: 90px;
- width: 90px;
- line-height: 90px;
- margin-left: 3%;
- margin-right: 3%;
- /*padding: .5vh;*/
- vertical-align: middle;
- cursor: pointer;
- text-align: center;
+ display: inline-block;
+ height: 90px;
+ width: 90px;
+ line-height: 90px;
+ margin-left: 3%;
+ margin-right: 3%;
+ /*padding: .5vh;*/
+ vertical-align: middle;
+ cursor: pointer;
+ text-align: center;
}
.clickable-img {
- /*margin-top: 14%;*/
- /*margin-right: auto;*/
- height: 80px;
- width: 80px;
- margin-bottom: 0;
+ /*margin-top: 14%;*/
+ /*margin-right: auto;*/
+ height: 80px;
+ width: 80px;
+ margin-bottom: 0;
}
.draggable-icon-preview {
- margin-right: 20px;
- vertical-align: top;
- background-color: var(--color-bg-1);
- display: inline-block;
- height: 50px;
- width: 50px;
- min-width: 50px;
- line-height: 50px;
- box-shadow: 1px 1px 2px #555;
- text-align: center;
+ margin-right: 20px;
+ vertical-align: top;
+ background-color: var(--color-bg-1);
+ display: inline-block;
+ height: 50px;
+ width: 50px;
+ min-width: 50px;
+ line-height: 50px;
+ box-shadow: 1px 1px 2px #555;
+ text-align: center;
}
.draggable-icon {
- cursor: pointer;
- vertical-align: top;
- background-color: var(--color-pe);
- display: inline-block;
- height: 70px;
- width: 70px;
- line-height: 70px;
- margin-left: 3%;
- margin-top: 5px;
- box-shadow: 1px 1px 2px var(--color-shadow);
- text-align: center;
- z-index:200;
+ cursor: pointer;
+ vertical-align: top;
+ background-color: var(--color-pe);
+ display: inline-block;
+ height: 70px;
+ width: 70px;
+ line-height: 70px;
+ margin-left: 3%;
+ margin-top: 5px;
+ box-shadow: 1px 1px 2px var(--color-shadow);
+ text-align: center;
+ z-index: 200;
}
.pe-label {
- color: white;
- padding: 2px 5px;
+ color: white;
+ padding: 2px 5px;
}
.stream-label {
- background: $sp-color-stream;
- color: black;
+ background: $sp-color-stream;
+ color: black;
}
.set-label {
- background: $sp-color-set;
- color: black;
+ background: $sp-color-set;
+ color: black;
}
.processor-label {
- background: $sp-color-processor;
+ background: $sp-color-processor;
}
.sink-label {
- background: $sp-color-sink;
+ background: $sp-color-sink;
}
.stream {
- border-radius: 50%;
- border: 2px solid $sp-color-stream;
+ border-radius: 50%;
+ border: 2px solid $sp-color-stream;
}
.set {
- border-radius: 50%;
- border: 2px solid $sp-color-set;
+ border-radius: 50%;
+ border: 2px solid $sp-color-set;
}
.action {
- border: 2px solid $sp-color-sink;
+ border: 2px solid $sp-color-sink;
}
.sepa {
- border: 2px solid $sp-color-processor;
+ border: 2px solid $sp-color-processor;
}
.draggable-img {
- /*font-size: 60px;*/
- /*margin-top: 14%;*/
- height: 50px;
- width: 50px;
- /*margin-bottom: 0;*/
- color: #d22;
+ /*font-size: 60px;*/
+ /*margin-top: 14%;*/
+ height: 50px;
+ width: 50px;
+ /*margin-bottom: 0;*/
+ color: #d22;
}
.sepa > .draggable-img {
- height: 70px;
- width: 70px;
- /*margin-top: 5px;*/
+ height: 70px;
+ width: 70px;
+ /*margin-top: 5px;*/
}
.sepa > p > .draggable-img {
- height: 70px;
- width: 70px;
- /*margin-top: 5px;*/
+ height: 70px;
+ width: 70px;
+ /*margin-top: 5px;*/
}
.ui-selectable-helper {
- background: rgba(51, 200, 51, 0.5);
+ background: rgba(51, 200, 51, 0.5);
}
.ui-selected {
- box-shadow: 0 0 10px #33DD33 !important
+ box-shadow: 0 0 10px #33dd33 !important;
}
.draggable-img-dragging {
- /*margin-left: 14%;*/
- position: absolute;
+ /*margin-left: 14%;*/
+ position: absolute;
}
.navbar .container-fluid {
- padding-right: 5%;
- padding-left: 5%;
+ padding-right: 5%;
+ padding-left: 5%;
}
.assemblyOptions {
- color: white;
- padding: 5px;
- //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
- margin-top: 1%;
+ color: white;
+ padding: 5px;
+ //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+ margin-top: 1%;
}
.assembly-options-preview {
- color: white;
- padding: 5px;
- //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
-
+ color: white;
+ padding: 5px;
+ //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}
.editorIconStandOptions {
- /* background: white; */
- /* border: 2px solid rgb(63,81,181);; */
- /* border-bottom: 2px solid rgb(63,81,181); */
- color: black;
- background: var(--color-bg-1);
- border-bottom: 1px solid var(--color-bg-3);
- padding: 0px;
- width: 100%;
- /* margin-top: 1%; */
+ /* background: white; */
+ /* border: 2px solid rgb(63,81,181);; */
+ /* border-bottom: 2px solid rgb(63,81,181); */
+ color: black;
+ background: var(--color-bg-1);
+ border-bottom: 1px solid var(--color-bg-3);
+ padding: 0px;
+ width: 100%;
+ /* margin-top: 1%; */
}
.outer-assembly-preview {
- position: relative;
- overflow: auto;
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
- padding: 5px;
- border: 1px solid var(--color-bg-2);
- height: 300px;
- max-width: 100%;
+ position: relative;
+ overflow: auto;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+ padding: 5px;
+ border: 1px solid var(--color-bg-2);
+ height: 300px;
+ max-width: 100%;
- background-color: var(--color-bg-1);
- background-image: var(--canvas-color);
- background-size: 15px 15px;
+ background-color: var(--color-bg-1);
+ background-image: var(--canvas-color);
+ background-size: 15px 15px;
}
-
-
.canvas-preview-inner {
- position: relative;
- height: auto;
+ position: relative;
+ height: auto;
}
.canvas-preview {
- position: absolute;
- left: 0px;
- top: 0px;
- height: 100%;
- width: 100%;
- z-index: 0;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ height: 100%;
+ width: 100%;
+ z-index: 0;
}
#pipelineDisplay {
- margin-top: 100px;
- height: 500px;
- box-shadow: 0 0 15px #333;
- position: relative;
- background: white;
+ margin-top: 100px;
+ height: 500px;
+ box-shadow: 0 0 15px #333;
+ position: relative;
+ background: white;
}
.pipeline-display {
- height: 300px;
+ height: 300px;
}
.shadow {
- box-shadow: 0 0 5px #333
+ box-shadow: 0 0 5px #333;
}
/*.nav-tabs{
@@ -970,59 +973,59 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md
height:40px;
}*/
._jsPlumb_endpoint {
- z-index: -1;
+ z-index: -1;
}
.connectable {
- cursor: move;
- position: absolute;
- box-shadow: 0 0 2px #555;
- display: inline-block;
- vertical-align: middle;
- background-color: var(--color-pe);
- text-align: center;
- font-size: 24px;
- font-family: Roboto;
+ cursor: move;
+ position: absolute;
+ box-shadow: 0 0 2px #555;
+ display: inline-block;
+ vertical-align: middle;
+ background-color: var(--color-pe);
+ text-align: center;
+ font-size: 24px;
+ font-family: Roboto;
}
.connectable-preview {
- height: 75px !important;
- width: 75px !important;
- line-height: 75px;
+ height: 75px !important;
+ width: 75px !important;
+ line-height: 75px;
}
.connectable-editor {
- height: 90px !important;
- width: 90px !important;
- line-height: 90px;
+ height: 90px !important;
+ width: 90px !important;
+ line-height: 90px;
}
.connectable-element {
- cursor: move;
- height: 150px !important;
- width: 150px !important;
- box-shadow: 0 0 2px $sp-color-accent;
- display: inline-block;
- vertical-align: middle;
- background-color: white;
- line-height: 150px;
- text-align: center;
- margin-left: auto;
- margin-right: auto;
- display: block;
- font-size: 30px;
- font-family: Roboto;
- margin-top: 20px;
+ cursor: move;
+ height: 150px !important;
+ width: 150px !important;
+ box-shadow: 0 0 2px $sp-color-accent;
+ display: inline-block;
+ vertical-align: middle;
+ background-color: white;
+ line-height: 150px;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ font-size: 30px;
+ font-family: Roboto;
+ margin-top: 20px;
}
.connectable-img {
- color: #d22;
- font-size: 80px;
- /*margin-top: 14%;*/
- /*margin-left: 14%;*/
- /*margin-right: auto;*/
- height: 72%;
- width: 72%;
+ color: #d22;
+ font-size: 80px;
+ /*margin-top: 14%;*/
+ /*margin-left: 14%;*/
+ /*margin-right: auto;*/
+ height: 72%;
+ width: 72%;
}
/*.action>.connectable-img {*/
@@ -1035,416 +1038,420 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md
}*/
.element-container {
- position: relative;
+ position: relative;
}
.element-preview {
- cursor: pointer;
- position: absolute;
- left: 0px;
- top: -50px;
- height: 40%;
- width: 40%;
- background-color: #ffffff;
- box-shadow: 0 0 2px #555;
- line-height: 1.6;
- border-radius: 50%;
+ cursor: pointer;
+ position: absolute;
+ left: 0px;
+ top: -50px;
+ height: 40%;
+ width: 40%;
+ background-color: #ffffff;
+ box-shadow: 0 0 2px #555;
+ line-height: 1.6;
+ border-radius: 50%;
}
.recommended-list {
- position: absolute;
- top: 25%;
- left: 25%;
- height: 40px;
- width: 40px;
-
+ position: absolute;
+ top: 25%;
+ left: 25%;
+ height: 40px;
+ width: 40px;
}
.recommended-item {
- box-shadow: 0 0 2px #555;
- background-color: #ffffff;
- cursor: pointer;
+ box-shadow: 0 0 2px #555;
+ background-color: #ffffff;
+ cursor: pointer;
}
.recommended-item:hover {
- box-shadow: 0 0 5px #555;
+ box-shadow: 0 0 5px #555;
}
.recommended-item-img {
- width: 80%;
- height: 80%;
+ width: 80%;
+ height: 80%;
}
.hover-icon {
-
- line-height: 1;
- margin: auto;
-
+ line-height: 1;
+ margin: auto;
}
.green {
- color: rgba(51, 200, 51, 0.5);
+ color: rgba(51, 200, 51, 0.5);
}
.red {
- color: rgba(200, 51, 51, 0.5);
+ color: rgba(200, 51, 51, 0.5);
}
ul.circleMenu-open {
- visibility: visible;
- top: 50%;
- left: 50%;
+ visibility: visible;
+ top: 50%;
+ left: 50%;
}
ul.circleMenu-closed {
- visibility: hidden;
- top: 50%;
- left: 50%;
+ visibility: hidden;
+ top: 50%;
+ left: 50%;
}
#clear {
- z-index: 10;
- cursor: hand;
- opacity: 0.5;
- position: absolute;
- margin: 3px;
- top: 3px;
- left: 3px;
- font-size: 20px;
- padding: 3px;
+ z-index: 10;
+ cursor: hand;
+ opacity: 0.5;
+ position: absolute;
+ margin: 3px;
+ top: 3px;
+ left: 3px;
+ font-size: 20px;
+ padding: 3px;
}
#clear:hover {
- cursor: pointer;
- opacity: 1;
+ cursor: pointer;
+ opacity: 1;
}
.ui-draggable-dragging {
- box-shadow: 0 0 8px black;
+ box-shadow: 0 0 8px black;
}
#submit {
- position: absolute;
- bottom: 5px;
- right: 5px;
- margin: 3px;
- padding: 3px;
-
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
+ margin: 3px;
+ padding: 3px;
}
/*Finetuning für größe nötig*/
#addTextInput {
-
- margin-top: 5%;
- width: 80%;
- margin-left: 10%;
- margin-right: 10%;
+ margin-top: 5%;
+ width: 80%;
+ margin-left: 10%;
+ margin-right: 10%;
}
.sse-working {
- color: black;
+ color: black;
}
.sse-success {
- color: #33dd33;
+ color: #33dd33;
}
.sse-error {
- color: #dd3333;
+ color: #dd3333;
}
.wrapper {
- width: 100%;
- margin-bottom: 10%;
-
+ width: 100%;
+ margin-bottom: 10%;
}
#navbar {
- color: #000000;
+ color: #000000;
}
#navbar:active {
- color: #000000;
+ color: #000000;
}
#login-form-dropdown {
- padding: 10px;
- background: #ffffff; /* Old browsers */
- background: -moz-linear-gradient(top, #ffffff 0%, #eee 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #eee)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #ffffff 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #ffffff 0%, #eee 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #ffffff 0%, #eee 100%); /* IE10+ */
- background: linear-gradient(to bottom, #ffffff 0%, #eee 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); /* IE6-9 */
-
- max-width: 20vw;
- max-height: 25vh;
-
- min-width: 280px;
- min-height: 200px;
-
+ padding: 10px;
+ background: #ffffff; /* Old browsers */
+ background: -moz-linear-gradient(top, #ffffff 0%, #eee 100%); /* FF3.6+ */
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ color-stop(0%, #ffffff),
+ color-stop(100%, #eee)
+ ); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(
+ top,
+ #ffffff 0%,
+ #eee 100%
+ ); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(
+ top,
+ #ffffff 0%,
+ #eee 100%
+ ); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #ffffff 0%, #eee 100%); /* IE10+ */
+ background: linear-gradient(to bottom, #ffffff 0%, #eee 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); /* IE6-9 */
+
+ max-width: 20vw;
+ max-height: 25vh;
+
+ min-width: 280px;
+ min-height: 200px;
}
.panel-body {
- padding: 0;
- width: 100%;
- margin: 10px;
+ padding: 0;
+ width: 100%;
+ margin: 10px;
}
h4.panel-title {
- line-height: 1.5;
+ line-height: 1.5;
}
.btngroup {
+ position: relative;
- position: relative;
-
- vertical-align: middle;
-
+ vertical-align: middle;
}
.disabled {
- /*opacity : 0.3;*/
- border: 2px solid red;
+ /*opacity : 0.3;*/
+ border: 2px solid red;
}
.endpoint-token svg rect {
- fill: rgb(63, 81, 181);
- stroke: rgb(63, 81, 181);
+ fill: rgb(63, 81, 181);
+ stroke: rgb(63, 81, 181);
}
.endpoint-empty svg rect {
- fill: white;
- stroke: rgb(63, 81, 181);
- stroke-width: 4;
+ fill: white;
+ stroke: rgb(63, 81, 181);
+ stroke-width: 4;
}
#accordion {
- width: 100%;
- /*margin-left: 5%;*/
+ width: 100%;
+ /*margin-left: 5%;*/
}
td {
- vertical-align: middle !important;
+ vertical-align: middle !important;
}
.hoverable {
- opacity: 0.2;
+ opacity: 0.2;
}
.hoverable:hover {
- cursor: pointer;
- opacity: 0.5;
+ cursor: pointer;
+ opacity: 0.5;
}
#pipelineList {
- padding-top: 100px;
+ padding-top: 100px;
}
#streamDisplay {
- padding: 5px 0 5px 5px;
- display: inline-block;
- width: 20%;
- height: 100%;
- position: relative;
+ padding: 5px 0 5px 5px;
+ display: inline-block;
+ width: 20%;
+ height: 100%;
+ position: relative;
}
#sepaDisplay {
- padding: 5px 0 5px 0;
- display: inline-block;
- width: 60%;
- height: 100%;
- position: relative;
+ padding: 5px 0 5px 0;
+ display: inline-block;
+ width: 60%;
+ height: 100%;
+ position: relative;
}
#actionDisplay {
- padding: 5px 5px 5px 0;
- display: inline-block;
- width: 19%;
- height: 100%;
- position: relative;
+ padding: 5px 5px 5px 0;
+ display: inline-block;
+ width: 19%;
+ height: 100%;
+ position: relative;
}
#savedOptions {
- padding-top: 30px;
+ padding-top: 30px;
}
textarea {
- resize: none;
+ resize: none;
}
#adjustString {
- font-size: 30px;
- color: #666;
- opacity: 0.5;
- position: absolute;
+ font-size: 30px;
+ color: #666;
+ opacity: 0.5;
+ position: absolute;
- width: 100%;
- text-align: center;
+ width: 100%;
+ text-align: center;
}
.connectable-block {
- position: absolute;
- cursor: pointer;
- height: 180px;
- width: 150px;
- background: white;
- border-radius: 5px;
- box-shadow: -2px 2px 5px rgb(153, 153, 153);
- border: 1px solid rgb(153, 153, 153);
-
+ position: absolute;
+ cursor: pointer;
+ height: 180px;
+ width: 150px;
+ background: white;
+ border-radius: 5px;
+ box-shadow: -2px 2px 5px rgb(153, 153, 153);
+ border: 1px solid rgb(153, 153, 153);
}
.block-name {
- font-size: 20px;
- /*height: 30px;*/
- vertical-align: middle;
- text-align: center;
- border-bottom: 1px solid #cccccc;
+ font-size: 20px;
+ /*height: 30px;*/
+ vertical-align: middle;
+ text-align: center;
+ border-bottom: 1px solid #cccccc;
}
.block-img-container {
- height: 150px;
- width: 150px;
- padding: 25px;
- /*border-top: 3px solid rgb(51, 51, 51);*/
+ height: 150px;
+ width: 150px;
+ padding: 25px;
+ /*border-top: 3px solid rgb(51, 51, 51);*/
}
.block-img {
- height: 100px;
- width: 100px;
+ height: 100px;
+ width: 100px;
}
.ui-autocomplete-input {
- border: none;
- font-size: 14px;
- border: 1px solid #DDD !important;
- padding-top: 0px !important;
- z-index: 1511;
- position: relative;
+ border: none;
+ font-size: 14px;
+ border: 1px solid #ddd !important;
+ padding-top: 0px !important;
+ z-index: 1511;
+ position: relative;
}
.ui-menu .ui-menu-item a {
- font-size: 12px;
+ font-size: 12px;
}
.ui-autocomplete {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1510 !important;
- float: left;
- display: none;
- min-width: 160px;
- width: 160px;
- padding: 4px 0;
- margin: 2px 0 0 0;
- list-style: none;
- background-color: #ffffff;
- border-color: #ccc;
- border-color: rgba(0, 0, 0, 0.2);
- border-style: solid;
- border-width: 1px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
- *border-right-width: 2px;
- *border-bottom-width: 2px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1510 !important;
+ float: left;
+ display: none;
+ min-width: 160px;
+ width: 160px;
+ padding: 4px 0;
+ margin: 2px 0 0 0;
+ list-style: none;
+ background-color: #ffffff;
+ border-color: #ccc;
+ border-color: rgba(0, 0, 0, 0.2);
+ border-style: solid;
+ border-width: 1px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ *border-right-width: 2px;
+ *border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
- display: block;
- padding: 3px 15px;
- clear: both;
- font-weight: normal;
- line-height: 18px;
- color: #555555;
- white-space: nowrap;
- text-decoration: none;
-}
-
-.ui-state-hover, .ui-state-active {
- color: #ffffff;
- text-decoration: none;
- background-color: #0088cc;
- border-radius: 0px;
- -webkit-border-radius: 0px;
- -moz-border-radius: 0px;
- background-image: none;
+ display: block;
+ padding: 3px 15px;
+ clear: both;
+ font-weight: normal;
+ line-height: 18px;
+ color: #555555;
+ white-space: nowrap;
+ text-decoration: none;
+}
+
+.ui-state-hover,
+.ui-state-active {
+ color: #ffffff;
+ text-decoration: none;
+ background-color: #0088cc;
+ border-radius: 0px;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ background-image: none;
}
#modalIns {
- width: 500px;
+ width: 500px;
}
button.md-button.md-icon-button {
- line-height: normal;
+ line-height: normal;
}
.toolbar-icon {
- height: 48px;
- width: 48px;
- margin-left: 10px;
+ height: 48px;
+ width: 48px;
+ margin-left: 10px;
}
md-list .md-button {
- width: 100%;
- /*text-align: start;*/
+ width: 100%;
+ /*text-align: start;*/
}
.element-text-icon {
- font-size: 20px;
+ font-size: 20px;
}
.element-text-icon-small {
- font-size: 18px;
+ font-size: 18px;
}
.pipeline-display-element {
-
- height: 80px;
- width: 80px;
- display: block;
- vertical-align: middle;
- background-color: white;
- line-height: 80px;
- text-align: center;
- margin-left: auto;
- margin-right: auto;
- font-size: 30px;
- margin-top: 10px;
+ height: 80px;
+ width: 80px;
+ display: block;
+ vertical-align: middle;
+ background-color: white;
+ line-height: 80px;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ font-size: 30px;
+ margin-top: 10px;
}
.pipeline-display-element-img {
- height: 72%;
- width: 72%;
+ height: 72%;
+ width: 72%;
}
.pipeline-active {
- background-color: #5533DD33;
+ background-color: #5533dd33;
}
.position-fixed {
- position: fixed;
+ position: fixed;
}
.dropdown-menu {
- cursor: pointer;
+ cursor: pointer;
}
.property-selection {
- padding: 3px;
- padding-left: 10px;
- margin-top: 3px;
- margin-bottom: 3px;
- background: #dfdfdf5e;
- border-left: 1px solid $sp-color-accent;
+ padding: 3px;
+ padding-left: 10px;
+ margin-top: 3px;
+ margin-bottom: 3px;
+ background: #dfdfdf5e;
+ border-left: 1px solid $sp-color-accent;
}
diff --git a/ui/src/scss/sp/mat-tab.scss b/ui/src/scss/sp/mat-tab.scss
index 66c20ba78..d3c624933 100644
--- a/ui/src/scss/sp/mat-tab.scss
+++ b/ui/src/scss/sp/mat-tab.scss
@@ -17,11 +17,11 @@
*/
.mat-tab-label-content {
- text-transform: uppercase;
+ text-transform: uppercase;
}
.small .mat-tab-label {
- min-width: 100px;
- height: 32px;
- font-size: 10pt;
+ min-width: 100px;
+ height: 32px;
+ font-size: 10pt;
}
diff --git a/ui/src/scss/sp/pipeline-assembly.scss b/ui/src/scss/sp/pipeline-assembly.scss
index 8f41411ac..e280dd74d 100644
--- a/ui/src/scss/sp/pipeline-assembly.scss
+++ b/ui/src/scss/sp/pipeline-assembly.scss
@@ -15,4 +15,3 @@
* limitations under the License.
*
*/
-
diff --git a/ui/src/scss/sp/pipeline-element-loading.scss b/ui/src/scss/sp/pipeline-element-loading.scss
index d89d10505..843c14a34 100644
--- a/ui/src/scss/sp/pipeline-element-loading.scss
+++ b/ui/src/scss/sp/pipeline-element-loading.scss
@@ -17,28 +17,28 @@
*/
.pipeline-element-loading-container {
- position:absolute;
- left:0px;
- top:0px;
- width:98%;
- height:98%;
- background: var(--color-pe);
- opacity:0.8;
- z-index:6;
- border-radius:50%;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 98%;
+ height: 98%;
+ background: var(--color-pe);
+ opacity: 0.8;
+ z-index: 6;
+ border-radius: 50%;
}
.pipeline-element-progress-container {
- position:absolute;
- left:0px;
- top:0px;
- width:100%;
- height:100%;
- z-index:7;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ z-index: 7;
}
.pipeline-element-progress {
- margin-left:auto;
- margin-right:auto;
- top:36px;
+ margin-left: auto;
+ margin-right: auto;
+ top: 36px;
}
diff --git a/ui/src/scss/sp/pipeline-element-options.scss b/ui/src/scss/sp/pipeline-element-options.scss
index 084bdc55a..358c4502e 100644
--- a/ui/src/scss/sp/pipeline-element-options.scss
+++ b/ui/src/scss/sp/pipeline-element-options.scss
@@ -19,112 +19,111 @@
@import '../_variables';
.options-button {
- cursor: pointer;
- position: absolute;
- height: 30%;
- width: 30%;
- border-radius: 20%;
- box-shadow: 0 0 3px var(--color-accent);
- text-align: center;
- padding: 1px 1px;
- background-color: var(--color-accent);
- color: rgba(255, 255, 255, 0.75);
+ cursor: pointer;
+ position: absolute;
+ height: 30%;
+ width: 30%;
+ border-radius: 20%;
+ box-shadow: 0 0 3px var(--color-accent);
+ text-align: center;
+ padding: 1px 1px;
+ background-color: var(--color-accent);
+ color: rgba(255, 255, 255, 0.75);
}
.mat-icon-button.options-icon-button {
- width: 25px;
- height: 25px;
- line-height: 25px;
- border-radius: 0;
+ width: 25px;
+ height: 25px;
+ line-height: 25px;
+ border-radius: 0;
}
.options-icon-size {
- font-size: 20px;
- line-height: 20px;
+ font-size: 20px;
+ line-height: 20px;
}
.customize-button {
- left: 2%;
- top: -35%;
+ left: 2%;
+ top: -35%;
}
.delete-button {
- left: 73%;
- top: -35%;
- background-color: darkred;
- box-shadow: 0 0 3px darkred;
+ left: 73%;
+ top: -35%;
+ background-color: darkred;
+ box-shadow: 0 0 3px darkred;
}
.help-button {
- left: 37.5%;
- top: -35%;
+ left: 37.5%;
+ top: -35%;
}
.recommended-button {
- left: 53%;
- top: 85%;
+ left: 53%;
+ top: 85%;
}
.possible-button {
- left: 18%;
- top: 85%;
+ left: 18%;
+ top: 85%;
}
.help-button-icon-stand {
- display: block;
- cursor: pointer;
- height: 20px;
- width: 20px;
- border-radius: 50%;
- background-color: $sp-color-accent;
- color: rgba(255, 255, 255, 0.75);
- box-shadow: 0 0 2px $sp-color-accent;
- line-height: 1.2;
- text-align: center;
-
+ display: block;
+ cursor: pointer;
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ background-color: $sp-color-accent;
+ color: rgba(255, 255, 255, 0.75);
+ box-shadow: 0 0 2px $sp-color-accent;
+ line-height: 1.2;
+ text-align: center;
}
.editor-pe-info {
- position: absolute;
- left: 0%;
- top: 50%;
- width: 104%;
- padding: 65px 0px 10px;
- font-size: smaller;
- text-align: center;
- box-shadow: 0 0 2px #555;
- -webkit-animation: slidein 0.5s;
+ position: absolute;
+ left: 0%;
+ top: 50%;
+ width: 104%;
+ padding: 65px 0px 10px;
+ font-size: smaller;
+ text-align: center;
+ box-shadow: 0 0 2px #555;
+ -webkit-animation: slidein 0.5s;
}
@keyframes slidein {
- 0% {
- top: 0;
- border-top-left-radius: 50%;
- border-top-right-radius: 50%;
- }
- 100% {
- top: 50%;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
+ 0% {
+ top: 0;
+ border-top-left-radius: 50%;
+ border-top-right-radius: 50%;
+ }
+ 100% {
+ top: 50%;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
}
.pe-info-action {
- background: $sp-color-sink;
- color: white;
+ background: $sp-color-sink;
+ color: white;
}
.pe-info-sepa {
- background: $sp-color-processor;
- color: white;
+ background: $sp-color-processor;
+ color: white;
}
.pe-info-stream {
- background: $sp-color-stream;
- color: #343434;
+ background: $sp-color-stream;
+ color: #343434;
}
.pe-info-set {
- background: $sp-color-set;
- color: white;
+ background: $sp-color-set;
+ color: white;
}
diff --git a/ui/src/scss/sp/pipeline-element.scss b/ui/src/scss/sp/pipeline-element.scss
index ee0c51e4b..50426cd36 100644
--- a/ui/src/scss/sp/pipeline-element.scss
+++ b/ui/src/scss/sp/pipeline-element.scss
@@ -17,32 +17,32 @@
*/
.pipeline-element-configuration-status {
- position: absolute;
- left: 20px;
- top: -27px;
- width: 100%;
- height: 100%;
+ position: absolute;
+ left: 20px;
+ top: -27px;
+ width: 100%;
+ height: 100%;
}
.pi-processor {
- left: 0px;
+ left: 0px;
}
.pi-stream {
- left: 0px;
+ left: 0px;
}
.pipeline-element-configuration-invalid-icon {
- font-size:20pt;
- color: red;
+ font-size: 20pt;
+ color: red;
}
.pipeline-element-configuration-modified-icon {
- font-size:20pt;
- color: #d3c545;
+ font-size: 20pt;
+ color: #d3c545;
}
.pipeline-element-configuration-ok-icon {
- font-size:20pt;
- color: #6ab26c;
+ font-size: 20pt;
+ color: #6ab26c;
}
diff --git a/ui/src/scss/sp/pipeline-validation.scss b/ui/src/scss/sp/pipeline-validation.scss
index fae3e7bda..8bb44f352 100644
--- a/ui/src/scss/sp/pipeline-validation.scss
+++ b/ui/src/scss/sp/pipeline-validation.scss
@@ -19,13 +19,13 @@
@import '../_variables';
.pipeline-validation-summary {
- background: var(--color-bg-0);
- border-radius: 3px;
- color: #5b5b5b;
- padding: 2px 5px;
- width:120px;
+ background: var(--color-bg-0);
+ border-radius: 3px;
+ color: #5b5b5b;
+ padding: 2px 5px;
+ width: 120px;
}
.pipeline-validation-summary-error {
- color: var(--color-warn);
+ color: var(--color-warn);
}
diff --git a/ui/src/scss/sp/progress-bar.scss b/ui/src/scss/sp/progress-bar.scss
index 50ebac760..4558d7c3a 100644
--- a/ui/src/scss/sp/progress-bar.scss
+++ b/ui/src/scss/sp/progress-bar.scss
@@ -19,5 +19,5 @@
@import '../_variables';
mat-progress-bar .mat-progress-bar-buffer {
- background: $sp-color-accent-light;
-}
\ No newline at end of file
+ background: $sp-color-accent-light;
+}
diff --git a/ui/src/scss/sp/shepherd-new.scss b/ui/src/scss/sp/shepherd-new.scss
index de3920129..752359c49 100644
--- a/ui/src/scss/sp/shepherd-new.scss
+++ b/ui/src/scss/sp/shepherd-new.scss
@@ -17,193 +17,254 @@
@import '../_variables.scss';
-.shepherd-element, .shepherd-element:after, .shepherd-element:before,
+.shepherd-element,
+.shepherd-element:after,
+.shepherd-element:before,
.shepherd-element *,
.shepherd-element *:after,
.shepherd-element *:before {
- box-sizing: border-box; }
+ box-sizing: border-box;
+}
-.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before {
- background-color: $sp-color-accent;
+.shepherd-element.shepherd-has-title[data-popper-placement^='bottom']
+ > .shepherd-arrow:before {
+ background-color: $sp-color-accent;
}
.shepherd-arrow:before {
- background-color: $sp-color-accent;
+ background-color: $sp-color-accent;
}
.shepherd-element {
- max-height: 100%;
- max-width: 100%;
- -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
- filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
+ max-height: 100%;
+ max-width: 100%;
+ -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+ filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+}
.shepherd-element .shepherd-content {
- background: #ffffff;
- border-radius: 5px;
- color: #444444;
- font-family: inherit;
- font-size: 1.1em;
- line-height: 1.5em;
- padding: 1em;
- position: relative; }
+ background: #ffffff;
+ border-radius: 5px;
+ color: #444444;
+ font-family: inherit;
+ font-size: 1.1em;
+ line-height: 1.5em;
+ padding: 1em;
+ position: relative;
+}
.shepherd-element .popper__arrow {
- border: 16px solid transparent;
- content: "";
- display: block;
- height: 0;
- pointer-events: none;
- position: absolute;
- width: 0; }
-.shepherd-element[x-placement^="top"] {
- margin-bottom: 16px; }
-.shepherd-element[x-placement^="top"] .popper__arrow {
- border-bottom: 0;
- border-top-color: #ffffff;
- bottom: -16px;
- left: calc(50% - 16px); }
-.shepherd-element[x-placement^="bottom"] {
- margin-top: 16px; }
-.shepherd-element[x-placement^="bottom"] .popper__arrow {
- border-bottom-color: #ffffff;
- border-top: 0;
- left: calc(50% - 16px);
- top: -16px; }
-.shepherd-element[x-placement^="left"] {
- margin-right: 16px; }
-.shepherd-element[x-placement^="left"] .popper__arrow {
- border-left-color: #ffffff;
- border-right: 0;
- margin-top: -16px;
- right: -16px;
- top: calc(50% - 16px); }
-.shepherd-element[x-placement^="right"] {
- margin-left: 16px; }
-.shepherd-element[x-placement^="right"] .popper__arrow {
- border-left: 0;
- border-right-color: #ffffff;
- left: -16px;
- top: calc(50% - 16px); }
-
-.shepherd-element[x-placement^="bottom"].shepherd-has-title .popper__arrow {
- border-bottom-color: #eeeeee; }
+ border: 16px solid transparent;
+ content: '';
+ display: block;
+ height: 0;
+ pointer-events: none;
+ position: absolute;
+ width: 0;
+}
+.shepherd-element[x-placement^='top'] {
+ margin-bottom: 16px;
+}
+.shepherd-element[x-placement^='top'] .popper__arrow {
+ border-bottom: 0;
+ border-top-color: #ffffff;
+ bottom: -16px;
+ left: calc(50% - 16px);
+}
+.shepherd-element[x-placement^='bottom'] {
+ margin-top: 16px;
+}
+.shepherd-element[x-placement^='bottom'] .popper__arrow {
+ border-bottom-color: #ffffff;
+ border-top: 0;
+ left: calc(50% - 16px);
+ top: -16px;
+}
+.shepherd-element[x-placement^='left'] {
+ margin-right: 16px;
+}
+.shepherd-element[x-placement^='left'] .popper__arrow {
+ border-left-color: #ffffff;
+ border-right: 0;
+ margin-top: -16px;
+ right: -16px;
+ top: calc(50% - 16px);
+}
+.shepherd-element[x-placement^='right'] {
+ margin-left: 16px;
+}
+.shepherd-element[x-placement^='right'] .popper__arrow {
+ border-left: 0;
+ border-right-color: #ffffff;
+ left: -16px;
+ top: calc(50% - 16px);
+}
+
+.shepherd-element[x-placement^='bottom'].shepherd-has-title .popper__arrow {
+ border-bottom-color: #eeeeee;
+}
.shepherd-element.shepherd-has-title .shepherd-content header {
- background: #eeeeee;
- padding: 1em; }
-.shepherd-element.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
- margin-bottom: 0;
- padding: 0; }
+ background: #eeeeee;
+ padding: 1em;
+}
+.shepherd-element.shepherd-has-title
+ .shepherd-content
+ header
+ a.shepherd-cancel-link {
+ margin-bottom: 0;
+ padding: 0;
+}
.shepherd-element.shepherd-has-cancel-link .shepherd-content header h3 {
- float: left; }
+ float: left;
+}
.shepherd-element .shepherd-content {
- padding: 0; }
+ padding: 0;
+}
.shepherd-element .shepherd-content * {
- font-size: inherit; }
+ font-size: inherit;
+}
.shepherd-element .shepherd-content header {
- *zoom: 1;
- padding: 1em 1em 0; }
+ *zoom: 1;
+ padding: 1em 1em 0;
+}
.shepherd-element .shepherd-content header:after {
- clear: both;
- content: "";
- display: table; }
+ clear: both;
+ content: '';
+ display: table;
+}
.shepherd-element .shepherd-content header h3 {
- font-weight: normal;
- margin: 0; }
+ font-weight: normal;
+ margin: 0;
+}
.shepherd-element .shepherd-content header a.shepherd-cancel-link {
- color: rgba(0, 0, 0, 0.5);
- float: right;
- font-size: 2.25em;
- font-weight: normal;
- line-height: 0.5em;
- opacity: 0.25;
- position: relative;
- text-decoration: none; }
+ color: rgba(0, 0, 0, 0.5);
+ float: right;
+ font-size: 2.25em;
+ font-weight: normal;
+ line-height: 0.5em;
+ opacity: 0.25;
+ position: relative;
+ text-decoration: none;
+}
.shepherd-element .shepherd-content header a.shepherd-cancel-link:before {
- content: '\D7'; }
+ content: '\D7';
+}
.shepherd-element .shepherd-content header a.shepherd-cancel-link:hover {
- opacity: 1; }
+ opacity: 1;
+}
.shepherd-element .shepherd-content footer {
- padding: 0 1em 1em; }
+ padding: 0 1em 1em;
+}
.shepherd-element .shepherd-content footer .shepherd-buttons {
- list-style: none;
- margin: 0;
- padding: 0;
- text-align: right; }
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ text-align: right;
+}
.shepherd-element .shepherd-content footer .shepherd-buttons li {
- display: inline;
- margin: 0;
- padding: 0; }
-.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button {
- display: inline-block;
- *display: inline;
- vertical-align: middle;
- *vertical-align: auto;
- *zoom: 1;
- cursor: pointer;
- margin: 0 0.5em 0 0; }
-.shepherd-element .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
- margin-right: 0; }
+ display: inline;
+ margin: 0;
+ padding: 0;
+}
+.shepherd-element
+ .shepherd-content
+ footer
+ .shepherd-buttons
+ li
+ .shepherd-button {
+ display: inline-block;
+ *display: inline;
+ vertical-align: middle;
+ *vertical-align: auto;
+ *zoom: 1;
+ cursor: pointer;
+ margin: 0 0.5em 0 0;
+}
+.shepherd-element
+ .shepherd-content
+ footer
+ .shepherd-buttons
+ li:last-child
+ .shepherd-button {
+ margin-right: 0;
+}
.shepherd-element .shepherd-content .shepherd-text {
- padding: 1em; }
+ padding: 1em;
+}
.shepherd-element .shepherd-content .shepherd-text p {
- line-height: 1.3em;
- margin: 0 0 0.5em; }
+ line-height: 1.3em;
+ margin: 0 0 0.5em;
+}
.shepherd-element .shepherd-content .shepherd-text p:last-child {
- margin-bottom: 0; }
+ margin-bottom: 0;
+}
.shepherd-element .shepherd-content header {
- border-radius: 5px 5px 0 0; }
-
-.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button {
- background: #3288e6;
- border: 0;
- border-radius: 3px;
- color: #ffffff;
- font-family: inherit;
- font-size: 0.8em;
- letter-spacing: 0.1em;
- line-height: 1em;
- padding: 0.75em 2em;
- text-transform: uppercase; }
-.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
- background: #eeeeee;
- color: #888888; }
+ border-radius: 5px 5px 0 0;
+}
+
+.shepherd-element
+ .shepherd-content
+ footer
+ .shepherd-buttons
+ li
+ .shepherd-button {
+ background: #3288e6;
+ border: 0;
+ border-radius: 3px;
+ color: #ffffff;
+ font-family: inherit;
+ font-size: 0.8em;
+ letter-spacing: 0.1em;
+ line-height: 1em;
+ padding: 0.75em 2em;
+ text-transform: uppercase;
+}
+.shepherd-element
+ .shepherd-content
+ footer
+ .shepherd-buttons
+ li
+ .shepherd-button.shepherd-button-secondary {
+ background: #eeeeee;
+ color: #888888;
+}
.tippy-tooltip {
- font-size: 1.3rem;
- padding: 0.3rem 0.6rem;
+ font-size: 1.3rem;
+ padding: 0.3rem 0.6rem;
}
.shepherd-element.shepherd-has-title .shepherd-content header {
- background: $sp-color-accent;
+ background: $sp-color-accent;
}
.button {
- border: 2px solid #ffffff;
- color: #ffffff;
- cursor: pointer;
- display: inline-block;
- font-size: 0.8em;
- font-weight: 500;
- letter-spacing: 3px;
- line-height: 1.3em;
- padding: 1em 1.25em;
- text-decoration: none;
- text-transform: uppercase;
- width: 140px;
+ border: 2px solid #ffffff;
+ color: #ffffff;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 0.8em;
+ font-weight: 500;
+ letter-spacing: 3px;
+ line-height: 1.3em;
+ padding: 1em 1.25em;
+ text-decoration: none;
+ text-transform: uppercase;
+ width: 140px;
}
.button.dark {
- background: #ffffff;
- color: #75beaa;
+ background: #ffffff;
+ color: #75beaa;
}
@media (max-width: 568px) {
- .button {
- display: block;
- margin: 1em auto 0;
- }
+ .button {
+ display: block;
+ margin: 1em auto 0;
+ }
}
//body:not(.shepherd-active) > * {
@@ -216,350 +277,400 @@
//}
pre {
- border: 1px solid rgba(0, 0, 0, 0.15);
- line-height: 1.4em;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ line-height: 1.4em;
}
-.shepherd-element, .shepherd-element:after, .shepherd-element:before,
+.shepherd-element,
+.shepherd-element:after,
+.shepherd-element:before,
.shepherd-element *,
.shepherd-element *:after,
.shepherd-element *:before {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
.shepherd-element {
- -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
- filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
- max-height: 100%;
- max-width: 100%;
- width: 420px;
- z-index: 9999;
+ -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+ filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+ max-height: 100%;
+ max-width: 100%;
+ width: 420px;
+ z-index: 9999;
}
.shepherd-element .popper__arrow {
- border: 16px solid transparent;
- content: '';
- display: block;
- height: 0;
- pointer-events: none;
- position: absolute;
- width: 0;
+ border: 16px solid transparent;
+ content: '';
+ display: block;
+ height: 0;
+ pointer-events: none;
+ position: absolute;
+ width: 0;
}
.shepherd-element[x-placement^='top'] {
- margin-bottom: 16px;
+ margin-bottom: 16px;
}
.shepherd-element[x-placement^='top'] .popper__arrow {
- border-bottom: 0;
- border-top-color: #ffffff;
- bottom: -16px;
- left: calc(50% - 16px);
+ border-bottom: 0;
+ border-top-color: #ffffff;
+ bottom: -16px;
+ left: calc(50% - 16px);
}
.shepherd-element[x-placement^='bottom'] {
- margin-top: 16px;
+ margin-top: 16px;
}
.shepherd-element[x-placement^='bottom'] .popper__arrow {
- border-bottom-color: #eeeeee;
- border-top: 0;
- left: calc(50% - 16px);
- top: -16px;
+ border-bottom-color: #eeeeee;
+ border-top: 0;
+ left: calc(50% - 16px);
+ top: -16px;
}
.shepherd-element[x-placement^='left'] {
- margin-right: 16px;
+ margin-right: 16px;
}
.shepherd-element[x-placement^='left'] .popper__arrow {
- border-left-color: #ffffff;
- border-right: 0;
- margin-top: -16px;
- right: -16px;
- top: calc(50% - 16px);
+ border-left-color: #ffffff;
+ border-right: 0;
+ margin-top: -16px;
+ right: -16px;
+ top: calc(50% - 16px);
}
.shepherd-element[x-placement^='right'] {
- margin-left: 16px;
+ margin-left: 16px;
}
.shepherd-element[x-placement^='right'] .popper__arrow {
- border-left: 0;
- border-right-color: #ffffff;
- left: -16px;
- top: calc(50% - 16px);
+ border-left: 0;
+ border-right-color: #ffffff;
+ left: -16px;
+ top: calc(50% - 16px);
}
.shepherd-element.shepherd-has-title .shepherd-content .shepherd-header,
.shepherd-element.shepherd-has-cancel-link .shepherd-content .shepherd-header {
- padding-bottom: 0.75em;
+ padding-bottom: 0.75em;
}
.shepherd-element .shepherd-content {
- border: 2px solid $sp-color-accent;
- border-radius: 7px;
- background: none;
- font-size: inherit;
+ border: 2px solid $sp-color-accent;
+ border-radius: 7px;
+ background: none;
+ font-size: inherit;
}
.shepherd-element .shepherd-content header,
.shepherd-element .shepherd-content .shepherd-header {
- *zoom: 1;
- background: #eeeeee;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- line-height: 2em;
- padding: 0.75em 0.75em 0;
+ *zoom: 1;
+ background: #eeeeee;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ line-height: 2em;
+ padding: 0.75em 0.75em 0;
}
.shepherd-element .shepherd-content header:after,
.shepherd-element .shepherd-content .shepherd-header:after {
- clear: both;
- content: '';
- display: table;
+ clear: both;
+ content: '';
+ display: table;
}
.shepherd-element .shepherd-content header .shepherd-title,
.shepherd-element .shepherd-content header .shepherd-cancel-link,
.shepherd-element .shepherd-content .shepherd-header .shepherd-title,
.shepherd-element .shepherd-content .shepherd-header .shepherd-cancel-link {
- font-weight: normal;
- margin: 0;
- padding: 0;
- position: relative;
- vertical-align: middle;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ vertical-align: middle;
}
.shepherd-element .shepherd-content header .shepherd-title,
.shepherd-element .shepherd-content .shepherd-header .shepherd-title {
- color: white;
- float: left;
- font-size: 1.1em;
+ color: white;
+ float: left;
+ font-size: 1.1em;
}
.shepherd-element .shepherd-content header .shepherd-cancel-link,
.shepherd-element .shepherd-content .shepherd-header .shepherd-cancel-link {
- color: rgba(179, 179, 179, 0.75);
- float: right;
- font-size: 2em;
- text-decoration: none;
- -webkit-transition: color 0.5s ease;
- transition: color 0.5s ease;
+ color: rgba(179, 179, 179, 0.75);
+ float: right;
+ font-size: 2em;
+ text-decoration: none;
+ -webkit-transition: color 0.5s ease;
+ transition: color 0.5s ease;
}
.shepherd-element .shepherd-content header .shepherd-cancel-link:before,
-.shepherd-element .shepherd-content .shepherd-header .shepherd-cancel-link:before {
- content: '\D7';
+.shepherd-element
+ .shepherd-content
+ .shepherd-header
+ .shepherd-cancel-link:before {
+ content: '\D7';
}
.shepherd-element .shepherd-content header .shepherd-cancel-link:hover,
-.shepherd-element .shepherd-content .shepherd-header .shepherd-cancel-link:hover {
- color: rgba(0, 0, 0, 0.75);
+.shepherd-element
+ .shepherd-content
+ .shepherd-header
+ .shepherd-cancel-link:hover {
+ color: rgba(0, 0, 0, 0.75);
}
.shepherd-element .shepherd-content .shepherd-text {
- background: #ffffff;
- color: rgba(0, 0, 0, 0.75);
- line-height: 1.3em;
- padding: 0.75em;
- font-size: 0.9em;
+ background: #ffffff;
+ color: rgba(0, 0, 0, 0.75);
+ line-height: 1.3em;
+ padding: 0.75em;
+ font-size: 0.9em;
}
.shepherd-element .shepherd-content .shepherd-text a,
.shepherd-element .shepherd-content .shepherd-text a:visited,
.shepherd-element .shepherd-content .shepherd-text a:active {
- border-bottom: 1px dotted;
- border-bottom-color: rgba(0, 0, 0, 0.75);
- color: rgba(0, 0, 0, 0.75);
- text-decoration: none;
+ border-bottom: 1px dotted;
+ border-bottom-color: rgba(0, 0, 0, 0.75);
+ color: rgba(0, 0, 0, 0.75);
+ text-decoration: none;
}
.shepherd-element .shepherd-content .shepherd-text a:hover,
.shepherd-element .shepherd-content .shepherd-text a:visited:hover,
.shepherd-element .shepherd-content .shepherd-text a:active:hover {
- border-bottom-style: solid;
+ border-bottom-style: solid;
}
.shepherd-element .shepherd-content .shepherd-text p {
- margin-top: 0;
+ margin-top: 0;
}
.shepherd-element .shepherd-content .shepherd-text p:last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
.shepherd-element .shepherd-content footer,
.shepherd-element .shepherd-content .shepherd-footer {
- background: #ffffff;
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
- padding: 0 0.75em 0.75em;
+ background: #ffffff;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ padding: 0 0.75em 0.75em;
}
.shepherd-element .shepherd-content footer .shepherd-buttons,
.shepherd-element .shepherd-content .shepherd-footer .shepherd-buttons {
- list-style: none;
- margin: 0;
- padding: 0;
- text-align: right;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ text-align: right;
}
.shepherd-element .shepherd-content footer .shepherd-buttons li,
.shepherd-element .shepherd-content .shepherd-footer .shepherd-buttons li {
- display: inline;
- margin: 0 0.5em 0 0;
+ display: inline;
+ margin: 0 0.5em 0 0;
}
.shepherd-element .shepherd-content footer .shepherd-buttons li:last-child,
-.shepherd-element .shepherd-content .shepherd-footer .shepherd-buttons li:last-child {
- margin-right: 0;
-}
-
-.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button,
-.shepherd-element .shepherd-content .shepherd-footer .shepherd-buttons li .shepherd-button {
- display: inline-block;
- *display: inline;
- vertical-align: middle;
- *vertical-align: auto;
- *zoom: 1;
- background: $sp-color-accent;
- border: 0;
- border-radius: 3px;
- color: rgba(255, 255, 255, 0.75);
- cursor: pointer;
- font-family: inherit;
- font-weight:bold;
- font-size: 0.9em;
- letter-spacing: 0.1em;
- line-height: 1em;
- padding: 0.75em 2em;
- text-transform: uppercase;
- -webkit-transition: all 0.5s ease;
- transition: all 0.5s ease;
-}
-
-.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button:hover,
-.shepherd-element .shepherd-content .shepherd-footer .shepherd-buttons li .shepherd-button:hover {
- background: $sp-color-accent-light-blue;
-}
-
-.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary,
-.shepherd-element .shepherd-content .shepherd-footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
- background: #e5e5e5;
- color: rgba(0, 0, 0, 0.75);
-}
-
-.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary:hover,
-.shepherd-element .shepherd-content .shepherd-footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary:hover {
- background: #cbcbcb;
- color: rgba(0, 0, 0, 0.75);
+.shepherd-element
+ .shepherd-content
+ .shepherd-footer
+ .shepherd-buttons
+ li:last-child {
+ margin-right: 0;
+}
+
+.shepherd-element
+ .shepherd-content
+ footer
+ .shepherd-buttons
+ li
+ .shepherd-button,
+.shepherd-element
+ .shepherd-content
+ .shepherd-footer
+ .shepherd-buttons
+ li
+ .shepherd-button {
+ display: inline-block;
+ *display: inline;
+ vertical-align: middle;
+ *vertical-align: auto;
+ *zoom: 1;
+ background: $sp-color-accent;
+ border: 0;
+ border-radius: 3px;
+ color: rgba(255, 255, 255, 0.75);
+ cursor: pointer;
+ font-family: inherit;
+ font-weight: bold;
+ font-size: 0.9em;
+ letter-spacing: 0.1em;
+ line-height: 1em;
+ padding: 0.75em 2em;
+ text-transform: uppercase;
+ -webkit-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+.shepherd-element
+ .shepherd-content
+ footer
+ .shepherd-buttons
+ li
+ .shepherd-button:hover,
+.shepherd-element
+ .shepherd-content
+ .shepherd-footer
+ .shepherd-buttons
+ li
+ .shepherd-button:hover {
+ background: $sp-color-accent-light-blue;
+}
+
+.shepherd-element
+ .shepherd-content
+ footer
+ .shepherd-buttons
+ li
+ .shepherd-button.shepherd-button-secondary,
+.shepherd-element
+ .shepherd-content
+ .shepherd-footer
+ .shepherd-buttons
+ li
+ .shepherd-button.shepherd-button-secondary {
+ background: #e5e5e5;
+ color: rgba(0, 0, 0, 0.75);
+}
+
+.shepherd-element
+ .shepherd-content
+ footer
+ .shepherd-buttons
+ li
+ .shepherd-button.shepherd-button-secondary:hover,
+.shepherd-element
+ .shepherd-content
+ .shepherd-footer
+ .shepherd-buttons
+ li
+ .shepherd-button.shepherd-button-secondary:hover {
+ background: #cbcbcb;
+ color: rgba(0, 0, 0, 0.75);
}
.shepherd-welcome .popper__arrow {
- border: 16px solid transparent;
- content: '';
- display: block;
- height: 0;
- position: absolute;
- width: 0;
+ border: 16px solid transparent;
+ content: '';
+ display: block;
+ height: 0;
+ position: absolute;
+ width: 0;
}
.shepherd-welcome[x-placement^='top'] {
- margin-bottom: 16px;
+ margin-bottom: 16px;
}
.shepherd-welcome[x-placement^='top'] .popper__arrow {
- border-bottom: 0;
- border-top-color: #ffffff;
- bottom: -16px;
- left: calc(50% - 16px);
+ border-bottom: 0;
+ border-top-color: #ffffff;
+ bottom: -16px;
+ left: calc(50% - 16px);
}
.shepherd-welcome[x-placement^='bottom'] {
- margin-top: 16px;
+ margin-top: 16px;
}
.shepherd-welcome[x-placement^='bottom'] .popper__arrow {
- border-bottom-color: #ffffff;
- border-top: 0;
- left: calc(50% - 16px);
- top: -16px;
+ border-bottom-color: #ffffff;
+ border-top: 0;
+ left: calc(50% - 16px);
+ top: -16px;
}
.shepherd-welcome[x-placement^='left'] {
- margin-right: 16px;
+ margin-right: 16px;
}
.shepherd-welcome[x-placement^='left'] .popper__arrow {
- border-left-color: #ffffff;
- border-right: 0;
- margin-top: -16px;
- right: -16px;
- top: calc(50% - 16px);
+ border-left-color: #ffffff;
+ border-right: 0;
+ margin-top: -16px;
+ right: -16px;
+ top: calc(50% - 16px);
}
.shepherd-welcome[x-placement^='right'] {
- margin-left: 16px;
+ margin-left: 16px;
}
.shepherd-welcome[x-placement^='right'] .popper__arrow {
- border-left: 0;
- border-right-color: #ffffff;
- left: -16px;
- top: calc(50% - 16px);
+ border-left: 0;
+ border-right-color: #ffffff;
+ left: -16px;
+ top: calc(50% - 16px);
}
.shepherd-welcome:not(.shepherd-has-title) .shepherd-content header,
.shepherd-welcome:not(.shepherd-has-title) .shepherd-content .shepherd-header {
- padding-bottom: 0;
+ padding-bottom: 0;
}
.shepherd-welcome .shepherd-content header,
.shepherd-welcome .shepherd-content .shepherd-header {
- background: #ffffff;
+ background: #ffffff;
}
.shepherd-welcome .shepherd-content .shepherd-text {
- color: black;
+ color: black;
}
-.tippy-popper[x-placement^=top] .tippy-arrow {
- border-bottom: 0;
- border-top-color: $sp-color-accent;
- left: calc(50% - 16px)
+.tippy-popper[x-placement^='top'] .tippy-arrow {
+ border-bottom: 0;
+ border-top-color: $sp-color-accent;
+ left: calc(50% - 16px);
}
-.tippy-popper[x-placement^=bottom] {
- margin-top: 16px
+.tippy-popper[x-placement^='bottom'] {
+ margin-top: 16px;
}
-.tippy-popper[x-placement^=bottom] .tippy-arrow {
- border-bottom-color: $sp-color-accent;
- border-top: 0;
- left: calc(50% - 16px)
+.tippy-popper[x-placement^='bottom'] .tippy-arrow {
+ border-bottom-color: $sp-color-accent;
+ border-top: 0;
+ left: calc(50% - 16px);
}
-.tippy-popper[x-placement^=left] {
- margin-right: 16px
+.tippy-popper[x-placement^='left'] {
+ margin-right: 16px;
}
-.tippy-popper[x-placement^=left] .tippy-arrow {
- border-left-color: $sp-color-accent;
- border-right: 0;
- margin-top: -16px;
- top: calc(50% - 16px)
+.tippy-popper[x-placement^='left'] .tippy-arrow {
+ border-left-color: $sp-color-accent;
+ border-right: 0;
+ margin-top: -16px;
+ top: calc(50% - 16px);
}
-.tippy-popper[x-placement^=right] {
- margin-left: 16px
+.tippy-popper[x-placement^='right'] {
+ margin-left: 16px;
}
-.tippy-popper[x-placement^=right] .tippy-arrow {
- border-left: 0;
- border-right-color: $sp-color-accent;
- top: calc(50% - 16px)
+.tippy-popper[x-placement^='right'] .tippy-arrow {
+ border-left: 0;
+ border-right-color: $sp-color-accent;
+ top: calc(50% - 16px);
}
-
-
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/scss/sp/sp-dialog.scss
index e79a64600..976b8fb02 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/scss/sp/sp-dialog.scss
@@ -17,26 +17,25 @@
*/
.sp-dialog-container {
- display: grid;
- height: 100%;
- grid-template-rows: auto 10px 60px;
-
+ display: grid;
+ height: 100%;
+ grid-template-rows: auto 10px 60px;
}
.sp-dialog-content {
- margin: 0px;
- overflow-y:auto;
- flex: 1 1 auto;
+ margin: 0px;
+ overflow-y: auto;
+ flex: 1 1 auto;
}
.sp-dialog-actions {
- padding: 10px;
+ padding: 10px;
}
.actions-align-right {
- margin-left: auto;
+ margin-left: auto;
}
.p-15 {
- padding: 15px;
+ padding: 15px;
}
diff --git a/ui/src/scss/sp/spinner.scss b/ui/src/scss/sp/spinner.scss
index f3f833ed0..f3ba39c1e 100644
--- a/ui/src/scss/sp/spinner.scss
+++ b/ui/src/scss/sp/spinner.scss
@@ -18,6 +18,7 @@
@import '../_variables';
-.mat-progress-spinner circle, .mat-spinner circle {
- stroke: $sp-color-accent;
-}
\ No newline at end of file
+.mat-progress-spinner circle,
+.mat-spinner circle {
+ stroke: $sp-color-accent;
+}
diff --git a/ui/src/scss/sp/stepper.scss b/ui/src/scss/sp/stepper.scss
index 4a7c39beb..7466d1cb3 100644
--- a/ui/src/scss/sp/stepper.scss
+++ b/ui/src/scss/sp/stepper.scss
@@ -17,5 +17,5 @@
*/
.mat-horizontal-stepper-header-container {
- pointer-events: none !important;
-}
\ No newline at end of file
+ pointer-events: none !important;
+}
diff --git a/ui/src/scss/sp/trafficlight.scss b/ui/src/scss/sp/trafficlight.scss
index ac379be57..ff4695e5e 100644
--- a/ui/src/scss/sp/trafficlight.scss
+++ b/ui/src/scss/sp/trafficlight.scss
@@ -18,7 +18,7 @@
#light {
background-color: #000;
- box-shadow: 0 0 5px rgba(0,0,0, .8);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
overflow: hidden;
padding: 0 0 4px;
width: 80px;
@@ -29,22 +29,36 @@
display: block;
height: 60px;
margin: 4px auto 0;
- opacity: .5;
+ opacity: 0.5;
width: 60px;
}
/*! Light colours */
-#red { background-color: red; }
-#orange { background-color: orange; }
-#green { background-color: green; }
+#red {
+ background-color: red;
+}
+#orange {
+ background-color: orange;
+}
+#green {
+ background-color: green;
+}
/*! Active states */
-#light span.active { opacity: 1; }
-#light #red.active { box-shadow: 0 0 10px red; }
-#light #orange.active { box-shadow: 0 0 10px orange; }
-#light #green.active { box-shadow: 0 0 10px green; }
+#light span.active {
+ opacity: 1;
+}
+#light #red.active {
+ box-shadow: 0 0 10px red;
+}
+#light #orange.active {
+ box-shadow: 0 0 10px orange;
+}
+#light #green.active {
+ box-shadow: 0 0 10px green;
+}
/*! Toggle button */
button {
margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/ui/src/scss/sp/widgets.scss b/ui/src/scss/sp/widgets.scss
index fca4f0612..4a31fa741 100644
--- a/ui/src/scss/sp/widgets.scss
+++ b/ui/src/scss/sp/widgets.scss
@@ -17,42 +17,42 @@
*/
.widget-content {
- width:100%;
- height: calc(100% - 40px);
- overflow-y: auto;
+ width: 100%;
+ height: calc(100% - 40px);
+ overflow-y: auto;
}
.widget-inner-options {
- background: var(--color-bg-1);
- border-bottom: 1px solid var(--color-tab-border);
- padding: 5px;
- height: 40px;
+ background: var(--color-bg-1);
+ border-bottom: 1px solid var(--color-tab-border);
+ padding: 5px;
+ height: 40px;
}
.widget-inner-content {
- width: 100%;
- height: calc(100% - 40px);
- align-content: center;
- align-items: center;
- display:flex;
- justify-content: center;
- overflow-y: auto;
- overflow-x: auto;
+ width: 100%;
+ height: calc(100% - 40px);
+ align-content: center;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ overflow-y: auto;
+ overflow-x: auto;
}
.general-options-panel {
- margin-top: 4px;
- margin-bottom: 8px;
- border: 1px solid var(--color-bg-3);
- background: var(--color-bg-1);
- padding: 5px;
+ margin-top: 4px;
+ margin-bottom: 8px;
+ border: 1px solid var(--color-bg-3);
+ background: var(--color-bg-1);
+ padding: 5px;
}
.general-options-header {
- //margin-right: 10px;
- margin-bottom: 10px;
- font-weight: bold;
- border-left: 4px solid var(--color-primary);
- padding-left: 5px;
- font-size: 13pt;
+ //margin-right: 10px;
+ margin-bottom: 10px;
+ font-weight: bold;
+ border-left: 4px solid var(--color-primary);
+ padding-left: 5px;
+ font-size: 13pt;
}