tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #1054 from tagliala/add-stylelint 

Add stylelint
pull/1067/head
Igor Kulikov 8 years ago
committed by GitHub
parent
291634c10f 3524c4010c
commit
4ba34513a4
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
97 changed files with 1980 additions and 1180 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 292
      ui/.stylelintrc
  2. 12
      ui/package.json
  3. 10
      ui/src/app/alarm/alarm-details-dialog.scss
  4. 23
      ui/src/app/alarm/alarm.scss
  5. 12
      ui/src/app/audit/audit-log-details-dialog.scss
  6. 27
      ui/src/app/audit/audit-log.scss
  7. 5
      ui/src/app/components/dashboard-autocomplete.scss
  8. 30
      ui/src/app/components/dashboard-select.scss
  9. 36
      ui/src/app/components/dashboard.scss
  10. 2
      ui/src/app/components/datakey-config.scss
  11. 16
      ui/src/app/components/datasource-entity.scss
  12. 11
      ui/src/app/components/datasource-func.scss
  13. 41
      ui/src/app/components/datasource.scss
  14. 7
      ui/src/app/components/datetime-period.scss
  15. 34
      ui/src/app/components/details-sidenav.scss
  16. 5
      ui/src/app/components/entity-alias-select.scss
  17. 29
      ui/src/app/components/expand-fullscreen.scss
  18. 13
      ui/src/app/components/grid.scss
  19. 23
      ui/src/app/components/js-func.scss
  20. 20
      ui/src/app/components/json-content.scss
  21. 5
      ui/src/app/components/json-form.scss
  22. 10
      ui/src/app/components/json-object-edit.scss
  23. 8
      ui/src/app/components/kv-map.scss
  24. 22
      ui/src/app/components/legend-config.scss
  25. 26
      ui/src/app/components/legend.scss
  26. 22
      ui/src/app/components/material-icon-select.scss
  27. 14
      ui/src/app/components/material-icons-dialog.scss
  28. 6
      ui/src/app/components/menu-link.scss
  29. 55
      ui/src/app/components/react/json-form-ace-editor.scss
  30. 14
      ui/src/app/components/react/json-form-color.scss
  31. 91
      ui/src/app/components/react/json-form-image.scss
  32. 121
      ui/src/app/components/react/json-form.scss
  33. 5
      ui/src/app/components/related-entity-autocomplete.scss
  34. 39
      ui/src/app/components/side-menu.scss
  35. 11
      ui/src/app/components/timeinterval.scss
  36. 37
      ui/src/app/components/timewindow.scss
  37. 7
      ui/src/app/components/widget/action/manage-widget-actions.scss
  38. 4
      ui/src/app/components/widget/widget-config.scss
  39. 11
      ui/src/app/components/widget/widget.scss
  40. 28
      ui/src/app/components/widgets-bundle-select.scss
  41. 3
      ui/src/app/dashboard/dashboard-card.scss
  42. 26
      ui/src/app/dashboard/dashboard-settings.scss
  43. 81
      ui/src/app/dashboard/dashboard-toolbar.scss
  44. 79
      ui/src/app/dashboard/dashboard.scss
  45. 5
      ui/src/app/dashboard/states/default-state-controller.scss
  46. 53
      ui/src/app/dashboard/states/entity-state-controller.scss
  47. 9
      ui/src/app/dashboard/states/manage-dashboard-states.scss
  48. 29
      ui/src/app/entity/alias/aliases-entity-select.scss
  49. 5
      ui/src/app/entity/alias/entity-alias-dialog.scss
  50. 18
      ui/src/app/entity/alias/entity-aliases.scss
  51. 30
      ui/src/app/entity/attribute/attribute-table.scss
  52. 2
      ui/src/app/entity/entity-autocomplete.scss
  53. 11
      ui/src/app/entity/entity-filter-view.scss
  54. 8
      ui/src/app/entity/entity-filter.scss
  55. 7
      ui/src/app/entity/entity-list.scss
  56. 6
      ui/src/app/entity/entity-select.scss
  57. 2
      ui/src/app/entity/entity-subtype-autocomplete.scss
  58. 7
      ui/src/app/entity/entity-subtype-list.scss
  59. 1
      ui/src/app/entity/entity-subtype-select.scss
  60. 7
      ui/src/app/entity/entity-type-list.scss
  61. 3
      ui/src/app/entity/entity-type-select.scss
  62. 10
      ui/src/app/entity/relation/relation-dialog.scss
  63. 29
      ui/src/app/entity/relation/relation-filters.scss
  64. 4
      ui/src/app/entity/relation/relation-table.scss
  65. 2
      ui/src/app/entity/relation/relation-type-autocomplete.scss
  66. 75
      ui/src/app/event/event.scss
  67. 21
      ui/src/app/extension/extension-table.scss
  68. 32
      ui/src/app/extension/extensions-forms/extension-form.scss
  69. 8
      ui/src/app/help/help.scss
  70. 13
      ui/src/app/home/home-links.scss
  71. 15
      ui/src/app/import-export/import-dialog.scss
  72. 6
      ui/src/app/jsonform/jsonform.scss
  73. 29
      ui/src/app/layout/home.scss
  74. 20
      ui/src/app/layout/user-menu.scss
  75. 5
      ui/src/app/login/login.scss
  76. 4
      ui/src/app/rulechain/link.scss
  77. 2
      ui/src/app/rulechain/message-type-autocomplete.scss
  78. 272
      ui/src/app/rulechain/rulechain.scss
  79. 6
      ui/src/app/rulechain/rulenode.scss
  80. 55
      ui/src/app/rulechain/script/node-script-test.scss
  81. 13
      ui/src/app/services/toast.scss
  82. 6
      ui/src/app/user/user-fieldset.scss
  83. 9
      ui/src/app/widget/lib/alarms-table-widget.scss
  84. 9
      ui/src/app/widget/lib/entities-table-widget.scss
  85. 5
      ui/src/app/widget/lib/extensions-table-widget.scss
  86. 141
      ui/src/app/widget/lib/rpc/knob.scss
  87. 48
      ui/src/app/widget/lib/rpc/led-indicator.scss
  88. 214
      ui/src/app/widget/lib/rpc/round-switch.scss
  89. 73
      ui/src/app/widget/lib/rpc/switch.scss
  90. 26
      ui/src/app/widget/lib/timeseries-table-widget.scss
  91. 60
      ui/src/app/widget/widget-editor.scss
  92. 6
      ui/src/scss/animations.scss
  93. 20
      ui/src/scss/constants.scss
  94. 8
      ui/src/scss/fonts.scss
  95. 309
      ui/src/scss/main.scss
  96. 26
      ui/src/scss/mixins.scss
  97. 3
      ui/webpack.config.dev.js

292
ui/.stylelintrc
View File

@ -0,0 +1,292 @@
{
"extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
"plugins": [
"stylelint-order"
],
"rules": {
"at-rule-empty-line-before": ["always", {
"except": ["first-nested"],
"ignore": ["after-comment"]
}],
"at-rule-name-space-after": "always",
"at-rule-no-vendor-prefix": true,
"at-rule-semicolon-space-before": "never",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-newline-after": null,
"block-opening-brace-space-before": null,
"color-named": "never",
"declaration-block-semicolon-newline-after": "always-multi-line",
"declaration-block-semicolon-newline-before": "never-multi-line",
"declaration-block-semicolon-space-after": "always-single-line",
"declaration-empty-line-before": null,
"declaration-no-important": null,
"font-family-name-quotes": "always-where-recommended",
"font-weight-notation": [
"numeric", {
"ignore": ["relative"]
}],
"function-url-no-scheme-relative": true,
"function-url-quotes": "always",
"length-zero-no-unit": true,
"max-empty-lines": 2,
"max-line-length": null,
"media-feature-name-no-vendor-prefix": true,
"media-feature-parentheses-space-inside": "never",
"media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "never",
"no-descending-specificity": null,
"no-duplicate-selectors": true,
"number-leading-zero": "never",
"media-feature-name-no-unknown": [true, {
"ignoreMediaFeatureNames": ["prefers-reduced-motion"]
}],
"order/properties-order": [
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"box-sizing",
"display",
"flex",
"flex-align",
"flex-basis",
"flex-direction",
"flex-wrap",
"flex-flow",
"flex-shrink",
"flex-grow",
"flex-order",
"flex-pack",
"align-content",
"align-items",
"align-self",
"justify-content",
"order",
"float",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"overflow",
"overflow-x",
"overflow-y",
"-webkit-overflow-scrolling",
"-ms-overflow-x",
"-ms-overflow-y",
"-ms-overflow-style",
"columns",
"column-count",
"column-fill",
"column-gap",
"column-rule",
"column-rule-width",
"column-rule-style",
"column-rule-color",
"column-span",
"column-width",
"orphans",
"widows",
"clip",
"clear",
"font",
"font-family",
"font-size",
"font-style",
"font-weight",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"src",
"hyphens",
"line-height",
"color",
"text-align",
"text-align-last",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-decoration",
"text-indent",
"text-justify",
"text-outline",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"text-transform",
"text-wrap",
"-webkit-text-size-adjust",
"-ms-text-size-adjust",
"letter-spacing",
"-ms-word-break",
"word-break",
"word-spacing",
"-ms-word-wrap",
"word-wrap",
"overflow-wrap",
"tab-size",
"white-space",
"vertical-align",
"direction",
"unicode-bidi",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"pointer-events",
"-ms-touch-action",
"touch-action",
"cursor",
"visibility",
"zoom",
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"background",
"background-color",
"background-image",
"filter",
"background-repeat",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-size",
"border",
"border-color",
"border-style",
"border-width",
"border-top",
"border-top-color",
"border-top-style",
"border-top-width",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-bottom",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"box-shadow",
"opacity",
"-ms-interpolation-mode",
"page-break-after",
"page-break-before",
"page-break-inside",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"perspective",
"appearance",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"fill",
"stroke"
],
"property-no-vendor-prefix": null,
"rule-empty-line-before": ["always", {
"except": ["first-nested"],
"ignore": ["after-comment"]
}],
"scss/dollar-variable-default": [true, { "ignore": "local" }],
"selector-attribute-quotes": "always",
"selector-list-comma-newline-after": "always",
"selector-list-comma-newline-before": "never-multi-line",
"selector-list-comma-space-after": "always-single-line",
"selector-list-comma-space-before": "never-single-line",
"selector-max-attribute": 2,
"selector-max-class": 6,
"selector-max-combinators": 8,
"selector-max-compound-selectors": 9,
"selector-max-empty-lines": 1,
"selector-max-id": 1,
"selector-max-specificity": null,
"selector-max-type": 5,
"selector-max-universal": 1,
"selector-no-qualifying-type": null,
"selector-no-vendor-prefix": null,
"selector-type-no-unknown": [true, {
"ignoreTypes": [
"/^md-/",
"/^mdp-/",
"/^ng-/",
"/^tb-/",
"/^v-pane/"
]
}],
"string-quotes": "double",
"value-keyword-case": "lower",
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-newline-before": "never-multi-line",
"value-list-comma-space-after": "always-single-line",
"value-no-vendor-prefix": null
}
}

12
ui/package.json
View File

@ -100,6 +100,7 @@
"copy-webpack-plugin": "^3.0.1",
"cross-env": "^3.2.4",
"css-loader": "^0.25.0",
"directory-tree": "^2.1.0",
"eslint": "^3.4.0",
"eslint-config-angular": "^0.5.0",
"eslint-loader": "^1.5.0",
@ -112,6 +113,7 @@
"html-minifier-loader": "^1.3.4",
"html-webpack-plugin": "^2.30.1",
"img-loader": "^1.3.1",
"jsonminify": "^0.4.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"ng-annotate-loader": "^0.1.1",
@ -122,14 +124,18 @@
"react-hot-loader": "^3.0.0-beta.6",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"stylelint": "^9.5.0",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-order": "^1.0.0",
"stylelint-scss": "^3.3.0",
"stylelint-webpack-plugin": "^0.10.5",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.15.1",
"webpack-hot-middleware": "^2.12.2",
"webpack-material-design-icons": "^0.1.0",
"directory-tree": "^2.1.0",
"jsonminify": "^0.4.1"
"webpack-material-design-icons": "^0.1.0"
},
"engine": "node >= 5.9.0",
"nyc": {

10
ui/src/app/alarm/alarm-details-dialog.scss
View File

@ -13,14 +13,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-alarm-details-panel {
margin-left: 15px;
border: 1px solid #C0C0C0;
height: 100%;
margin-left: 15px;
border: 1px solid #c0c0c0;
#tb-alarm-details {
min-width: 600px;
min-height: 200px;
width: 100%;
min-width: 600px;
height: 100%;
min-height: 200px;
}
}

23
ui/src/app/alarm/alarm.scss
View File

@ -13,26 +13,27 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-alarm-container {
overflow-x: auto;
}
md-list.tb-alarm-table {
padding: 0px;
min-width: 700px;
padding: 0;
md-list-item {
padding: 0px;
padding: 0;
}
.tb-row {
height: 48px;
padding: 0px;
padding: 0;
overflow: hidden;
}
.tb-row:hover {
background-color: #EEEEEE;
background-color: #eee;
}
.tb-header:hover {
@ -41,9 +42,9 @@ md-list.tb-alarm-table {
.tb-header {
.tb-cell {
color: rgba(0,0,0,.54);
font-size: 12px;
font-weight: 700;
color: rgba(0, 0, 0, .54);
white-space: nowrap;
background: none;
}
@ -52,11 +53,12 @@ md-list.tb-alarm-table {
.tb-cell {
padding: 0 24px;
margin: auto 0;
color: rgba(0,0,0,.87);
overflow: hidden;
font-size: 13px;
vertical-align: middle;
color: rgba(0, 0, 0, .87);
text-align: left;
overflow: hidden;
vertical-align: middle;
.md-button {
padding: 0;
margin: 0;
@ -66,12 +68,11 @@ md-list.tb-alarm-table {
.tb-cell.tb-number {
text-align: right;
}
}
#tb-alarm-content {
min-width: 400px;
min-height: 50px;
width: 100%;
min-width: 400px;
height: 100%;
min-height: 50px;
}

12
ui/src/app/audit/audit-log-details-dialog.scss
View File

@ -13,10 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#tb-audit-log-action-data, #tb-audit-log-failure-details {
min-width: 400px;
min-height: 50px;
#tb-audit-log-action-data,
#tb-audit-log-failure-details {
width: 100%;
min-width: 400px;
height: 100%;
border: 1px solid #C0C0C0;
}
min-height: 50px;
border: 1px solid #c0c0c0;
}

27
ui/src/app/audit/audit-log.scss
View File

@ -13,17 +13,21 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-audit-logs {
background-color: #fff;
.tb-audit-log-margin-18px {
margin-bottom: 18px;
}
.tb-audit-log-toolbar {
font-size: 20px;
}
md-input-container.tb-audit-log-search-input {
.md-errors-spacer {
min-height: 0px;
min-height: 0;
}
}
}
@ -32,27 +36,26 @@
overflow-x: auto;
}
md-list.tb-audit-log-table {
padding: 0px;
min-width: 700px;
padding: 0;
&.tb-audit-log-table-full {
min-width: 900px;
}
md-list-item {
padding: 0px;
padding: 0;
}
.tb-row {
height: 48px;
padding: 0px;
padding: 0;
overflow: hidden;
}
.tb-row:hover {
background-color: #EEEEEE;
background-color: #eee;
}
.tb-header:hover {
@ -61,9 +64,9 @@ md-list.tb-audit-log-table {
.tb-header {
.tb-cell {
color: rgba(0,0,0,.54);
font-size: 12px;
font-weight: 700;
color: rgba(0, 0, 0, .54);
white-space: nowrap;
background: none;
}
@ -72,11 +75,12 @@ md-list.tb-audit-log-table {
.tb-cell {
padding: 0 24px;
margin: auto 0;
color: rgba(0,0,0,.87);
overflow: hidden;
font-size: 13px;
vertical-align: middle;
color: rgba(0, 0, 0, .87);
text-align: left;
overflow: hidden;
vertical-align: middle;
.md-button {
padding: 0;
margin: 0;
@ -86,5 +90,4 @@ md-list.tb-audit-log-table {
.tb-cell.tb-number {
text-align: right;
}
}

5
ui/src/app/components/dashboard-autocomplete.scss
View File

@ -13,16 +13,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-dashboard-autocomplete {
.tb-not-found {
display: block;
line-height: 1.5;
height: 48px;
line-height: 1.5;
}
.tb-dashboard-item {
display: block;
height: 48px;
}
li {
height: auto !important;
white-space: normal !important;

30
ui/src/app/components/dashboard-select.scss
View File

@ -13,18 +13,20 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../scss/constants';
@import "../../scss/constants";
tb-dashboard-select {
min-width: 52px;
md-select {
pointer-events: all;
max-width: 300px;
pointer-events: all;
}
}
.tb-dashboard-select {
min-height: 32px;
span {
pointer-events: all;
cursor: pointer;
@ -38,23 +40,27 @@ tb-dashboard-select {
}
.tb-dashboard-select-panel {
min-width: 300px;
max-width: 320px;
max-height: 150px;
overflow-x: hidden;
overflow-y: auto;
background: #fff;
border-radius: 4px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, .2),
0 13px 19px 2px rgba(0, 0, 0, .14),
0 5px 24px 4px rgba(0, 0, 0, .12);
@media (min-height: 350px) {
max-height: 250px;
}
max-width: 320px;
@media (min-width: $layout-breakpoint-xs) {
max-width: 100%;
}
min-width: 300px;
background: white;
border-radius: 4px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 13px 19px 2px rgba(0, 0, 0, 0.14),
0 5px 24px 4px rgba(0, 0, 0, 0.12);
overflow-x: hidden;
overflow-y: auto;
md-content {
background-color: #fff;
}
}
}

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

@ -21,6 +21,7 @@ div.tb-widget {
margin: 0;
overflow: hidden;
outline: none;
@include transition(all .2s ease-in-out);
.tb-widget-title {
@ -32,7 +33,7 @@ div.tb-widget {
tb-timewindow {
font-size: 14px;
opacity: 0.85;
opacity: .85;
}
}
@ -44,17 +45,19 @@ div.tb-widget {
margin: 0;
.md-button.md-icon-button {
margin: 0 !important;
padding: 0 !important;
line-height: 20px;
width: 32px;
height: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
md-icon, ng-md-icon {
padding: 0 !important;
margin: 0 !important;
line-height: 20px;
md-icon,
ng-md-icon {
width: 20px;
height: 20px;
min-width: 20px;
height: 20px;
min-height: 20px;
font-size: 20px;
}
@ -63,8 +66,8 @@ div.tb-widget {
.tb-widget-content {
tb-widget {
width: 100%;
position: relative;
width: 100%;
}
}
}
@ -75,40 +78,41 @@ div.tb-widget.tb-highlighted {
}
div.tb-widget.tb-not-highlighted {
opacity: 0.5;
opacity: .5;
}
tb-dashboard {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
left: 0;
}
md-content.tb-dashboard-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
outline: none;
left: 0;
background: none;
outline: none;
.gridster-item {
@include transition(none);
@include transition(none);
}
}
.tb-widget-error-container {
position: absolute;
background-color: #fff;
width: 100%;
height: 100%;
background-color: #fff;
}
.tb-widget-error-msg {
color: red;
padding: 5px;
font-size: 16px;
color: #f00;
word-wrap: break-word;
padding: 5px;
}

2
ui/src/app/components/datakey-config.scss
View File

@ -13,9 +13,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-datakey-config {
min-width: 500px !important;
min-height: 500px !important;
md-content {
background-color: #fff;
}

16
ui/src/app/components/datasource-entity.scss
View File

@ -13,17 +13,22 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../scss/constants';
@import "../../scss/constants";
.tb-entity-alias-autocomplete, .tb-timeseries-datakey-autocomplete, .tb-attribute-datakey-autocomplete, .tb-alarm-datakey-autocomplete {
.tb-entity-alias-autocomplete,
.tb-timeseries-datakey-autocomplete,
.tb-attribute-datakey-autocomplete,
.tb-alarm-datakey-autocomplete {
.tb-not-found {
display: block;
line-height: 1.5;
height: 48px;
line-height: 1.5;
.tb-no-entries {
line-height: 48px;
}
}
li {
height: auto !important;
white-space: normal !important;
@ -32,13 +37,14 @@
tb-datasource-entity {
@media (min-width: $layout-breakpoint-sm) {
padding-left: 4px;
padding-right: 4px;
padding-left: 4px;
}
tb-entity-alias-select {
@media (min-width: $layout-breakpoint-sm) {
width: 200px;
max-width: 200px;
}
}
}
}

11
ui/src/app/components/datasource-func.scss
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../scss/constants';
@import "../../scss/constants";
.tb-datasource-func {
@media (min-width: $layout-breakpoint-sm) {
@ -22,19 +22,22 @@
md-input-container.tb-datasource-name {
.md-errors-spacer {
display: none;
display: none;
}
}
.tb-func-datakey-autocomplete, .tb-alarm-datakey-autocomplete {
.tb-func-datakey-autocomplete,
.tb-alarm-datakey-autocomplete {
.tb-not-found {
display: block;
line-height: 1.5;
height: 48px;
line-height: 1.5;
.tb-no-entries {
line-height: 48px;
}
}
li {
height: auto !important;
white-space: normal !important;

41
ui/src/app/components/datasource.scss
View File

@ -13,39 +13,43 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-datasource {
#entity-autocomplete {
height: 30px;
margin-top: 18px;
md-autocomplete-wrap {
height: 30px;
}
input, input:not(.md-input) {
height: 30px;
}
}
#datasourceType {
#entity-autocomplete {
height: 30px;
margin-top: 18px;
md-autocomplete-wrap {
height: 30px;
}
input,
input:not(.md-input) {
height: 30px;
}
}
}
@mixin tb-checkered-bg() {
background-color: #fff;
background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
background-size: 8px 8px;
background-image:
linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
background-position: 0 0, 4px 4px;
background-size: 8px 8px;
}
.tb-color-preview {
content: '';
min-width: 24px;
position: relative;
width: 24px;
min-width: 24px;
height: 24px;
overflow: hidden;
content: "";
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);
position: relative;
overflow: hidden;
@include tb-checkered-bg();
.tb-color-result {
@ -60,6 +64,7 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.tb-chip-separator {
white-space: pre;
}

7
ui/src/app/components/datetime-period.scss
View File

@ -13,13 +13,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
tb-datetime-period {
md-input-container {
margin-bottom: 0px;
margin-bottom: 0;
.md-errors-spacer {
min-height: 0px;
min-height: 0;
}
}
mdp-date-picker {
.md-input {
width: 150px !important;

34
ui/src/app/components/details-sidenav.scss
View File

@ -13,47 +13,51 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../scss/constants';
@import "../../scss/constants";
.tb-details-title {
font-size: 1.000rem;
@media (min-width: $layout-breakpoint-gt-sm) {
font-size: 1.600rem;
}
font-weight: 400;
text-transform: uppercase;
width: inherit;
margin: 20px 8px 0 0;
overflow: hidden;
font-size: 1rem;
font-weight: 400;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
width: inherit;
@media (min-width: $layout-breakpoint-gt-sm) {
font-size: 1.6rem;
}
}
.tb-details-subtitle {
font-size: 1.000rem;
width: inherit;
margin: 10px 0;
opacity: 0.8;
overflow: hidden;
font-size: 1rem;
text-overflow: ellipsis;
white-space: nowrap;
width: inherit;
opacity: .8;
}
md-sidenav.tb-sidenav-details {
.md-toolbar-tools {
min-height: 100px;
max-height: 120px;
height: 100%;
height: 100%;
min-height: 100px;
max-height: 120px;
}
z-index: 59 !important;
width: 100% !important;
max-width: 100% !important;
z-index: 59 !important;
@media (min-width: $layout-breakpoint-gt-sm) {
width: 80% !important;
}
@media (min-width: $layout-breakpoint-gt-md) {
width: 65% !important;
}
tb-dashboard {
md-content {
background-color: $primary-hue-3;

5
ui/src/app/components/entity-alias-select.scss
View File

@ -13,15 +13,18 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-entity-alias-autocomplete {
.tb-not-found {
display: block;
line-height: 1.5;
height: 48px;
line-height: 1.5;
.tb-no-entries {
line-height: 48px;
}
}
li {
height: auto !important;
white-space: normal !important;

29
ui/src/app/components/expand-fullscreen.scss
View File

@ -16,37 +16,38 @@
@import "../../scss/constants";
.tb-fullscreen {
section.header-buttons {
top: 25px;
}
}
.tb-fullscreen {
width: 100% !important;
height: 100% !important;
position: fixed !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
section.header-buttons {
top: 25px;
}
}
.tb-fullscreen-parent {
background-color: $gray;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $gray;
}
.md-button.tb-fullscreen-button-style, .tb-fullscreen-button-style {
.md-button.tb-fullscreen-button-style,
.tb-fullscreen-button-style {
background: #ccc;
opacity: 0.85;
opacity: .85;
ng-md-icon {
color: #666;
}
}
.md-button.tb-fullscreen-button-pos, .tb-fullscreen-button-pos {
.md-button.tb-fullscreen-button-pos,
.tb-fullscreen-button-pos {
position: absolute;
top: 10px;
right: 10px;

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

@ -21,15 +21,19 @@
.tb-card-item {
@include transition(all .2s ease-in-out);
md-card-content {
padding-top: 0px;
max-height: 53px;
padding-top: 0;
}
md-card-title {
width: 100%;
md-card-title-text {
max-height: 32px;
min-width: 50%;
max-height: 32px;
.md-headline {
overflow: hidden;
text-overflow: ellipsis;
@ -40,14 +44,15 @@
}
.tb-current-item {
opacity: 0.5;
opacity: .5;
@include transform(scale(1.05));
}
#tb-vertical-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
left: 0;
}

23
ui/src/app/components/js-func.scss
View File

@ -13,11 +13,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
tb-js-func {
position: relative;
.tb-disabled {
color: rgba(0,0,0,0.38);
color: rgba(0, 0, 0, .38);
}
.fill-height {
height: 100%;
}
@ -25,25 +28,27 @@ tb-js-func {
.tb-js-func-toolbar {
.md-button.tidy {
color: #7B7B7B;
min-width: 32px;
min-height: 15px;
line-height: 15px;
font-size: 0.800rem;
margin: 0 5px 0 0;
padding: 4px;
background: rgba(220, 220, 220, 0.35);
margin: 0 5px 0 0;
font-size: .8rem;
line-height: 15px;
color: #7b7b7b;
background: rgba(220, 220, 220, .35);
}
}
.tb-js-func-panel {
margin-left: 15px;
border: 1px solid #C0C0C0;
height: calc(100% - 80px);
margin-left: 15px;
border: 1px solid #c0c0c0;
#tb-javascript-input {
min-width: 200px;
width: 100%;
min-width: 200px;
height: 100%;
&:not(.fill-height) {
min-height: 200px;
}

20
ui/src/app/components/json-content.scss
View File

@ -13,8 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
tb-json-content {
position: relative;
.fill-height {
height: 100%;
}
@ -22,25 +24,27 @@ tb-json-content {
.tb-json-content-toolbar {
.md-button.tidy {
color: #7B7B7B;
min-width: 32px;
min-height: 15px;
line-height: 15px;
font-size: 0.800rem;
margin: 0 5px 0 0;
padding: 4px;
background: rgba(220, 220, 220, 0.35);
margin: 0 5px 0 0;
font-size: .8rem;
line-height: 15px;
color: #7b7b7b;
background: rgba(220, 220, 220, .35);
}
}
.tb-json-content-panel {
margin-left: 15px;
border: 1px solid #C0C0C0;
height: 100%;
margin-left: 15px;
border: 1px solid #c0c0c0;
#tb-json-input {
min-width: 200px;
width: 100%;
min-width: 200px;
height: 100%;
&:not(.fill-height) {
min-height: 200px;
}

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

@ -13,7 +13,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
tb-json-form {
overflow: auto;
padding-bottom: 14px !important;
}
overflow: auto;
}

10
ui/src/app/components/json-object-edit.scss
View File

@ -13,21 +13,25 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
tb-json-object-edit {
position: relative;
.fill-height {
height: 100%;
}
}
.tb-json-object-panel {
margin-left: 15px;
border: 1px solid #C0C0C0;
height: 100%;
margin-left: 15px;
border: 1px solid #c0c0c0;
#tb-json-input {
min-width: 200px;
width: 100%;
min-width: 200px;
height: 100%;
&:not(.fill-height) {
min-height: 200px;
}

8
ui/src/app/components/kv-map.scss
View File

@ -13,14 +13,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-kv-map {
span.no-data-found {
position: relative;
display: flex;
height: 40px;
text-transform: uppercase;
display: flex;
&.disabled {
color: rgba(0,0,0,0.38);
color: rgba(0, 0, 0, .38);
}
}
}
}

22
ui/src/app/components/legend-config.scss
View File

@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.md-panel {
&.tb-legend-config-panel {
position: absolute;
@ -20,21 +21,26 @@
}
.tb-legend-config-panel {
max-height: 220px;
min-width: 220px;
background: white;
border-radius: 4px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 13px 19px 2px rgba(0, 0, 0, 0.14),
0 5px 24px 4px rgba(0, 0, 0, 0.12);
max-height: 220px;
overflow: hidden;
form, fieldset {
background: #fff;
border-radius: 4px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, .2),
0 13px 19px 2px rgba(0, 0, 0, .14),
0 5px 24px 4px rgba(0, 0, 0, .12);
form,
fieldset {
height: 100%;
}
md-content {
background-color: #fff;
overflow: hidden;
background-color: #fff;
}
.md-padding {
padding: 0 16px;
}

26
ui/src/app/components/legend.scss
View File

@ -13,39 +13,49 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
table.tb-legend {
width: 100%;
font-size: 12px;
.tb-legend-header, .tb-legend-value {
text-align: right;
.tb-legend-header,
.tb-legend-value {
text-align: right;
}
.tb-legend-header {
th {
color: rgb(255,110,64);
white-space: nowrap;
padding: 0 10px 1px 0;
color: rgb(255, 110, 64);
white-space: nowrap;
}
}
.tb-legend-keys {
td.tb-legend-label, td.tb-legend-value {
white-space: nowrap;
td.tb-legend-label,
td.tb-legend-value {
padding: 2px 10px;
white-space: nowrap;
}
.tb-legend-line {
display: inline-block;
width: 15px;
height: 3px;
display: inline-block;
vertical-align: middle;
}
.tb-legend-label {
text-align: left;
outline: none;
&.tb-horizontal {
width: 95%;
}
&.tb-hidden-label {
text-decoration: line-through;
opacity: 0.6;
opacity: .6;
}
}
}

22
ui/src/app/components/material-icon-select.scss
View File

@ -13,14 +13,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-material-icon-select {
md-icon {
padding: 4px;
margin: 8px 4px 4px;
cursor: pointer;
border: solid 1px rgba(0,0,0,0.27);
}
md-input-container {
margin-bottom: 0px;
}
}
md-icon {
padding: 4px;
margin: 8px 4px 4px;
cursor: pointer;
border: solid 1px rgba(0, 0, 0, .27);
}
md-input-container {
margin-bottom: 0;
}
}

14
ui/src/app/components/material-icons-dialog.scss
View File

@ -13,18 +13,20 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-material-icons-dialog {
button.md-icon-button.tb-select-icon-button {
border: solid 1px orange;
border-radius: 0%;
padding: 16px;
height: 56px;
width: 56px;
height: 56px;
padding: 16px;
margin: 10px;
border: solid 1px #ffa500;
border-radius: 0%;
}
.tb-icons-load {
top: 64px;
background: rgba(255,255,255,0.75);
z-index: 3;
background: rgba(255, 255, 255, .75);
}
}
}

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

@ -24,9 +24,11 @@
}
.tb-menu-toggle-list {
overflow: hidden;
position: relative;
z-index: 1;
@include transition(0.75s cubic-bezier(0.35, 0, 0.25, 1));
overflow: hidden;
@include transition(.75s cubic-bezier(.35, 0, .25, 1));
@include transition-property(height);
}

55
ui/src/app/components/react/json-form-ace-editor.scss
View File

@ -13,30 +13,35 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.json-form-ace-editor {
position: relative;
border: 1px solid #C0C0C0;
height: 100%;
.title-panel {
position: absolute;
font-size: 0.800rem;
font-weight: 500;
top: 10px;
right: 20px;
z-index: 5;
label {
color: #00acc1;
background: rgba(220, 220, 220, 0.35);
border-radius: 5px;
padding: 4px;
text-transform: uppercase;
}
button.tidy-button {
background: rgba(220, 220, 220, 0.35) !important;
span {
padding: 0px !important;
font-size: 12px !important;
}
}
position: relative;
height: 100%;
border: 1px solid #c0c0c0;
.title-panel {
position: absolute;
top: 10px;
right: 20px;
z-index: 5;
font-size: .8rem;
font-weight: 500;
label {
padding: 4px;
color: #00acc1;
text-transform: uppercase;
background: rgba(220, 220, 220, .35);
border-radius: 5px;
}
}
button.tidy-button {
background: rgba(220, 220, 220, .35) !important;
span {
padding: 0 !important;
font-size: 12px !important;
}
}
}
}

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

@ -15,21 +15,23 @@
*/
@mixin tb-checkered-bg() {
background-color: #fff;
background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
background-size: 8px 8px;
background-image:
linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
background-position: 0 0, 4px 4px;
background-size: 8px 8px;
}
.tb-color-preview {
content: '';
position: relative;
width: 24px;
height: 24px;
overflow: hidden;
content: "";
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);
position: relative;
overflow: hidden;
@include tb-checkered-bg();
.tb-color-result {

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

@ -13,66 +13,69 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$previewSize: 100px;
$previewSize: 100px !default;
.tb-image-select-container {
position: relative;
height: $previewSize;
width: 100%;
height: $previewSize;
}
.tb-image-preview {
max-width: $previewSize;
max-height: $previewSize;
width: 100%;
height: 100%;
width: 100%;
max-width: $previewSize;
height: 100%;
max-height: $previewSize;
}
.tb-image-preview-container {
position: relative;
width: $previewSize;
height: $previewSize;
margin-right: 12px;
border: solid 1px;
vertical-align: top;
float: left;
div {
width: 100%;
font-size: 18px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
position: relative;
float: left;
width: $previewSize;
height: $previewSize;
margin-right: 12px;
vertical-align: top;
border: solid 1px;
div {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
font-size: 18px;
text-align: center;
transform: translate(-50%, -50%);
}
}
.tb-dropzone {
position: relative;
border: dashed 2px;
height: $previewSize;
vertical-align: top;
padding: 0 8px;
overflow: hidden;
div {
width: 100%;
font-size: 24px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
position: relative;
height: $previewSize;
padding: 0 8px;
overflow: hidden;
vertical-align: top;
border: dashed 2px;
div {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
font-size: 24px;
text-align: center;
transform: translate(-50%, -50%);
}
}
.tb-image-clear-container {
width: 48px;
height: $previewSize;
position: relative;
float: right;
position: relative;
float: right;
width: 48px;
height: $previewSize;
}
.tb-image-clear-btn {
position: absolute !important;
top: 50%;
transform: translate(0%,-50%) !important;
position: absolute !important;
top: 50%;
transform: translate(0%, -50%) !important;
}

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

@ -15,87 +15,92 @@
*/
@import "~compass-sass-mixins/lib/compass";
$swift-ease-out-duration: 0.4s !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$swift-ease-out-duration: .4s !default;
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
$input-label-float-offset: 6px !default;
$input-label-float-scale: 0.75 !default;
$input-label-float-scale: .75 !default;
.json-form-error {
position: relative;
bottom: -5px;
font-size: 12px;
line-height: 12px;
color: rgb(244, 67, 54);
@include transition(all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms);
position: relative;
bottom: -5px;
font-size: 12px;
line-height: 12px;
color: rgb(244, 67, 54);
@include transition(all 450ms cubic-bezier(.23, 1, .32, 1) 0ms);
}
.tb-container {
position: relative;
margin-top: 32px;
padding: 10px 0;
position: relative;
padding: 10px 0;
margin-top: 32px;
}
.tb-field {
&.tb-required {
label:after {
content: ' *';
font-size: 13px;
vertical-align: top;
color: rgba(0,0,0,0.54);
}
&.tb-required {
label::after {
font-size: 13px;
color: rgba(0, 0, 0, .54);
vertical-align: top;
content: " *";
}
&.tb-focused:not(.tb-readonly) {
label:after {
color: rgb(221,44,0);
}
}
&.tb-focused:not(.tb-readonly) {
label::after {
color: rgb(221, 44, 0);
}
}
}
.tb-date-field {
&.tb-required {
div>div:first-child:after {
content: ' *';
font-size: 13px;
vertical-align: top;
color: rgba(0,0,0,0.54);
}
&.tb-required {
div > div:first-child::after {
font-size: 13px;
color: rgba(0, 0, 0, .54);
vertical-align: top;
content: " *";
}
&.tb-focused:not(.tb-readonly) {
div>div:first-child:after {
color: rgb(221,44,0);
}
}
&.tb-focused:not(.tb-readonly) {
div > div:first-child::after {
color: rgb(221, 44, 0);
}
}
}
label.tb-label {
color: rgba(0,0,0,0.54);
-webkit-font-smoothing: antialiased;
position: absolute;
bottom: 100%;
left: 0;
right: auto;
@include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
@include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
width $swift-ease-out-timing-function $swift-ease-out-duration);
transform-origin: left top;
&.tb-focused {
color: rgb(96,125,139);
}
position: absolute;
right: auto;
bottom: 100%;
left: 0;
color: rgba(0, 0, 0, .54);
transform-origin: left top;
-webkit-font-smoothing: antialiased;
&.tb-required:after {
content: ' *';
font-size: 13px;
vertical-align: top;
color: rgba(0,0,0,0.54);
}
@include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
&.tb-focused:not(.tb-readonly):after {
color: rgb(221,44,0);
}
@include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
width $swift-ease-out-timing-function $swift-ease-out-duration);
&.tb-focused {
color: rgb(96, 125, 139);
}
&.tb-required::after {
font-size: 13px;
color: rgba(0, 0, 0, .54);
vertical-align: top;
content: " *";
}
&.tb-focused:not(.tb-readonly)::after {
color: rgb(221, 44, 0);
}
}
.tb-head-label {
color: rgba(0,0,0,0.54);
color: rgba(0, 0, 0, .54);
}

5
ui/src/app/components/related-entity-autocomplete.scss
View File

@ -13,16 +13,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-related-entity-autocomplete {
.tb-not-found {
display: block;
line-height: 1.5;
height: 48px;
line-height: 1.5;
}
.tb-entity-item {
display: block;
height: 48px;
}
li {
height: auto !important;
white-space: normal !important;

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

@ -16,21 +16,22 @@
@import "~compass-sass-mixins/lib/compass";
.tb-side-menu .md-button.tb-active {
background-color: rgba(255, 255, 255, 0.15);
font-weight: 500;
background-color: rgba(255, 255, 255, .15);
}
.tb-side-menu, .tb-side-menu ul {
list-style: none;
.tb-side-menu,
.tb-side-menu ul {
padding: 0;
margin-top: 0;
list-style: none;
}
.tb-side-menu .tb-menu-toggle-list a.md-button {
padding: 0 16px 0 32px;
font-weight: 500;
text-transform: none;
text-rendering: optimizeLegibility;
font-weight: 500;
}
.tb-side-menu .tb-menu-toggle-list .md-button {
@ -43,36 +44,38 @@
}
.tb-side-menu > li {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.tb-side-menu .md-button-toggle .md-toggle-icon {
background-size: 100% auto;
display: inline-block;
margin: auto 0 auto auto;
width: 15px;
margin: auto 0 auto auto;
background-size: 100% auto;
@include transition(transform .3s, ease-in-out);
}
.tb-side-menu .md-button {
display: flex;
border-radius: 0;
color: inherit;
cursor: pointer;
line-height: 40px;
margin: 0;
width: 100%;
max-height: 40px;
padding: 0 16px;
margin: 0;
overflow: hidden;
padding: 0px 16px;
line-height: 40px;
color: inherit;
text-align: left;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
cursor: pointer;
border-radius: 0;
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@ -83,10 +86,10 @@
.tb-side-menu ng-md-icon {
margin-right: 8px;
margin-left: 0px;
margin-left: 0;
}
.tb-side-menu md-icon {
margin-right: 8px;
margin-left: 0px;
margin-left: 0;
}

11
ui/src/app/components/timeinterval.scss
View File

@ -13,25 +13,32 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
tb-timeinterval {
min-width: 355px;
md-input-container {
margin-bottom: 0px;
margin-bottom: 0;
.md-errors-spacer {
min-height: 0px;
min-height: 0;
}
}
mdp-date-picker {
.md-input {
width: 150px;
}
}
.md-input {
width: 70px !important;
}
.advanced-switch {
margin-top: 0;
}
.advanced-label {
margin: 5px 0;
}

37
ui/src/app/components/timewindow.scss
View File

@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.md-panel {
&.tb-timewindow-panel {
position: absolute;
@ -20,38 +21,48 @@
}
.tb-timewindow-panel {
max-height: 440px;
min-width: 417px;
background: white;
border-radius: 4px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 13px 19px 2px rgba(0, 0, 0, 0.14),
0 5px 24px 4px rgba(0, 0, 0, 0.12);
max-height: 440px;
overflow: hidden;
form, fieldset {
background: #fff;
border-radius: 4px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, .2),
0 13px 19px 2px rgba(0, 0, 0, .14),
0 5px 24px 4px rgba(0, 0, 0, .12);
form,
fieldset {
height: 100%;
}
md-content {
background-color: #fff;
overflow: hidden;
background-color: #fff;
}
.md-padding {
padding: 0 16px;
}
.md-radio-interactive {
md-select, md-switch {
md-select,
md-switch {
pointer-events: all;
}
}
md-radio-button {
.md-label {
width: 100%;
}
tb-timeinterval {
width: 355px;
.advanced-switch {
min-height: 30px;
max-width: 44px;
min-height: 30px;
}
}
}
@ -59,15 +70,17 @@
tb-timewindow {
min-width: 52px;
section.tb-timewindow {
min-height: 32px;
padding: 0 6px;
span {
pointer-events: all;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: all;
cursor: pointer;
}
}
}

7
ui/src/app/components/widget/action/manage-widget-actions.scss
View File

@ -13,18 +13,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-manage-widget-actions {
table.md-table {
tbody {
tr {
td {
&.tb-action-cell {
width: 100px;
min-width: 100px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 100px;
max-width: 100px;
width: 100px;
}
}
}

4
ui/src/app/components/widget/widget-config.scss
View File

@ -13,11 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-widget-config {
md-tab-content.md-active > div {
height: 100%;
}
.tb-advanced-widget-config {
height: 100%;
}
}
}

11
ui/src/app/components/widget/widget.scss
View File

@ -13,18 +13,21 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-widget {
.tb-widget-error {
display: flex;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0.5);
justify-content: center;
background: rgba(255, 255, 255, .5);
span {
color: red;
color: #f00;
}
}
.tb-widget-loading {
background: rgba(255,255,255,0.15);
z-index: 3;
background: rgba(255, 255, 255, .15);
}
}

28
ui/src/app/components/widgets-bundle-select.scss
View File

@ -17,9 +17,10 @@
tb-widgets-bundle-select {
md-select {
margin: 0;
padding: 5px 20px;
margin: 0;
}
.tb-bundle-item {
height: 24px;
line-height: 24px;
@ -33,24 +34,29 @@ tb-widgets-bundle-select {
}
}
tb-widgets-bundle-select, .tb-widgets-bundle-select {
tb-widgets-bundle-select,
.tb-widgets-bundle-select {
.md-text {
display: block;
width: 100%;
}
.tb-bundle-item {
display: inline-block;
width: 100%;
span {
display: inline-block;
vertical-align: middle;
}
.tb-bundle-system {
font-size: 0.8rem;
opacity: 0.8;
float: right;
font-size: .8rem;
opacity: .8;
}
}
md-option {
height: auto !important;
white-space: normal !important;
@ -60,19 +66,23 @@ tb-widgets-bundle-select, .tb-widgets-bundle-select {
md-toolbar {
tb-widgets-bundle-select {
md-select {
background: rgba(255,255,255,0.2);
background: rgba(255, 255, 255, .2);
.md-select-value {
color: #fff;
font-size: 1.2rem;
span:first-child:after {
color: #fff;
color: #fff;
span:first-child::after {
color: #fff;
}
}
.md-select-value.md-select-placeholder {
color: #fff;
opacity: 0.8;
opacity: .8;
}
}
md-select.ng-invalid.ng-touched {
.md-select-value {
color: #fff !important;

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

@ -13,14 +13,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-dashboard-assigned-customers {
display: block;
display: -webkit-box;
height: 34px;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 4px;
}

26
ui/src/app/dashboard/dashboard-settings.scss
View File

@ -13,50 +13,54 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$previewSize: 100px;
$previewSize: 100px !default;
.tb-image-select-container {
position: relative;
height: $previewSize;
width: 100%;
height: $previewSize;
}
.tb-image-preview {
max-width: $previewSize;
max-height: $previewSize;
width: auto;
max-width: $previewSize;
height: auto;
max-height: $previewSize;
}
.tb-image-preview-container {
position: relative;
float: left;
width: $previewSize;
height: $previewSize;
margin-right: 12px;
border: solid 1px;
vertical-align: top;
float: left;
border: solid 1px;
div {
width: 100%;
font-size: 18px;
text-align: center;
}
div, .tb-image-preview {
div,
.tb-image-preview {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
}
.tb-image-clear-container {
width: 48px;
height: $previewSize;
position: relative;
float: right;
width: 48px;
height: $previewSize;
}
.tb-image-clear-btn {
position: absolute !important;
top: 50%;
transform: translate(0%,-50%) !important;
transform: translate(0%, -50%) !important;
}

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

@ -14,13 +14,14 @@
* limitations under the License.
*/
@import "~compass-sass-mixins/lib/compass";
@import '../../scss/constants';
$toolbar-height: 50px;
$fullscreen-toolbar-height: 64px;
$mobile-toolbar-height: 80px;
$half-mobile-toolbar-height: 40px;
$mobile-toolbar-height-total: 84px;
@import "../../scss/constants";
$toolbar-height: 50px !default;
$fullscreen-toolbar-height: 64px !default;
$mobile-toolbar-height: 80px !default;
$half-mobile-toolbar-height: 40px !default;
$mobile-toolbar-height-total: 84px !default;
tb-dashboard-toolbar {
md-fab-toolbar {
@ -29,126 +30,156 @@ tb-dashboard-toolbar {
.md-button {
&.md-fab {
opacity: 1;
@include transition(opacity .3s cubic-bezier(.55,0,.55,.2));
.md-fab-toolbar-background {
background-color: $primary-default !important;
background-color: $primary-default !important;
}
}
}
}
}
md-fab-trigger {
.md-button {
&.md-fab {
line-height: 36px;
width: 36px;
height: 36px;
margin: 4px 0 0 4px;
opacity: 0.5;
line-height: 36px;
opacity: .5;
@include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s);
md-icon {
position: absolute;
top: 25%;
margin: 0;
line-height: 18px;
height: 18px;
width: 18px;
min-height: 18px;
min-width: 18px;
height: 18px;
min-height: 18px;
margin: 0;
line-height: 18px;
}
}
}
}
&.is-fullscreen {
&.md-is-open {
md-fab-trigger {
.md-button {
&.md-fab {
.md-fab-toolbar-background {
transition-delay: 0ms !important;
transition-duration: 0ms !important;
transition-delay: 0ms !important;
transition-duration: 0ms !important;
}
}
}
}
}
.md-fab-toolbar-wrapper {
height: $mobile-toolbar-height-total;
@media (min-width: $layout-breakpoint-sm) {
height: $fullscreen-toolbar-height;
}
md-toolbar {
min-height: $mobile-toolbar-height;
height: $mobile-toolbar-height;
min-height: $mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
min-height: $fullscreen-toolbar-height;
height: $fullscreen-toolbar-height;
min-height: $fullscreen-toolbar-height;
}
}
}
}
.md-fab-toolbar-wrapper {
height: $mobile-toolbar-height-total;
@media (min-width: $layout-breakpoint-sm) {
height: $toolbar-height;
}
md-toolbar {
min-height: $mobile-toolbar-height;
height: $mobile-toolbar-height;
min-height: $mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
min-height: $toolbar-height;
height: $toolbar-height;
min-height: $toolbar-height;
}
md-fab-actions {
margin-top: 0;
font-size: 16px;
margin-top: 0px;
@media (max-width: $layout-breakpoint-sm) {
height: $mobile-toolbar-height;
max-height: $mobile-toolbar-height;
}
.close-action {
margin-right: -18px;
}
.md-fab-action-item {
width: 100%;
height: $mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
height: 46px;
}
.tb-dashboard-action-panels {
flex-direction: column-reverse;
height: $mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
height: 46px;
}
flex-direction: column-reverse;
@media (min-width: $layout-breakpoint-sm) {
flex-direction: row-reverse;
}
.tb-dashboard-action-panel {
min-width: 0px;
flex-direction: row-reverse;
min-width: 0;
height: $half-mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
height: 46px;
}
flex-direction: row-reverse;
div {
height: $half-mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
height: 46px;
}
}
md-select {
pointer-events: all;
}
tb-states-component {
pointer-events: all;
}
button.md-icon-button {
min-width: 40px;
@media (max-width: $layout-breakpoint-sm) {
min-width: 28px;
margin: 0px;
padding: 2px;
margin: 0;
}
}
}
@ -158,4 +189,4 @@ tb-dashboard-toolbar {
}
}
}
}
}

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

@ -14,11 +14,12 @@
* limitations under the License.
*/
@import "~compass-sass-mixins/lib/compass";
@import '../../scss/constants';
$toolbar-height: 50px;
$fullscreen-toolbar-height: 64px;
$mobile-toolbar-height: 84px;
@import "../../scss/constants";
$toolbar-height: 50px !default;
$fullscreen-toolbar-height: 64px !default;
$mobile-toolbar-height: 84px !default;
section.tb-dashboard-title {
position: absolute;
@ -27,10 +28,10 @@ section.tb-dashboard-title {
}
input.tb-dashboard-title {
font-size: 2.000rem;
font-weight: 500;
letter-spacing: 0.005em;
height: 38px;
font-size: 2rem;
font-weight: 500;
letter-spacing: .005em;
}
div.tb-padded {
@ -50,9 +51,11 @@ tb-details-sidenav.tb-widget-details-sidenav {
@media (min-width: $layout-breakpoint-sm) {
width: 85% !important;
}
@media (min-width: $layout-breakpoint-md) {
width: 75% !important;
}
@media (min-width: $layout-breakpoint-lg) {
width: 60% !important;
}
@ -65,47 +68,55 @@ tb-details-sidenav.tb-widget-details-sidenav {
section.tb-dashboard-toolbar {
position: absolute;
top: 0px;
left: 0px;
top: 0;
left: 0;
z-index: 13;
pointer-events: none;
&.tb-dashboard-toolbar-opened {
right: 0px;
// @include transition(right .3s cubic-bezier(.55,0,.55,.2));
right: 0;
// @include transition(right .3s cubic-bezier(.55,0,.55,.2));
}
&.tb-dashboard-toolbar-closed {
right: 18px;
@include transition(right .3s cubic-bezier(.55,0,.55,.2) .2s);
}
}
.tb-dashboard-container {
&.tb-dashboard-toolbar-opened {
&.is-fullscreen {
margin-top: $mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
margin-top: $fullscreen-toolbar-height;
}
}
&:not(.is-fullscreen) {
margin-top: $mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
margin-top: $toolbar-height;
}
@include transition(margin-top .3s cubic-bezier(.55,0,.55,.2));
}
}
&.tb-dashboard-toolbar-closed {
margin-top: 0px;
@include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s);
&.tb-dashboard-toolbar-opened {
&.is-fullscreen {
margin-top: $mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
margin-top: $fullscreen-toolbar-height;
}
}
&:not(.is-fullscreen) {
margin-top: $mobile-toolbar-height;
@media (min-width: $layout-breakpoint-sm) {
margin-top: $toolbar-height;
}
@include transition(margin-top .3s cubic-bezier(.55,0,.55,.2));
}
}
&.tb-dashboard-toolbar-closed {
margin-top: 0;
@include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s);
}
.tb-dashboard-layouts {
md-backdrop {
z-index: 1;
}
#tb-main-layout {
}
#tb-right-layout {
md-sidenav {
z-index: 1;
@ -124,13 +135,15 @@ section.tb-powered-by-footer {
bottom: 5px;
z-index: 3;
pointer-events: none;
span {
font-size: 12px;
a {
font-weight: bold;
font-weight: 700;
text-decoration: none;
border: none;
pointer-events: all;
border: none;
}
}
}

5
ui/src/app/dashboard/states/default-state-controller.scss
View File

@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
md-select.default-state-controller {
margin: 0px;
}
margin: 0;
}

53
ui/src/app/dashboard/states/entity-state-controller.scss
View File

@ -13,34 +13,37 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../../scss/constants';
@import "../../../scss/constants";
tb-states-component {
min-width: 0px;
min-width: 0;
}
.entity-state-controller {
.state-divider {
font-size: 18px;
padding-left: 15px;
padding-right: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.state-entry {
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
outline: none;
}
md-select {
margin: 0px;
.md-text {
font-size: 18px;
font-weight: bold;
}
.state-divider {
padding-right: 15px;
padding-left: 15px;
overflow: hidden;
font-size: 18px;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.state-entry {
overflow: hidden;
font-size: 18px;
text-overflow: ellipsis;
white-space: nowrap;
outline: none;
}
md-select {
margin: 0;
.md-text {
font-size: 18px;
font-weight: 700;
}
}
}
}

9
ui/src/app/dashboard/states/manage-dashboard-states.scss
View File

@ -13,21 +13,22 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.manage-dashboard-states {
table.md-table {
tbody {
tr {
td {
&.tb-action-cell {
width: 100px;
min-width: 100px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 100px;
max-width: 100px;
width: 100px;
}
}
}
}
}
}
}

29
ui/src/app/entity/alias/aliases-entity-select.scss
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../../scss/constants';
@import "../../../scss/constants";
tb-aliases-entity-select {
min-width: 52px;
@ -26,18 +26,21 @@ tb-aliases-entity-select {
}
.tb-aliases-entity-select-panel {
min-width: 300px;
max-height: 150px;
overflow-x: hidden;
overflow-y: auto;
background: #fff;
border-radius: 4px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, .2),
0 13px 19px 2px rgba(0, 0, 0, .14),
0 5px 24px 4px rgba(0, 0, 0, .12);
@media (min-height: 350px) {
max-height: 250px;
}
min-width: 300px;
background: white;
border-radius: 4px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 13px 19px 2px rgba(0, 0, 0, 0.14),
0 5px 24px 4px rgba(0, 0, 0, 0.12);
overflow-x: hidden;
overflow-y: auto;
md-content {
background-color: #fff;
}
@ -46,15 +49,17 @@ tb-aliases-entity-select {
section.tb-aliases-entity-select {
min-height: 32px;
padding: 0 6px;
@media (max-width: $layout-breakpoint-sm) {
padding: 0px;
padding: 0;
}
span {
max-width: 200px;
pointer-events: all;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: all;
cursor: pointer;
}
}

5
ui/src/app/entity/alias/entity-alias-dialog.scss
View File

@ -13,14 +13,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-entity-alias-dialog {
.tb-resolve-multiple-switch {
padding-left: 10px;
.resolve-multiple-switch {
margin: 0;
}
.resolve-multiple-label {
margin: 5px 0;
}
}
}
}

18
ui/src/app/entity/alias/entity-aliases.scss
View File

@ -13,35 +13,43 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-aliases-dialog {
.md-dialog-content {
padding-bottom: 0px;
padding-top: 0px;
padding-top: 0;
padding-bottom: 0;
}
.tb-aliases-header {
min-height: 40px;
padding: 0 34px 0 34px;
margin: 5px;
.tb-header-label {
font-size: 14px;
color: rgba(0, 0, 0, 0.570588);
color: rgba(0, 0, 0, .570588);
}
}
.tb-alias {
padding: 0 0 0 10px;
margin: 5px;
md-input-container {
margin: 0px;
margin: 0;
}
.tb-resolve-multiple-switch {
padding-left: 10px;
.resolve-multiple-switch {
margin: 0;
}
}
.md-button {
&.md-icon-button {
margin: 0px;
margin: 0;
}
}
}

30
ui/src/app/entity/attribute/attribute-table.scss
View File

@ -13,46 +13,48 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../../scss/constants';
@import "../../../scss/constants";
$md-light: rgba(255, 255, 255, 100%);
$md-edit-icon-fill: #757575;
$md-light: rgba(255, 255, 255, 100%) !default;
$md-edit-icon-fill: #757575 !default;
md-toolbar.md-table-toolbar.alternate {
.md-toolbar-tools {
md-icon {
color: $md-light;
}
md-icon {
color: $md-light;
}
}
}
.md-table {
&.tb-attribute-table {
table-layout: fixed;
td.md-cell {
&.tb-value-cell {
overflow: auto;
}
table-layout: fixed;
td.md-cell {
&.tb-value-cell {
overflow: auto;
}
}
}
.md-cell {
ng-md-icon {
fill: $md-edit-icon-fill;
float: right;
height: 16px;
fill: $md-edit-icon-fill;
}
}
}
.widgets-carousel {
position: relative;
margin: 0px;
height: calc(100% - 100px);
min-height: 150px !important;
margin: 0;
tb-dashboard {
#gridster-parent {
padding: 0 7px;
}
}
}
}

2
ui/src/app/entity/entity-autocomplete.scss
View File

@ -13,11 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-entity-autocomplete {
.tb-entity-item {
display: block;
height: 48px;
}
li {
height: auto !important;
white-space: normal !important;

11
ui/src/app/entity/entity-filter-view.scss
View File

@ -13,20 +13,23 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-entity-filter-view {
.entity-filter-empty {
color: rgba(221, 44, 0, 0.87);
font-size: 14px;
line-height: 16px;
color: rgba(221, 44, 0, .87);
}
.entity-filter-type {
font-size: 14px;
line-height: 16px;
color: rgba(0, 0, 0, 0.570588);
color: rgba(0, 0, 0, .570588);
}
.entity-filter-value {
font-size: 14px;
line-height: 16px;
color: rgba(0, 0, 0, 0.570588);
color: rgba(0, 0, 0, .570588);
}
}
}

8
ui/src/app/entity/entity-filter.scss
View File

@ -13,10 +13,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-entity-filter {
.tb-entity-filter {
#relationsQueryFilter {
padding-top: 20px;
tb-entity-select {
min-height: 92px;
}
@ -24,12 +25,13 @@
.tb-root-state-entity-switch {
padding-left: 10px;
.root-state-entity-switch {
margin: 0;
}
.root-state-entity-label {
margin: 5px 0;
}
}
}
}

7
ui/src/app/entity/entity-list.scss
View File

@ -13,7 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*.tb-entity-list {
/*
.tb-entity-list {
#entity_list_chips {
.md-chips {
padding-bottom: 1px;
@ -26,4 +28,5 @@
padding-left: 1px;
}
}
}*/
}
*/

6
ui/src/app/entity/entity-select.scss
View File

@ -13,6 +13,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-entity-select {
}
/*
.tb-entity-select {
}
*/

2
ui/src/app/entity/entity-subtype-autocomplete.scss
View File

@ -13,11 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-entity-subtype-autocomplete {
.tb-entity-subtype-item {
display: block;
height: 48px;
}
li {
height: auto !important;
white-space: normal !important;

7
ui/src/app/entity/entity-subtype-list.scss
View File

@ -13,7 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*.tb-entity-subtype-list {
/*
.tb-entity-subtype-list {
#entity_subtype_list_chips {
.md-chips {
padding-bottom: 1px;
@ -26,4 +28,5 @@
padding-left: 1px;
}
}
}*/
}
*/

1
ui/src/app/entity/entity-subtype-select.scss
View File

@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
md-select.tb-entity-subtype-select {
min-width: 200px;
}

7
ui/src/app/entity/entity-type-list.scss
View File

@ -13,7 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*.tb-entity-type-list {
/*
.tb-entity-type-list {
#entity_type_list_chips {
.md-chips {
padding-bottom: 1px;
@ -26,4 +28,5 @@
padding-left: 1px;
}
}
}*/
}
*/

3
ui/src/app/entity/entity-type-select.scss
View File

@ -13,5 +13,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
md-select.tb-entity-type-select {
}
*/

10
ui/src/app/entity/relation/relation-dialog.scss
View File

@ -13,14 +13,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-relation-additional-info-panel {
margin-left: 15px;
border: 1px solid #C0C0C0;
height: 100%;
margin-left: 15px;
border: 1px solid #c0c0c0;
#tb-relation-additional-info {
min-width: 200px;
min-height: 200px;
width: 100%;
min-width: 200px;
height: 100%;
min-height: 200px;
}
}

29
ui/src/app/entity/relation/relation-filters.scss
View File

@ -13,32 +13,37 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-relation-filters {
.header {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
.cell {
padding-left: 5px;
padding-right: 5px;
color: rgba(0,0,0,.54);
padding-left: 5px;
font-size: 12px;
font-weight: 700;
color: rgba(0, 0, 0, .54);
white-space: nowrap;
}
}
.body {
padding-left: 5px;
padding-right: 5px;
max-height: 300px;
overflow: auto;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
overflow: auto;
.row {
padding-top: 5px;
}
.cell {
padding-left: 5px;
padding-right: 5px;
padding-left: 5px;
md-select {
margin: 0 0 24px;
@ -49,25 +54,27 @@
}
md-chips-wrap {
padding: 0px;
padding: 0;
margin: 0 0 24px;
md-autocomplete {
height: 30px;
md-autocomplete-wrap {
height: 30px;
}
}
}
.md-chips .md-chip-input-container input {
padding: 2px 2px 2px;
height: 26px;
padding: 2px 2px 2px;
line-height: 26px;
}
}
.md-button {
margin: 0;
}
}
}
}

4
ui/src/app/entity/relation/relation-table.scss
View File

@ -13,9 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../../scss/constants';
@import "../../../scss/constants";
$md-light: rgba(255, 255, 255, 100%);
$md-light: rgba(255, 255, 255, 100%) !default;
.tb-relation-table {
md-toolbar.md-table-toolbar.alternate {

2
ui/src/app/entity/relation/relation-type-autocomplete.scss
View File

@ -13,11 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-relation-type-autocomplete {
.tb-relation-type-item {
display: block;
height: 48px;
}
li {
height: auto !important;
white-space: normal !important;

75
ui/src/app/event/event.scss
View File

@ -13,24 +13,28 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
md-list.tb-event-table {
padding: 0px;
padding: 0;
md-list-item {
padding: 0px;
}
md-list-item {
padding: 0;
}
.tb-row {
height: 48px;
padding: 0px;
padding: 0;
overflow: hidden;
.tb-cell {
text-overflow: ellipsis;
&.tb-scroll {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
&.tb-nowrap {
white-space: nowrap;
}
@ -38,7 +42,7 @@ md-list.tb-event-table {
}
.tb-row:hover {
background-color: #EEEEEE;
background-color: #eee;
}
.tb-header:hover {
@ -46,44 +50,45 @@ md-list.tb-event-table {
}
.tb-header {
.tb-cell {
color: rgba(0,0,0,.54);
font-size: 12px;
font-weight: 700;
background: none;
white-space: nowrap;
}
.tb-cell {
font-size: 12px;
font-weight: 700;
color: rgba(0, 0, 0, .54);
white-space: nowrap;
background: none;
}
}
.tb-cell {
&:first-child {
padding-left: 14px;
}
&:last-child {
padding-right: 14px;
}
padding: 0 6px;
margin: auto 0;
color: rgba(0,0,0,.87);
font-size: 13px;
vertical-align: middle;
text-align: left;
overflow: hidden;
.md-button {
padding: 0;
margin: 0;
}
&:first-child {
padding-left: 14px;
}
&:last-child {
padding-right: 14px;
}
padding: 0 6px;
margin: auto 0;
overflow: hidden;
font-size: 13px;
color: rgba(0, 0, 0, .87);
text-align: left;
vertical-align: middle;
.md-button {
padding: 0;
margin: 0;
}
}
.tb-cell.tb-number {
text-align: right;
}
}
#tb-event-content {
min-width: 400px;
min-height: 50px;
width: 100%;
min-width: 400px;
height: 100%;
min-height: 50px;
}

21
ui/src/app/extension/extension-table.scss
View File

@ -13,23 +13,26 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../scss/constants';
@import "../../scss/constants";
.extension-table {
md-input-container .md-errors-spacer {
min-height: 0;
}
/*&.tb-data-table table.md-table tbody tr td.tb-action-cell,
/*
&.tb-data-table table.md-table tbody tr td.tb-action-cell,
&.tb-data-table table.md-table.md-row-select tbody tr td.tb-action-cell {
width: 114px;
}*/
}
*/
.sync-widget {
max-height: 90px;
overflow: hidden;
}
.toolbar-widget {
min-height: 39px;
max-height: 39px;
@ -37,11 +40,13 @@
}
.extension__syncStatus--black {
color: #000000!important;
color: #000 !important;
}
.extension__syncStatus--green {
color: #228634!important;
color: #228634 !important;
}
.extension__syncStatus--red {
color: #862222!important;
}
color: #862222 !important;
}

32
ui/src/app/extension/extensions-forms/extension-form.scss
View File

@ -13,28 +13,34 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.extension-form {
li > .md-button {
color: rgba(0, 0, 0, 0.7);
margin: 0;
color: rgba(0, 0, 0, .7);
}
.vAccordion--default {
margin-top: 0;
padding-left: 3px;
margin-top: 0;
}
.tb-container {
width:100%;
width: 100%;
}
.dropdown-messages {
.tb-error-message {
padding: 5px 0 0 0;
}
}
.dropdown-section {
margin-bottom: 30px;
}
v-pane.inner-invalid > v-pane-header {
border-bottom: 2px solid rgb(221,44,0);
border-bottom: 2px solid rgb(221, 44, 0);
}
}
@ -45,17 +51,19 @@
}
.tb-extension-custom-transformer-panel {
margin-left: 15px;
border: 1px solid #C0C0C0;
height: 100%;
margin-left: 15px;
border: 1px solid #c0c0c0;
.tb-extension-custom-transformer {
min-width: 600px;
min-height: 200px;
width: 100%;
min-width: 600px;
height: 100%;
min-height: 200px;
}
.ace_text-input {
position:absolute!important
position: absolute !important;
}
}
@ -68,9 +76,9 @@
}
.tb-drop-file-input-hide {
height: 200%;
display: block;
position: absolute;
bottom: 0;
display: block;
width: 100%;
}
height: 200%;
}

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

@ -15,8 +15,12 @@
*/
@import "../../scss/constants";
.md-button.tb-help-button-style, .tb-help-button-style {
/*
.md-button.tb-help-button-style,
.tb-help-button-style {
}
.md-button.tb-help-button-pos, .tb-help-button-pos {
.md-button.tb-help-button-pos,
.tb-help-button-pos {
}
*/

13
ui/src/app/home/home-links.scss
View File

@ -16,10 +16,11 @@
@import "../../scss/constants";
.tb-home-links {
.md-headline {
font-size: 20px;
@media (min-width: $layout-breakpoint-xmd) {
font-size: 24px;
}
.md-headline {
font-size: 20px;
@media (min-width: $layout-breakpoint-xmd) {
font-size: 24px;
}
}
}
}

15
ui/src/app/import-export/import-dialog.scss
View File

@ -13,29 +13,30 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$previewSize: 100px;
$previewSize: 100px !default;
.tb-file-select-container {
position: relative;
height: $previewSize;
width: 100%;
height: $previewSize;
}
.tb-file-preview {
max-width: $previewSize;
max-height: $previewSize;
width: auto;
max-width: $previewSize;
height: auto;
max-height: $previewSize;
}
.tb-file-clear-container {
width: 48px;
height: $previewSize;
position: relative;
float: right;
width: 48px;
height: $previewSize;
}
.tb-file-clear-btn {
position: absolute !important;
top: 50%;
transform: translate(0%,-50%) !important;
transform: translate(0%, -50%) !important;
}

6
ui/src/app/jsonform/jsonform.scss
View File

@ -13,5 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.form { height: 400px; }
.schema { height: 800px; }
.form { height: 400px; }
.schema { height: 800px; }

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

@ -29,23 +29,31 @@
.tb-breadcrumb {
font-size: 18px !important;
font-weight: 400 !important;
h1, a, span {
h1,
a,
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a {
border: none;
opacity: 0.75;
@include transition(opacity 0.35s);
opacity: .75;
@include transition(opacity .35s);
}
a:hover, a:focus {
opacity: 1;
a:hover,
a:focus {
text-decoration: none !important;
border: none;
opacity: 1;
}
.divider {
padding: 0px 30px;
padding: 0 30px;
}
}
@ -54,21 +62,22 @@ md-sidenav.tb-site-sidenav {
}
md-icon.tb-logo-title {
height: 36px;
width: 200px;
height: 36px;
}
.tb-nav-header {
flex-shrink: 0;
z-index: 2;
flex-shrink: 0;
white-space: nowrap;
}
.tb-nav-header-toolbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
flex-shrink: 0;
z-index: 2;
flex-shrink: 0;
white-space: nowrap;
border-bottom: 1px solid rgba(0, 0, 0, .12);
.md-toolbar-tools {
flex-basis: auto;
}

20
ui/src/app/layout/user-menu.scss
View File

@ -13,28 +13,32 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
div.tb-user-info {
line-height: 1.5;
span {
text-transform: none;
text-align: left;
text-transform: none;
}
span.tb-user-display-name {
font-size: 0.800rem;
font-size: .8rem;
font-weight: 300;
letter-spacing: 0.008em;
letter-spacing: .008em;
}
span.tb-user-authority {
font-size: 0.800rem;
font-size: .8rem;
font-weight: 300;
letter-spacing: 0.005em;
opacity: 0.8;
letter-spacing: .005em;
opacity: .8;
}
}
md-icon.tb-mini-avatar {
width: 36px;
height: 36px;
margin: auto 8px;
font-size: 36px;
height: 36px;
width: 36px;
}

5
ui/src/app/login/login.scss
View File

@ -13,18 +13,21 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../scss/constants';
@import "../../scss/constants";
md-card.tb-login-card {
width: 330px !important;
@media (min-width: $layout-breakpoint-sm) {
width: 450px !important;
}
md-card-title {
img.tb-login-logo {
height: 50px;
}
}
md-card-content {
margin-top: -50px;
}

4
ui/src/app/rulechain/link.scss
View File

@ -17,12 +17,14 @@
.tb-link-label-autocomplete {
.tb-not-found {
display: block;
line-height: 1.5;
height: 48px;
line-height: 1.5;
.tb-no-entries {
line-height: 48px;
}
}
li {
height: auto !important;
white-space: normal !important;

2
ui/src/app/rulechain/message-type-autocomplete.scss
View File

@ -13,11 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-message-type-autocomplete {
.tb-message-type-item {
display: block;
height: 48px;
}
li {
height: auto !important;
white-space: normal !important;

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

@ -18,88 +18,106 @@
.tb-fullscreen-button-style {
z-index: 1;
}
section.tb-header-buttons.tb-library-open {
pointer-events: none;
position: absolute;
left: 0px;
top: 0px;
top: 0;
left: 0;
z-index: 1;
pointer-events: none;
.md-button.tb-btn-open-library {
left: 0px;
top: 0px;
line-height: 36px;
top: 0;
left: 0;
width: 36px;
height: 36px;
margin: 4px 0 0 4px;
opacity: 0.5;
line-height: 36px;
opacity: .5;
}
}
.tb-rulechain-library {
z-index: 1;
width: 250px;
min-width: 250px;
z-index: 1;
md-toolbar {
min-height: 48px;
height: 48px;
.md-toolbar-tools>.md-button:last-child {
margin-right: 0px;
min-height: 48px;
.md-toolbar-tools > .md-button:last-child {
margin-right: 0;
}
.md-toolbar-tools {
font-size: 14px;
padding: 0px 6px;
height: 48px;
padding: 0 6px;
font-size: 14px;
.md-button.md-icon-button {
margin: 0px;
margin: 0;
&.tb-small {
width: 32px;
height: 32px;
min-height: 32px;
line-height: 20px;
padding: 6px;
width: 32px;
line-height: 20px;
md-icon {
line-height: 20px;
font-size: 20px;
height: 20px;
width: 20px;
min-height: 20px;
min-width: 20px;
height: 20px;
min-height: 20px;
font-size: 20px;
line-height: 20px;
}
}
}
}
}
.tb-rulechain-library-panel-group {
overflow-y: auto;
overflow-x: hidden;
overflow-y: auto;
.tb-panel-title {
min-width: 150px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-width: 150px;
}
.fc-canvas {
background: #f9f9f9;
}
md-icon.md-expansion-panel-icon {
margin-right: 0px;
margin-right: 0;
}
md-expansion-panel-collapsed, .md-expansion-panel-header-container {
md-expansion-panel-collapsed,
.md-expansion-panel-header-container {
position: static;
background: #e6e6e6;
border-color: #909090;
position: static;
}
md-expansion-panel {
&.md-open {
margin-top: 0;
margin-bottom: 0;
}
}
md-expansion-panel-content {
padding: 0px;
padding: 0;
}
}
}
.tb-rulechain-graph {
z-index: 0;
overflow: auto;
@ -107,29 +125,35 @@
}
#tb-rule-chain-context-menu {
padding-top: 0px;
border-radius: 8px;
max-height: 404px;
padding-top: 0;
border-radius: 8px;
.tb-context-menu-header {
padding: 8px 5px 5px;
font-size: 14px;
display: flex;
flex-direction: row;
height: 36px;
min-height: 36px;
padding: 8px 5px 5px;
font-size: 14px;
&.tb-rulechain {
background-color: #aac7e4;
}
&.tb-link {
background-color: #aac7e4;
}
md-icon {
padding-left: 2px;
padding-right: 10px;
padding-left: 2px;
}
.tb-context-menu-title {
font-weight: 500;
}
.tb-context-menu-subtitle {
font-size: 12px;
}
@ -139,37 +163,45 @@
.fc-canvas {
min-width: 100%;
min-height: 100%;
outline: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-touch-callout: none;
svg {
display: block;
}
}
.tb-rule-node, #tb-rule-chain-context-menu .tb-context-menu-header {
.tb-rule-node,
#tb-rule-chain-context-menu .tb-context-menu-header {
&.tb-filter-type {
background-color: #f1e861;
}
&.tb-enrichment-type {
background-color: #cdf14e;
}
&.tb-transformation-type {
background-color: #79cef1;
}
&.tb-action-type {
background-color: #f1928f;
}
&.tb-external-type {
background-color: #fbc766;
}
&.tb-rule-chain-type {
background-color: #d6c4f1;
}
&.tb-unknown-type {
background-color: #f16c29;
}
@ -180,102 +212,112 @@
flex-direction: row;
min-width: 150px;
max-width: 150px;
height: 32px;
min-height: 32px;
max-height: 32px;
height: 32px;
padding: 5px 10px;
border-radius: 5px;
background-color: #F15B26;
pointer-events: none;
color: #333;
border: solid 1px #777;
font-size: 12px;
line-height: 16px;
color: #333;
pointer-events: none;
background-color: #f15b26;
border: solid 1px #777;
border-radius: 5px;
&.tb-rule-node-highlighted:not(.tb-rule-node-invalid) {
box-shadow: 0 0 10px 6px #51cbee;
.tb-node-title {
font-weight: 700;
text-decoration: underline;
font-weight: bold;
}
}
&.tb-rule-node-invalid {
box-shadow: 0 0 10px 6px #ff5c50;
}
&.tb-input-type {
background-color: #a3eaa9;
user-select: none;
background-color: #a3eaa9;
}
md-icon {
font-size: 20px;
width: 20px;
min-width: 20px;
height: 20px;
min-height: 20px;
min-width: 20px;
padding-right: 4px;
font-size: 20px;
}
.tb-node-type {
}
.tb-node-title {
font-weight: 500;
}
.tb-node-type, .tb-node-title {
.tb-node-type,
.tb-node-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.fc-node {
z-index: 1;
outline: none;
border-radius: 8px;
outline: none;
&.fc-dragging {
z-index: 10;
}
p {
padding: 0 15px;
text-align: center;
}
.fc-node-overlay {
position: absolute;
pointer-events: none;
left: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
background-color: #000;
opacity: 0;
border-radius: 5px;
opacity: 0;
}
&.fc-hover {
.fc-node-overlay {
opacity: 0.25;
opacity: .25;
}
}
&.fc-selected {
.fc-node-overlay {
opacity: 0.25;
opacity: .25;
}
}
&.fc-selected {
&:not(.fc-edit) {
border: solid 3px red;
margin: -3px;
border: solid 3px #f00;
}
}
}
.fc-leftConnectors, .fc-rightConnectors {
.fc-leftConnectors,
.fc-rightConnectors {
position: absolute;
top: 0;
height: 100%;
z-index: 0;
display: flex;
flex-direction: column;
height: 100%;
z-index: 0;
.fc-magnet {
align-items: center;
}
@ -292,18 +334,18 @@
.fc-magnet {
display: flex;
flex-grow: 1;
height: 60px;
justify-content: center;
height: 60px;
}
.fc-connector {
width: 14px;
height: 14px;
border: 1px solid #333;
margin: 10px;
border-radius: 5px;
background-color: #ccc;
pointer-events: all;
background-color: #ccc;
border: 1px solid #333;
border-radius: 5px;
}
.fc-connector.fc-hover {
@ -312,45 +354,49 @@
.fc-arrow-marker {
polygon {
stroke: gray;
fill: gray;
fill: #808080;
stroke: #808080;
}
}
.fc-arrow-marker-selected {
polygon {
stroke: red;
fill: red;
fill: #f00;
stroke: #f00;
}
}
.fc-edge {
outline: none;
stroke: gray;
stroke-width: 4;
fill: transparent;
transition: stroke-width .2s;
fill: transparent;
stroke: #808080;
stroke-width: 4;
&.fc-selected {
stroke: red;
stroke-width: 4;
fill: transparent;
stroke: #f00;
stroke-width: 4;
}
&.fc-active {
animation: dash 3s linear infinite;
stroke-dasharray: 20;
}
&.fc-hover {
stroke: gray;
stroke-width: 6;
fill: transparent;
stroke: #808080;
stroke-width: 6;
}
&.fc-dragging {
pointer-events: none;
}
}
.edge-endpoint {
fill: gray;
fill: #808080;
}
.fc-nodedelete {
@ -364,22 +410,23 @@
}
.fc-edit {
.fc-nodedelete, .fc-nodeedit {
outline: none;
display: block;
.fc-nodedelete,
.fc-nodeedit {
position: absolute;
border: solid 2px white;
border-radius: 50%;
font-weight: 600;
line-height: 20px;
display: block;
width: 22px;
height: 20px;
padding-top: 2px;
width: 22px;
background: #f83e05;
font-weight: 600;
line-height: 20px;
color: #fff;
text-align: center;
vertical-align: bottom;
cursor: pointer;
background: #f83e05;
border: solid 2px #fff;
border-radius: 50%;
outline: none;
}
.fc-nodeedit {
@ -391,7 +438,6 @@
top: -24px;
right: -13px;
}
}
.fc-noselect {
@ -407,31 +453,37 @@
.fc-edge-label {
position: absolute;
transition: transform .2s;
// opacity: 0.8;
// opacity: 0.8;
&.ng-leave {
transition: 0s none;
}
&.fc-hover {
transform: scale(1.25);
}
&.fc-selected {
.fc-edge-label-text {
span {
border: solid red;
color: #fff;
font-weight: 600;
background-color: red;
color: #fff;
background-color: #f00;
border: solid #f00;
}
}
}
.fc-nodeedit {
top: -30px;
right: 14px;
}
.fc-nodedelete {
top: -30px;
right: -13px;
}
&:focus {
outline: 0;
}
@ -439,27 +491,28 @@
.fc-edge-label-text {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
text-align: center;
font-size: 14px;
font-weight: 600;
text-align: center;
white-space: nowrap;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
span {
padding: 3px 5px;
color: #003a79;
cursor: default;
background-color: #fff;
border: solid 2px #003a79;
border-radius: 10px;
color: #003a79;
background-color: #fff;
padding: 3px 5px;
}
}
.fc-select-rectangle {
border: 2px dashed #5262ff;
position: absolute;
background: rgba(20,125,255,0.1);
z-index: 2;
background: rgba(20, 125, 255, .1);
border: 2px dashed #5262ff;
}
@keyframes dash {
@ -468,13 +521,15 @@
}
}
.tb-rule-node-tooltip, .tb-rule-node-help {
.tb-rule-node-tooltip,
.tb-rule-node-help {
color: #333;
}
.tb-rule-node-tooltip {
font-size: 14px;
max-width: 300px;
font-size: 14px;
&.tb-lib-tooltip {
width: 300px;
}
@ -489,28 +544,33 @@
color: #ea0d0d;
}
.tb-rule-node-tooltip, .tb-rule-node-error-tooltip, .tb-rule-node-help {
.tb-rule-node-tooltip,
.tb-rule-node-error-tooltip,
.tb-rule-node-help {
#tb-node-content {
.tb-node-title {
font-weight: 600;
}
.tb-node-description {
font-style: italic;
color: #555;
}
.tb-node-details {
padding-top: 10px;
padding-bottom: 10px;
}
code {
padding: 0px 3px 2px 3px;
padding: 0 3px 2px 3px;
margin: 1px;
color: #AD1625;
font-size: 12px;
color: #ad1625;
white-space: nowrap;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 2px;
font-size: 12px;
}
}
}
}

6
ui/src/app/rulechain/rulenode.scss
View File

@ -16,13 +16,13 @@
.tb-rulenode {
tb-json-object-edit.tb-rule-node-configuration-json {
height: 300px;
display: block;
height: 300px;
}
}
.tb-rulenode-directive-error {
color: rgb(221,44,0);
font-size: 13px;
font-weight: 400;
}
color: rgb(221, 44, 0);
}

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

@ -13,24 +13,25 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../../scss/constants';
@import "../../../scss/constants";
@import "~compass-sass-mixins/lib/compass";
md-dialog.tb-node-script-test-dialog {
&.md-dialog-fullscreen {
min-height: 100%;
width: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;
min-height: 100%;
max-height: 100%;
border-radius: 0;
}
.tb-split {
@include box-sizing(border-box);
overflow-y: auto;
overflow-x: hidden;
overflow-y: auto;
}
.ace_editor {
@ -38,13 +39,13 @@ md-dialog.tb-node-script-test-dialog {
}
.tb-content {
border: 1px solid #C0C0C0;
padding-top: 5px;
padding-left: 5px;
border: 1px solid #c0c0c0;
}
.gutter {
background-color: #eeeeee;
background-color: #eee;
background-repeat: no-repeat;
background-position: 50%;
@ -52,21 +53,23 @@ md-dialog.tb-node-script-test-dialog {
.gutter.gutter-horizontal {
cursor: col-resize;
background-image: url('../../../../node_modules/split.js/grips/vertical.png');
background-image: url("../../../../node_modules/split.js/grips/vertical.png");
}
.gutter.gutter-vertical {
cursor: row-resize;
background-image: url('../../../../node_modules/split.js/grips/horizontal.png');
background-image: url("../../../../node_modules/split.js/grips/horizontal.png");
}
.tb-split.tb-split-horizontal, .gutter.gutter-horizontal {
height: 100%;
.tb-split.tb-split-horizontal,
.gutter.gutter-horizontal {
float: left;
height: 100%;
}
.tb-split.tb-split-vertical {
display: flex;
.tb-split.tb-content {
height: 100%;
}
@ -74,42 +77,44 @@ md-dialog.tb-node-script-test-dialog {
div.tb-editor-area-title-panel {
position: absolute;
font-size: 0.800rem;
font-weight: 500;
top: 13px;
right: 40px;
z-index: 5;
font-size: .8rem;
font-weight: 500;
&.tb-js-function {
right: 80px;
}
label {
color: #00acc1;
background: rgba(220, 220, 220, 0.35);
border-radius: 5px;
padding: 4px;
color: #00acc1;
text-transform: uppercase;
background: rgba(220, 220, 220, .35);
border-radius: 5px;
}
.md-button {
color: #7B7B7B;
min-width: 32px;
min-height: 15px;
line-height: 15px;
font-size: 0.800rem;
margin: 0;
padding: 4px;
background: rgba(220, 220, 220, 0.35);
margin: 0;
font-size: .8rem;
line-height: 15px;
color: #7b7b7b;
background: rgba(220, 220, 220, .35);
}
}
.tb-resize-container {
overflow-y: auto;
height: 100%;
width: 100%;
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
.ace_editor {
height: 100%;
}
}
}

13
ui/src/app/services/toast.scss
View File

@ -13,20 +13,21 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
md-toast.tb-info-toast .md-toast-content {
font-size: 18px;
padding: 18px;
height: 100%;
padding: 18px;
font-size: 18px;
}
md-toast.tb-success-toast .md-toast-content {
font-size: 18px !important;
background-color: green;
height: 100%;
font-size: 18px !important;
background-color: #008000;
}
md-toast.tb-error-toast .md-toast-content {
font-size: 18px !important;
background-color: maroon;
height: 100%;
font-size: 18px !important;
background-color: #800000;
}

6
ui/src/app/user/user-fieldset.scss
View File

@ -13,18 +13,20 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../scss/constants';
@import "../../scss/constants";
.tb-default-dashboard {
.tb-default-dashboard-label {
padding-bottom: 8px;
}
tb-dashboard-autocomplete {
@media (min-width: $layout-breakpoint-sm) {
padding-right: 12px;
}
@media (max-width: $layout-breakpoint-sm) {
padding-bottom: 12px;
}
}
}
}

9
ui/src/app/widget/lib/alarms-table-widget.scss
View File

@ -13,11 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-has-timewindow {
.tb-alarms-table {
md-toolbar {
min-height: 60px;
max-height: 60px;
&.md-table-toolbar {
.md-toolbar-tools {
max-height: 60px;
@ -28,10 +30,10 @@
}
.tb-alarms-table {
md-toolbar {
min-height: 39px;
max-height: 39px;
&.md-table-toolbar {
.md-toolbar-tools {
max-height: 39px;
@ -40,14 +42,15 @@
}
&.tb-data-table {
table.md-table, table.md-table.md-row-select {
table.md-table,
table.md-table.md-row-select {
tbody {
tr {
td {
&.tb-action-cell {
width: 36px;
min-width: 36px;
max-width: 36px;
width: 36px;
}
}
}

9
ui/src/app/widget/lib/entities-table-widget.scss
View File

@ -13,11 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-has-timewindow {
.tb-entities-table {
md-toolbar {
min-height: 60px;
max-height: 60px;
&.md-table-toolbar {
.md-toolbar-tools {
max-height: 60px;
@ -28,10 +30,10 @@
}
.tb-entities-table {
md-toolbar {
min-height: 39px;
max-height: 39px;
&.md-table-toolbar {
.md-toolbar-tools {
max-height: 39px;
@ -40,14 +42,15 @@
}
&.tb-data-table {
table.md-table, table.md-table.md-row-select {
table.md-table,
table.md-table.md-row-select {
tbody {
tr {
td {
&.tb-action-cell {
width: 36px;
min-width: 36px;
max-width: 36px;
width: 36px;
}
}
}

5
ui/src/app/widget/lib/extensions-table-widget.scss
View File

@ -13,16 +13,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
tb-extension-table {
md-content {
background-color: #fff;
}
}
md-tabs.hide-tabs-menu {
md-tabs-wrapper {
display: none;
}
md-tabs-content-wrapper {
top: 0 !important;
}
}
}

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

@ -13,141 +13,156 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$knob-img: url('./svg/knob.svg');
$knob-img: url("./svg/knob.svg") !default;
$bars-margin-pct: percentage(0.033);
$background-margin-pct: percentage(0.05);
$value-container-margin-pct: percentage(0.35);
$error-height: percentage(0.05);
$title-height: percentage(0.066);
$title-container-margin-pct: percentage(0.2);
$title-container-margin-bottom-pct: percentage(0.05);
$minmax-height: percentage(0.04);
$minmax-container-margin-pct: percentage(0.18);
$minmax-container-margin-bottom-pct: percentage(0.12);
$bars-margin-pct: percentage(.033) !default;
$background-margin-pct: percentage(.05) !default;
$value-container-margin-pct: percentage(.35) !default;
$error-height: percentage(.05) !default;
$title-height: percentage(.066) !default;
$title-container-margin-pct: percentage(.2) !default;
$title-container-margin-bottom-pct: percentage(.05) !default;
$minmax-height: percentage(.04) !default;
$minmax-container-margin-pct: percentage(.18) !default;
$minmax-container-margin-bottom-pct: percentage(.12) !default;
$background-color: #e6e7e8;
$background-color: #e6e7e8 !default;
.tb-knob {
width:100%;
height:100%;
width: 100%;
height: 100%;
background: $background-color;
.knob {
position: relative;
&[draggable] {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#canvasBar {
position:absolute;
top:0;
left:0;
bottom: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.canvas-background {
position:absolute;
position: absolute;
top: $background-margin-pct;
left: $background-margin-pct;
bottom: $background-margin-pct;
right: $background-margin-pct;
border-radius: 50%;
bottom: $background-margin-pct;
left: $background-margin-pct;
z-index: 2;
background: #3f4346;
z-index:2;
border-radius: 50%;
}
.value-container {
position:absolute;
position: absolute;
top: $value-container-margin-pct;
left: $value-container-margin-pct;
bottom: $value-container-margin-pct;
right: $value-container-margin-pct;
z-index:4;
bottom: $value-container-margin-pct;
left: $value-container-margin-pct;
z-index: 4;
.knob-value {
color: #fff;
font-weight: 500;
color: #fff;
white-space: nowrap;
}
}
.error-container {
position:absolute;
position: absolute;
top: 1%;
left: 0;
right: 0;
z-index:4;
left: 0;
z-index: 4;
height: $error-height;
.knob-error {
color: #ff3315;
white-space: nowrap;
}
}
.title-container {
position:absolute;
left: $title-container-margin-pct;
bottom: $title-container-margin-bottom-pct;
position: absolute;
right: $title-container-margin-pct;
z-index:4;
bottom: $title-container-margin-bottom-pct;
left: $title-container-margin-pct;
z-index: 4;
height: $title-height;
.knob-title {
color: #757575;
font-weight: 500;
color: #757575;
white-space: nowrap;
}
}
.minmax-container {
position:absolute;
left: $minmax-container-margin-pct;
bottom: $minmax-container-margin-bottom-pct;
position: absolute;
right: $minmax-container-margin-pct;
z-index:4;
bottom: $minmax-container-margin-bottom-pct;
left: $minmax-container-margin-pct;
z-index: 4;
height: $minmax-height;
.minmax-label {
color: #757575;
font-weight: 500;
color: #757575;
white-space: nowrap;
}
}
.top-pointer-container {
position:absolute;
position: absolute;
top: $bars-margin-pct;
left: $bars-margin-pct;
bottom: $bars-margin-pct;
right: $bars-margin-pct;
z-index:3;
cursor:pointer !important;
bottom: $bars-margin-pct;
left: $bars-margin-pct;
z-index: 3;
cursor: pointer !important;
.top-pointer {
content:'';
width:5%;
height:5%;
background-color:#b5b5b5;
position:absolute;
top:50%;
left:22%;
margin-top:-2.5%;
position: absolute;
top: 50%;
left: 22%;
width: 5%;
height: 5%;
margin-top: -2.5%;
cursor: pointer !important;
content: "";
background-color: #b5b5b5;
border-radius: 50%;
cursor:pointer !important;
box-shadow: 1px 0 2px #040404;
}
}
.top{
position:absolute;
position: absolute;
top: $bars-margin-pct;
left: $bars-margin-pct;
bottom: $bars-margin-pct;
right: $bars-margin-pct;
background:$knob-img no-repeat;
bottom: $bars-margin-pct;
left: $bars-margin-pct;
z-index: 2;
cursor: pointer !important;
background: $knob-img no-repeat;
background-size: contain;
z-index:2;
cursor:pointer !important;
}
#text-measure {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
height: auto;
white-space: nowrap;
visibility: hidden;
}
}
}

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

@ -15,61 +15,65 @@
*/
@import "~compass-sass-mixins/lib/compass";
$error-height: 14px;
$error-height: 14px !default;
$background-color: #e6e7e8;
$background-color: #e6e7e8 !default;
.tb-led-indicator {
width:100%;
height:100%;
width: 100%;
height: 100%;
background: $background-color;
.title-container {
.led-title {
color: #757575;
font-weight: 500;
color: #757575;
white-space: nowrap;
}
}
.error-container {
position:absolute;
position: absolute;
top: 1%;
left: 0;
right: 0;
z-index:4;
left: 0;
z-index: 4;
height: $error-height;
.led-error {
color: #ff3315;
white-space: nowrap;
}
}
#text-measure {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
height: auto;
white-space: nowrap;
visibility: hidden;
}
#led-container {
padding: 10px;
.led {
cursor: pointer;
position: relative;
cursor: pointer;
background-image: -owg-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
background-image: -o-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
border-radius: 50%;
background-image: -owg-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
background-image: -o-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
transition: background-color 0.5s, box-shadow 0.5s;
transition: background-color .5s, box-shadow .5s;
&.disabled {
background-image: -owg-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
background-image: -o-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
background-image: -owg-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
background-image: -o-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
}
}
}

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

@ -15,179 +15,201 @@
*/
@import "~compass-sass-mixins/lib/compass";
$error-height: 14px;
$error-height: 14px !default;
$background-color: #e6e7e8;
$background-color: #e6e7e8 !default;
.tb-round-switch {
width:100%;
height:100%;
width: 100%;
height: 100%;
background: $background-color;
.title-container {
.switch-title {
color: #757575;
font-weight: 500;
color: #757575;
white-space: nowrap;
}
}
.error-container {
position:absolute;
position: absolute;
top: 1%;
left: 0;
right: 0;
z-index:4;
left: 0;
z-index: 4;
height: $error-height;
.switch-error {
color: #ff3315;
white-space: nowrap;
}
}
#text-measure {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
height: auto;
white-space: nowrap;
visibility: hidden;
}
#switch-container {
padding: 10px;
.switch {
cursor: pointer;
position: relative;
background:#ddd;
width: 260px;
min-width: 260px;
height: 260px;
min-height: 260px;
padding: 25px;
font-family: sans-serif;
font-size: 48px;
color: #424242;
cursor: pointer;
-pie-background: -pie-linear-gradient(270deg, #bbb, #ddd);
background: #ddd;
background: -owg-linear-gradient(270deg, #bbb, #ddd);
background: -webkit-linear-gradient(270deg, #bbb, #ddd);
background: -moz-linear-gradient(270deg, #bbb, #ddd);
background: -o-linear-gradient(270deg, #bbb, #ddd);
-pie-background: -pie-linear-gradient(270deg, #bbb, #ddd);
background: linear-gradient(180deg, #bbb, #ddd);
border-radius:130px;
border-radius: 130px;
@include box-sizing(border-box);
@include box-shadow(
0px 0px 0px 8px rgba(0,0,0,.1)
,0px 0px 3px 1px rgba(0,0,0,.1)
,inset 0 8px 3px -8px rgba(255,255,255,.4));
height: 260px;
min-height: 260px;
padding: 25px;
width: 260px;
min-width: 260px;
color: #424242;
font-family:sans-serif;
font-size:48px;
@include box-shadow(
0 0 0 8px rgba(0,0,0,.1)
,0 0 3px 1px rgba(0,0,0,.1)
,inset 0 8px 3px -8px rgba(255,255,255,.4));
input {
display:none
display: none;
}
.on,.off {
position:absolute;
text-align:center;
.on,
.off {
position: absolute;
width: 100%;
text-align: center;
@include text-shadow(1px 1px 4px #4a4a4a);
width:100%;
}
.on {
color:#444;
top:10px;
@include transition(all 0.1s);
font-family:sans-serif
top: 10px;
font-family: sans-serif;
color: #444;
@include transition(all .1s);
}
.off {
bottom:5px;
@include transition(all 0.1s);
@include transform(scaleY(0.85));
bottom: 5px;
@include transition(all .1s);
@include transform(scaleY(.85));
}
.but {
position: relative;
display: block;
width: 200px;
height: 178px;
font-size: 48px;
cursor: pointer;
background-color:#d8d8d8;
background-color: #d8d8d8;
border-bottom-width: 0;
border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
border-bottom-width:0px;
@include box-shadow(inset 8px 6px 5px -7px #a2a2a2,
inset -8px 6px 5px -7px #a2a2a2,
inset 0 -3px 2px -2px rgba(200, 200, 200, 0.5),
0 3px 3px -2px #ffffff,
inset 0 -230px 60px -200px rgba(255, 255, 255, 0.2),
inset 0 220px 40px -200px rgba(0, 0, 0, 0.3));
display:block;
font-size:48px;
height:178px;
position:relative;
@include transition(all 0.2s);
width:200px;
inset -8px 6px 5px -7px #a2a2a2,
inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
0 3px 3px -2px #fff,
inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
inset 0 220px 40px -200px rgba(0, 0, 0, .3));
@include transition(all .2s);
}
.back {
width: 210px;
height: 210px;
padding: 4px 4px;
cursor: pointer;
background-color: #888787;
background-image: -owg-linear-gradient(0deg, transparent 30%, transparent 70%), -owg-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 70%), -webkit-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -moz-linear-gradient(0deg, transparent 30%, transparent 70%), -moz-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -o-linear-gradient(0deg, transparent 30%, transparent 70%), -o-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
border-radius:105px;
@include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, 0.3),
-30px 30px 30px -20px rgba(58, 58, 58, 0.3),
0 30px 30px 0px rgba(16, 16, 16, 0.3),
inset 0 -1px 0 0 #484848);
background-image: -owg-linear-gradient(0deg, transparent 30%, transparent 70%), -owg-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 70%), -webkit-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -moz-linear-gradient(0deg, transparent 30%, transparent 70%), -moz-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -o-linear-gradient(0deg, transparent 30%, transparent 70%), -o-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
border-radius: 105px;
@include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, .3),
-30px 30px 30px -20px rgba(58, 58, 58, .3),
0 30px 30px 0 rgba(16, 16, 16, .3),
inset 0 -1px 0 0 #484848);
@include box-sizing(border-box);
height:210px;
padding:4px 4px;
@include transition(all 0.2s);
width:210px;
@include transition(all .2s);
}
input:checked + .back .on,input:checked + .back .off{
input:checked + .back .on,
input:checked + .back .off{
@include text-shadow(1px 1px 4px #4a4a4a);
}
input:checked + .back .on{
color:#4c4c4c;
top:10px;
@include transform(scaleY(0.85));
top: 10px;
color: #4c4c4c;
@include transform(scaleY(.85));
}
input:checked + .back .off{
color:#444;
bottom:5px;
bottom: 5px;
color: #444;
@include transform(scaleY(1));
}
input:checked + .back .but{
background:#dcdcdc;
background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
background-image: -webkit-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
background-image: -moz-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
background-image: -o-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
margin-top: 20px;
background: #dcdcdc;
background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
background-image: -webkit-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
background-image: -moz-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
background-image: -o-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;
@include box-shadow(inset 8px -4px 5px -7px #a9a9a9,
inset -8px -4px 5px -7px #808080,
0 -3px 8px -4px rgba(50, 50, 50, 0.4),
inset 0 3px 4px -2px #9c9c9c,
inset 0 280px 40px -200px rgba(0, 0, 0, 0.2),
inset 0 -200px 40px -200px rgba(180, 180, 180, 0.2));
margin-top:20px;
inset -8px -4px 5px -7px #808080,
0 -3px 8px -4px rgba(50, 50, 50, .4),
inset 0 3px 4px -2px #9c9c9c,
inset 0 280px 40px -200px rgba(0, 0, 0, .2),
inset 0 -200px 40px -200px rgba(180, 180, 180, .2));
}
input:checked + .back{
background-image: -owg-linear-gradient(90deg, #868686 30%, transparent 70%), -owg-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -webkit-linear-gradient(90deg, #868686 30%, transparent 70%), -webkit-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -moz-linear-gradient(90deg, #868686 30%, transparent 70%), -moz-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -o-linear-gradient(90deg, #868686 30%, transparent 70%), -o-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
@include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, 0.1),
-30px 30px 30px -20px rgba(111, 111, 111, 0.1),
0 30px 30px 0px rgba(0, 0, 0, 0.2),
inset 0 1px 2px 0 rgba(167, 167, 167, 0.6));
padding:2px 4px;
input:checked + .back{
padding: 2px 4px;
background-image: -owg-linear-gradient(90deg, #868686 30%, transparent 70%), -owg-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -webkit-linear-gradient(90deg, #868686 30%, transparent 70%), -webkit-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -moz-linear-gradient(90deg, #868686 30%, transparent 70%), -moz-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -o-linear-gradient(90deg, #868686 30%, transparent 70%), -o-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
@include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, .1),
-30px 30px 30px -20px rgba(111, 111, 111, .1),
0 30px 30px 0 rgba(0, 0, 0, .2),
inset 0 1px 2px 0 rgba(167, 167, 167, .6));
}
}
}
}

73
ui/src/app/widget/lib/rpc/switch.scss
View File

@ -13,27 +13,28 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$thumb-img: url('./svg/thumb.svg');
$thumb-checked-img: url('./svg/thumb-checked.svg');
$thumb-bar-img: url('./svg/thumb-bar.svg');
$thumb-bar-checked-img: url('./svg/thumb-bar-checked.svg');
$thumb-img: url("./svg/thumb.svg") !default;
$thumb-checked-img: url("./svg/thumb-checked.svg") !default;
$thumb-bar-img: url("./svg/thumb-bar.svg") !default;
$thumb-bar-checked-img: url("./svg/thumb-bar-checked.svg") !default;
$background-color: #e6e7e8;
$background-color: #e6e7e8 !default;
$error-height: 14px;
$error-height: 14px !default;
.tb-switch {
width:100%;
height:100%;
width: 100%;
height: 100%;
background: $background-color;
.error-container {
position:absolute;
position: absolute;
top: 1%;
left: 0;
right: 0;
z-index:4;
left: 0;
z-index: 4;
height: $error-height;
.switch-error {
color: #ff3315;
white-space: nowrap;
@ -42,62 +43,71 @@ $error-height: 14px;
.onoff-container {
height: 100%;
color: #757575;
font-weight: 500;
color: #757575;
white-space: nowrap;
.off-label {
color: #b7b5b5;
}
.on-label {
color: #ff7e57;
text-shadow: #ff6e4a 1px 1px 10px, #ffd1c3 1px 1px 10px;
}
}
.title-container {
.switch-title {
color: #757575;
font-weight: 500;
color: #757575;
white-space: nowrap;
}
}
#switch-container {
padding-left: 10px;
padding-right: 10px;
padding-right: 10px;
padding-left: 10px;
}
.switch {
position: relative;
md-switch {
margin: 0;
position:absolute;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
.md-container {
margin: 0;
}
.md-bar {
top: 0;
left: 0;
width: 100%;
top: 0;
height: 100%;
border-radius: 0;
background:$thumb-bar-img no-repeat;
background: $thumb-bar-img no-repeat;
background-size: contain;
border-radius: 0;
}
.md-thumb-container {
left: 0.25%;
width: 50%;
top: 5%;
left: .25%;
width: 50%;
height: 90%;
}
.md-thumb {
top: 0;
left: 0;
height: 100%;
width: 100%;
background:$thumb-img no-repeat;
height: 100%;
background: $thumb-img no-repeat;
background-size: contain;
border-radius: 0;
box-shadow: none;
@ -105,22 +115,23 @@ $error-height: 14px;
&.md-checked {
.md-bar {
background:$thumb-bar-checked-img no-repeat;
background: $thumb-bar-checked-img no-repeat;
background-size: contain;
}
.md-thumb {
background:$thumb-checked-img no-repeat;
background: $thumb-checked-img no-repeat;
background-size: contain;
}
}
}
}
#text-measure {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
height: auto;
white-space: nowrap;
visibility: hidden;
}
}

26
ui/src/app/widget/lib/timeseries-table-widget.scss
View File

@ -13,20 +13,22 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
tb-timeseries-table-widget {
table.md-table thead.md-head>tr.md-row {
height: 40px;
}
table.md-table thead.md-head > tr.md-row {
height: 40px;
}
table.md-table tbody.md-body>tr.md-row, table.md-table tfoot.md-foot>tr.md-row {
height: 38px;
}
table.md-table tbody.md-body > tr.md-row,
table.md-table tfoot.md-foot > tr.md-row {
height: 38px;
}
.md-table-pagination>* {
height: 46px;
}
.md-table-pagination > * {
height: 46px;
}
.tb-data-table md-toolbar {
z-index: 10;
}
.tb-data-table md-toolbar {
z-index: 10;
}
}

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

@ -15,13 +15,13 @@
*/
@import "~compass-sass-mixins/lib/compass";
$edit-toolbar-height: 40px;
$edit-toolbar-height: 40px !default;
.tb-editor {
.tb-split {
@include box-sizing(border-box);
overflow-y: auto;
overflow-x: hidden;
overflow-y: auto;
}
.ace_editor {
@ -29,7 +29,7 @@ $edit-toolbar-height: 40px;
}
.tb-content {
border: 1px solid #C0C0C0;
border: 1px solid #c0c0c0;
}
.gutter {
@ -41,21 +41,23 @@ $edit-toolbar-height: 40px;
.gutter.gutter-horizontal {
cursor: col-resize;
background-image: url('../../../node_modules/split.js/grips/vertical.png');
background-image: url("../../../node_modules/split.js/grips/vertical.png");
}
.gutter.gutter-vertical {
cursor: row-resize;
background-image: url('../../../node_modules/split.js/grips/horizontal.png');
background-image: url("../../../node_modules/split.js/grips/horizontal.png");
}
.tb-split.tb-split-horizontal, .gutter.gutter-horizontal {
height: 100%;
.tb-split.tb-split-horizontal,
.gutter.gutter-horizontal {
float: left;
height: 100%;
}
.tb-split.tb-split-vertical {
display: flex;
.tb-split.tb-content {
height: 100%;
}
@ -64,7 +66,6 @@ $edit-toolbar-height: 40px;
.tb-split-vertical {
md-tabs {
md-tabs-content-wrapper {
height: calc(100% - 49px);
@ -74,45 +75,44 @@ $edit-toolbar-height: 40px;
& > div {
height: 100%;
}
}
}
}
}
div.tb-editor-area-title-panel {
position: absolute;
font-size: 0.800rem;
font-weight: 500;
top: 5px;
right: 20px;
z-index: 5;
font-size: .8rem;
font-weight: 500;
label {
color: #00acc1;
background: rgba(220, 220, 220, 0.35);
border-radius: 5px;
padding: 4px;
color: #00acc1;
text-transform: uppercase;
background: rgba(220, 220, 220, .35);
border-radius: 5px;
}
.md-button {
color: #7B7B7B;
min-width: 32px;
min-height: 15px;
line-height: 15px;
font-size: 0.800rem;
margin: 0;
padding: 4px;
background: rgba(220, 220, 220, 0.35);
margin: 0;
font-size: .8rem;
line-height: 15px;
color: #7b7b7b;
background: rgba(220, 220, 220, .35);
}
}
.tb-resize-container {
overflow-y: auto;
height: 100%;
width: 100%;
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
.ace_editor {
height: 100%;
@ -127,24 +127,28 @@ md-toolbar.tb-edit-toolbar {
.md-toolbar-tools {
min-height: $edit-toolbar-height !important;
max-height: $edit-toolbar-height !important;
.md-button {
min-width: 65px;
min-height: 30px;
line-height: 30px;
font-size: 12px;
line-height: 30px;
md-icon {
font-size: 20px;
}
span {
padding-right: 6px;
}
}
md-input-container {
input {
font-size: 1.200rem;
font-weight: 400;
letter-spacing: 0.005em;
height: 28px;
font-size: 1.2rem;
font-weight: 400;
letter-spacing: .005em;
}
}
}

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

@ -18,6 +18,7 @@
@include keyframes(tbMoveFromTopFade) {
from {
opacity: 0;
@include transform(translate(0, -100%));
}
}
@ -25,6 +26,7 @@
@include keyframes(tbMoveToTopFade) {
to {
opacity: 0;
@include transform(translate(0, -100%));
}
}
@ -32,6 +34,7 @@
@include keyframes(tbMoveFromBottomFade) {
from {
opacity: 0;
@include transform(translate(0, 100%));
}
}
@ -39,6 +42,7 @@
@include keyframes(tbMoveToBottomFade) {
to {
opacity: 0;
@include transform(translate(0, 150%));
}
}
}

20
ui/src/scss/constants.scss
View File

@ -17,18 +17,18 @@
// Colors
$gray: #eee;
$gray: #eee !default;
$primary-palette-color: 'indigo';
$default: '500';
$hue-1: '300';
$hue-2: '800';
$hue-3: 'a100';
$primary-palette-color: "indigo" !default;
$default: "500" !default;
$hue-1: "300" !default;
$hue-2: "800" !default;
$hue-3: "a100" !default;
$primary-default: #305680; //material-color($primary-palette-color, $default);
$primary-hue-1: material-color($primary-palette-color, $hue-1);
$primary-hue-2: material-color($primary-palette-color, $hue-2);
$primary-hue-3: rgb(207, 216, 220);
$primary-default: #305680 !default; //material-color($primary-palette-color, $default);
$primary-hue-1: material-color($primary-palette-color, $hue-1) !default;
$primary-hue-2: material-color($primary-palette-color, $hue-2) !default;
$primary-hue-3: rgb(207, 216, 220) !default;
// Layout

8
ui/src/scss/fonts.scss
View File

File diff suppressed because one or more lines are too long

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

@ -14,77 +14,92 @@
* limitations under the License.
*/
@import "~compass-sass-mixins/lib/compass";
@import "constants";
@import "animations";
@import "mixins";
@import "fonts";
/***************
* TYPE DEFAULTS
***************/
button, html, input, select, textarea {
font-family: Roboto, 'Helvetica Neue', sans-serif;
button,
html,
input,
select,
textarea {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mdi-set {
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-feature-settings: "liga";
}
a {
color: #106CC8;
text-decoration: none;
font-weight: 400;
border-bottom: 1px solid rgba(64, 84, 178, 0.25);
@include transition(border-bottom 0.35s);
color: #106cc8;
text-decoration: none;
border-bottom: 1px solid rgba(64, 84, 178, .25);
@include transition(border-bottom .35s);
}
a:hover, a:focus {
border-bottom: 1px solid #4054B2;
a:hover,
a:focus {
border-bottom: 1px solid #4054b2;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1rem;
margin-bottom: 1rem;
}
h1 {
font-size: 3.400rem;
font-size: 3.4rem;
font-weight: 400;
line-height: 4rem;
}
h2 {
font-size: 2.400rem;
font-size: 2.4rem;
font-weight: 400;
line-height: 3.2rem;
}
h3 {
font-size: 2.000rem;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.005em;
letter-spacing: .005em;
}
h4 {
font-size: 1.600rem;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.010em;
line-height: 2.4rem;
letter-spacing: .01em;
}
p {
margin: .8em 0 1.6em;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.010em;
line-height: 1.6em;
margin: 0.8em 0 1.6em;
letter-spacing: .01em;
}
strong {
@ -92,16 +107,16 @@ strong {
}
blockquote {
border-left: 3px solid rgba(0, 0, 0, 0.12);
font-style: italic;
margin-left: 0;
padding-left: 16px;
margin-left: 0;
font-style: italic;
border-left: 3px solid rgba(0, 0, 0, .12);
}
fieldset {
border: none;
padding: 0;
margin: 0;
border: none;
}
/*********************************
@ -119,26 +134,28 @@ form {
}
md-bottom-sheet .md-subheader {
font-family: Roboto, 'Helvetica Neue', sans-serif;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.md-chips {
font-family: Roboto, 'Helvetica Neue', sans-serif;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
md-content.md-default-theme, md-content {
md-content.md-default-theme,
md-content {
background-color: $gray;
}
md-card {
background-color: #fff;
h2:first-of-type {
margin-top: 0;
}
}
.md-button:not([disabled]).md-icon-button:hover {
background-color: rgba(158, 158, 158, 0.2);
background-color: rgba(158, 158, 158, .2);
}
md-toolbar:not(.md-hue-1),
@ -147,11 +164,12 @@ md-toolbar:not(.md-hue-1),
}
md-toolbar md-input-container .md-errors-spacer {
min-height: 0px;
min-height: 0;
}
md-toolbar {
md-select.md-default-theme:not([disabled]):focus .md-select-value, md-select:not([disabled]):focus .md-select-value {
md-select.md-default-theme:not([disabled]):focus .md-select-value,
md-select:not([disabled]):focus .md-select-value {
color: #fff;
}
}
@ -159,11 +177,10 @@ md-toolbar {
md-menu-item {
overflow: hidden;
fill: #737373;
}
md-menu-item {
.md-button {
display: block;
.tb-alt-text {
float: right;
}
@ -190,13 +207,14 @@ md-sidenav {
overflow-y: auto;
}
.md-radio-interactive input, button {
.md-radio-interactive input,
button {
pointer-events: all;
}
.md-color-picker-input-container {
md-input-container {
margin-bottom: 0px;
margin-bottom: 0;
}
}
@ -204,32 +222,36 @@ md-sidenav {
* THINGSBOARD SPECIFIC
***********************/
$swift-ease-out-duration: 0.4s !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$swift-ease-out-duration: .4s !default;
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
$input-label-float-offset: 6px !default;
$input-label-float-scale: 0.75 !default;
$input-label-float-scale: .75 !default;
label {
&.tb-title {
pointer-events: none;
color: #666;
padding-bottom: 15px;
font-size: 13px;
font-weight: 400;
padding-bottom: 15px;
color: #666;
pointer-events: none;
&.no-padding {
padding-bottom: 0px;
padding-bottom: 0;
}
&.tb-required:after {
content: ' *';
&.tb-required::after {
font-size: 13px;
color: rgba(0, 0, 0, .54);
vertical-align: top;
color: rgba(0,0,0,0.54);
content: " *";
}
&.tb-error {
color: rgb(221,44,0);
&.tb-required:after {
color: rgb(221,44,0);
color: rgb(221, 44, 0);
&.tb-required::after {
color: rgb(221, 44, 0);
}
}
}
@ -246,96 +268,107 @@ label {
}
.tb-readonly-label {
color: rgba(0,0,0,0.54);
color: rgba(0, 0, 0, .54);
}
.tb-disabled-label {
color: rgba(0,0,0,0.44);
color: rgba(0, 0, 0, .44);
}
/* stylelint-disable-next-line no-duplicate-selectors */
label {
&.tb-small {
pointer-events: none;
color: rgba(0,0,0,0.54);
font-size: 12px;
color: rgba(0, 0, 0, .54);
pointer-events: none;
}
}
div {
&.tb-small {
color: rgba(0,0,0,0.54);
font-size: 14px;
color: rgba(0, 0, 0, .54);
}
}
.tb-hint {
padding-bottom: 15px;
font-size: 12px;
line-height: 14px;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
color: grey;
padding-bottom: 15px;
&.ng-hide, &.ng-enter, &.ng-leave.ng-leave-active {
color: #808080;
transition: all .3s cubic-bezier(.55, 0, .55, .2);
&.ng-hide,
&.ng-enter,
&.ng-leave.ng-leave-active {
bottom: 26px;
opacity: 0;
}
&.ng-leave, &.ng-enter.ng-enter-active {
&.ng-leave,
&.ng-enter.ng-enter-active {
bottom: 7px;
opacity: 1;
}
}
.md-caption {
&.tb-required:after {
content: ' *';
&.tb-required::after {
font-size: 10px;
color: rgba(0, 0, 0, .54);
vertical-align: top;
color: rgba(0,0,0,0.54);
content: " *";
}
}
pre.tb-highlight {
background-color: #f7f7f7;
display: block;
margin: 20px 0;
padding: 15px;
margin: 20px 0;
overflow-x: auto;
background-color: #f7f7f7;
code {
box-sizing: border-box;
display: inline-block;
padding: 0;
color: #303030;
font-family: monospace;
display: inline-block;
box-sizing: border-box;
vertical-align: bottom;
font-size: 16px;
font-weight: bold;
font-weight: 700;
color: #303030;
vertical-align: bottom;
}
}
.tb-notice {
background-color: #f7f7f7;
padding: 15px;
border: 1px solid #ccc;
font-size: 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.tb-data-table {
md-toolbar {
z-index: 0;
}
md-toolbar.md-table-toolbar.md-default-theme:not(.md-menu-toolbar).md-default .md-button[disabled],
md-toolbar.md-table-toolbar:not(.md-menu-toolbar).md-default .md-button[disabled] {
color: rgba(0,0,0,0.38);
color: rgba(0, 0, 0, .38);
}
md-toolbar.md-default-theme:not(.md-menu-toolbar) .md-button[disabled] md-icon,
md-toolbar:not(.md-menu-toolbar) .md-button[disabled] md-icon {
color: rgba(0,0,0,.28);
color: rgba(0, 0, 0, .28);
}
span.no-data-found {
position: relative;
display: flex;
height: calc(100% - 57px);
text-transform: uppercase;
display: flex;
}
table.md-table {
&.md-row-select td.md-cell,
&.md-row-select th.md-column {
@ -366,49 +399,55 @@ pre.tb-highlight {
td.md-cell,
th.md-column {
&:last-child {
padding: 0 12px 0 0;
}
}
}
table.md-table, table.md-table.md-row-select {
table.md-table,
table.md-table.md-row-select {
tbody {
&.md-body {
tr {
&.md-row:not([disabled]) {
outline: none;
&:hover {
background-color: rgba(221, 221, 221, 0.3) !important;
background-color: rgba(221, 221, 221, .3) !important;
}
&.md-selected {
background-color: rgba(221, 221, 221, 0.5) !important;
background-color: rgba(221, 221, 221, .5) !important;
}
&.tb-current, &.tb-current:hover{
background-color: rgba(221, 221, 221, 0.65) !important;
&.tb-current,
&.tb-current:hover{
background-color: rgba(221, 221, 221, .65) !important;
}
}
}
}
tr {
td {
&.tb-action-cell {
width: 72px;
min-width: 72px;
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 72px;
max-width: 72px;
width: 72px;
.md-button {
&.md-icon-button {
margin: 0;
padding: 6px;
width: 36px;
height: 36px;
padding: 6px;
margin: 0;
}
}
.tb-spacer {
padding-left: 38px;
}
@ -420,34 +459,40 @@ pre.tb-highlight {
}
.tb-severity {
font-weight: bold;
font-weight: 700;
&.tb-critical {
color: red !important;
color: #f00 !important;
}
&.tb-major {
color: orange !important;
color: #ffa500 !important;
}
&.tb-minor {
color: #ffca3d !important;
}
&.tb-warning {
color: #abab00 !important;
}
&.tb-indeterminate {
color: green !important;
color: #008000 !important;
}
}
.tb-card-description {
color: rgba(0,0,0,0.54);
font-size: 13px;
color: rgba(0, 0, 0, .54);
@include line-clamp(2, 1.1);
}
/***********************
* Flow
***********************/
$previewSize: 100px;
$previewSize: 100px !default;
.file-input {
display: none;
@ -455,17 +500,19 @@ $previewSize: 100px;
.tb-flow-drop {
position: relative;
border: dashed 2px;
height: $previewSize;
overflow: hidden;
border: dashed 2px;
label {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
font-size: 16px;
text-align: center;
@media (min-width: $layout-breakpoint-sm) {
font-size: 24px;
}
@ -474,8 +521,8 @@ $previewSize: 100px;
.tb-container {
position: relative;
margin-top: 32px;
padding: 10px 0;
margin-top: 32px;
}
/***********************
@ -483,12 +530,12 @@ $previewSize: 100px;
***********************/
.tb-prompt {
color: rgba(0,0,0,0.38);
text-transform: uppercase;
display: flex;
font-size: 18px;
font-weight: 400;
line-height: 18px;
color: rgba(0, 0, 0, .38);
text-transform: uppercase;
}
/***********************
@ -500,35 +547,37 @@ $previewSize: 100px;
}
.tb-error-message {
padding: 10px 0 0 10px;
margin-top: -6px;
overflow: hidden;
font-size: 12px;
line-height: 14px;
overflow: hidden;
padding: 10px 0px 0px 10px;
color: rgb(221,44,0);
margin-top: -6px;
color: rgb(221, 44, 0);
}
.tb-error-message.ng-animate {
@include transition(all .3s cubic-bezier(.55,0,.55,.2));
@include transition(all .3s cubic-bezier(.55, 0, .55, .2));
}
.tb-error-message.ng-enter-prepare, .tb-error-message.ng-enter {
opacity:0;
.tb-error-message.ng-enter-prepare,
.tb-error-message.ng-enter {
margin-top: -24px;
opacity: 0;
}
.tb-error-message.ng-enter.ng-enter-active {
opacity:1;
margin-top: -6px;
opacity: 1;
}
.tb-error-message.ng-leave {
opacity:1;
margin-top: -6px;
opacity: 1;
}
.tb-error-message.ng-leave.ng-leave-active {
opacity:0;
margin-top: -24px;
opacity: 0;
}
/***********************
@ -545,39 +594,41 @@ md-tabs.tb-headless {
.md-button.tb-card-button {
width: 100%;
height: 100%;
max-width: 240px;
height: 100%;
span {
height: 18px;
min-height: 18px;
max-height: 18px;
padding: 0 0 20px 0;
margin: auto;
font-size: 18px;
font-weight: 400;
white-space: normal;
line-height: 18px;
max-height: 18px;
min-height: 18px;
height: 18px;
margin: auto;
white-space: normal;
}
}
.md-button.tb-layout-button {
width: 100%;
height: 100%;
max-width: 240px;
height: 100%;
span {
padding: 40px;
font-size: 18px;
font-weight: 400;
white-space: normal;
line-height: 18px;
white-space: normal;
}
}
.md-button.tb-add-new-widget {
padding-right: 12px;
font-size: 24px;
border-style: dashed;
border-width: 2px;
font-size: 24px;
padding-right: 12px;
}
/***********************
@ -585,11 +636,12 @@ md-tabs.tb-headless {
***********************/
section.tb-header-buttons {
pointer-events: none;
position: absolute;
right: 0px;
top: 86px;
right: 0;
z-index: 3;
pointer-events: none;
@media (min-width: $layout-breakpoint-sm) {
top: 86px;
}
@ -633,6 +685,7 @@ section.tb-footer-buttons {
._md-toast-open-bottom .tb-footer-buttons {
@include transition(all .4s cubic-bezier(.25, .8, .25, 1));
@include transform(translate3d(0, -42px, 0));
}
@ -641,27 +694,27 @@ section.tb-footer-buttons {
***********************/
.md-icon-button.tb-md-32 {
vertical-align: middle;
width: 32px;
height: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
margin: 0px !important;
padding: 0px !important;
padding: 0 !important;
margin: 0 !important;
vertical-align: middle;
}
.material-icons.tb-md-20 {
font-size: 20px;
width: 20px;
height: 20px;
min-width: 20px;
height: 20px;
min-height: 20px;
font-size: 20px;
}
.material-icons.tb-md-96 {
font-size: 96px;
width: 96px;
height: 96px;
font-size: 96px;
}
/***********************
@ -671,17 +724,17 @@ section.tb-footer-buttons {
.tb-absolute-fill {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
left: 0;
}
.tb-progress-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 6;
opacity: 1;
}

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

@ -17,43 +17,49 @@
@mixin input-placeholder {
// replaces compass/css/user-interface/input-placeholder()
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder {
@content;
opacity: 1;
}
&::-moz-placeholder {
@content;
opacity: 1;
}
&:-ms-input-placeholder {
@content;
}
}
@mixin line-clamp($numLines: 1, $lineHeight: 1.412) {
overflow: hidden;
position: relative;
max-height: ($numLines * $lineHeight * 1em);
padding-right: 2em;
margin-right: -1em;
overflow: hidden;
line-height: $lineHeight;
text-align: justify;
margin-right: -1em;
padding-right: 2em;
max-height: ($numLines*$lineHeight)+em;
&:before {
content: '...';
&::before {
position: absolute;
right: 1em;
bottom: 0;
content: "...";
}
&:after {
content: '';
&::after {
position: absolute;
right: 1em;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: white;
margin-top: .2em;
content: "";
background: #fff;
}
}

3
ui/webpack.config.dev.js
View File

@ -18,6 +18,8 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin')
const webpack = require('webpack');
const path = require('path');
const dirTree = require('directory-tree');
@ -76,6 +78,7 @@ module.exports = {
title: 'ThingsBoard',
inject: 'body',
}),
new StyleLintPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('style.[contentHash].css', {

Write Preview
Loading…
Cancel
Save