David Touitou 2 years ago
parent
commit
8acff92ff8
100 changed files with 104396 additions and 5 deletions
  1. 0
    5
      Angular/.gitignore
  2. 4739
    0
      Angular/src/assets/layout/css/layout-dark.css
  3. 4739
    0
      Angular/src/assets/layout/css/layout-light.css
  4. 18
    0
      Angular/src/assets/sass/theme/designer/_colors.scss
  5. 68
    0
      Angular/src/assets/sass/theme/designer/_common.scss
  6. 102
    0
      Angular/src/assets/sass/theme/designer/_components.scss
  7. 180
    0
      Angular/src/assets/sass/theme/designer/_mixins.scss
  8. 560
    0
      Angular/src/assets/sass/theme/designer/components/button/_button.scss
  9. 79
    0
      Angular/src/assets/sass/theme/designer/components/button/_speeddial.scss
  10. 1
    0
      Angular/src/assets/sass/theme/designer/components/button/_splitbutton.scss
  11. 37
    0
      Angular/src/assets/sass/theme/designer/components/data/_carousel.scss
  12. 266
    0
      Angular/src/assets/sass/theme/designer/components/data/_datatable.scss
  13. 55
    0
      Angular/src/assets/sass/theme/designer/components/data/_dataview.scss
  14. 138
    0
      Angular/src/assets/sass/theme/designer/components/data/_filter.scss
  15. 324
    0
      Angular/src/assets/sass/theme/designer/components/data/_fullcalendar.scss
  16. 91
    0
      Angular/src/assets/sass/theme/designer/components/data/_orderlist.scss
  17. 50
    0
      Angular/src/assets/sass/theme/designer/components/data/_organizationchart.scss
  18. 92
    0
      Angular/src/assets/sass/theme/designer/components/data/_paginator.scss
  19. 91
    0
      Angular/src/assets/sass/theme/designer/components/data/_picklist.scss
  20. 38
    0
      Angular/src/assets/sass/theme/designer/components/data/_timeline.scss
  21. 144
    0
      Angular/src/assets/sass/theme/designer/components/data/_tree.scss
  22. 242
    0
      Angular/src/assets/sass/theme/designer/components/data/_treetable.scss
  23. 28
    0
      Angular/src/assets/sass/theme/designer/components/data/_virtualscroller.scss
  24. 58
    0
      Angular/src/assets/sass/theme/designer/components/file/_fileupload.scss
  25. 103
    0
      Angular/src/assets/sass/theme/designer/components/input/_autocomplete.scss
  26. 212
    0
      Angular/src/assets/sass/theme/designer/components/input/_calendar.scss
  27. 98
    0
      Angular/src/assets/sass/theme/designer/components/input/_cascadeselect.scss
  28. 85
    0
      Angular/src/assets/sass/theme/designer/components/input/_checkbox.scss
  29. 41
    0
      Angular/src/assets/sass/theme/designer/components/input/_chips.scss
  30. 19
    0
      Angular/src/assets/sass/theme/designer/components/input/_colorpicker.scss
  31. 137
    0
      Angular/src/assets/sass/theme/designer/components/input/_dropdown.scss
  32. 122
    0
      Angular/src/assets/sass/theme/designer/components/input/_editor.scss
  33. 75
    0
      Angular/src/assets/sass/theme/designer/components/input/_inputgroup.scss
  34. 3
    0
      Angular/src/assets/sass/theme/designer/components/input/_inputmask.scss
  35. 3
    0
      Angular/src/assets/sass/theme/designer/components/input/_inputnumber.scss
  36. 58
    0
      Angular/src/assets/sass/theme/designer/components/input/_inputswitch.scss
  37. 97
    0
      Angular/src/assets/sass/theme/designer/components/input/_inputtext.scss
  38. 82
    0
      Angular/src/assets/sass/theme/designer/components/input/_listbox.scss
  39. 164
    0
      Angular/src/assets/sass/theme/designer/components/input/_multiselect.scss
  40. 33
    0
      Angular/src/assets/sass/theme/designer/components/input/_password.scss
  41. 78
    0
      Angular/src/assets/sass/theme/designer/components/input/_radiobutton.scss
  42. 48
    0
      Angular/src/assets/sass/theme/designer/components/input/_rating.scss
  43. 50
    0
      Angular/src/assets/sass/theme/designer/components/input/_selectbutton.scss
  44. 69
    0
      Angular/src/assets/sass/theme/designer/components/input/_slider.scss
  45. 48
    0
      Angular/src/assets/sass/theme/designer/components/input/_togglebutton.scss
  46. 89
    0
      Angular/src/assets/sass/theme/designer/components/input/_treeselect.scss
  47. 42
    0
      Angular/src/assets/sass/theme/designer/components/menu/_breadcrumb.scss
  48. 50
    0
      Angular/src/assets/sass/theme/designer/components/menu/_contextmenu.scss
  49. 86
    0
      Angular/src/assets/sass/theme/designer/components/menu/_dock.scss
  50. 102
    0
      Angular/src/assets/sass/theme/designer/components/menu/_megamenu.scss
  51. 41
    0
      Angular/src/assets/sass/theme/designer/components/menu/_menu.scss
  52. 179
    0
      Angular/src/assets/sass/theme/designer/components/menu/_menubar.scss
  53. 137
    0
      Angular/src/assets/sass/theme/designer/components/menu/_panelmenu.scss
  54. 55
    0
      Angular/src/assets/sass/theme/designer/components/menu/_slidemenu.scss
  55. 55
    0
      Angular/src/assets/sass/theme/designer/components/menu/_steps.scss
  56. 49
    0
      Angular/src/assets/sass/theme/designer/components/menu/_tabmenu.scss
  57. 56
    0
      Angular/src/assets/sass/theme/designer/components/menu/_tieredmenu.scss
  58. 64
    0
      Angular/src/assets/sass/theme/designer/components/messages/_inlinemessage.scss
  59. 102
    0
      Angular/src/assets/sass/theme/designer/components/messages/_message.scss
  60. 95
    0
      Angular/src/assets/sass/theme/designer/components/messages/_toast.scss
  61. 30
    0
      Angular/src/assets/sass/theme/designer/components/misc/_avatar.scss
  62. 48
    0
      Angular/src/assets/sass/theme/designer/components/misc/_badge.scss
  63. 0
    0
      Angular/src/assets/sass/theme/designer/components/misc/_blockui.scss
  64. 36
    0
      Angular/src/assets/sass/theme/designer/components/misc/_chip.scss
  65. 17
    0
      Angular/src/assets/sass/theme/designer/components/misc/_inplace.scss
  66. 17
    0
      Angular/src/assets/sass/theme/designer/components/misc/_progressbar.scss
  67. 20
    0
      Angular/src/assets/sass/theme/designer/components/misc/_scrolltop.scss
  68. 8
    0
      Angular/src/assets/sass/theme/designer/components/misc/_skeleton.scss
  69. 33
    0
      Angular/src/assets/sass/theme/designer/components/misc/_tag.scss
  70. 11
    0
      Angular/src/assets/sass/theme/designer/components/misc/_terminal.scss
  71. 139
    0
      Angular/src/assets/sass/theme/designer/components/multimedia/_galleria.scss
  72. 44
    0
      Angular/src/assets/sass/theme/designer/components/multimedia/_image.scss
  73. 67
    0
      Angular/src/assets/sass/theme/designer/components/overlay/_confirmpopup.scss
  74. 59
    0
      Angular/src/assets/sass/theme/designer/components/overlay/_dialog.scss
  75. 62
    0
      Angular/src/assets/sass/theme/designer/components/overlay/_overlaypanel.scss
  76. 23
    0
      Angular/src/assets/sass/theme/designer/components/overlay/_sidebar.scss
  77. 33
    0
      Angular/src/assets/sass/theme/designer/components/overlay/_tooltip.scss
  78. 119
    0
      Angular/src/assets/sass/theme/designer/components/panel/_accordion.scss
  79. 30
    0
      Angular/src/assets/sass/theme/designer/components/panel/_card.scss
  80. 31
    0
      Angular/src/assets/sass/theme/designer/components/panel/_divider.scss
  81. 47
    0
      Angular/src/assets/sass/theme/designer/components/panel/_fieldset.scss
  82. 42
    0
      Angular/src/assets/sass/theme/designer/components/panel/_panel.scss
  83. 6
    0
      Angular/src/assets/sass/theme/designer/components/panel/_scrollpanel.scss
  84. 19
    0
      Angular/src/assets/sass/theme/designer/components/panel/_splitter.scss
  85. 78
    0
      Angular/src/assets/sass/theme/designer/components/panel/_tabview.scss
  86. 10
    0
      Angular/src/assets/sass/theme/designer/components/panel/_toolbar.scss
  87. 6800
    0
      Angular/src/assets/theme/amber/theme-dark.css
  88. 6800
    0
      Angular/src/assets/theme/amber/theme-light.css
  89. 6800
    0
      Angular/src/assets/theme/blue/theme-dark.css
  90. 6800
    0
      Angular/src/assets/theme/blue/theme-light.css
  91. 6800
    0
      Angular/src/assets/theme/bluegrey/theme-dark.css
  92. 6800
    0
      Angular/src/assets/theme/bluegrey/theme-light.css
  93. 6800
    0
      Angular/src/assets/theme/brown/theme-dark.css
  94. 6800
    0
      Angular/src/assets/theme/brown/theme-light.css
  95. 6800
    0
      Angular/src/assets/theme/cyan/theme-dark.css
  96. 6800
    0
      Angular/src/assets/theme/cyan/theme-light.css
  97. 6800
    0
      Angular/src/assets/theme/deeporange/theme-dark.css
  98. 6800
    0
      Angular/src/assets/theme/deeporange/theme-light.css
  99. 6800
    0
      Angular/src/assets/theme/deeppurple/theme-dark.css
  100. 0
    0
      Angular/src/assets/theme/deeppurple/theme-light.css

+ 0
- 5
Angular/.gitignore View File

@@ -43,8 +43,3 @@ testem.log
43 43
 # System Files
44 44
 .DS_Store
45 45
 Thumbs.db
46
-
47
-theme.css
48
-src/assets/theme/*/theme-*.css
49
-src/assets/layout/css/*.css
50
-src/assets/sass/theme/designer

+ 4739
- 0
Angular/src/assets/layout/css/layout-dark.css
File diff suppressed because it is too large
View File


+ 4739
- 0
Angular/src/assets/layout/css/layout-light.css
File diff suppressed because it is too large
View File


+ 18
- 0
Angular/src/assets/sass/theme/designer/_colors.scss View File

@@ -0,0 +1,18 @@
1
+:root {
2
+  @if variable-exists(colors) {
3
+    @each $name, $color in $colors {
4
+        @for $i from 0 through 5 {
5
+            @if ($i == 0) {
6
+                --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
7
+            }
8
+            @else {
9
+                --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
10
+            }
11
+        }
12
+
13
+        @for $i from 1 through 4 {
14
+            --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
15
+        }
16
+    }
17
+  }
18
+}

+ 68
- 0
Angular/src/assets/sass/theme/designer/_common.scss View File

@@ -0,0 +1,68 @@
1
+* {
2
+	box-sizing: border-box;
3
+}
4
+
5
+.p-component {
6
+    font-family: $fontFamily;
7
+    font-size: $fontSize;
8
+    font-weight: $fontWeight;
9
+}
10
+
11
+.p-component-overlay {
12
+    background-color: $maskBg;
13
+    transition-duration: $transitionDuration;
14
+}
15
+
16
+.p-disabled, .p-component:disabled {
17
+    opacity: $disabledOpacity;
18
+}
19
+
20
+.p-error {
21
+    color: $errorColor;
22
+}
23
+
24
+.p-text-secondary {
25
+    color: $textSecondaryColor;
26
+}
27
+
28
+.pi {
29
+    font-size: $primeIconFontSize;
30
+}
31
+
32
+.p-link {
33
+    font-size: $fontSize;
34
+    font-family: $fontFamily;
35
+    border-radius: $borderRadius;
36
+
37
+    &:focus {
38
+        @include focused();
39
+    }
40
+}
41
+
42
+.p-component-overlay-enter {
43
+    animation: p-component-overlay-enter-animation 150ms forwards;
44
+}
45
+
46
+.p-component-overlay-leave {
47
+    animation: p-component-overlay-leave-animation 150ms forwards;
48
+}
49
+
50
+.p-component-overlay {
51
+    @keyframes p-component-overlay-enter-animation {
52
+        from {
53
+            background-color: transparent;
54
+        }
55
+        to {
56
+            background-color: var(--maskbg);
57
+        }
58
+    }
59
+
60
+    @keyframes p-component-overlay-leave-animation {
61
+        from {
62
+            background-color: var(--maskbg);
63
+        }
64
+        to {
65
+            background-color: transparent;
66
+        }
67
+    }
68
+}

+ 102
- 0
Angular/src/assets/sass/theme/designer/_components.scss View File

@@ -0,0 +1,102 @@
1
+@import '_mixins';
2
+@import '_common';
3
+@import '_colors';
4
+
5
+//Input
6
+@import './components/input/_autocomplete';
7
+@import './components/input/_calendar';
8
+@import './components/input/_cascadeselect';
9
+@import './components/input/_checkbox';
10
+@import './components/input/_chips';
11
+@import './components/input/_colorpicker';
12
+@import './components/input/_dropdown';
13
+@import './components/input/_editor';
14
+@import './components/input/_inputgroup';
15
+@import './components/input/_inputmask';
16
+@import './components/input/_inputnumber';
17
+@import './components/input/_inputswitch';
18
+@import './components/input/_inputtext';
19
+@import './components/input/_listbox';
20
+@import './components/input/_multiselect';
21
+@import './components/input/_password';
22
+@import './components/input/_radiobutton';
23
+@import './components/input/_rating';
24
+@import './components/input/_selectbutton';
25
+@import './components/input/_slider';
26
+@import './components/input/_togglebutton';
27
+@import './components/input/_treeselect';
28
+
29
+//Button
30
+@import './components/button/_button';
31
+@import './components/button/_speeddial';
32
+@import './components/button/_splitbutton';
33
+
34
+//Data
35
+@import './components/data/_carousel';
36
+@import './components/data/_datatable';
37
+@import './components/data/_dataview';
38
+@import './components/data/_filter';
39
+@import './components/data/_fullcalendar';
40
+@import './components/data/_orderlist';
41
+@import './components/data/_organizationchart';
42
+@import './components/data/_paginator';
43
+@import './components/data/_picklist';
44
+@import './components/data/_timeline';
45
+@import './components/data/_tree';
46
+@import './components/data/_treetable';
47
+@import './components/data/_virtualscroller';
48
+
49
+//Panel
50
+@import './components/panel/_accordion';
51
+@import './components/panel/_card';
52
+@import './components/panel/_divider';
53
+@import './components/panel/_fieldset';
54
+@import './components/panel/_panel';
55
+@import './components/panel/_scrollpanel';
56
+@import './components/panel/_splitter';
57
+@import './components/panel/_tabview';
58
+@import './components/panel/_toolbar';
59
+
60
+//Overlay
61
+@import './components/overlay/_confirmpopup';
62
+@import './components/overlay/_dialog';
63
+@import './components/overlay/_overlaypanel';
64
+@import './components/overlay/_sidebar';
65
+@import './components/overlay/_tooltip';
66
+
67
+//File
68
+@import './components/file/_fileupload';
69
+
70
+//Menu
71
+@import './components/menu/_breadcrumb';
72
+@import './components/menu/_contextmenu';
73
+@import './components/menu/_dock';
74
+@import './components/menu/_megamenu';
75
+@import './components/menu/_menu';
76
+@import './components/menu/_menubar';
77
+@import './components/menu/_panelmenu';
78
+@import './components/menu/_slidemenu';
79
+@import './components/menu/_steps';
80
+@import './components/menu/_tabmenu';
81
+@import './components/menu/_tieredmenu';
82
+
83
+//Messages
84
+@import './components/messages/_inlinemessage';
85
+@import './components/messages/_message';
86
+@import 'components/messages/toast';
87
+
88
+//MultiMedia
89
+@import './components/multimedia/_galleria';
90
+@import './components/multimedia/_image';
91
+
92
+//Misc
93
+@import './components/misc/_avatar';
94
+@import './components/misc/_badge';
95
+@import './components/misc/_blockui';
96
+@import './components/misc/_chip';
97
+@import './components/misc/_inplace';
98
+@import './components/misc/_progressbar';
99
+@import './components/misc/_scrolltop';
100
+@import './components/misc/_skeleton';
101
+@import './components/misc/_tag';
102
+@import './components/misc/_terminal';

+ 180
- 0
Angular/src/assets/sass/theme/designer/_mixins.scss View File

@@ -0,0 +1,180 @@
1
+@mixin icon-override($icon) {
2
+	&:before {
3
+		content: $icon;
4
+	}
5
+}
6
+
7
+@mixin focused() {
8
+	outline: $focusOutline;
9
+    outline-offset: $focusOutlineOffset;
10
+    box-shadow: $focusShadow;
11
+}
12
+
13
+@mixin focused-inset() {
14
+	outline: $focusOutline;
15
+    outline-offset: $focusOutlineOffset;
16
+    box-shadow: inset $focusShadow;
17
+}
18
+
19
+@mixin focused-input() {
20
+	@include focused();
21
+	border-color: $inputFocusBorderColor;
22
+}
23
+
24
+@mixin focused-listitem() {
25
+	outline: $focusOutline;
26
+    outline-offset: $focusOutlineOffset;
27
+    box-shadow: $inputListItemFocusShadow;
28
+}
29
+
30
+@mixin invalid-input() {
31
+	border-color: $inputErrorBorderColor;
32
+}
33
+
34
+@mixin menuitem-link {
35
+	padding: $menuitemPadding;
36
+	color: $menuitemTextColor;
37
+    border-radius: $menuitemBorderRadius;
38
+    transition: $listItemTransition;
39
+    user-select: none;
40
+
41
+	.p-menuitem-text {
42
+        color: $menuitemTextColor;
43
+	}
44
+
45
+	.p-menuitem-icon {
46
+		color: $menuitemIconColor;
47
+		margin-right: $inlineSpacing;
48
+    }
49
+
50
+    .p-submenu-icon {
51
+        color: $menuitemIconColor;
52
+    }
53
+
54
+	&:not(.p-disabled):hover {
55
+		background: $menuitemHoverBg;
56
+
57
+		.p-menuitem-text {
58
+			color: $menuitemTextHoverColor;
59
+		}
60
+
61
+		.p-menuitem-icon {
62
+			color: $menuitemIconHoverColor;
63
+        }
64
+
65
+        .p-submenu-icon {
66
+            color: $menuitemIconHoverColor;
67
+        }
68
+	}
69
+
70
+	&:focus {
71
+		@include focused-listitem();
72
+	}
73
+}
74
+
75
+@mixin horizontal-rootmenuitem-link {
76
+	padding: $horizontalMenuRootMenuitemPadding;
77
+	color: $horizontalMenuRootMenuitemTextColor;
78
+    border-radius: $horizontalMenuRootMenuitemBorderRadius;
79
+    transition: $listItemTransition;
80
+    user-select: none;
81
+
82
+	.p-menuitem-text {
83
+        color: $horizontalMenuRootMenuitemTextColor;
84
+	}
85
+
86
+	.p-menuitem-icon {
87
+		color: $horizontalMenuRootMenuitemIconColor;
88
+		margin-right: $inlineSpacing;
89
+    }
90
+
91
+    .p-submenu-icon {
92
+        color: $horizontalMenuRootMenuitemIconColor;
93
+        margin-left: $inlineSpacing;
94
+    }
95
+
96
+	&:not(.p-disabled):hover {
97
+		background: $horizontalMenuRootMenuitemHoverBg;
98
+
99
+		.p-menuitem-text {
100
+			color: $horizontalMenuRootMenuitemTextHoverColor;
101
+		}
102
+
103
+		.p-menuitem-icon {
104
+			color: $horizontalMenuRootMenuitemIconHoverColor;
105
+        }
106
+
107
+        .p-submenu-icon {
108
+            color: $horizontalMenuRootMenuitemIconHoverColor;
109
+        }
110
+	}
111
+
112
+	&:focus {
113
+		@include focused-listitem();
114
+	}
115
+}
116
+
117
+@mixin placeholder {
118
+	::-webkit-input-placeholder {
119
+		@content
120
+	}
121
+	:-moz-placeholder {
122
+		@content
123
+	}
124
+	::-moz-placeholder {
125
+		@content
126
+	}
127
+	:-ms-input-placeholder {
128
+		@content
129
+	}
130
+}
131
+
132
+@mixin scaledPadding($val, $scale) {
133
+    padding: nth($val, 1) * $scale nth($val, 2) * $scale;
134
+}
135
+
136
+@mixin scaledFontSize($val, $scale) {
137
+    font-size: $val * $scale;
138
+}
139
+
140
+@mixin nested-submenu-indents($val, $index, $length) {
141
+    ul {
142
+        li {
143
+            a {
144
+                padding-left: $val * ($index + 1);
145
+            }
146
+
147
+            @if $index < $length {
148
+                @include nested-submenu-indents($val, $index + 2, $length);
149
+            }
150
+        }
151
+    }
152
+}
153
+
154
+@mixin action-icon($enabled: true) {
155
+    width: $actionIconWidth;
156
+    height: $actionIconHeight;
157
+    color: $actionIconColor;
158
+    border: $actionIconBorder;
159
+    background: $actionIconBg;
160
+    border-radius: $actionIconBorderRadius;
161
+    transition: $actionIconTransition;
162
+
163
+    &:enabled:hover {
164
+        color: $actionIconHoverColor;
165
+        border-color: $actionIconHoverBorderColor;
166
+        background: $actionIconHoverBg;
167
+    }
168
+
169
+    &:focus {
170
+        @include focused();
171
+    }
172
+}
173
+
174
+@function tint($color, $percentage) {
175
+    @return mix(#fff, $color, $percentage);
176
+}
177
+
178
+@function shade($color, $percentage) {
179
+    @return mix(#000, $color, $percentage);
180
+}

+ 560
- 0
Angular/src/assets/sass/theme/designer/components/button/_button.scss View File

@@ -0,0 +1,560 @@
1
+.p-button {
2
+    color: $buttonTextColor;
3
+    background: $buttonBg;
4
+    border: $buttonBorder;
5
+    padding: $buttonPadding;
6
+    font-size: $fontSize;
7
+    transition: $formElementTransition;
8
+    border-radius: $borderRadius;
9
+
10
+    &:enabled:hover {
11
+        background: $buttonHoverBg;
12
+        color: $buttonTextHoverColor;
13
+        border-color: $buttonHoverBorderColor;
14
+    }
15
+
16
+    &:enabled:active {
17
+        background: $buttonActiveBg;
18
+        color: $buttonTextActiveColor;
19
+        border-color: $buttonActiveBorderColor;
20
+    }
21
+
22
+    &.p-button-outlined {
23
+        background-color: transparent;
24
+        color: $buttonBg;
25
+        border: $outlinedButtonBorder;
26
+
27
+        &:enabled:hover {
28
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
29
+            color: $buttonBg;
30
+            border: $outlinedButtonBorder;
31
+        }
32
+
33
+        &:enabled:active {
34
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
35
+            color: $buttonBg;
36
+            border: $outlinedButtonBorder;
37
+        }
38
+
39
+        &.p-button-plain {
40
+            color: $plainButtonTextColor;
41
+            border-color: $plainButtonTextColor;
42
+
43
+            &:enabled:hover {
44
+                background: $plainButtonHoverBgColor;
45
+                color: $plainButtonTextColor;
46
+            }
47
+    
48
+            &:enabled:active {
49
+                background: $plainButtonActiveBgColor;
50
+                color: $plainButtonTextColor;
51
+            }
52
+        }
53
+    }
54
+
55
+    &.p-button-text {
56
+        background-color: transparent;
57
+        color: $buttonBg;
58
+        border-color: transparent;
59
+
60
+        &:enabled:hover {
61
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
62
+            color: $buttonBg;
63
+            border-color: transparent;
64
+        }
65
+
66
+        &:enabled:active {
67
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
68
+            color: $buttonBg;
69
+            border-color: transparent;
70
+        }
71
+
72
+        &.p-button-plain {
73
+            color: $plainButtonTextColor;
74
+
75
+            &:enabled:hover {
76
+                background: $plainButtonHoverBgColor;
77
+                color: $plainButtonTextColor;
78
+            }
79
+    
80
+            &:enabled:active {
81
+                background: $plainButtonActiveBgColor;
82
+                color: $plainButtonTextColor;
83
+            }
84
+        }
85
+    }
86
+
87
+    &:focus {
88
+        @include focused();
89
+    }
90
+
91
+    .p-button-icon-left {
92
+         margin-right: $inlineSpacing;
93
+    }
94
+
95
+    .p-button-icon-right {
96
+        margin-left: $inlineSpacing;
97
+    }
98
+
99
+    .p-button-icon-bottom {
100
+        margin-top: $inlineSpacing;
101
+    }
102
+
103
+    .p-button-icon-top {
104
+       margin-bottom: $inlineSpacing;
105
+    }
106
+
107
+    .p-badge {
108
+        margin-left: $inlineSpacing;
109
+        min-width: $fontSize;
110
+        height: $fontSize;
111
+        line-height: $fontSize;
112
+        color: $buttonBg;
113
+        background-color: $buttonTextColor; 
114
+    }
115
+
116
+    &.p-button-raised {
117
+        box-shadow: $raisedButtonShadow;
118
+    }
119
+
120
+    &.p-button-rounded {
121
+        border-radius: $roundedButtonBorderRadius;
122
+    }
123
+
124
+    &.p-button-icon-only {
125
+        width: $buttonIconOnlyWidth;
126
+        padding: $buttonIconOnlyPadding;
127
+
128
+        .p-button-icon-left,
129
+        .p-button-icon-right {
130
+            margin: 0;
131
+        }
132
+
133
+        &.p-button-rounded {
134
+            border-radius: 50%;
135
+            height: $buttonIconOnlyWidth;
136
+        }
137
+    }
138
+
139
+    &.p-button-sm {
140
+        @include scaledFontSize($fontSize, $scaleSM);
141
+        @include scaledPadding($buttonPadding, $scaleSM);
142
+
143
+        .p-button-icon {
144
+            @include scaledFontSize($primeIconFontSize, $scaleSM);
145
+        }
146
+    }
147
+
148
+    &.p-button-lg {
149
+        @include scaledFontSize($fontSize, $scaleLG);
150
+        @include scaledPadding($buttonPadding, $scaleLG);
151
+
152
+        .p-button-icon {
153
+            @include scaledFontSize($primeIconFontSize, $scaleLG);
154
+        }
155
+    }
156
+
157
+    &.p-button-loading-label-only {
158
+        .p-button-label {
159
+            margin-left: $inlineSpacing;
160
+        }
161
+
162
+        .p-button-loading-icon {
163
+            margin-right: 0;
164
+        }
165
+    }
166
+}
167
+
168
+.p-fluid {
169
+    .p-button {
170
+        width: 100%;
171
+    }
172
+    
173
+    .p-button-icon-only {
174
+        width: $buttonIconOnlyWidth;
175
+    }
176
+
177
+    .p-buttonset {
178
+        display: flex;
179
+        
180
+        .p-button {
181
+            flex: 1;
182
+        }
183
+    }
184
+}
185
+
186
+.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
187
+    color: $secondaryButtonTextColor;
188
+    background: $secondaryButtonBg;
189
+    border: $secondaryButtonBorder;
190
+
191
+    &:enabled:hover {
192
+        background: $secondaryButtonHoverBg;
193
+        color: $secondaryButtonTextHoverColor;
194
+        border-color: $secondaryButtonHoverBorderColor;
195
+    }
196
+
197
+    &:enabled:focus {
198
+        box-shadow: $secondaryButtonFocusShadow;
199
+    }
200
+
201
+    &:enabled:active {
202
+        background: $secondaryButtonActiveBg;
203
+        color: $secondaryButtonTextActiveColor;
204
+        border-color: $secondaryButtonActiveBorderColor;
205
+    }
206
+    
207
+    &.p-button-outlined {
208
+        background-color: transparent;
209
+        color: $secondaryButtonBg;
210
+        border: $outlinedButtonBorder;
211
+
212
+        &:enabled:hover {
213
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
214
+            color: $secondaryButtonBg;
215
+            border: $outlinedButtonBorder;
216
+        }
217
+
218
+        &:enabled:active {
219
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
220
+            color: $secondaryButtonBg;
221
+            border: $outlinedButtonBorder;
222
+        }
223
+    }
224
+
225
+    &.p-button-text {
226
+        background-color: transparent;
227
+        color: $secondaryButtonBg;
228
+        border-color: transparent;
229
+
230
+        &:enabled:hover {
231
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
232
+            border-color: transparent;
233
+            color: $secondaryButtonBg;
234
+        }
235
+
236
+        &:enabled:active {
237
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
238
+            border-color: transparent;
239
+            color: $secondaryButtonBg;
240
+        }
241
+    }
242
+}
243
+
244
+.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
245
+    color: $infoButtonTextColor;
246
+    background: $infoButtonBg;
247
+    border: $infoButtonBorder;
248
+
249
+    &:enabled:hover {
250
+        background: $infoButtonHoverBg;
251
+        color: $infoButtonTextHoverColor;
252
+        border-color: $infoButtonHoverBorderColor;
253
+    }
254
+
255
+    &:enabled:focus {
256
+        box-shadow: $infoButtonFocusShadow;
257
+    }
258
+
259
+    &:enabled:active {
260
+        background: $infoButtonActiveBg;
261
+        color: $infoButtonTextActiveColor;
262
+        border-color: $infoButtonActiveBorderColor;
263
+    }
264
+
265
+    &.p-button-outlined {
266
+        background-color: transparent;
267
+        color: $infoButtonBg;
268
+        border: $outlinedButtonBorder;
269
+
270
+        &:enabled:hover {
271
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
272
+            color: $infoButtonBg;
273
+            border: $outlinedButtonBorder;
274
+        }
275
+
276
+        &:enabled:active {
277
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
278
+            color: $infoButtonBg;
279
+            border: $outlinedButtonBorder;
280
+        }
281
+    }
282
+
283
+    &.p-button-text {
284
+        background-color: transparent;
285
+        color: $infoButtonBg;
286
+        border-color: transparent;
287
+
288
+        &:enabled:hover {
289
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
290
+            border-color: transparent;
291
+            color: $infoButtonBg;
292
+        }
293
+
294
+        &:enabled:active {
295
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
296
+            border-color: transparent;
297
+            color: $infoButtonBg;
298
+        }
299
+    }
300
+}
301
+
302
+.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
303
+    color: $successButtonTextColor;
304
+    background: $successButtonBg;
305
+    border: $successButtonBorder;
306
+
307
+    &:enabled:hover {
308
+        background: $successButtonHoverBg;
309
+        color: $successButtonTextHoverColor;
310
+        border-color: $successButtonHoverBorderColor;
311
+    }
312
+
313
+    &:enabled:focus {
314
+        box-shadow: $successButtonFocusShadow;
315
+    }
316
+
317
+    &:enabled:active {
318
+        background: $successButtonActiveBg;
319
+        color: $successButtonTextActiveColor;
320
+        border-color: $successButtonActiveBorderColor;
321
+    }
322
+
323
+    &.p-button-outlined {
324
+        background-color: transparent;
325
+        color: $successButtonBg;
326
+        border: $outlinedButtonBorder;
327
+
328
+        &:enabled:hover {
329
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
330
+            color: $successButtonBg;
331
+            border: $outlinedButtonBorder;
332
+        }
333
+
334
+        &:enabled:active {
335
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
336
+            color: $successButtonBg;
337
+            border: $outlinedButtonBorder;
338
+        }
339
+    }
340
+
341
+    &.p-button-text {
342
+        background-color: transparent;
343
+        color: $successButtonBg;
344
+        border-color: transparent;
345
+
346
+        &:enabled:hover {
347
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
348
+            border-color: transparent;
349
+            color: $successButtonBg;
350
+        }
351
+
352
+        &:enabled:active {
353
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
354
+            border-color: transparent;
355
+            color: $successButtonBg;
356
+        }
357
+    }
358
+}
359
+
360
+.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
361
+    color: $warningButtonTextColor;
362
+    background: $warningButtonBg;
363
+    border: $warningButtonBorder;
364
+    
365
+    &:enabled:hover {
366
+        background: $warningButtonHoverBg;
367
+        color: $warningButtonTextHoverColor;
368
+        border-color: $warningButtonHoverBorderColor;
369
+    }
370
+
371
+    &:enabled:focus {
372
+        box-shadow: $warningButtonFocusShadow;
373
+    }
374
+
375
+    &:enabled:active {
376
+        background: $warningButtonActiveBg;
377
+        color: $warningButtonTextActiveColor;
378
+        border-color: $warningButtonActiveBorderColor;
379
+    }
380
+
381
+    &.p-button-outlined {
382
+        background-color: transparent;
383
+        color: $warningButtonBg;
384
+        border: $outlinedButtonBorder;
385
+
386
+        &:enabled:hover {
387
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
388
+            color: $warningButtonBg;
389
+            border: $outlinedButtonBorder;
390
+        }
391
+
392
+        &:enabled:active {
393
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
394
+            color: $warningButtonBg;
395
+            border: $outlinedButtonBorder;
396
+        }
397
+    }
398
+
399
+    &.p-button-text {
400
+        background-color: transparent;
401
+        color: $warningButtonBg;
402
+        border-color: transparent;
403
+
404
+        &:enabled:hover {
405
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
406
+            border-color: transparent;
407
+            color: $warningButtonBg;
408
+        }
409
+
410
+        &:enabled:active {
411
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
412
+            border-color: transparent;
413
+            color: $warningButtonBg;
414
+        }
415
+    }
416
+}
417
+
418
+.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
419
+    color: $helpButtonTextColor;
420
+    background: $helpButtonBg;
421
+    border: $helpButtonBorder;
422
+
423
+    &:enabled:hover {
424
+        background: $helpButtonHoverBg;
425
+        color: $helpButtonTextHoverColor;
426
+        border-color: $helpButtonHoverBorderColor;
427
+    }
428
+
429
+    &:enabled:focus {
430
+        box-shadow: $helpButtonFocusShadow;
431
+    }
432
+
433
+    &:enabled:active {
434
+        background: $helpButtonActiveBg;
435
+        color: $helpButtonTextActiveColor;
436
+        border-color: $helpButtonActiveBorderColor;
437
+    }
438
+
439
+    &.p-button-outlined {
440
+        background-color: transparent;
441
+        color: $helpButtonBg;
442
+        border: $outlinedButtonBorder;
443
+
444
+        &:enabled:hover {
445
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
446
+            color: $helpButtonBg;
447
+            border: $outlinedButtonBorder;
448
+        }
449
+
450
+        &:enabled:active {
451
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
452
+            color: $helpButtonBg;
453
+            border: $outlinedButtonBorder;
454
+        }
455
+    }
456
+
457
+    &.p-button-text {
458
+        background-color: transparent;
459
+        color: $helpButtonBg;
460
+        border-color: transparent;
461
+
462
+        &:enabled:hover {
463
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
464
+            border-color: transparent;
465
+            color: $helpButtonBg;
466
+        }
467
+
468
+        &:enabled:active {
469
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
470
+            border-color: transparent;
471
+            color: $helpButtonBg;
472
+        }
473
+    }
474
+}
475
+
476
+.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
477
+    color: $dangerButtonTextColor;
478
+    background: $dangerButtonBg;
479
+    border: $dangerButtonBorder;
480
+
481
+    &:enabled:hover {
482
+        background: $dangerButtonHoverBg;
483
+        color: $dangerButtonTextHoverColor;
484
+        border-color: $dangerButtonHoverBorderColor;
485
+    }
486
+
487
+    &:enabled:focus {
488
+        box-shadow: $dangerButtonFocusShadow;
489
+    }
490
+
491
+    &:enabled:active {
492
+        background: $dangerButtonActiveBg;
493
+        color: $dangerButtonTextActiveColor;
494
+        border-color: $dangerButtonActiveBorderColor;
495
+    }
496
+
497
+    &.p-button-outlined {
498
+        background-color: transparent;
499
+        color: $dangerButtonBg;
500
+        border: $outlinedButtonBorder;
501
+
502
+        &:enabled:hover {
503
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
504
+            color: $dangerButtonBg;
505
+            border: $outlinedButtonBorder;
506
+        }
507
+
508
+        &:enabled:active {
509
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
510
+            color: $dangerButtonBg;
511
+            border: $outlinedButtonBorder;
512
+        }
513
+    }
514
+
515
+    &.p-button-text {
516
+        background-color: transparent;
517
+        color: $dangerButtonBg;
518
+        border-color: transparent;
519
+
520
+        &:enabled:hover {
521
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
522
+            border-color: transparent;
523
+            color: $dangerButtonBg;
524
+        }
525
+
526
+        &:enabled:active {
527
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
528
+            border-color: transparent;
529
+            color: $dangerButtonBg;
530
+        }
531
+    }
532
+}
533
+
534
+.p-button.p-button-link {
535
+    color: $linkButtonColor;
536
+    background: transparent;
537
+    border: transparent;
538
+
539
+    &:enabled:hover {
540
+        background:  transparent;
541
+        color: $linkButtonHoverColor;
542
+        border-color:  transparent;
543
+
544
+        .p-button-label {
545
+            text-decoration: $linkButtonTextHoverDecoration;
546
+        }
547
+    }
548
+
549
+    &:enabled:focus {
550
+        background: transparent;
551
+        box-shadow: $linkButtonFocusShadow;
552
+        border-color:  transparent;
553
+    }
554
+
555
+    &:enabled:active {
556
+        background:  transparent;
557
+        color: $linkButtonColor;
558
+        border-color:  transparent;
559
+    }
560
+}

+ 79
- 0
Angular/src/assets/sass/theme/designer/components/button/_speeddial.scss View File

@@ -0,0 +1,79 @@
1
+.p-speeddial-button {
2
+    &.p-button.p-button-icon-only {
3
+        width: $speedDialButtonWidth;
4
+        height: $speedDialButtonHeight;
5
+
6
+        .p-button-icon {
7
+            font-size: $speedDialButtonIconFontSize;
8
+        }
9
+    }
10
+}
11
+
12
+.p-speeddial-action {
13
+    width: $speedDialActionWidth;
14
+    height: $speedDialActionHeight;
15
+    background: $speedDialActionBg;
16
+    color: $speedDialActionTextColor;
17
+
18
+    &:hover {
19
+        background: $speedDialActionHoverBg;
20
+        color: $speedDialActionTextHoverColor;
21
+    }
22
+}
23
+
24
+.p-speeddial-direction-up {
25
+    .p-speeddial-item {
26
+        margin: $inlineSpacing/2 0;
27
+
28
+        &:first-child {
29
+            margin-bottom: $inlineSpacing;
30
+        }
31
+    }
32
+}
33
+
34
+.p-speeddial-direction-down {
35
+    .p-speeddial-item {
36
+        margin: $inlineSpacing/2 0;
37
+
38
+        &:first-child {
39
+            margin-top: $inlineSpacing;
40
+        }
41
+    }
42
+}
43
+
44
+.p-speeddial-direction-left {
45
+    .p-speeddial-item {
46
+        margin: 0 $inlineSpacing/2;
47
+
48
+        &:first-child {
49
+            margin-right: $inlineSpacing;
50
+        }
51
+    }
52
+}
53
+
54
+.p-speeddial-direction-right {
55
+    .p-speeddial-item {
56
+        margin: 0 $inlineSpacing/2;
57
+
58
+        &:first-child {
59
+            margin-left: $inlineSpacing;
60
+        }
61
+    }
62
+}
63
+
64
+.p-speeddial-circle,
65
+.p-speeddial-semi-circle,
66
+.p-speeddial-quarter-circle {
67
+    .p-speeddial-item {
68
+        margin: 0;
69
+
70
+        &:first-child,
71
+        &:last-child {
72
+            margin: 0;
73
+        }
74
+    }
75
+}
76
+
77
+.p-speeddial-mask {
78
+    background-color: $maskBg;
79
+}

+ 1
- 0
Angular/src/assets/sass/theme/designer/components/button/_splitbutton.scss View File

@@ -0,0 +1 @@
1
+.p-splitbutton {}

+ 37
- 0
Angular/src/assets/sass/theme/designer/components/data/_carousel.scss View File

@@ -0,0 +1,37 @@
1
+.p-carousel {
2
+    .p-carousel-content {
3
+        .p-carousel-prev,
4
+        .p-carousel-next {
5
+            @include action-icon();
6
+            margin: $inlineSpacing;
7
+        }
8
+    }
9
+
10
+    .p-carousel-indicators {
11
+        padding: $carouselIndicatorsPadding;
12
+
13
+        .p-carousel-indicator {
14
+            margin-right: $inlineSpacing;
15
+            margin-bottom: $inlineSpacing;
16
+           
17
+            button {
18
+                background-color: $carouselIndicatorBg;
19
+                width: $carouselIndicatorWidth;
20
+                height: $carouselIndicatorHeight;
21
+                transition: $actionIconTransition;
22
+                border-radius: $carouselIndicatorBorderRadius;
23
+
24
+                &:hover {
25
+                    background: $carouselIndicatorHoverBg;
26
+                }
27
+            }
28
+
29
+            &.p-highlight {
30
+                button {
31
+                    background: $highlightBg;
32
+                    color: $highlightTextColor;
33
+                }
34
+            }
35
+        }
36
+    }
37
+}

+ 266
- 0
Angular/src/assets/sass/theme/designer/components/data/_datatable.scss View File

@@ -0,0 +1,266 @@
1
+.p-datatable {
2
+    .p-paginator-top {
3
+        border-width: $tableTopPaginatorBorderWidth;
4
+        border-radius: 0;
5
+    }
6
+
7
+    .p-paginator-bottom {
8
+        border-width: $tableBottomPaginatorBorderWidth;
9
+        border-radius: 0;
10
+    }
11
+
12
+    .p-datatable-header {
13
+        background: $tableHeaderBg;
14
+        color: $tableHeaderTextColor;
15
+        border: $tableHeaderBorder;
16
+        border-width: $tableHeaderBorderWidth;
17
+        padding: $tableHeaderPadding;
18
+        font-weight: $tableHeaderFontWeight;
19
+    }
20
+
21
+    .p-datatable-footer {
22
+        background: $tableFooterBg;
23
+        color: $tableFooterTextColor;
24
+        border: $tableFooterBorder;
25
+        border-width: $tableFooterBorderWidth;
26
+        padding: $tableFooterPadding;
27
+        font-weight: $tableFooterFontWeight;
28
+    }
29
+
30
+    .p-datatable-thead > tr > th {
31
+        text-align: $tableCellContentAlignment;
32
+        padding: $tableHeaderCellPadding;
33
+        border: $tableHeaderCellBorder;
34
+        border-width: $tableHeaderCellBorderWidth;
35
+        font-weight: $tableHeaderCellFontWeight;
36
+        color: $tableHeaderCellTextColor;
37
+        background: $tableHeaderCellBg;
38
+        transition: $listItemTransition;
39
+    }
40
+
41
+    .p-datatable-tfoot > tr > td {
42
+        text-align: $tableCellContentAlignment;
43
+        padding: $tableFooterCellPadding;
44
+        border: $tableFooterCellBorder;
45
+        border-width: $tableFooterCellBorderWidth;
46
+        font-weight: $tableFooterCellFontWeight;
47
+        color: $tableFooterCellTextColor;
48
+        background: $tableFooterCellBg;
49
+    }
50
+
51
+    .p-sortable-column {
52
+        .p-sortable-column-icon {
53
+            color: $tableHeaderCellIconColor;
54
+            margin-left: $inlineSpacing;
55
+        }
56
+
57
+        .p-sortable-column-badge {
58
+            border-radius: 50%;
59
+            height: $tableSortableColumnBadgeSize;
60
+            min-width: $tableSortableColumnBadgeSize;
61
+            line-height: $tableSortableColumnBadgeSize;
62
+            color: $highlightTextColor;
63
+            background: $highlightBg;
64
+            margin-left: $inlineSpacing;
65
+        }
66
+
67
+        &:not(.p-highlight):hover {
68
+            background: $tableHeaderCellHoverBg;
69
+            color: $tableHeaderCellTextHoverColor;
70
+
71
+            .p-sortable-column-icon {
72
+                color: $tableHeaderCellIconHoverColor;
73
+            }
74
+        }
75
+
76
+        &.p-highlight {
77
+            background: $tableHeaderCellHighlightBg;
78
+            color: $tableHeaderCellHighlightTextColor;
79
+
80
+            .p-sortable-column-icon {
81
+                color: $tableHeaderCellHighlightTextColor;
82
+            }
83
+
84
+            &:hover {
85
+                background: $tableHeaderCellHighlightHoverBg;
86
+                color: $tableHeaderCellHighlightTextColor;
87
+    
88
+                .p-sortable-column-icon {
89
+                    color: $tableHeaderCellHighlightTextColor;
90
+                }
91
+            }
92
+        }
93
+
94
+        &:focus {
95
+            box-shadow: $inputListItemFocusShadow;
96
+            outline: 0 none;
97
+        }
98
+    }
99
+
100
+    .p-datatable-tbody {
101
+        > tr {
102
+            background: $tableBodyRowBg;
103
+            color: $tableBodyRowTextColor;
104
+            transition: $listItemTransition;
105
+            outline-color: $focusOutlineColor;
106
+
107
+            > td {
108
+                text-align: $tableCellContentAlignment;
109
+                border: $tableBodyCellBorder;
110
+                border-width: $tableBodyCellBorderWidth;
111
+                padding: $tableBodyCellPadding;
112
+
113
+                .p-row-toggler,
114
+                .p-row-editor-init,
115
+                .p-row-editor-save,
116
+                .p-row-editor-cancel {
117
+                    @include action-icon();
118
+                }
119
+
120
+                .p-row-editor-save {
121
+                    margin-right: $inlineSpacing;
122
+                }
123
+            }
124
+
125
+            &.p-highlight {
126
+                background: $highlightBg;
127
+                color: $highlightTextColor;
128
+            }
129
+
130
+            &.p-datatable-dragpoint-top > td {
131
+                box-shadow: inset 0 2px 0 0 $highlightBg;
132
+            }
133
+
134
+            &.p-datatable-dragpoint-bottom > td {
135
+                box-shadow: inset 0 -2px 0 0 $highlightBg;
136
+            }
137
+        }
138
+    }
139
+
140
+    &.p-datatable-hoverable-rows {
141
+        .p-datatable-tbody > tr:not(.p-highlight):hover {
142
+            background: $tableBodyRowHoverBg;
143
+            color: $tableBodyRowTextHoverColor;
144
+        }
145
+    }
146
+
147
+    .p-column-resizer-helper {
148
+        background: $tableResizerHelperBg;
149
+    }
150
+
151
+    .p-datatable-scrollable-header,
152
+    .p-datatable-scrollable-footer {
153
+        background: $panelHeaderBg;
154
+    }
155
+
156
+    .p-datatable-loading-icon {
157
+        font-size: $loadingIconFontSize;
158
+    }
159
+
160
+    &.p-datatable-gridlines {
161
+        .p-datatable-header {
162
+            border-width: 1px 1px 0 1px;
163
+        }
164
+
165
+        .p-datatable-footer {
166
+            border-width: 0 1px 1px 1px;
167
+        }
168
+
169
+        .p-paginator-top {
170
+            border-width: 0 1px 0 1px;
171
+        }
172
+
173
+        .p-paginator-bottom {
174
+            border-width: 0 1px 1px 1px;
175
+        }
176
+
177
+        .p-datatable-thead {
178
+            > tr {
179
+                > th {
180
+                    border-width: 1px 1px nth($tableHeaderCellBorderWidth,3) 1px;
181
+                }
182
+            }
183
+        }
184
+
185
+        .p-datatable-tbody {
186
+            > tr {
187
+                > td {
188
+                    border-width: 1px;
189
+                }
190
+            }
191
+        }
192
+
193
+        .p-datatable-tfoot {
194
+            > tr {
195
+                > td {
196
+                    border-width: 1px;
197
+                }
198
+            }
199
+        }
200
+    }
201
+
202
+    &.p-datatable-striped {
203
+        .p-datatable-tbody {
204
+            > tr:nth-child(even) {
205
+                background: $tableBodyRowEvenBg;
206
+    
207
+                &.p-highlight {
208
+                    background: $highlightBg;
209
+                    color: $highlightTextColor;
210
+    
211
+                    .p-row-toggler {
212
+                        color: $highlightTextColor;
213
+    
214
+                        &:hover {
215
+                            color: $highlightTextColor;
216
+                        }
217
+                    }
218
+                }
219
+            }
220
+        }
221
+    }
222
+
223
+    &.p-datatable-sm {
224
+        .p-datatable-header {
225
+            @include scaledPadding($tableHeaderPadding, $tableScaleSM);
226
+        }
227
+
228
+        .p-datatable-thead > tr > th {
229
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
230
+        }
231
+
232
+        .p-datatable-tbody > tr > td {
233
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
234
+        }
235
+
236
+        .p-datatable-tfoot > tr > td {
237
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
238
+        }
239
+
240
+        .p-datatable-footer {
241
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
242
+        }
243
+    }
244
+
245
+    &.p-datatable-lg {
246
+        .p-datatable-header {
247
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
248
+        }
249
+
250
+        .p-datatable-thead > tr > th {
251
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
252
+        }
253
+
254
+        .p-datatable-tbody > tr > td {
255
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
256
+        }
257
+
258
+        .p-datatable-tfoot > tr > td {
259
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
260
+        }
261
+
262
+        .p-datatable-footer {
263
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
264
+        }
265
+    }
266
+}

+ 55
- 0
Angular/src/assets/sass/theme/designer/components/data/_dataview.scss View File

@@ -0,0 +1,55 @@
1
+.p-dataview {
2
+    .p-paginator-top {
3
+        border-width: $tableTopPaginatorBorderWidth;
4
+        border-radius: 0;
5
+    }
6
+
7
+    .p-paginator-bottom {
8
+        border-width: $tableBottomPaginatorBorderWidth;
9
+        border-radius: 0;
10
+    }
11
+
12
+    .p-dataview-header {
13
+        background: $tableHeaderBg;
14
+        color: $tableHeaderTextColor;
15
+        border: $tableHeaderBorder;
16
+        border-width: $tableHeaderBorderWidth;
17
+        padding: $tableHeaderPadding;
18
+        font-weight: $tableHeaderFontWeight;
19
+    }
20
+
21
+    .p-dataview-content {
22
+        background: $tableBodyRowBg;
23
+        color: $tableBodyRowTextColor;
24
+        border: $dataViewContentBorder;
25
+        padding: $dataViewContentPadding;
26
+    }
27
+
28
+    &.p-dataview-list {
29
+        .p-dataview-content {
30
+            > .p-grid > div {
31
+                border: $dataViewListItemBorder;
32
+                border-width: $dataViewListItemBorderWidth;
33
+            }
34
+        }
35
+    }
36
+
37
+    .p-dataview-footer {
38
+        background: $tableFooterBg;
39
+        color: $tableFooterTextColor;
40
+        border: $tableFooterBorder;
41
+        border-width: $tableFooterBorderWidth;
42
+        padding: $tableFooterPadding;
43
+        font-weight: $tableFooterFontWeight;
44
+        border-bottom-left-radius: $borderRadius;
45
+        border-bottom-right-radius: $borderRadius;
46
+    }
47
+
48
+    .p-dataview-loading-icon {
49
+        font-size: $loadingIconFontSize;
50
+    }
51
+
52
+    .p-dataview-emptymessage {
53
+        padding: $panelContentPadding;
54
+    }
55
+}

+ 138
- 0
Angular/src/assets/sass/theme/designer/components/data/_filter.scss View File

@@ -0,0 +1,138 @@
1
+.p-column-filter-row {
2
+    .p-column-filter-menu-button,
3
+    .p-column-filter-clear-button {
4
+        margin-left: $inlineSpacing;
5
+    }
6
+}
7
+
8
+.p-column-filter-menu-button {
9
+    width: $actionIconWidth;
10
+    height: $actionIconHeight;
11
+    color: $actionIconColor;
12
+    border: $actionIconBorder;
13
+    background: $actionIconBg;
14
+    border-radius: $actionIconBorderRadius;
15
+    transition: $actionIconTransition;
16
+
17
+    &:hover {
18
+        color: $actionIconHoverColor;
19
+        border-color: $actionIconHoverBorderColor;
20
+        background: $actionIconHoverBg;
21
+    }
22
+
23
+    &.p-column-filter-menu-button-open,
24
+    &.p-column-filter-menu-button-open:hover {
25
+        background: $actionIconHoverBg;
26
+        color: $actionIconHoverColor;
27
+    }
28
+
29
+    &.p-column-filter-menu-button-active,
30
+    &.p-column-filter-menu-button-active:hover {
31
+        background: $highlightBg;
32
+        color: $highlightTextColor;
33
+    }
34
+
35
+    &:focus {
36
+        @include focused();
37
+    }
38
+
39
+}
40
+
41
+.p-column-filter-clear-button {
42
+    width: $actionIconWidth;
43
+    height: $actionIconHeight;
44
+    color: $actionIconColor;
45
+    border: $actionIconBorder;
46
+    background: $actionIconBg;
47
+    border-radius: $actionIconBorderRadius;
48
+    transition: $actionIconTransition;
49
+
50
+    &:hover {
51
+        color: $actionIconHoverColor;
52
+        border-color: $actionIconHoverBorderColor;
53
+        background: $actionIconHoverBg;
54
+    }
55
+
56
+    &:focus {
57
+        @include focused();
58
+    }
59
+}
60
+
61
+.p-column-filter-overlay {
62
+    background: $inputOverlayBg;
63
+    color: $inputListTextColor;
64
+    border: $inputOverlayBorder;
65
+    border-radius: $borderRadius;
66
+    box-shadow: $inputOverlayShadow;
67
+    min-width: $menuWidth;
68
+
69
+    .p-column-filter-row-items {
70
+        padding: $inputListPadding;
71
+
72
+        .p-column-filter-row-item {
73
+            margin: $inputListItemMargin;
74
+            padding: $inputListItemPadding;
75
+            border: $inputListItemBorder;
76
+            color: $inputListItemTextColor;
77
+            background: $inputListItemBg;
78
+            transition: $listItemTransition;
79
+            border-radius: $inputListItemBorderRadius;
80
+
81
+            &.p-highlight {
82
+                color: $highlightTextColor;
83
+                background: $highlightBg;
84
+            }
85
+
86
+            &:not(.p-highlight):not(.p-disabled):hover {
87
+                color: $inputListItemTextHoverColor;
88
+                background: $inputListItemHoverBg;
89
+            }
90
+
91
+            &:focus {
92
+                @include focused-listitem();
93
+            }
94
+        }
95
+
96
+        .p-column-filter-separator {
97
+            border-top: $divider;
98
+            margin: $menuSeparatorMargin;
99
+        }
100
+    }
101
+}
102
+
103
+.p-column-filter-overlay-menu {
104
+    .p-column-filter-operator {
105
+        padding: $inputListHeaderPadding;
106
+        border-bottom: $inputListHeaderBorder;
107
+        color: $inputListHeaderTextColor;
108
+        background: $inputOverlayHeaderBg;
109
+        margin: $inputListHeaderMargin;
110
+        border-top-right-radius: $borderRadius;
111
+        border-top-left-radius: $borderRadius;
112
+    }
113
+
114
+    .p-column-filter-constraint {
115
+        padding: $panelContentPadding;
116
+        border-bottom: $divider;
117
+
118
+        .p-column-filter-matchmode-dropdown {
119
+            margin-bottom: $inlineSpacing;
120
+        }
121
+
122
+        .p-column-filter-remove-button {
123
+            margin-top: $inlineSpacing;
124
+        }
125
+
126
+        &:last-child {
127
+            border-bottom: 0 none;
128
+        }
129
+    }
130
+
131
+    .p-column-filter-add-rule {
132
+        padding: $panelFooterPadding;
133
+    }
134
+
135
+    .p-column-filter-buttonbar {
136
+        padding: $panelContentPadding;
137
+    } 
138
+}

+ 324
- 0
Angular/src/assets/sass/theme/designer/components/data/_fullcalendar.scss View File

@@ -0,0 +1,324 @@
1
+.fc {
2
+    /* FullCalendar 4 */
3
+    &.fc-unthemed {
4
+        .fc-view-container {
5
+            th {
6
+                background: $panelHeaderBg;
7
+                border: $panelHeaderBorder;
8
+                color: $panelHeaderTextColor;
9
+            }
10
+
11
+            td {
12
+                &.fc-widget-content {
13
+                    background: $panelContentBg;
14
+                    border: $panelContentBorder;
15
+                    color: $panelContentTextColor;
16
+                }
17
+
18
+                &.fc-head-container {
19
+                    border: $panelHeaderBorder;
20
+                }
21
+            }
22
+
23
+            .fc-row {
24
+                border-right: $panelHeaderBorder;
25
+            }
26
+
27
+            .fc-event {
28
+                background: $fullCalendarEventBg;
29
+                border: $fullCalendarEventBorder;
30
+                color: $fullCalendarEventTextColor;
31
+            }
32
+
33
+            .fc-divider {
34
+                background: $panelHeaderBg;
35
+                border: $panelHeaderBorder;
36
+            }
37
+        }
38
+
39
+        .fc-toolbar {
40
+            .fc-button {
41
+                color: $buttonTextColor;
42
+                background: $buttonBg;
43
+                border: $buttonBorder;
44
+                font-size: $fontSize;
45
+                transition: $formElementTransition;
46
+                border-radius: $borderRadius;
47
+                display: flex;
48
+                align-items: center;
49
+
50
+                &:enabled:hover {
51
+                    background: $buttonHoverBg;
52
+                    color: $buttonTextHoverColor;
53
+                    border-color: $buttonHoverBorderColor;
54
+                }
55
+
56
+                &:enabled:active {
57
+                    background: $buttonActiveBg;
58
+                    color: $buttonTextActiveColor;
59
+                    border-color: $buttonActiveBorderColor;
60
+
61
+                    &:focus {
62
+                        @include focused();
63
+                    }
64
+                }
65
+
66
+                .fc-icon-chevron-left {
67
+                    font-family: "PrimeIcons" !important;
68
+                    text-indent: 0;
69
+                    @include icon_override("\e900");
70
+                    font-size: $primeIconFontSize;
71
+                }
72
+
73
+                .fc-icon-chevron-right {
74
+                    font-family: "PrimeIcons" !important;
75
+                    text-indent: 0;
76
+                    @include icon_override("\e901");
77
+                    font-size: $primeIconFontSize;
78
+                }
79
+
80
+                &:focus {
81
+                    @include focused();
82
+                }
83
+
84
+                &.fc-dayGridMonth-button,
85
+                &.fc-timeGridWeek-button,
86
+                &.fc-timeGridDay-button {
87
+                    background: $toggleButtonBg;
88
+                    border: $toggleButtonBorder;
89
+                    color: $toggleButtonTextColor;
90
+                    transition: $formElementTransition;
91
+
92
+                    &:hover {
93
+                        background: $toggleButtonHoverBg;
94
+                        border-color: $toggleButtonHoverBorderColor;
95
+                        color: $toggleButtonTextHoverColor;
96
+                    }
97
+
98
+                    &.fc-button-active {
99
+                        background: $toggleButtonActiveBg;
100
+                        border-color: $toggleButtonActiveBorderColor;
101
+                        color: $toggleButtonTextActiveColor;
102
+
103
+                        &:hover {
104
+                            background: $toggleButtonActiveHoverBg;
105
+                            border-color: $toggleButtonActiveHoverBorderColor;
106
+                            color: $toggleButtonTextActiveHoverColor;
107
+                        }
108
+                    }
109
+
110
+                    &:focus {
111
+                        @include focused();
112
+                        z-index: 1;
113
+                    }
114
+                }
115
+            }
116
+
117
+            .fc-button-group {
118
+                .fc-button {
119
+                    border-radius: 0;
120
+
121
+                    &:first-child {
122
+                        border-top-left-radius: $borderRadius;
123
+                        border-bottom-left-radius: $borderRadius;
124
+                    }
125
+
126
+                    &:last-child {
127
+                        border-top-right-radius: $borderRadius;
128
+                        border-bottom-right-radius: $borderRadius;
129
+                    }
130
+                }
131
+            }
132
+        }
133
+    }
134
+
135
+    /* FullCalendar 5 */
136
+    &.fc-theme-standard {
137
+        .fc-view-harness {
138
+            .fc-scrollgrid {
139
+                border-color: $panelContentBorderColor;
140
+            }
141
+
142
+            th {
143
+                background: $panelHeaderBg;
144
+                border-color: $panelHeaderBorderColor;
145
+                color: $panelHeaderTextColor;
146
+            }
147
+
148
+            td {
149
+                color: $panelContentTextColor;
150
+                border-color: $panelContentBorderColor;
151
+            }
152
+
153
+            .fc-view {
154
+                background: $panelContentBg;
155
+            }
156
+
157
+            .fc-popover {
158
+                background: none;
159
+                border: 0 none;
160
+
161
+                .fc-popover-header {
162
+                    border: $panelHeaderBorder;
163
+                    padding: $panelHeaderPadding;
164
+                    background: $panelHeaderBg;
165
+                    color: $panelHeaderTextColor;
166
+
167
+                    .fc-popover-close {
168
+                        opacity: 1;
169
+                        display: flex;
170
+                        align-items: center;
171
+                        justify-content: center;
172
+                        overflow: hidden;
173
+                        font-family: "PrimeIcons" !important;
174
+                        @include icon_override("\e90b");
175
+                        font-size: $primeIconFontSize;
176
+                        @include action-icon(false);
177
+                    }
178
+                }
179
+
180
+                .fc-popover-body {
181
+                    padding: $panelContentPadding;
182
+                    border: $panelContentBorder;
183
+                    background: $panelContentBg;
184
+                    color: $panelContentTextColor;
185
+                    border-top: 0 none;
186
+                }
187
+            }
188
+
189
+            .fc-event {
190
+                &.fc-daygrid-block-event {
191
+                    color: $fullCalendarEventTextColor;
192
+                    background: $fullCalendarEventBg;
193
+                    border-color: $fullCalendarEventBorderColor;
194
+
195
+                    .fc-event-main {
196
+                        color: $fullCalendarEventTextColor;
197
+                    }
198
+                }
199
+
200
+                &.fc-daygrid-dot-event {
201
+                    .fc-daygrid-event-dot {
202
+                        background: $fullCalendarEventBg;
203
+                        border-color: $fullCalendarEventBorderColor;
204
+                    }
205
+
206
+                    &:hover {
207
+                        background: $inputListItemHoverBg;
208
+                        color: $inputListItemTextHoverColor;
209
+                    }
210
+                }
211
+            }
212
+
213
+            .fc-cell-shaded {
214
+                background: $panelHeaderBg;
215
+            }
216
+        }
217
+
218
+        .fc-toolbar {
219
+            .fc-button {
220
+                color: $buttonTextColor;
221
+                background: $buttonBg;
222
+                border: $buttonBorder;
223
+                font-size: $fontSize;
224
+                transition: $formElementTransition;
225
+                border-radius: $borderRadius;
226
+
227
+                &:enabled:hover {
228
+                    background: $buttonHoverBg;
229
+                    color: $buttonTextHoverColor;
230
+                    border-color: $buttonHoverBorderColor;
231
+                }
232
+
233
+                &:enabled:active {
234
+                    background: $buttonActiveBg;
235
+                    color: $buttonTextActiveColor;
236
+                    border-color: $buttonActiveBorderColor;
237
+
238
+                    &:focus {
239
+                        @include focused();
240
+                    }
241
+                }
242
+
243
+                &:disabled {
244
+                    opacity: $disabledOpacity;
245
+                    color: $buttonTextColor;
246
+                    background: $buttonBg;
247
+                    border: $buttonBorder;
248
+                }
249
+
250
+                .fc-icon-chevron-left {
251
+                    font-family: "PrimeIcons" !important;
252
+                    text-indent: 0;
253
+                    @include icon_override("\e900");
254
+                    font-size: $primeIconFontSize;
255
+                }
256
+
257
+                .fc-icon-chevron-right {
258
+                    font-family: "PrimeIcons" !important;
259
+                    text-indent: 0;
260
+                    @include icon_override("\e901");
261
+                    font-size: $primeIconFontSize;
262
+                }
263
+
264
+                &:focus {
265
+                    @include focused();
266
+                }
267
+
268
+                &.fc-dayGridMonth-button,
269
+                &.fc-timeGridWeek-button,
270
+                &.fc-timeGridDay-button {
271
+                    background: $toggleButtonBg;
272
+                    border: $toggleButtonBorder;
273
+                    color: $toggleButtonTextColor;
274
+                    transition: $formElementTransition;
275
+
276
+                    &:hover {
277
+                        background: $toggleButtonHoverBg;
278
+                        border-color: $toggleButtonHoverBorderColor;
279
+                        color: $toggleButtonTextHoverColor;
280
+                    }
281
+
282
+                    &.fc-button-active {
283
+                        background: $toggleButtonActiveBg;
284
+                        border-color: $toggleButtonActiveBorderColor;
285
+                        color: $toggleButtonTextActiveColor;
286
+
287
+                        &:hover {
288
+                            background: $toggleButtonActiveHoverBg;
289
+                            border-color: $toggleButtonActiveHoverBorderColor;
290
+                            color: $toggleButtonTextActiveHoverColor;
291
+                        }
292
+                    }
293
+
294
+                    &:not(:disabled) {
295
+                        &:focus {
296
+                            @include focused();
297
+                            z-index: 1;
298
+                        }
299
+                    }
300
+                }
301
+            }
302
+
303
+            .fc-button-group {
304
+                .fc-button {
305
+                    border-radius: 0;
306
+
307
+                    &:first-child {
308
+                        border-top-left-radius: $borderRadius;
309
+                        border-bottom-left-radius: $borderRadius;
310
+                    }
311
+
312
+                    &:last-child {
313
+                        border-top-right-radius: $borderRadius;
314
+                        border-bottom-right-radius: $borderRadius;
315
+                    }
316
+                }
317
+            }
318
+        }
319
+
320
+        a {
321
+            color: $textColor;
322
+        }
323
+    }
324
+}

+ 91
- 0
Angular/src/assets/sass/theme/designer/components/data/_orderlist.scss View File

@@ -0,0 +1,91 @@
1
+.p-orderlist {
2
+    .p-orderlist-controls {
3
+        padding: $panelContentPadding;
4
+
5
+        .p-button {
6
+            margin-bottom: $inlineSpacing;
7
+        }
8
+    }
9
+
10
+    .p-orderlist-header {
11
+        background: $panelHeaderBg;
12
+        color: $panelHeaderTextColor;
13
+        border: $panelHeaderBorder;
14
+        padding: $panelHeaderPadding;
15
+        border-bottom: 0 none;
16
+        border-top-right-radius: $borderRadius;
17
+        border-top-left-radius: $borderRadius;
18
+
19
+        .p-orderlist-title {
20
+            font-weight: $panelHeaderFontWeight;
21
+        }
22
+    }
23
+
24
+    .p-orderlist-filter-container {
25
+        padding: $panelHeaderPadding;
26
+        background: $panelContentBg;
27
+        border: $panelHeaderBorder;
28
+        border-bottom: 0 none;
29
+
30
+        .p-orderlist-filter-input {
31
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
32
+        }
33
+
34
+        .p-orderlist-filter-icon {
35
+            right: nth($inputPadding, 2);
36
+            color: $inputIconColor;
37
+        }
38
+    }      
39
+
40
+    .p-orderlist-list {
41
+        border: $panelContentBorder;
42
+        background: $panelContentBg;
43
+        color: $panelContentTextColor;
44
+        padding: $inputListPadding;
45
+        border-bottom-right-radius: $borderRadius;
46
+        border-bottom-left-radius: $borderRadius;
47
+
48
+        .p-orderlist-item {
49
+            padding: $inputListItemPadding;
50
+            margin: $inputListItemMargin;
51
+            border: $inputListItemBorder;
52
+            color: $inputListItemTextColor;
53
+            background: $inputListItemBg;
54
+            transition: $listItemTransition;
55
+
56
+            &:focus {
57
+                @include focused-listitem();
58
+            }
59
+
60
+            &.p-highlight {
61
+                color: $highlightTextColor;
62
+                background: $highlightBg;
63
+            }
64
+        }
65
+
66
+        .p-orderlist-empty-message {
67
+            padding: $inputListItemPadding;
68
+            color: $inputListItemTextColor;
69
+        }
70
+
71
+        &:not(.cdk-drop-list-dragging) {
72
+            .p-orderlist-item {
73
+                &:not(.p-highlight):hover {
74
+                    background: $inputListItemHoverBg;
75
+                    color: $inputListItemTextHoverColor;
76
+                }
77
+            }
78
+        }
79
+    }
80
+}
81
+
82
+.p-orderlist-item {
83
+    &.cdk-drag-preview {
84
+        padding: $inputListItemPadding;
85
+        box-shadow: $inputOverlayShadow;
86
+        border: $inputListItemBorder;
87
+        color: $inputListItemTextColor;
88
+        background: $panelContentBg;
89
+        margin: 0;
90
+    }
91
+}

+ 50
- 0
Angular/src/assets/sass/theme/designer/components/data/_organizationchart.scss View File

@@ -0,0 +1,50 @@
1
+.p-organizationchart {
2
+    .p-organizationchart-node-content {
3
+        &.p-organizationchart-selectable-node:not(.p-highlight):hover {
4
+            background: $inputListItemHoverBg;
5
+            color: $inputListItemTextHoverColor;
6
+        }
7
+
8
+        &.p-highlight {
9
+            background: $highlightBg;
10
+            color: $highlightTextColor;
11
+
12
+            .p-node-toggler {
13
+                i {
14
+                    color: darken($highlightBg, 25%);
15
+                }
16
+            }
17
+        }
18
+    }
19
+
20
+    .p-organizationchart-line-down {
21
+        background: $organizationChartConnectorColor;
22
+    }
23
+
24
+    .p-organizationchart-line-left {
25
+        border-right: $panelContentBorder;
26
+        border-color: $organizationChartConnectorColor;
27
+    }
28
+
29
+    .p-organizationchart-line-top {
30
+        border-top: $panelContentBorder;
31
+        border-color: $organizationChartConnectorColor;
32
+    }
33
+
34
+    .p-organizationchart-node-content {
35
+        border: $panelContentBorder;
36
+        background: $panelContentBg;
37
+        color: $panelContentTextColor;
38
+        padding: $panelContentPadding;
39
+    }
40
+
41
+    .p-organizationchart-node-content .p-node-toggler {
42
+        background: inherit;
43
+        color: inherit;
44
+        border-radius: 50%;
45
+
46
+        &:focus {
47
+            @include focused();
48
+        }
49
+    }
50
+}

+ 92
- 0
Angular/src/assets/sass/theme/designer/components/data/_paginator.scss View File

@@ -0,0 +1,92 @@
1
+.p-paginator {
2
+    background: $paginatorBg;
3
+    color: $paginatorTextColor;
4
+    border: $paginatorBorder;
5
+    border-width: $paginatorBorderWidth;
6
+    padding: $paginatorPadding;
7
+    border-radius: $borderRadius;
8
+
9
+    .p-paginator-first,
10
+    .p-paginator-prev,
11
+    .p-paginator-next,
12
+    .p-paginator-last {
13
+        background-color: $paginatorElementBg;
14
+        border: $paginatorElementBorder;
15
+        color: $paginatorElementIconColor;
16
+        min-width: $paginatorElementWidth;
17
+        height: $paginatorElementHeight;
18
+        margin: $paginatorElementMargin;
19
+        transition: $listItemTransition;
20
+        border-radius: $paginatorElementBorderRadius;
21
+
22
+        &:not(.p-disabled):not(.p-highlight):hover {
23
+            background: $paginatorElementHoverBg;
24
+            border-color: $paginatorElementHoverBorderColor;
25
+            color: $paginatorElementIconHoverColor;
26
+        }
27
+    }
28
+
29
+    .p-paginator-first {
30
+        border-top-left-radius: $borderRadius;
31
+        border-bottom-left-radius: $borderRadius;
32
+    }
33
+
34
+    .p-paginator-last {
35
+        border-top-right-radius: $borderRadius;
36
+        border-bottom-right-radius: $borderRadius;
37
+    }
38
+
39
+    .p-dropdown {
40
+        margin-left: $inlineSpacing;
41
+        margin-right: $inlineSpacing;
42
+        height: $paginatorElementHeight;
43
+
44
+        .p-dropdown-label {
45
+            padding-right: 0;
46
+        }
47
+    }
48
+
49
+    .p-paginator-page-input {
50
+        margin-left: $inlineSpacing;
51
+        margin-right: $inlineSpacing;
52
+
53
+        .p-inputtext {
54
+            max-width: $paginatorElementWidth;
55
+        }
56
+    }
57
+
58
+    .p-paginator-current {
59
+        background-color: $paginatorElementBg;
60
+        border: $paginatorElementBorder;
61
+        color: $paginatorElementIconColor;
62
+        min-width: $paginatorElementWidth;
63
+        height: $paginatorElementHeight;
64
+        margin: $paginatorElementMargin;
65
+        padding: 0 $inlineSpacing;
66
+    }
67
+
68
+    .p-paginator-pages {
69
+        .p-paginator-page {
70
+            background-color: $paginatorElementBg;
71
+            border: $paginatorElementBorder;
72
+            color: $paginatorElementIconColor;
73
+            min-width: $paginatorElementWidth;
74
+            height: $paginatorElementHeight;
75
+            margin: $paginatorElementMargin;
76
+            transition: $listItemTransition;
77
+            border-radius: $paginatorElementBorderRadius;
78
+
79
+            &.p-highlight {
80
+                background: $highlightBg;
81
+                border-color: $highlightBg;
82
+                color: $highlightTextColor;
83
+            }
84
+
85
+            &:not(.p-highlight):hover {
86
+                background: $paginatorElementHoverBg;
87
+                border-color: $paginatorElementHoverBorderColor;
88
+                color: $paginatorElementIconHoverColor;
89
+            }
90
+        }
91
+    }
92
+}

+ 91
- 0
Angular/src/assets/sass/theme/designer/components/data/_picklist.scss View File

@@ -0,0 +1,91 @@
1
+.p-picklist {
2
+    .p-picklist-buttons {
3
+        padding: $panelContentPadding;
4
+
5
+        .p-button {
6
+            margin-bottom: $inlineSpacing;
7
+        }
8
+    }
9
+
10
+    .p-picklist-header {
11
+        background: $panelHeaderBg;
12
+        color: $panelHeaderTextColor;
13
+        border: $panelHeaderBorder;
14
+        padding: $panelHeaderPadding;
15
+        border-bottom: 0 none;
16
+        border-top-right-radius: $borderRadius;
17
+        border-top-left-radius: $borderRadius;
18
+
19
+        .p-picklist-title {
20
+            font-weight: $panelHeaderFontWeight;
21
+        }
22
+    }
23
+
24
+    .p-picklist-filter-container {
25
+        padding: $panelHeaderPadding;
26
+        background: $panelContentBg;
27
+        border: $panelHeaderBorder;
28
+        border-bottom: 0 none;
29
+
30
+        .p-picklist-filter-input {
31
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
32
+        }
33
+
34
+        .p-picklist-filter-icon {
35
+            right: nth($inputPadding, 2);
36
+            color: $inputIconColor;
37
+        }
38
+    }
39
+
40
+    .p-picklist-list {
41
+        border: $panelContentBorder;
42
+        background: $panelContentBg;
43
+        color: $panelContentTextColor;
44
+        padding: $inputListPadding;
45
+        border-bottom-right-radius: $borderRadius;
46
+        border-bottom-left-radius: $borderRadius;
47
+
48
+        .p-picklist-item {
49
+            padding: $inputListItemPadding;
50
+            margin: $inputListItemMargin;
51
+            border: $inputListItemBorder;
52
+            color: $inputListItemTextColor;
53
+            background: $inputListItemBg;
54
+            transition: $listItemTransition;
55
+
56
+            &:focus {
57
+                @include focused-listitem();
58
+            }
59
+
60
+            &.p-highlight {
61
+                color: $highlightTextColor;
62
+                background: $highlightBg;
63
+            }
64
+        }
65
+
66
+        .p-picklist-empty-message {
67
+            padding: $inputListItemPadding;
68
+            color: $inputListItemTextColor;
69
+        }
70
+
71
+        &:not(.cdk-drop-list-dragging) {
72
+            .p-picklist-item {
73
+                &:not(.p-highlight):hover {
74
+                    background: $inputListItemHoverBg;
75
+                    color: $inputListItemTextHoverColor;
76
+                }
77
+            }
78
+        }
79
+    }
80
+}
81
+
82
+.p-picklist-item {
83
+    &.cdk-drag-preview {
84
+        padding: $inputListItemPadding;
85
+        box-shadow: $inputOverlayShadow;
86
+        border: $inputListItemBorder;
87
+        color: $inputListItemTextColor;
88
+        background: $panelContentBg;
89
+        margin: 0;
90
+    }
91
+}

+ 38
- 0
Angular/src/assets/sass/theme/designer/components/data/_timeline.scss View File

@@ -0,0 +1,38 @@
1
+.p-timeline {
2
+    .p-timeline-event-marker {
3
+        border: $timelineEventMarkerBorder; 
4
+        border-radius: $timelineEventMarkerBorderRadius;
5
+        width: $timelineEventMarkerWidth;
6
+        height: $timelineEventMarkerHeight;
7
+        background-color: $timelineEventMarkerBackground;
8
+    }
9
+
10
+    .p-timeline-event-connector {
11
+        background-color: $timelineEventColor;
12
+    }
13
+
14
+    &.p-timeline-vertical {
15
+        .p-timeline-event-opposite,
16
+        .p-timeline-event-content  {
17
+            padding: $timelineVerticalEventContentPadding;
18
+        }
19
+
20
+        .p-timeline-event-connector {
21
+            width: $timelineEventConnectorSize;
22
+        }
23
+    }
24
+
25
+    &.p-timeline-horizontal {
26
+        .p-timeline-event-opposite,
27
+        .p-timeline-event-content  {
28
+            padding: $timelineHorizontalEventContentPadding;
29
+        }
30
+
31
+        .p-timeline-event-connector {
32
+            height: $timelineEventConnectorSize;
33
+        }
34
+    }
35
+}
36
+
37
+
38
+

+ 144
- 0
Angular/src/assets/sass/theme/designer/components/data/_tree.scss View File

@@ -0,0 +1,144 @@
1
+.p-tree {
2
+    border: $panelContentBorder;
3
+    background: $panelContentBg;
4
+    color: $panelContentTextColor;
5
+    padding: $panelContentPadding;
6
+    border-radius: $borderRadius;
7
+
8
+    .p-tree-container {
9
+        .p-treenode {
10
+            padding: $treeNodePadding;
11
+
12
+            .p-treenode-content {
13
+                border-radius: $borderRadius;
14
+                transition: $listItemTransition;
15
+                padding: $treeNodeContentPadding;
16
+
17
+                .p-tree-toggler {
18
+                    margin-right: $inlineSpacing;
19
+                    @include action-icon();
20
+                }
21
+
22
+                .p-treenode-icon {
23
+                    margin-right: $inlineSpacing;
24
+                    color: $treeNodeIconColor;
25
+                }
26
+
27
+                .p-checkbox {
28
+                    margin-right: $inlineSpacing;
29
+
30
+                    .p-indeterminate {
31
+                        .p-checkbox-icon {
32
+                            color: $textColor;
33
+                        }
34
+                    }
35
+                }
36
+
37
+                &:focus {
38
+                    @include focused();
39
+                }
40
+
41
+                &.p-highlight {
42
+                    background: $highlightBg;
43
+                    color: $highlightTextColor;
44
+
45
+                    .p-tree-toggler,
46
+                    .p-treenode-icon {
47
+                        color: $highlightTextColor;
48
+
49
+                        &:hover {
50
+                            color: $highlightTextColor;
51
+                        }
52
+                    }
53
+                }
54
+
55
+                &.p-treenode-selectable:not(.p-highlight):hover {
56
+                    background: $inputListItemHoverBg;
57
+                    color: $inputListItemTextHoverColor;
58
+                }
59
+
60
+                &.p-treenode-dragover {
61
+                    background: $inputListItemHoverBg;
62
+                    color: $inputListItemTextHoverColor;
63
+                }
64
+            }
65
+        }
66
+    }
67
+
68
+    .p-tree-filter-container {
69
+        margin-bottom: $inlineSpacing;
70
+
71
+        .p-tree-filter {
72
+            width: 100%;
73
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
74
+        }
75
+
76
+        .p-tree-filter-icon {
77
+            right: nth($inputPadding, 2);
78
+            color: $inputIconColor;
79
+        }
80
+    }
81
+
82
+    .p-treenode-children {
83
+        padding: $treeNodeChildrenPadding;
84
+    }
85
+
86
+    .p-tree-loading-icon {
87
+        font-size: $loadingIconFontSize;
88
+    }
89
+
90
+    .p-treenode-droppoint {
91
+        &.p-treenode-droppoint-active {
92
+            background-color: scale-color($highlightBg, $lightness: -20%);
93
+        }
94
+    } 
95
+
96
+    &.p-tree-horizontal {
97
+        .p-treenode {
98
+            .p-treenode-content {
99
+                border-radius: $borderRadius;
100
+                border: $panelContentBorder;
101
+                background-color: $panelContentBg;
102
+                color: $panelContentTextColor;
103
+                padding: $treeNodeContentPadding;
104
+                transition: $listItemTransition;
105
+
106
+                &.p-highlight {
107
+                    background-color: $highlightBg;
108
+                    color: $highlightTextColor;
109
+
110
+                    .p-treenode-icon {
111
+                        color: $highlightTextColor;
112
+                    }
113
+                }
114
+
115
+                .p-tree-toggler {
116
+                    margin-right: $inlineSpacing;
117
+                }
118
+
119
+                .p-treenode-icon {
120
+                    color: $treeNodeIconColor;
121
+                    margin-right: $inlineSpacing;
122
+                }
123
+
124
+                .p-checkbox {
125
+                    margin-right: $inlineSpacing;
126
+                }
127
+
128
+                .p-treenode-label:not(.p-highlight):hover {
129
+                    background-color: inherit;
130
+                    color: inherit;
131
+                }
132
+
133
+                &.p-treenode-selectable:not(.p-highlight):hover {
134
+                    background: $inputListItemHoverBg;
135
+                    color: $inputListItemTextHoverColor;
136
+                }
137
+                
138
+                &:focus {
139
+                    @include focused();
140
+                }
141
+            }
142
+        }
143
+    }
144
+}

+ 242
- 0
Angular/src/assets/sass/theme/designer/components/data/_treetable.scss View File

@@ -0,0 +1,242 @@
1
+.p-treetable {
2
+    .p-paginator-top {
3
+        border-width: $tableTopPaginatorBorderWidth;
4
+        border-radius: 0;
5
+    }
6
+
7
+    .p-paginator-bottom {
8
+        border-width: $tableBottomPaginatorBorderWidth;
9
+        border-radius: 0;
10
+    }
11
+
12
+   .p-treetable-header {
13
+        background: $tableHeaderBg;
14
+        color: $tableHeaderTextColor;
15
+        border: $tableHeaderBorder;
16
+        border-width: $tableHeaderBorderWidth;
17
+        padding: $tableHeaderPadding;
18
+        font-weight: $tableHeaderFontWeight;
19
+    }
20
+
21
+    .p-treetable-footer {
22
+        background: $tableFooterBg;
23
+        color: $tableFooterTextColor;
24
+        border: $tableFooterBorder;
25
+        border-width: $tableFooterBorderWidth;
26
+        padding: $tableFooterPadding;
27
+        font-weight: $tableFooterFontWeight;
28
+    }
29
+
30
+    .p-treetable-thead > tr > th {
31
+        text-align: $tableCellContentAlignment;
32
+        padding: $tableHeaderCellPadding;
33
+        border: $tableHeaderCellBorder;
34
+        border-width: $tableHeaderCellBorderWidth;
35
+        font-weight: $tableHeaderCellFontWeight;
36
+        color: $tableHeaderCellTextColor;
37
+        background: $tableHeaderCellBg;
38
+        transition: $listItemTransition;
39
+    }
40
+
41
+    .p-treetable-tfoot > tr > td {
42
+        text-align: $tableCellContentAlignment;
43
+        padding: $tableFooterCellPadding;
44
+        border: $tableFooterCellBorder;
45
+        border-width: $tableFooterCellBorderWidth;
46
+        font-weight: $tableFooterCellFontWeight;
47
+        color: $tableFooterCellTextColor;
48
+        background: $tableFooterCellBg;
49
+    }
50
+
51
+    .p-sortable-column {
52
+        outline-color: $focusOutlineColor;
53
+
54
+        .p-sortable-column-icon {
55
+            color: $tableHeaderCellIconColor;
56
+            margin-left: $inlineSpacing;
57
+        }
58
+
59
+        .p-sortable-column-badge {
60
+            border-radius: 50%;
61
+            height: $tableSortableColumnBadgeSize;
62
+            min-width: $tableSortableColumnBadgeSize;
63
+            line-height: $tableSortableColumnBadgeSize;
64
+            color: $highlightTextColor;
65
+            background: $highlightBg;
66
+            margin-left: $inlineSpacing;
67
+        }
68
+
69
+        &:not(.p-highlight):hover {
70
+            background: $tableHeaderCellHoverBg;
71
+            color: $tableHeaderCellTextHoverColor;
72
+
73
+            .p-sortable-column-icon {
74
+                color: $tableHeaderCellIconHoverColor;
75
+            }
76
+        }
77
+
78
+        &.p-highlight {
79
+            background: $tableHeaderCellHighlightBg;
80
+            color: $tableHeaderCellHighlightTextColor;
81
+
82
+            .p-sortable-column-icon {
83
+                color: $tableHeaderCellHighlightTextColor;
84
+            }
85
+        }
86
+    }
87
+
88
+    .p-treetable-tbody {
89
+        > tr {
90
+            background: $tableBodyRowBg;
91
+            color: $tableBodyRowTextColor;
92
+            transition: $listItemTransition;
93
+            outline-color: $focusOutlineColor;
94
+
95
+            > td {
96
+                text-align: $tableCellContentAlignment;
97
+                border: $tableBodyCellBorder;
98
+                border-width: $tableBodyCellBorderWidth;
99
+                padding: $tableBodyCellPadding;
100
+
101
+                .p-treetable-toggler {
102
+                    @include action-icon();
103
+                    margin-right: $inlineSpacing;
104
+                }
105
+
106
+                p-treetablecheckbox .p-checkbox {
107
+                    margin-right: $inlineSpacing;
108
+                    
109
+                    .p-indeterminate {
110
+                        .p-checkbox-icon {
111
+                            color: $textColor;
112
+                        }
113
+                    }
114
+                }
115
+            }
116
+
117
+            &.p-highlight {
118
+                background: $highlightBg;
119
+                color: $highlightTextColor;
120
+
121
+                .p-treetable-toggler {
122
+                    color: $highlightTextColor;
123
+
124
+                    &:hover {
125
+                        color: $highlightTextColor;
126
+                    }
127
+                    
128
+                }
129
+            }
130
+        }
131
+    }
132
+
133
+    &.p-treetable-hoverable-rows {
134
+        .p-treetable-tbody > tr:not(.p-highlight):hover {
135
+            background: $tableBodyRowHoverBg;
136
+            color: $tableBodyRowTextHoverColor;
137
+
138
+            .p-treetable-toggler {
139
+                color: $tableBodyRowTextHoverColor;
140
+            }
141
+        }
142
+    }
143
+
144
+    .p-column-resizer-helper {
145
+        background: $tableResizerHelperBg;
146
+    }
147
+
148
+    .p-treetable-scrollable-header,
149
+    .p-treetable-scrollable-footer {
150
+        background: $panelHeaderBg;
151
+    }
152
+
153
+    .p-treetable-loading-icon {
154
+        font-size: $loadingIconFontSize;
155
+    }
156
+
157
+    &.p-treetable-gridlines {
158
+        .p-datatable-header {
159
+            border-width: 1px 1px 0 1px;
160
+        }
161
+
162
+        .p-treetable-footer {
163
+            border-width: 0 1px 1px 1px;
164
+        }
165
+
166
+        .p-treetable-top {
167
+            border-width: 0 1px 0 1px;
168
+        }
169
+
170
+        .p-treetable-bottom {
171
+            border-width: 0 1px 1px 1px;
172
+        }
173
+
174
+        .p-treetable-thead {
175
+            > tr {
176
+                > th {
177
+                    border-width: 1px;
178
+                }
179
+            }
180
+        }
181
+
182
+        .p-treetable-tbody {
183
+            > tr {
184
+                > td {
185
+                    border-width: 1px;
186
+                }
187
+            }
188
+        }
189
+
190
+        .p-treetable-tfoot {
191
+            > tr {
192
+                > td {
193
+                    border-width: 1px;
194
+                }
195
+            }
196
+        }
197
+    }
198
+
199
+    &.p-treetable-sm {
200
+        .p-treetable-header {
201
+            @include scaledPadding($tableHeaderPadding, $scaleSM);
202
+        }
203
+
204
+        .p-treetable-thead > tr > th {
205
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
206
+        }
207
+
208
+        .p-treetable-tbody > tr > td {
209
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
210
+        }
211
+
212
+        .p-treetable-tfoot > tr > td {
213
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
214
+        }
215
+
216
+        .p-treetable-footer {
217
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
218
+        }
219
+    }
220
+
221
+    &.p-treetable-lg {
222
+        .p-treetable-header {
223
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
224
+        }
225
+
226
+        .p-treetable-thead > tr > th {
227
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
228
+        }
229
+
230
+        .p-treetable-tbody > tr > td {
231
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
232
+        }
233
+
234
+        .p-treetable-tfoot > tr > td {
235
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
236
+        }
237
+
238
+        .p-treetable-footer {
239
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
240
+        }
241
+    }
242
+}

+ 28
- 0
Angular/src/assets/sass/theme/designer/components/data/_virtualscroller.scss View File

@@ -0,0 +1,28 @@
1
+.p-virtualscroller {
2
+    .p-virtualscroller-header {
3
+        background: $tableHeaderBg;
4
+        color: $tableHeaderTextColor;
5
+        border: $tableHeaderBorder;
6
+        border-width: $tableHeaderBorderWidth;
7
+        padding: $tableHeaderPadding;
8
+        font-weight: $tableHeaderFontWeight;
9
+    }
10
+
11
+    .p-virtualscroller-content {
12
+        background: $tableBodyRowBg;
13
+        color: $tableBodyRowTextColor;
14
+        border: $dataViewContentBorder;
15
+        padding: $dataViewContentPadding;
16
+    }
17
+
18
+    .p-virtualscroller-footer {
19
+        background: $tableFooterBg;
20
+        color: $tableFooterTextColor;
21
+        border: $tableFooterBorder;
22
+        border-width: $tableFooterBorderWidth;
23
+        padding: $tableFooterPadding;
24
+        font-weight: $tableFooterFontWeight;
25
+        border-bottom-left-radius: $borderRadius;
26
+        border-bottom-right-radius: $borderRadius;
27
+    }
28
+}

+ 58
- 0
Angular/src/assets/sass/theme/designer/components/file/_fileupload.scss View File

@@ -0,0 +1,58 @@
1
+.p-fileupload {
2
+    .p-fileupload-buttonbar {
3
+        background: $panelHeaderBg;
4
+        padding: $panelHeaderPadding;
5
+        border: $panelHeaderBorder;
6
+        color: $panelHeaderTextColor;
7
+        border-bottom: 0 none;
8
+        border-top-right-radius: $borderRadius;
9
+        border-top-left-radius: $borderRadius;
10
+
11
+        .p-button {
12
+            margin-right: $inlineSpacing;
13
+
14
+            &.p-fileupload-choose.p-focus {
15
+                @include focused();
16
+            }
17
+        }
18
+    }
19
+
20
+    .p-fileupload-content {
21
+        background: $panelContentBg;
22
+        padding: $fileUploadContentPadding;
23
+        border: $panelContentBorder;
24
+        color: $panelContentTextColor;
25
+        border-bottom-right-radius: $borderRadius;
26
+        border-bottom-left-radius: $borderRadius;
27
+    }
28
+
29
+    .p-progressbar {
30
+        height: $fileUploadProgressBarHeight;
31
+    }
32
+
33
+    .p-fileupload-row {
34
+        > div {
35
+            padding: $tableBodyCellPadding;
36
+        }
37
+    }
38
+
39
+    &.p-fileupload-advanced {
40
+        .p-message {
41
+            margin-top: 0;
42
+        }
43
+    }
44
+}
45
+
46
+.p-fileupload-choose {
47
+    &:not(.p-disabled):hover {
48
+        background: $buttonHoverBg;
49
+        color: $buttonTextHoverColor;
50
+        border-color: $buttonHoverBorderColor;
51
+    }
52
+
53
+    &:not(.p-disabled):active {
54
+        background: $buttonActiveBg;
55
+        color: $buttonTextActiveColor;
56
+        border-color: $buttonActiveBorderColor;
57
+    }
58
+}

+ 103
- 0
Angular/src/assets/sass/theme/designer/components/input/_autocomplete.scss View File

@@ -0,0 +1,103 @@
1
+.p-autocomplete {
2
+    .p-autocomplete-loader {
3
+        right: nth($inputPadding, 2); 
4
+    }
5
+
6
+    &.p-autocomplete-dd {
7
+        .p-autocomplete-loader {
8
+            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
9
+        }
10
+    }
11
+    
12
+    .p-autocomplete-multiple-container {
13
+        padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
14
+
15
+        &:not(.p-disabled):hover {
16
+            border-color: $inputHoverBorderColor;
17
+        }
18
+
19
+        &:not(.p-disabled).p-focus {
20
+            @include focused-input();
21
+        }
22
+
23
+        .p-autocomplete-input-token {
24
+            padding: nth($inputPadding, 1)/2 0;
25
+            
26
+            input {
27
+                font-family: $fontFamily;
28
+                font-size: $fontSize;
29
+                color: $textColor;
30
+                padding: 0;
31
+                margin: 0;
32
+            }
33
+        }
34
+
35
+        .p-autocomplete-token {
36
+            padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
37
+            margin-right: $inlineSpacing;
38
+            background: $highlightBg;
39
+            color: $highlightTextColor;
40
+            border-radius: $borderRadius;
41
+
42
+            .p-autocomplete-token-icon {
43
+                margin-left: $inlineSpacing;
44
+            }
45
+        }
46
+    }
47
+}
48
+
49
+p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
50
+    @include invalid-input();
51
+}
52
+
53
+.p-autocomplete-panel {
54
+    background: $inputOverlayBg;
55
+    color: $inputListTextColor;
56
+    border: $inputOverlayBorder;
57
+    border-radius: $borderRadius;
58
+    box-shadow: $inputOverlayShadow;
59
+
60
+    .p-autocomplete-items {
61
+        &:not(.p-autocomplete-virtualscroll) { 
62
+            padding: $inputListPadding;
63
+        }
64
+
65
+        &.p-autocomplete-virtualscroll .cdk-virtual-scroll-content-wrapper {
66
+            padding: $inputListPadding;
67
+        }
68
+
69
+        .p-autocomplete-item {
70
+            margin: $inputListItemMargin;
71
+            padding: $inputListItemPadding;
72
+            border: $inputListItemBorder;
73
+            color: $inputListItemTextColor;
74
+            background: $inputListItemBg;
75
+            transition: $listItemTransition;
76
+            border-radius: $inputListItemBorderRadius;
77
+
78
+            &:hover {
79
+                color: $inputListItemTextHoverColor;
80
+                background: $inputListItemHoverBg;
81
+            }
82
+
83
+            &.p-highlight {
84
+                color: $highlightTextColor;
85
+                background: $highlightBg;
86
+            }
87
+        }
88
+
89
+        .p-autocomplete-empty-message {
90
+            padding: $inputListItemPadding;
91
+            color: $inputListItemTextColor;
92
+            background: $inputListItemBg;
93
+        }
94
+
95
+        .p-autocomplete-item-group {
96
+            margin: $submenuHeaderMargin;
97
+            padding: $submenuHeaderPadding;
98
+            color: $submenuHeaderTextColor;
99
+            background: $submenuHeaderBg;
100
+            font-weight: $submenuHeaderFontWeight;
101
+        }
102
+    }
103
+}

+ 212
- 0
Angular/src/assets/sass/theme/designer/components/input/_calendar.scss View File

@@ -0,0 +1,212 @@
1
+p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
2
+    @include invalid-input();
3
+}
4
+
5
+.p-datepicker {
6
+    padding: $calendarPadding;
7
+    background: $calendarInlineBg;
8
+    color: $calendarTextColor;
9
+    border: $calendarBorder;
10
+    border-radius: $borderRadius;
11
+
12
+    &:not(.p-datepicker-inline) {
13
+        background: $calendarBg;
14
+        border: $calendarOverlayBorder;
15
+        box-shadow: $inputOverlayShadow;
16
+
17
+        .p-datepicker-header {
18
+            background: $calendarHeaderBg;
19
+        }
20
+    }
21
+
22
+    .p-datepicker-header {
23
+        padding: $calendarHeaderPadding;
24
+        color: $calendarHeaderTextColor;
25
+        background: $calendarInlineHeaderBg;
26
+        font-weight: $calendarHeaderFontWeight;
27
+        margin: $inputListHeaderMargin;
28
+        border-bottom: $calendarHeaderBorder;
29
+        border-top-right-radius: $borderRadius;
30
+        border-top-left-radius: $borderRadius;
31
+
32
+        .p-datepicker-prev,
33
+        .p-datepicker-next {
34
+            @include action-icon();
35
+        }
36
+
37
+        .p-datepicker-title {
38
+            line-height: $actionIconHeight;
39
+
40
+            select {
41
+                transition: $formElementTransition;
42
+
43
+                &:focus {
44
+                    @include focused-input();
45
+                }
46
+            }
47
+
48
+            .p-datepicker-month {
49
+                margin-right: $inlineSpacing;
50
+            }
51
+        }
52
+    }
53
+
54
+    table {
55
+        font-size: $fontSize;
56
+        margin: $calendarTableMargin;
57
+
58
+        th {
59
+            padding: $calendarHeaderCellPadding;
60
+
61
+            > span {
62
+                width: $calendarCellDateWidth;
63
+                height: $calendarCellDateHeight;
64
+            }
65
+        }
66
+
67
+        td {
68
+            padding: $calendarCellDatePadding;
69
+
70
+            > span {
71
+                width: $calendarCellDateWidth;
72
+                height: $calendarCellDateHeight;
73
+                border-radius: $calendarCellDateBorderRadius;
74
+                transition: $listItemTransition;
75
+                border: $calendarCellDateBorder;
76
+
77
+                &.p-highlight {
78
+                    color: $highlightTextColor;
79
+                    background: $highlightBg;
80
+                }
81
+                
82
+                &:focus {
83
+                    @include focused();
84
+                }
85
+            }
86
+
87
+            &.p-datepicker-today {
88
+                > span {
89
+                    background: $calendarCellDateTodayBg;
90
+                    color: $calendarCellDateTodayTextColor;
91
+                    border-color: $calendarCellDateTodayBorderColor;
92
+
93
+                    &.p-highlight {
94
+                        color: $highlightTextColor;
95
+                        background: $highlightBg;
96
+                    }
97
+                }
98
+            }
99
+        }
100
+    }
101
+
102
+    .p-datepicker-buttonbar {
103
+        padding: $calendarButtonBarPadding;
104
+        border-top: $divider;
105
+
106
+        .p-button {
107
+            width: auto;
108
+        }
109
+    }
110
+
111
+    .p-timepicker {
112
+        border-top: $divider;
113
+        padding: $calendarTimePickerPadding;
114
+
115
+        button {
116
+            @include action-icon();
117
+            
118
+            &:last-child {
119
+                margin-top: .2em;
120
+            }
121
+        }
122
+
123
+        span {
124
+            font-size: $calendarTimePickerTimeFontSize;
125
+        }
126
+
127
+        > div {
128
+            padding: $calendarTimePickerElementPadding;
129
+        }
130
+    }
131
+
132
+    &.p-datepicker-timeonly {
133
+        .p-timepicker {
134
+            border-top: 0 none;
135
+        }
136
+    }
137
+
138
+    .p-monthpicker {
139
+        margin: $calendarTableMargin;
140
+
141
+        .p-monthpicker-month {
142
+            padding: $calendarCellDatePadding;
143
+            transition: $listItemTransition;
144
+            border-radius: $borderRadius;
145
+
146
+            &.p-highlight {
147
+                color: $highlightTextColor;
148
+                background: $highlightBg;
149
+            }
150
+        }
151
+    }
152
+
153
+    &.p-datepicker-multiple-month {
154
+        .p-datepicker-group {
155
+            border-right: $divider;
156
+            padding-right: $calendarPadding;
157
+            padding-left: $calendarPadding;
158
+            padding-top: 0;
159
+            padding-bottom: 0;
160
+
161
+            &:first-child {
162
+                padding-left: 0;
163
+            }
164
+
165
+            &:last-child {
166
+                padding-right: 0;
167
+                border-right: 0 none;
168
+            }
169
+        }
170
+    }
171
+
172
+    &:not(.p-disabled) {
173
+        table {
174
+            td {
175
+                span:not(.p-highlight):not(.p-disabled) {
176
+                    &:hover {
177
+                        background: $calendarCellDateHoverBg;
178
+                    }
179
+
180
+                    &:focus {
181
+                        @include focused();
182
+                    }
183
+                }
184
+            }
185
+        }
186
+
187
+        .p-monthpicker {
188
+            .p-monthpicker-month {
189
+                &:not(.p-highlight):not(.p-disabled) {
190
+                    &:hover {
191
+                        background: $calendarCellDateHoverBg;
192
+                    }
193
+
194
+                    &:focus {
195
+                        @include focused();
196
+                    }
197
+                }
198
+            }
199
+        }
200
+    }
201
+
202
+}
203
+
204
+@media screen and (max-width: $calendarBreakpoint) {
205
+    .p-datepicker {
206
+        table {
207
+            th, td {
208
+                padding: $calendarCellDatePaddingSM;
209
+            }
210
+        }
211
+    }
212
+}

+ 98
- 0
Angular/src/assets/sass/theme/designer/components/input/_cascadeselect.scss View File

@@ -0,0 +1,98 @@
1
+.p-cascadeselect {
2
+    background: $inputBg;
3
+    border: $inputBorder;
4
+    transition: $formElementTransition;
5
+    border-radius: $borderRadius;
6
+
7
+    &:not(.p-disabled):hover {
8
+        border-color: $inputHoverBorderColor;
9
+    }
10
+
11
+    &:not(.p-disabled).p-focus {
12
+        @include focused-input();
13
+    }
14
+
15
+    .p-cascadeselect-label {
16
+        background: transparent;
17
+        border: 0 none;
18
+        padding: $inputPadding;
19
+
20
+        &.p-placeholder {
21
+            color: $inputPlaceholderTextColor;
22
+        }
23
+
24
+        &:enabled:focus {
25
+            outline: 0 none;
26
+            box-shadow: none;
27
+        }
28
+    }
29
+
30
+    .p-cascadeselect-trigger {
31
+        background: transparent;
32
+        color: $inputIconColor;
33
+        width: $inputGroupAddOnMinWidth;
34
+        border-top-right-radius: $borderRadius;
35
+        border-bottom-right-radius: $borderRadius;
36
+    }
37
+}
38
+
39
+.p-cascadeselect-panel {
40
+    background: $inputOverlayBg;
41
+    color: $inputListTextColor;
42
+    border: $inputOverlayBorder;
43
+    border-radius: $borderRadius;
44
+    box-shadow: $inputOverlayShadow;
45
+
46
+    .p-cascadeselect-items {
47
+        padding: $inputListPadding;
48
+
49
+        .p-cascadeselect-item {
50
+            margin: $inputListItemMargin;
51
+            border: $inputListItemBorder;
52
+            color: $inputListItemTextColor;
53
+            background: $inputListItemBg;
54
+            transition: $listItemTransition;
55
+            border-radius: $inputListItemBorderRadius;
56
+
57
+            .p-cascadeselect-item-content {
58
+                padding: $inputListItemPadding;
59
+
60
+                &:focus {
61
+                    @include focused-listitem();
62
+                }
63
+            }
64
+
65
+            &.p-highlight {
66
+                color: $highlightTextColor;
67
+                background: $highlightBg;
68
+            }
69
+
70
+            &:not(.p-highlight):not(.p-disabled):hover {
71
+                color: $inputListItemTextHoverColor;
72
+                background: $inputListItemHoverBg;
73
+            }
74
+
75
+            .p-cascadeselect-group-icon {
76
+                font-size: $menuitemSubmenuIconFontSize;
77
+            }
78
+        }
79
+    }
80
+}
81
+
82
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
83
+    @include invalid-input();
84
+}
85
+
86
+.p-input-filled {
87
+    .p-cascadeselect {
88
+        background: $inputFilledBg;
89
+
90
+        &:not(.p-disabled):hover {
91
+            background-color: $inputFilledHoverBg;
92
+        }
93
+    
94
+        &:not(.p-disabled).p-focus {
95
+            background-color: $inputFilledFocusBg;
96
+        }
97
+    }
98
+}

+ 85
- 0
Angular/src/assets/sass/theme/designer/components/input/_checkbox.scss View File

@@ -0,0 +1,85 @@
1
+.p-checkbox {
2
+    width: $checkboxWidth;
3
+    height: $checkboxHeight;
4
+
5
+    .p-checkbox-box {
6
+        border: $checkboxBorder;
7
+        background: $inputBg;
8
+        width: $checkboxWidth;
9
+        height: $checkboxHeight;
10
+        color: $textColor;
11
+        border-radius: $borderRadius;
12
+        transition: $formElementTransition;
13
+
14
+        .p-checkbox-icon {
15
+            transition-duration: $transitionDuration;
16
+            color: $checkboxIconActiveColor;
17
+            font-size: $checkboxIconFontSize;
18
+        }
19
+
20
+        &.p-highlight {
21
+            border-color: $checkboxActiveBorderColor;
22
+            background: $checkboxActiveBg;
23
+        }
24
+    }
25
+
26
+    &:not(.p-checkbox-disabled) {
27
+        .p-checkbox-box {
28
+            &:hover {
29
+                border-color: $inputHoverBorderColor;
30
+            }
31
+
32
+            &.p-focus {
33
+                @include focused-input();
34
+            }
35
+
36
+            &.p-highlight:hover {    
37
+                border-color: $checkboxActiveHoverBorderColor;
38
+                background: $checkboxActiveHoverBg;
39
+                color: $checkboxIconActiveHoverColor;
40
+            }
41
+        }
42
+    }
43
+}
44
+
45
+p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
46
+    @include invalid-input();
47
+}
48
+
49
+.p-input-filled {
50
+    .p-checkbox {
51
+        .p-checkbox-box {
52
+            background-color: $inputFilledBg;
53
+
54
+            &.p-highlight {
55
+                background: $checkboxActiveBg;
56
+            }
57
+        }
58
+
59
+        &:not(.p-checkbox-disabled) {
60
+            .p-checkbox-box {
61
+                &:hover {
62
+                    background-color: $inputFilledHoverBg;
63
+                }
64
+        
65
+                &.p-highlight:hover {    
66
+                    background: $checkboxActiveHoverBg;
67
+                }
68
+            }
69
+        }
70
+    }
71
+}
72
+
73
+.p-checkbox-label {
74
+    margin-left: $inlineSpacing;
75
+}
76
+
77
+@if ($highlightBg == $checkboxActiveBg) {
78
+    .p-highlight {
79
+        .p-checkbox {
80
+            .p-checkbox-box {
81
+                border-color: $checkboxIconActiveColor;
82
+            }
83
+        }
84
+    }
85
+} 

+ 41
- 0
Angular/src/assets/sass/theme/designer/components/input/_chips.scss View File

@@ -0,0 +1,41 @@
1
+.p-chips {
2
+    .p-chips-multiple-container {
3
+        padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
4
+
5
+        &:not(.p-disabled):hover {
6
+            border-color: $inputHoverBorderColor;
7
+        }
8
+
9
+        &:not(.p-disabled).p-focus {
10
+            @include focused-input();
11
+        }
12
+
13
+        .p-chips-token {
14
+            padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
15
+            margin-right: $inlineSpacing;
16
+            background: $highlightBg;
17
+            color: $highlightTextColor;
18
+            border-radius: $borderRadius;
19
+
20
+            .p-chips-token-icon {
21
+                margin-left: $inlineSpacing;
22
+            }
23
+        }
24
+
25
+        .p-chips-input-token {
26
+            padding: nth($inputPadding, 1)/2 0;
27
+                
28
+            input {
29
+                font-family: $fontFamily;
30
+                font-size: $fontSize;
31
+                color: $textColor;
32
+                padding: 0;
33
+                margin: 0;
34
+            }
35
+        }
36
+    }
37
+}
38
+
39
+p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
40
+    @include invalid-input();
41
+}

+ 19
- 0
Angular/src/assets/sass/theme/designer/components/input/_colorpicker.scss View File

@@ -0,0 +1,19 @@
1
+.p-colorpicker-preview,
2
+.p-fluid .p-colorpicker-preview.p-inputtext  {
3
+    width: $colorPickerPreviewWidth;
4
+    height: $colorPickerPreviewHeight;
5
+}
6
+
7
+.p-colorpicker-panel {
8
+    background: $colorPickerBg;
9
+    border-color: $colorPickerBorderColor;
10
+
11
+    .p-colorpicker-color-handle,
12
+    .p-colorpicker-hue-handle {
13
+        border-color: $colorPickerHandleColor;
14
+    }
15
+}
16
+
17
+.p-colorpicker-overlay-panel {
18
+    box-shadow: $inputOverlayShadow;
19
+}

+ 137
- 0
Angular/src/assets/sass/theme/designer/components/input/_dropdown.scss View File

@@ -0,0 +1,137 @@
1
+.p-dropdown {
2
+    background: $inputBg;
3
+    border: $inputBorder;
4
+    transition: $formElementTransition;
5
+    border-radius: $borderRadius;
6
+
7
+    &:not(.p-disabled):hover {
8
+        border-color: $inputHoverBorderColor;
9
+    }
10
+
11
+    &:not(.p-disabled).p-focus {
12
+        @include focused-input();
13
+    }
14
+
15
+    &.p-dropdown-clearable {
16
+        .p-dropdown-label {
17
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
18
+        }
19
+    }
20
+
21
+    .p-dropdown-label {
22
+        background: transparent;
23
+        border: 0 none;
24
+
25
+        &.p-placeholder {
26
+            color: $inputPlaceholderTextColor;
27
+        }
28
+
29
+        &:enabled:focus {
30
+            outline: 0 none;
31
+            box-shadow: none;
32
+        }
33
+    }
34
+
35
+    .p-dropdown-trigger {
36
+        background: transparent;
37
+        color: $inputIconColor;
38
+        width: $inputGroupAddOnMinWidth;
39
+        border-top-right-radius: $borderRadius;
40
+        border-bottom-right-radius: $borderRadius;
41
+    }
42
+
43
+    .p-dropdown-clear-icon {
44
+        color: $inputIconColor;
45
+        right: $inputGroupAddOnMinWidth;
46
+    }
47
+}
48
+
49
+.p-dropdown-panel {
50
+    background: $inputOverlayBg;
51
+    color: $inputListTextColor;
52
+    border: $inputOverlayBorder;
53
+    border-radius: $borderRadius;
54
+    box-shadow: $inputOverlayShadow;
55
+
56
+    .p-dropdown-header {
57
+        padding: $inputListHeaderPadding;
58
+        border-bottom: $inputListHeaderBorder;
59
+        color: $inputListHeaderTextColor;
60
+        background: $inputOverlayHeaderBg;
61
+        margin: $inputListHeaderMargin;
62
+        border-top-right-radius: $borderRadius;
63
+        border-top-left-radius: $borderRadius;
64
+
65
+        .p-dropdown-filter {
66
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
67
+            margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
68
+        }
69
+
70
+        .p-dropdown-filter-icon {
71
+            right: nth($inputPadding, 2);
72
+            color: $inputIconColor;
73
+        }
74
+    }
75
+
76
+    .p-dropdown-items {
77
+        &:not(.p-dropdown-virtualscroll) {
78
+            padding: $inputListPadding;
79
+        }
80
+
81
+        &.p-dropdown-virtualscroll .cdk-virtual-scroll-content-wrapper {
82
+            padding: $inputListPadding;
83
+        }
84
+
85
+        .p-dropdown-item {
86
+            margin: $inputListItemMargin;
87
+            padding: $inputListItemPadding;
88
+            border: $inputListItemBorder;
89
+            color: $inputListItemTextColor;
90
+            background: $inputListItemBg;
91
+            transition: $listItemTransition;
92
+            border-radius: $inputListItemBorderRadius;
93
+
94
+            &.p-highlight {
95
+                color: $highlightTextColor;
96
+                background: $highlightBg;
97
+            }
98
+
99
+            &:not(.p-highlight):not(.p-disabled):hover {
100
+                color: $inputListItemTextHoverColor;
101
+                background: $inputListItemHoverBg;
102
+            }
103
+        }
104
+
105
+        .p-dropdown-empty-message {
106
+            padding: $inputListItemPadding;
107
+            color: $inputListItemTextColor;
108
+            background: $inputListItemBg;
109
+        }
110
+
111
+        .p-dropdown-item-group {
112
+            margin: $submenuHeaderMargin;
113
+            padding: $submenuHeaderPadding;
114
+            color: $submenuHeaderTextColor;
115
+            background: $submenuHeaderBg;
116
+            font-weight: $submenuHeaderFontWeight;
117
+        }
118
+    }
119
+}
120
+
121
+p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
122
+    @include invalid-input();
123
+}
124
+
125
+.p-input-filled {
126
+    .p-dropdown {
127
+        background: $inputFilledBg;
128
+
129
+        &:not(.p-disabled):hover {
130
+            background-color: $inputFilledHoverBg;
131
+        }
132
+
133
+        &:not(.p-disabled).p-focus {
134
+            background-color: $inputFilledFocusBg;
135
+        }
136
+    }
137
+}

+ 122
- 0
Angular/src/assets/sass/theme/designer/components/input/_editor.scss View File

@@ -0,0 +1,122 @@
1
+.p-editor-container {
2
+    .p-editor-toolbar {
3
+        background: $editorToolbarBg;
4
+        border-top-right-radius: $borderRadius;
5
+        border-top-left-radius: $borderRadius;
6
+
7
+        &.ql-snow {
8
+            border: $editorToolbarBorder;
9
+
10
+            .ql-stroke {
11
+                stroke: $editorToolbarIconColor;
12
+            }
13
+    
14
+            .ql-fill {
15
+                fill: $editorToolbarIconColor;
16
+            }
17
+    
18
+            .ql-picker {
19
+                .ql-picker-label {
20
+                    border: 0 none;
21
+                    color: $editorToolbarIconColor;
22
+
23
+                    &:hover {
24
+                        color: $editorToolbarIconHoverColor;
25
+
26
+                        .ql-stroke {
27
+                            stroke: $editorToolbarIconHoverColor;
28
+                        }
29
+                
30
+                        .ql-fill {
31
+                            fill: $editorToolbarIconHoverColor;
32
+                        }
33
+                    }
34
+                }
35
+
36
+                &.ql-expanded {
37
+                    .ql-picker-label {
38
+                        color: $editorToolbarIconHoverColor;
39
+
40
+                        .ql-stroke {
41
+                            stroke: $editorToolbarIconHoverColor;
42
+                        }
43
+                
44
+                        .ql-fill {
45
+                            fill: $editorToolbarIconHoverColor;
46
+                        }
47
+                    }
48
+
49
+                    .ql-picker-options {
50
+                        background: $inputOverlayBg;
51
+                        border:$inputOverlayBorder;
52
+                        box-shadow:$inputOverlayShadow;
53
+                        border-radius: $borderRadius;
54
+                        padding: $inputListPadding;
55
+
56
+                        .ql-picker-item {
57
+                            color: $inputListItemTextColor;
58
+                            
59
+                            &:hover {
60
+                                color: $inputListItemTextHoverColor;
61
+                                background: $inputListItemHoverBg;
62
+                            }
63
+                        }
64
+                    }
65
+
66
+                    &:not(.ql-icon-picker) {
67
+                        .ql-picker-item {
68
+                            padding: $inputListItemPadding;
69
+                        }
70
+                    }
71
+                }
72
+            }
73
+        }
74
+    }
75
+
76
+    .p-editor-content {
77
+        border-bottom-right-radius: $borderRadius;
78
+        border-bottom-left-radius: $borderRadius;
79
+
80
+        &.ql-snow {
81
+            border: $editorContentBorder;
82
+        }
83
+
84
+        .ql-editor {
85
+            background: $inputBg;
86
+            color: $inputTextColor;
87
+            border-bottom-right-radius: $borderRadius;
88
+            border-bottom-left-radius: $borderRadius;
89
+        }
90
+    }
91
+
92
+    .ql-snow.ql-toolbar button:hover,
93
+    .ql-snow.ql-toolbar button:focus {
94
+        color: $editorToolbarIconHoverColor;
95
+
96
+        .ql-stroke {
97
+            stroke: $editorToolbarIconHoverColor;
98
+        }
99
+
100
+        .ql-fill {
101
+            fill: $editorToolbarIconHoverColor;
102
+        }
103
+    }
104
+
105
+    .ql-snow.ql-toolbar button.ql-active,
106
+    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
107
+    .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
108
+        color: $editorIconActiveColor;
109
+
110
+        .ql-stroke {
111
+            stroke: $editorIconActiveColor;
112
+        }
113
+
114
+        .ql-fill {
115
+            fill: $editorIconActiveColor;
116
+        }
117
+
118
+        .ql-picker-label {
119
+            color: $editorIconActiveColor;
120
+        }
121
+    }
122
+}

+ 75
- 0
Angular/src/assets/sass/theme/designer/components/input/_inputgroup.scss View File

@@ -0,0 +1,75 @@
1
+.p-inputgroup-addon {
2
+    background: $inputGroupBg;
3
+    color: $inputGroupTextColor;
4
+    border-top: $inputBorder;
5
+    border-left: $inputBorder;
6
+    border-bottom: $inputBorder;
7
+    padding: $inputPadding;
8
+    min-width: $inputGroupAddOnMinWidth;
9
+
10
+    &:last-child {
11
+        border-right: $inputBorder;
12
+    }
13
+}
14
+
15
+.p-inputgroup {
16
+    > .p-component,
17
+    > .p-element,
18
+    > .p-inputwrapper > .p-component > .p-inputtext,
19
+    > .p-float-label > .p-component {
20
+        border-radius: 0;
21
+        margin: 0;
22
+
23
+        + .p-inputgroup-addon {
24
+            border-left: 0 none;
25
+        }
26
+
27
+        &:focus {
28
+            z-index: 1;
29
+
30
+            ~ label {
31
+                z-index: 1;
32
+            }
33
+        }
34
+    }
35
+}
36
+
37
+.p-inputgroup-addon:first-child,
38
+.p-inputgroup button:first-child,
39
+.p-inputgroup input:first-child,
40
+.p-inputgroup > .p-inputwrapper:first-child > .p-component,
41
+.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext {
42
+    border-top-left-radius: $borderRadius;
43
+    border-bottom-left-radius: $borderRadius;
44
+}
45
+
46
+.p-inputgroup .p-float-label:first-child input {
47
+    border-top-left-radius: $borderRadius;
48
+    border-bottom-left-radius: $borderRadius;
49
+}
50
+
51
+.p-inputgroup-addon:last-child,
52
+.p-inputgroup button:last-child,
53
+.p-inputgroup input:last-child,
54
+.p-inputgroup > .p-inputwrapper:last-child > .p-component,
55
+.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext {
56
+    border-top-right-radius: $borderRadius;
57
+    border-bottom-right-radius: $borderRadius;
58
+}
59
+
60
+.p-inputgroup .p-float-label:last-child input {
61
+    border-top-right-radius: $borderRadius;
62
+    border-bottom-right-radius: $borderRadius;
63
+}
64
+
65
+.p-fluid {
66
+    .p-inputgroup {
67
+        .p-button {
68
+            width: auto;
69
+
70
+            &.p-button-icon-only {
71
+                width: $buttonIconOnlyWidth;
72
+            }
73
+        }
74
+    }
75
+}

+ 3
- 0
Angular/src/assets/sass/theme/designer/components/input/_inputmask.scss View File

@@ -0,0 +1,3 @@
1
+p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
2
+    @include invalid-input();
3
+}

+ 3
- 0
Angular/src/assets/sass/theme/designer/components/input/_inputnumber.scss View File

@@ -0,0 +1,3 @@
1
+p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
2
+    @include invalid-input();
3
+}

+ 58
- 0
Angular/src/assets/sass/theme/designer/components/input/_inputswitch.scss View File

@@ -0,0 +1,58 @@
1
+.p-inputswitch {
2
+    width: $inputSwitchWidth;
3
+    height: $inputSwitchHeight;
4
+
5
+    .p-inputswitch-slider {
6
+        background: $inputSwitchSliderOffBg;
7
+        transition: $formElementTransition;
8
+        border-radius: $inputSwitchBorderRadius;
9
+
10
+        &:before {
11
+            background: $inputSwitchHandleOffBg;
12
+            width: $inputSwitchHandleWidth;
13
+            height: $inputSwitchHandleHeight;
14
+            left: $inputSwitchSliderPadding;
15
+            margin-top: -1 * $inputSwitchHandleHeight / 2;
16
+            border-radius: $inputSwitchHandleBorderRadius;
17
+            transition-duration: $transitionDuration;
18
+        }
19
+    }
20
+
21
+    &.p-inputswitch-checked {
22
+        .p-inputswitch-slider:before {
23
+            transform: translateX($inputSwitchHandleWidth);
24
+        }
25
+    }
26
+
27
+    &.p-focus {
28
+        .p-inputswitch-slider {
29
+            @include focused();
30
+        }
31
+    }
32
+
33
+    &:not(.p-disabled):hover {
34
+        .p-inputswitch-slider {
35
+            background: $inputSwitchSliderOffHoverBg;
36
+        }
37
+    }
38
+
39
+    &.p-inputswitch-checked {
40
+        .p-inputswitch-slider {
41
+            background: $inputSwitchSliderOnBg;
42
+
43
+            &:before {
44
+                background: $inputSwitchHandleOnBg;
45
+             }
46
+        }
47
+
48
+        &:not(.p-disabled):hover {
49
+            .p-inputswitch-slider {
50
+                background: $inputSwitchSliderOnHoverBg;
51
+            }
52
+        }
53
+    }
54
+}
55
+
56
+p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
57
+    @include invalid-input();
58
+}

+ 97
- 0
Angular/src/assets/sass/theme/designer/components/input/_inputtext.scss View File

@@ -0,0 +1,97 @@
1
+.p-inputtext {
2
+    font-family: $fontFamily;
3
+    font-size: $inputTextFontSize;
4
+    color: $inputTextColor;
5
+    background: $inputBg;
6
+    padding: $inputPadding;
7
+    border: $inputBorder;
8
+    transition: $formElementTransition;
9
+    appearance: none;
10
+    border-radius: $borderRadius;
11
+
12
+    &:enabled:hover {
13
+        border-color: $inputHoverBorderColor;
14
+    }
15
+
16
+    &:enabled:focus {
17
+        @include focused-input();
18
+    }
19
+
20
+    &.ng-dirty.ng-invalid {
21
+        @include invalid-input();
22
+    }
23
+
24
+    &.p-inputtext-sm {
25
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
26
+        @include scaledPadding($inputPadding, $scaleSM);
27
+    }
28
+
29
+    &.p-inputtext-lg {
30
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
31
+        @include scaledPadding($inputPadding, $scaleLG);
32
+    }
33
+}
34
+
35
+.p-float-label > label {
36
+    left: nth($inputPadding, 2);
37
+    color: $inputPlaceholderTextColor;
38
+    transition-duration: $transitionDuration;
39
+}
40
+
41
+.p-float-label > .ng-invalid.ng-dirty + label {
42
+    color: $inputErrorBorderColor;
43
+}
44
+
45
+.p-input-icon-left > i:first-of-type {
46
+    left: nth($inputPadding, 2);
47
+    color: $inputIconColor;
48
+}
49
+
50
+.p-input-icon-left > .p-inputtext {
51
+    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
52
+}
53
+
54
+.p-input-icon-left.p-float-label > label {
55
+    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
56
+}
57
+
58
+.p-input-icon-right > i:last-of-type  {
59
+    right: nth($inputPadding, 2);
60
+    color: $inputIconColor;
61
+}
62
+
63
+.p-input-icon-right > .p-inputtext {
64
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
65
+}
66
+
67
+@include placeholder {
68
+    color: $inputPlaceholderTextColor
69
+};
70
+
71
+.p-input-filled {
72
+    .p-inputtext {
73
+        background-color: $inputFilledBg;
74
+
75
+        &:enabled:hover {
76
+            background-color: $inputFilledHoverBg;
77
+        }
78
+
79
+        &:enabled:focus {
80
+            background-color: $inputFilledFocusBg;
81
+        }
82
+    }
83
+}
84
+
85
+.p-inputtext-sm {
86
+    .p-inputtext {
87
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
88
+        @include scaledPadding($inputPadding, $scaleSM);
89
+    }
90
+}
91
+
92
+.p-inputtext-lg {
93
+    .p-inputtext {
94
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
95
+        @include scaledPadding($inputPadding, $scaleLG);
96
+    }
97
+}

+ 82
- 0
Angular/src/assets/sass/theme/designer/components/input/_listbox.scss View File

@@ -0,0 +1,82 @@
1
+.p-listbox {
2
+    background: $inputListBg;
3
+    color: $inputListTextColor;
4
+    border: $inputListBorder;
5
+    border-radius: $borderRadius;
6
+
7
+    .p-listbox-header {
8
+        padding: $inputListHeaderPadding;
9
+        border-bottom: $inputListHeaderBorder;
10
+        color: $inputListHeaderTextColor;
11
+        background: $inputListHeaderBg;
12
+        margin: $inputListHeaderMargin;
13
+        border-top-right-radius: $borderRadius;
14
+        border-top-left-radius: $borderRadius;
15
+
16
+        .p-listbox-filter {
17
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
18
+        }
19
+
20
+        .p-listbox-filter-icon {
21
+            right: nth($inputPadding, 2);
22
+            color: $inputIconColor;
23
+        }
24
+
25
+        .p-checkbox {
26
+            margin-right: $inlineSpacing;
27
+        }
28
+    }
29
+
30
+    .p-listbox-list {
31
+        padding: $inputListPadding;
32
+
33
+        .p-listbox-item {
34
+            margin: $inputListItemMargin;
35
+            padding: $inputListItemPadding;
36
+            border: $inputListItemBorder;
37
+            color: $inputListItemTextColor;
38
+            transition: $listItemTransition;
39
+            border-radius: $inputListItemBorderRadius;
40
+
41
+            &.p-highlight {
42
+                color: $highlightTextColor;
43
+                background: $highlightBg;
44
+            }
45
+
46
+            &:focus {
47
+                @include focused-listitem();
48
+            }
49
+
50
+            .p-checkbox {
51
+                margin-right: $inlineSpacing;
52
+            }
53
+        }
54
+
55
+        .p-listbox-item-group {
56
+            margin: $submenuHeaderMargin;
57
+            padding: $submenuHeaderPadding;
58
+            color: $submenuHeaderTextColor;
59
+            background: $submenuHeaderBg;
60
+            font-weight: $submenuHeaderFontWeight;
61
+        }
62
+
63
+        .p-listbox-empty-message {
64
+            padding: $inputListItemPadding;
65
+            color: $inputListItemTextColor;
66
+            background: $inputListItemBg;
67
+        }
68
+    }
69
+
70
+    &:not(.p-disabled) {
71
+        .p-listbox-item {
72
+            &:not(.p-highlight):not(.p-disabled):hover {
73
+                color: $inputListItemTextHoverColor;
74
+                background: $inputListItemHoverBg;
75
+            }
76
+        }
77
+    }
78
+}
79
+
80
+p-listbox.ng-dirty.ng-invalid > .p-listbox {
81
+    @include invalid-input();
82
+}

+ 164
- 0
Angular/src/assets/sass/theme/designer/components/input/_multiselect.scss View File

@@ -0,0 +1,164 @@
1
+.p-multiselect {
2
+    background: $inputBg;
3
+    border: $inputBorder;
4
+    transition: $formElementTransition;
5
+    border-radius: $borderRadius;
6
+
7
+    &:not(.p-disabled):hover {
8
+        border-color: $inputHoverBorderColor;
9
+    }
10
+
11
+    &:not(.p-disabled).p-focus {
12
+        @include focused-input();
13
+    }
14
+
15
+    .p-multiselect-label {
16
+        padding: $inputPadding;
17
+        transition: $formElementTransition;
18
+
19
+        &.p-placeholder {
20
+            color: $inputPlaceholderTextColor;
21
+        }
22
+    }
23
+
24
+    &.p-multiselect-chip {
25
+        .p-multiselect-token {
26
+            padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
27
+            margin-right: $inlineSpacing;
28
+            background: $highlightBg;
29
+            color: $highlightTextColor;
30
+            border-radius: $borderRadius;
31
+
32
+            .p-multiselect-token-icon {
33
+                margin-left: $inlineSpacing;
34
+            }
35
+        }
36
+    }
37
+
38
+    .p-multiselect-trigger {
39
+        background: transparent;
40
+        color: $inputIconColor;
41
+        width: $inputGroupAddOnMinWidth;
42
+        border-top-right-radius: $borderRadius;
43
+        border-bottom-right-radius: $borderRadius;
44
+    }
45
+}
46
+
47
+.p-inputwrapper-filled {
48
+    .p-multiselect {
49
+        &.p-multiselect-chip {
50
+            .p-multiselect-label {
51
+                padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
52
+            }
53
+        }
54
+    }
55
+}
56
+
57
+.p-multiselect-panel {
58
+    background: $inputOverlayBg;
59
+    color: $inputListTextColor;
60
+    border: $inputOverlayBorder;
61
+    border-radius: $borderRadius;
62
+    box-shadow: $inputOverlayShadow;
63
+
64
+    .p-multiselect-header {
65
+        padding: $inputListHeaderPadding;
66
+        border-bottom: $inputListHeaderBorder;
67
+        color: $inputListHeaderTextColor;
68
+        background: $inputOverlayHeaderBg;
69
+        margin: $inputListHeaderMargin;
70
+        border-top-right-radius: $borderRadius;
71
+        border-top-left-radius: $borderRadius;
72
+
73
+        .p-multiselect-filter-container {
74
+            .p-inputtext {
75
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
76
+            }
77
+
78
+            .p-multiselect-filter-icon {
79
+                right: nth($inputPadding, 2);
80
+                color: $inputIconColor;
81
+            }
82
+        }
83
+
84
+        .p-checkbox {
85
+            margin-right: $inlineSpacing;
86
+        }
87
+
88
+        .p-multiselect-close {
89
+            margin-left: $inlineSpacing;
90
+            @include action-icon();
91
+        }
92
+    }
93
+
94
+    .p-multiselect-items {
95
+        &:not(.p-multiselect-virtualscroll) { 
96
+            padding: $inputListPadding;
97
+        }
98
+
99
+        &.p-multiselect-virtualscroll .cdk-virtual-scroll-content-wrapper {
100
+            padding: $inputListPadding;
101
+        }
102
+
103
+        .p-multiselect-item {
104
+            margin: $inputListItemMargin;
105
+            padding: $inputListItemPadding;
106
+            border: $inputListItemBorder;
107
+            color: $inputListItemTextColor;
108
+            background: $inputListItemBg;
109
+            transition: $listItemTransition;
110
+            border-radius: $inputListItemBorderRadius;
111
+
112
+            &.p-highlight {
113
+                color: $highlightTextColor;
114
+                background: $highlightBg;
115
+            }
116
+
117
+            &:not(.p-highlight):not(.p-disabled):hover {
118
+                color: $inputListItemTextHoverColor;
119
+                background: $inputListItemHoverBg;
120
+            }
121
+
122
+            &:focus {
123
+                @include focused-listitem();
124
+            }
125
+
126
+            .p-checkbox {
127
+                margin-right: $inlineSpacing;
128
+            }
129
+        }
130
+
131
+
132
+        .p-multiselect-item-group {
133
+            margin: $submenuHeaderMargin;
134
+            padding: $submenuHeaderPadding;
135
+            color: $submenuHeaderTextColor;
136
+            background: $submenuHeaderBg;
137
+            font-weight: $submenuHeaderFontWeight;
138
+        }
139
+
140
+        .p-multiselect-empty-message {
141
+            padding: $inputListItemPadding;
142
+            color: $inputListItemTextColor;
143
+            background: $inputListItemBg;
144
+        }
145
+    }
146
+}
147
+
148
+p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
149
+    @include invalid-input();
150
+}
151
+
152
+.p-input-filled {
153
+    .p-multiselect {
154
+        background: $inputFilledBg;
155
+
156
+        &:not(.p-disabled):hover {
157
+            background-color: $inputFilledHoverBg;
158
+        }
159
+    
160
+        &:not(.p-disabled).p-focus {
161
+            background-color: $inputFilledFocusBg;
162
+        }
163
+    }
164
+}

+ 33
- 0
Angular/src/assets/sass/theme/designer/components/input/_password.scss View File

@@ -0,0 +1,33 @@
1
+.p-password {
2
+    &.p-invalid.p-component > .p-inputtext {
3
+        @include invalid-input();
4
+    }
5
+}
6
+
7
+.p-password-panel {
8
+    padding: $panelContentPadding;
9
+    background: $panelContentBg;
10
+    color: $panelContentTextColor;
11
+    border: $overlayContentBorder;
12
+    box-shadow: $inputOverlayShadow;
13
+    border-radius: $borderRadius;
14
+
15
+    .p-password-meter {
16
+        margin-bottom: $inlineSpacing;
17
+        background: $passwordMeterBg;
18
+
19
+        .p-password-strength {
20
+            &.weak {
21
+                background: $passwordWeakBg;
22
+            }
23
+
24
+            &.medium {
25
+                background: $passwordMediumBg;
26
+            }
27
+
28
+            &.strong {
29
+                background: $passwordStrongBg;
30
+            }
31
+        }
32
+    }
33
+}

+ 78
- 0
Angular/src/assets/sass/theme/designer/components/input/_radiobutton.scss View File

@@ -0,0 +1,78 @@
1
+.p-radiobutton {
2
+    width: $radiobuttonWidth;
3
+    height: $radiobuttonHeight;
4
+
5
+    .p-radiobutton-box {
6
+        border: $radiobuttonBorder;
7
+        background: $inputBg;
8
+        width: $radiobuttonWidth;
9
+        height: $radiobuttonHeight;
10
+        color: $textColor;
11
+        border-radius: 50%;
12
+        transition: $formElementTransition;
13
+
14
+        &:not(.p-disabled):not(.p-highlight):hover {
15
+            border-color: $inputHoverBorderColor;
16
+        }
17
+
18
+        &:not(.p-disabled).p-focus {
19
+            @include focused-input();
20
+        }
21
+
22
+        .p-radiobutton-icon {
23
+            width: $radiobuttonIconSize;
24
+            height: $radiobuttonIconSize;
25
+            transition-duration: $transitionDuration;
26
+            background-color: $radiobuttonIconActiveColor;
27
+        }
28
+
29
+        &.p-highlight {
30
+            border-color: $radiobuttonActiveBorderColor;
31
+            background: $radiobuttonActiveBg;
32
+
33
+            &:not(.p-disabled):hover {
34
+                border-color: $radiobuttonActiveHoverBorderColor;
35
+                background: $radiobuttonActiveHoverBg;
36
+                color: $radiobuttonIconActiveHoverColor;
37
+            }
38
+        }
39
+    }
40
+}
41
+
42
+p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
43
+    @include invalid-input();
44
+}
45
+
46
+.p-input-filled {
47
+    .p-radiobutton {
48
+        .p-radiobutton-box {
49
+            background-color: $inputFilledBg;
50
+
51
+            &:not(.p-disabled):hover {
52
+                background-color: $inputFilledHoverBg;
53
+            }
54
+
55
+            &.p-highlight {
56
+                background: $radiobuttonActiveBg;
57
+    
58
+                &:not(.p-disabled):hover {
59
+                    background: $radiobuttonActiveHoverBg;
60
+                }
61
+            }
62
+        }
63
+    }
64
+}
65
+
66
+.p-radiobutton-label {
67
+    margin-left: $inlineSpacing;
68
+}
69
+
70
+@if ($highlightBg == $radiobuttonActiveBg) {
71
+    .p-highlight {
72
+        .p-radiobutton {
73
+            .p-radiobutton-box {
74
+                border-color: $radiobuttonIconActiveColor;
75
+            }
76
+        }
77
+    }
78
+}

+ 48
- 0
Angular/src/assets/sass/theme/designer/components/input/_rating.scss View File

@@ -0,0 +1,48 @@
1
+.p-rating {
2
+    .p-rating-icon {
3
+        color: $ratingStarIconOffColor;
4
+        margin-left: $inlineSpacing;
5
+        transition: $formElementTransition;   
6
+        font-size: $ratingIconFontSize;
7
+
8
+        &.p-rating-cancel {
9
+            color: $ratingCancelIconColor;
10
+        }
11
+
12
+        &:focus {
13
+            @include focused();
14
+        }
15
+
16
+        &:first-child {
17
+            margin-left: 0;
18
+        }
19
+
20
+        &.pi-star {
21
+            color: $ratingStarIconOnColor;
22
+        }
23
+    }
24
+
25
+    &:not(.p-disabled):not(.p-readonly) {
26
+        .p-rating-icon {
27
+            &:hover {
28
+                color: $ratingStarIconHoverColor;
29
+            }
30
+
31
+            &.p-rating-cancel {
32
+                &:hover {
33
+                    color: $ratingCancelIconHoverColor;
34
+                }
35
+            }
36
+        }
37
+    }
38
+}
39
+
40
+@if ($highlightBg == $ratingStarIconOnColor) {
41
+    .p-highlight {
42
+        .p-rating {
43
+            .p-rating-icon {
44
+                color: $highlightTextColor;
45
+            }
46
+        }
47
+    }
48
+}

+ 50
- 0
Angular/src/assets/sass/theme/designer/components/input/_selectbutton.scss View File

@@ -0,0 +1,50 @@
1
+.p-selectbutton {
2
+    .p-button {
3
+        background: $toggleButtonBg;
4
+        border: $toggleButtonBorder;
5
+        color: $toggleButtonTextColor;
6
+        transition: $formElementTransition;
7
+
8
+        .p-button-icon-left,
9
+        .p-button-icon-right {
10
+            color: $toggleButtonIconColor;
11
+        }
12
+
13
+        &:not(.p-disabled):not(.p-highlight):hover {
14
+            background: $toggleButtonHoverBg;
15
+            border-color: $toggleButtonHoverBorderColor;
16
+            color: $toggleButtonTextHoverColor;
17
+
18
+            .p-button-icon-left,
19
+            .p-button-icon-right {
20
+                color: $toggleButtonIconHoverColor;
21
+            }
22
+        }
23
+
24
+        &.p-highlight {
25
+            background: $toggleButtonActiveBg;
26
+            border-color: $toggleButtonActiveBorderColor;
27
+            color: $toggleButtonTextActiveColor;
28
+
29
+            .p-button-icon-left,
30
+            .p-button-icon-right {
31
+                color: $toggleButtonIconActiveColor;
32
+            }
33
+
34
+            &:hover {
35
+                background: $toggleButtonActiveHoverBg;
36
+                border-color: $toggleButtonActiveHoverBorderColor;
37
+                color: $toggleButtonTextActiveHoverColor;
38
+
39
+                .p-button-icon-left,
40
+                .p-button-icon-right {
41
+                    color: $toggleButtonIconActiveHoverColor;
42
+                }
43
+            }
44
+        }
45
+    }
46
+}
47
+
48
+p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
49
+    @include invalid-input();
50
+}

+ 69
- 0
Angular/src/assets/sass/theme/designer/components/input/_slider.scss View File

@@ -0,0 +1,69 @@
1
+.p-slider {
2
+    background: $sliderBg;
3
+    border: $sliderBorder;
4
+    border-radius: $borderRadius;
5
+
6
+    &.p-slider-horizontal {
7
+        height: $sliderHorizontalHeight;
8
+
9
+        .p-slider-handle {
10
+            margin-top: (-1 * $sliderHandleHeight / 2);
11
+            margin-left: (-1 * $sliderHandleWidth / 2);
12
+        }
13
+    }
14
+
15
+    &.p-slider-vertical {
16
+        width: $sliderVerticalWidth;
17
+
18
+        .p-slider-handle {
19
+            margin-left: (-1 * $sliderHandleWidth / 2);
20
+            margin-bottom: (-1 * $sliderHandleHeight / 2);
21
+        }
22
+    }
23
+
24
+    .p-slider-handle {
25
+        height: $sliderHandleHeight;
26
+        width: $sliderHandleWidth;
27
+        background: $sliderHandleBg;
28
+        border: $sliderHandleBorder;
29
+        border-radius: $sliderHandleBorderRadius;
30
+        transition: $formElementTransition;
31
+
32
+        &:focus {
33
+            @include focused();
34
+        }
35
+    }
36
+
37
+    .p-slider-range {
38
+        background: $sliderRangeBg;
39
+    }
40
+
41
+    &:not(.p-disabled) {
42
+        .p-slider-handle:hover {
43
+            background: $sliderHandleHoverBg;
44
+            border-color: $sliderHandleHoverBorderColor;
45
+        }
46
+    }
47
+
48
+    &.p-slider-animate {
49
+        &.p-slider-horizontal {
50
+            .p-slider-handle {
51
+                transition: $formElementTransition, left $transitionDuration;
52
+            }
53
+
54
+            .p-slider-range {
55
+                transition: width $transitionDuration;
56
+            }
57
+        }
58
+
59
+        &.p-slider-vertical {
60
+            .p-slider-handle {
61
+                transition: $formElementTransition, bottom $transitionDuration;
62
+            }
63
+
64
+            .p-slider-range {
65
+                transition: height $transitionDuration;
66
+            }
67
+        }
68
+    }
69
+}

+ 48
- 0
Angular/src/assets/sass/theme/designer/components/input/_togglebutton.scss View File

@@ -0,0 +1,48 @@
1
+.p-togglebutton.p-button {
2
+    background: $toggleButtonBg;
3
+    border: $toggleButtonBorder;
4
+    color: $toggleButtonTextColor;
5
+    transition: $formElementTransition;
6
+
7
+    .p-button-icon-left,
8
+    .p-button-icon-right {
9
+        color: $toggleButtonIconColor;
10
+    }
11
+
12
+    &:not(.p-disabled):not(.p-highlight):hover {
13
+        background: $toggleButtonHoverBg;
14
+        border-color: $toggleButtonHoverBorderColor;
15
+        color: $toggleButtonTextHoverColor;
16
+
17
+        .p-button-icon-left,
18
+        .p-button-icon-right {
19
+            color: $toggleButtonIconHoverColor;
20
+        }
21
+    }
22
+
23
+    &.p-highlight {
24
+        background: $toggleButtonActiveBg;
25
+        border-color: $toggleButtonActiveBorderColor;
26
+        color: $toggleButtonTextActiveColor;
27
+
28
+        .p-button-icon-left,
29
+        .p-button-icon-right {
30
+            color: $toggleButtonIconActiveColor;
31
+        }
32
+
33
+        &:hover {
34
+            background: $toggleButtonActiveHoverBg;
35
+            border-color: $toggleButtonActiveHoverBorderColor;
36
+            color: $toggleButtonTextActiveHoverColor;
37
+
38
+            .p-button-icon-left,
39
+            .p-button-icon-right {
40
+                color: $toggleButtonIconActiveHoverColor;
41
+            }
42
+        }
43
+    }
44
+}
45
+
46
+p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
47
+    @include invalid-input();
48
+}

+ 89
- 0
Angular/src/assets/sass/theme/designer/components/input/_treeselect.scss View File

@@ -0,0 +1,89 @@
1
+.p-treeselect {
2
+    background: $inputBg;
3
+    border: $inputBorder;
4
+    transition: $formElementTransition;
5
+    border-radius: $borderRadius;
6
+
7
+    &:not(.p-disabled):hover {
8
+        border-color: $inputHoverBorderColor;
9
+    }
10
+
11
+    &:not(.p-disabled).p-focus {
12
+        @include focused-input();
13
+    }
14
+
15
+    .p-treeselect-label {
16
+        padding: $inputPadding;
17
+        transition: $formElementTransition;
18
+
19
+        &.p-placeholder {
20
+            color: $inputPlaceholderTextColor;
21
+        }
22
+    }
23
+
24
+    &.p-treeselect-chip {
25
+        .p-treeselect-token {
26
+            padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
27
+            margin-right: $inlineSpacing;
28
+            background: $chipBg;
29
+            color: $chipTextColor;
30
+            border-radius: $chipBorderRadius;
31
+        }
32
+    }
33
+
34
+    .p-treeselect-trigger {
35
+        background: transparent;
36
+        color: $inputIconColor;
37
+        width: $inputGroupAddOnMinWidth;
38
+        border-top-right-radius: $borderRadius;
39
+        border-bottom-right-radius: $borderRadius;
40
+    }
41
+
42
+    &.p-invalid.p-component {
43
+        @include invalid-input();
44
+    }
45
+}
46
+
47
+.p-inputwrapper-filled {
48
+    .p-treeselect {
49
+        &.p-treeselect-chip {
50
+            .p-treeselect-label {
51
+                padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
52
+            }
53
+        }
54
+    }
55
+}
56
+
57
+.p-treeselect-panel {
58
+    background: $inputOverlayBg;
59
+    color: $inputListTextColor;
60
+    border: $inputOverlayBorder;
61
+    border-radius: $borderRadius;
62
+    box-shadow: $inputOverlayShadow;
63
+
64
+    .p-treeselect-items-wrapper {
65
+        .p-tree {
66
+            border: 0 none;
67
+        }
68
+
69
+        .p-treeselect-empty-message {
70
+            padding: $inputListItemPadding;
71
+            color: $inputListItemTextColor;
72
+            background: $inputListItemBg;
73
+        }
74
+    }
75
+}
76
+
77
+.p-input-filled {
78
+    .p-treeselect {
79
+        background: $inputFilledBg;
80
+
81
+        &:not(.p-disabled):hover {
82
+            background-color: $inputFilledHoverBg;
83
+        }
84
+
85
+        &:not(.p-disabled).p-focus {
86
+            background-color: $inputFilledFocusBg;
87
+        }
88
+    }
89
+}

+ 42
- 0
Angular/src/assets/sass/theme/designer/components/menu/_breadcrumb.scss View File

@@ -0,0 +1,42 @@
1
+.p-breadcrumb {
2
+    background: $breadcrumbBg;
3
+    border: $breadcrumbBorder;
4
+    border-radius: $borderRadius;
5
+    padding: $breadcrumbPadding;
6
+
7
+    ul {
8
+        li {
9
+            .p-menuitem-link {
10
+                transition: $listItemTransition;
11
+                border-radius: $borderRadius;
12
+
13
+                &:focus {
14
+                    @include focused();
15
+                }
16
+
17
+                .p-menuitem-text {
18
+                    color: $breadcrumbItemTextColor;
19
+                }
20
+
21
+                .p-menuitem-icon {
22
+                    color: $breadcrumbItemIconColor;
23
+                }
24
+            }
25
+
26
+            &.p-breadcrumb-chevron {
27
+                margin: 0 $inlineSpacing 0 $inlineSpacing;
28
+                color: $breadcrumbSeparatorColor;
29
+            }
30
+
31
+            &:last-child {
32
+                .p-menuitem-text {
33
+                    color: $breadcrumbLastItemTextColor;
34
+                }
35
+
36
+                .p-menuitem-icon {
37
+                    color: $breadcrumbLastItemIconColor;
38
+                }
39
+            }
40
+        }
41
+    }
42
+}

+ 50
- 0
Angular/src/assets/sass/theme/designer/components/menu/_contextmenu.scss View File

@@ -0,0 +1,50 @@
1
+.p-contextmenu {
2
+    padding: $verticalMenuPadding;
3
+    background: $overlayMenuBg;
4
+    color: $menuTextColor;
5
+    border: $overlayMenuBorder;
6
+    box-shadow: $overlayMenuShadow;
7
+    width: $menuWidth;
8
+
9
+    .p-menuitem-link {
10
+        @include menuitem-link();
11
+    }
12
+
13
+    .p-submenu-list {
14
+        padding: $verticalMenuPadding;
15
+        background: $overlayMenuBg;
16
+        border: $overlayMenuBorder;
17
+        box-shadow: $overlayMenuShadow;
18
+    }
19
+
20
+    .p-menuitem {
21
+        margin: $verticalMenuitemMargin;
22
+    
23
+        &:last-child {
24
+            margin: 0;
25
+        }
26
+
27
+        &.p-menuitem-active {
28
+            > .p-menuitem-link {
29
+                background: $menuitemActiveBg;
30
+
31
+                .p-menuitem-text {
32
+                    color: $menuitemTextActiveColor;
33
+                }
34
+
35
+                .p-menuitem-icon, .p-submenu-icon {
36
+                    color: $menuitemIconActiveColor;
37
+                }
38
+            }
39
+        }
40
+    }
41
+
42
+    .p-menu-separator {
43
+        border-top: $divider;
44
+        margin: $menuSeparatorMargin;
45
+    }
46
+
47
+    .p-submenu-icon {
48
+        font-size: $menuitemSubmenuIconFontSize;
49
+    }
50
+}

+ 86
- 0
Angular/src/assets/sass/theme/designer/components/menu/_dock.scss View File

@@ -0,0 +1,86 @@
1
+.p-dock {
2
+    .p-dock-list {
3
+        background: $dockBg;
4
+        border: $dockBorder;
5
+        padding: $dockPadding;
6
+        border-radius: $dockBorderRadius;
7
+    }
8
+
9
+    .p-dock-item {
10
+        padding: $dockItemPadding;
11
+    }
12
+
13
+    .p-dock-action {
14
+        width: $dockActionWidth;
15
+        height: $dockActionHeight;
16
+    }
17
+
18
+    &.p-dock-top,
19
+    &.p-dock-bottom {
20
+        .p-dock-item-second-prev,
21
+        .p-dock-item-second-next {
22
+            margin: 0 $dockSecondItemsMargin;
23
+        }
24
+
25
+        .p-dock-item-prev,
26
+        .p-dock-item-next {
27
+            margin: 0 $dockFirstItemsMargin;
28
+        }
29
+
30
+        .p-dock-item-current {
31
+            margin: 0 $dockCurrentItemMargin;
32
+        }
33
+    }
34
+
35
+    &.p-dock-left,
36
+    &.p-dock-right {
37
+        .p-dock-item-second-prev,
38
+        .p-dock-item-second-next {
39
+            margin: $dockSecondItemsMargin 0;
40
+        }
41
+
42
+        .p-dock-item-prev,
43
+        .p-dock-item-next {
44
+            margin: $dockFirstItemsMargin 0;
45
+        }
46
+
47
+        .p-dock-item-current {
48
+            margin: $dockCurrentItemMargin 0;
49
+        }
50
+    }
51
+}
52
+
53
+@media screen and (max-width: 960px) {
54
+    .p-dock {
55
+        &.p-dock-top,
56
+        &.p-dock-bottom {
57
+            .p-dock-list-container {
58
+                overflow-x: auto;
59
+                width: 100%;
60
+
61
+                .p-dock-list {
62
+                    margin: 0 auto;
63
+                }
64
+            }
65
+        }
66
+
67
+        &.p-dock-left,
68
+        &.p-dock-right {
69
+            .p-dock-list-container {
70
+                overflow-y: auto;
71
+                height: 100%;
72
+
73
+                .p-dock-list {
74
+                    margin: auto 0;
75
+                }
76
+            }
77
+        }
78
+
79
+        .p-dock-list {
80
+            .p-dock-item {
81
+                transform: none;
82
+                margin: 0;
83
+            }
84
+        }
85
+    }
86
+}

+ 102
- 0
Angular/src/assets/sass/theme/designer/components/menu/_megamenu.scss View File

@@ -0,0 +1,102 @@
1
+.p-megamenu {
2
+    padding: $horizontalMenuPadding;
3
+    background: $horizontalMenuBg;
4
+    color: $horizontalMenuTextColor;
5
+    border: $horizontalMenuBorder;
6
+    border-radius: $borderRadius;
7
+
8
+    .p-megamenu-root-list {  
9
+        > .p-menuitem {
10
+            > .p-menuitem-link {
11
+                @include horizontal-rootmenuitem-link();
12
+            }
13
+
14
+            &.p-menuitem-active {
15
+                > .p-menuitem-link,
16
+                > .p-menuitem-link:not(.p-disabled):hover {
17
+                    background: $horizontalMenuRootMenuitemActiveBg;
18
+            
19
+                    .p-menuitem-text {
20
+                        color: $horizontalMenuRootMenuitemTextActiveColor;
21
+                    }
22
+            
23
+                    .p-menuitem-icon {
24
+                        color: $horizontalMenuRootMenuitemIconActiveColor;
25
+                    }
26
+                    
27
+                    .p-submenu-icon {
28
+                        color: $horizontalMenuRootMenuitemIconActiveColor;
29
+                    }
30
+                }
31
+            }
32
+        }
33
+    }
34
+
35
+    .p-menuitem-link {
36
+        @include menuitem-link();
37
+    }
38
+
39
+    .p-megamenu-panel {
40
+        background: $overlayMenuBg;
41
+        color: $menuTextColor;
42
+        border: $overlayMenuBorder;
43
+        box-shadow: $overlayMenuShadow;
44
+    }
45
+
46
+    .p-megamenu-submenu-header {
47
+        margin: $submenuHeaderMargin;
48
+        padding: $submenuHeaderPadding;
49
+        color: $submenuHeaderTextColor;
50
+        background: $submenuHeaderBg;
51
+        font-weight: $submenuHeaderFontWeight;
52
+        border-top-right-radius: $borderRadius; 
53
+        border-top-left-radius: $borderRadius; 
54
+    }
55
+
56
+    .p-megamenu-submenu {
57
+        padding: $verticalMenuPadding;
58
+        width: $menuWidth;
59
+
60
+        .p-menu-separator {
61
+            border-top: $divider;
62
+            margin: $menuSeparatorMargin;
63
+        }
64
+
65
+        .p-menuitem {
66
+            margin: $verticalMenuitemMargin;
67
+    
68
+            &:last-child {
69
+                margin: 0;
70
+            }
71
+        }
72
+    }
73
+
74
+    .p-menuitem {
75
+        &.p-menuitem-active {
76
+            > .p-menuitem-link {
77
+                background: $menuitemActiveBg;
78
+
79
+                .p-menuitem-text {
80
+                    color: $menuitemTextActiveColor;
81
+                }
82
+
83
+                .p-menuitem-icon, .p-submenu-icon {
84
+                    color: $menuitemIconActiveColor;
85
+                }
86
+            }
87
+        }
88
+    }
89
+
90
+    &.p-megamenu-vertical {
91
+        width: $menuWidth;
92
+        padding: $verticalMenuPadding;
93
+
94
+        .p-menuitem {
95
+            margin: $verticalMenuitemMargin;
96
+    
97
+            &:last-child {
98
+                margin: 0;
99
+            }
100
+        }
101
+    }
102
+}

+ 41
- 0
Angular/src/assets/sass/theme/designer/components/menu/_menu.scss View File

@@ -0,0 +1,41 @@
1
+.p-menu {
2
+    padding: $verticalMenuPadding;
3
+    background: $menuBg;
4
+    color: $menuTextColor;
5
+    border: $menuBorder;
6
+    border-radius: $borderRadius;
7
+    width: $menuWidth;
8
+
9
+    .p-menuitem-link {
10
+        @include menuitem-link();
11
+    }
12
+
13
+    &.p-menu-overlay {
14
+        background: $overlayMenuBg;
15
+        border: $overlayMenuBorder;
16
+        box-shadow: $overlayMenuShadow;
17
+    }
18
+
19
+    .p-submenu-header {
20
+        margin: $submenuHeaderMargin;
21
+        padding: $submenuHeaderPadding;
22
+        color: $submenuHeaderTextColor;
23
+        background: $submenuHeaderBg;
24
+        font-weight: $submenuHeaderFontWeight;
25
+        border-top-right-radius: $submenuHeaderBorderRadius; 
26
+        border-top-left-radius: $submenuHeaderBorderRadius; 
27
+    }
28
+
29
+    .p-menu-separator {
30
+        border-top: $divider;
31
+        margin: $menuSeparatorMargin;
32
+    }
33
+
34
+    .p-menuitem {
35
+        margin: $verticalMenuitemMargin;
36
+
37
+        &:last-child {
38
+            margin: 0;
39
+        }
40
+    }
41
+}

+ 179
- 0
Angular/src/assets/sass/theme/designer/components/menu/_menubar.scss View File

@@ -0,0 +1,179 @@
1
+.p-menubar {
2
+    padding: $horizontalMenuPadding;
3
+    background: $horizontalMenuBg;
4
+    color: $horizontalMenuTextColor;
5
+    border: $horizontalMenuBorder;
6
+    border-radius: $borderRadius;
7
+
8
+    .p-menuitem-link {
9
+        @include menuitem-link();
10
+    }
11
+
12
+    .p-menubar-root-list {
13
+        > .p-menuitem {
14
+            > .p-menuitem-link {
15
+                @include horizontal-rootmenuitem-link();
16
+            }
17
+
18
+            &.p-menuitem-active {
19
+                > .p-menuitem-link,
20
+                > .p-menuitem-link:not(.p-disabled):hover {
21
+                    background: $horizontalMenuRootMenuitemActiveBg;
22
+            
23
+                    .p-menuitem-text {
24
+                        color: $horizontalMenuRootMenuitemTextActiveColor;
25
+                    }
26
+            
27
+                    .p-menuitem-icon {
28
+                        color: $horizontalMenuRootMenuitemIconActiveColor;
29
+                    }
30
+                    
31
+                    .p-submenu-icon {
32
+                        color: $horizontalMenuRootMenuitemIconActiveColor;
33
+                    }
34
+                }
35
+            }
36
+        }
37
+    }
38
+
39
+    .p-submenu-list {
40
+        padding: $verticalMenuPadding;
41
+        background: $overlayMenuBg;
42
+        border: $overlayMenuBorder;
43
+        box-shadow: $overlayMenuShadow;
44
+        width: $menuWidth;
45
+
46
+        .p-menu-separator {
47
+            border-top: $divider;
48
+            margin: $menuSeparatorMargin;
49
+        }
50
+
51
+        .p-submenu-icon {
52
+            font-size: $menuitemSubmenuIconFontSize;
53
+        }
54
+
55
+        .p-menuitem {
56
+            margin: $verticalMenuitemMargin;
57
+    
58
+            &:last-child {
59
+                margin: 0;
60
+            }
61
+        }
62
+    }
63
+
64
+    .p-menuitem {
65
+        &.p-menuitem-active {
66
+            > .p-menuitem-link {
67
+                background: $menuitemActiveBg;
68
+
69
+                .p-menuitem-text {
70
+                    color: $menuitemTextActiveColor;
71
+                }
72
+
73
+                .p-menuitem-icon, .p-submenu-icon {
74
+                    color: $menuitemIconActiveColor;
75
+                }
76
+            }
77
+        }
78
+    }
79
+}
80
+
81
+@media screen and (max-width: 960px) {
82
+    .p-menubar {
83
+        position: relative;
84
+
85
+        .p-menubar-button {
86
+            display: flex;
87
+            width: $actionIconWidth;
88
+            height: $actionIconHeight;
89
+            color: $horizontalMenuRootMenuitemIconColor;
90
+            border-radius: $actionIconBorderRadius;
91
+            transition: $actionIconTransition;
92
+        
93
+            &:hover {
94
+                color: $horizontalMenuRootMenuitemIconHoverColor;
95
+                background: $horizontalMenuRootMenuitemHoverBg;
96
+            }
97
+        
98
+            &:focus {
99
+                @include focused();
100
+            }
101
+        }
102
+
103
+        .p-menubar-root-list {
104
+            position: absolute;
105
+            display: none;
106
+            padding: $verticalMenuPadding;
107
+            background: $overlayMenuBg;
108
+            border: $overlayMenuBorder;
109
+            box-shadow: $overlayMenuShadow;
110
+            width: 100%;
111
+    
112
+            .p-menu-separator {
113
+                border-top: $divider;
114
+                margin: $menuSeparatorMargin;
115
+            }
116
+    
117
+            .p-submenu-icon {
118
+                font-size: $menuitemSubmenuIconFontSize;
119
+            }
120
+
121
+            > .p-menuitem {
122
+                width: 100%;
123
+                position: static;
124
+
125
+                > .p-menuitem-link {
126
+                    @include menuitem-link();
127
+
128
+                    > .p-submenu-icon {
129
+                        margin-left: auto;
130
+                        transition: transform $transitionDuration;
131
+                    }
132
+                }
133
+
134
+                &.p-menuitem-active {
135
+                    > .p-menuitem-link {
136
+                        > .p-submenu-icon {
137
+                            transform: rotate(-180deg);
138
+                        }
139
+                    }
140
+                }
141
+            }
142
+
143
+            .p-submenu-list {
144
+                width: 100%;
145
+                position: static;
146
+                box-shadow: none;
147
+                border: 0 none;
148
+
149
+                .p-submenu-icon {
150
+                    transition: transform $transitionDuration;
151
+                    transform: rotate(90deg);
152
+                }
153
+
154
+                .p-menuitem-active {
155
+                    > .p-menuitem-link {
156
+                        > .p-submenu-icon {
157
+                            transform: rotate(-90deg);
158
+                        }
159
+                    }
160
+                }
161
+            }
162
+    
163
+            .p-menuitem {
164
+                width: 100%;
165
+                position: static;
166
+            }
167
+
168
+            @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
169
+        }
170
+
171
+        &.p-menubar-mobile-active .p-menubar-root-list {
172
+            display: flex;
173
+            flex-direction: column;
174
+            top: 100%;
175
+            left: 0;
176
+            z-index: 1;
177
+        }
178
+    }
179
+}

+ 137
- 0
Angular/src/assets/sass/theme/designer/components/menu/_panelmenu.scss View File

@@ -0,0 +1,137 @@
1
+.p-panelmenu {
2
+    .p-panelmenu-header {
3
+        > a {
4
+            padding: $accordionHeaderPadding;
5
+            border: $accordionHeaderBorder;
6
+            color: $accordionHeaderTextColor;
7
+            background: $accordionHeaderBg;
8
+            font-weight: $accordionHeaderFontWeight;
9
+            border-radius: $borderRadius;
10
+            transition: $listItemTransition;
11
+
12
+            .p-panelmenu-icon {
13
+                margin-right: $inlineSpacing;
14
+            }
15
+
16
+            .p-menuitem-icon {
17
+                margin-right: $inlineSpacing;
18
+            }
19
+
20
+            &:focus {
21
+                @include focused();
22
+            }
23
+        }
24
+
25
+        &:not(.p-highlight):not(.p-disabled) {
26
+            > a:hover {
27
+                background: $accordionHeaderHoverBg;
28
+                border-color: $accordionHeaderHoverBorderColor;
29
+                color: $accordionHeaderTextHoverColor;
30
+            }
31
+        }
32
+
33
+        &.p-highlight {
34
+            margin-bottom: 0;
35
+
36
+            > a {
37
+                background: $accordionHeaderActiveBg;
38
+                border-color: $accordionHeaderActiveBorderColor;
39
+                color: $accordionHeaderTextActiveColor;
40
+                border-bottom-right-radius: 0;
41
+                border-bottom-left-radius: 0;
42
+            }
43
+
44
+            &:not(.p-disabled) {
45
+                > a {
46
+                    &:hover {
47
+                        border-color: $accordionHeaderActiveHoverBorderColor;
48
+                        background: $accordionHeaderActiveHoverBg;
49
+                        color: $accordionHeaderTextActiveHoverColor;
50
+                    }
51
+                }
52
+            }
53
+        }
54
+    }
55
+
56
+    .p-panelmenu-content {
57
+        padding: $verticalMenuPadding;
58
+        border: $accordionContentBorder;
59
+        background: $accordionContentBg;
60
+        color: $accordionContentTextColor;
61
+        margin-bottom: $accordionSpacing;
62
+        border-top: 0;
63
+        border-top-right-radius: 0;
64
+        border-top-left-radius: 0;
65
+        border-bottom-right-radius: $borderRadius;
66
+        border-bottom-left-radius: $borderRadius;
67
+
68
+        .p-menuitem {
69
+            .p-menuitem-link {
70
+                @include menuitem-link();
71
+
72
+                .p-panelmenu-icon {
73
+                    margin-right: $inlineSpacing;
74
+                }
75
+            }
76
+        }
77
+
78
+        .p-submenu-list:not(.p-panelmenu-root-submenu) {
79
+            padding: $treeNodeChildrenPadding;
80
+        }
81
+    }
82
+
83
+    .p-panelmenu-panel {
84
+        margin-bottom: $accordionSpacing;
85
+
86
+        @if $accordionSpacing == 0 {
87
+            .p-panelmenu-header {
88
+                > a {
89
+                    border-radius: 0;
90
+                }
91
+            }
92
+
93
+            .p-panelmenu-content {
94
+                border-radius: 0;
95
+            }
96
+
97
+            &:not(:first-child) {
98
+                .p-panelmenu-header {
99
+                    > a {
100
+                        border-top: 0 none;
101
+                    }
102
+
103
+                    &:not(.p-highlight):not(.p-disabled):hover,
104
+                    &:not(.p-disabled).p-highlight:hover {
105
+                        > a {
106
+                            border-top: 0 none;
107
+                        }
108
+                    }
109
+                }
110
+            }
111
+
112
+            &:first-child {
113
+                .p-panelmenu-header {
114
+                    > a {
115
+                        border-top-right-radius: $borderRadius;
116
+                        border-top-left-radius: $borderRadius;
117
+                    }
118
+                }
119
+            }
120
+
121
+            &:last-child {
122
+                .p-panelmenu-header:not(.p-highlight) {
123
+                    > a {
124
+                        border-bottom-right-radius: $borderRadius;
125
+                        border-bottom-left-radius: $borderRadius;
126
+                    }
127
+                }
128
+
129
+                .p-panelmenu-content {
130
+                    border-bottom-right-radius: $borderRadius;
131
+                    border-bottom-left-radius: $borderRadius;
132
+                }
133
+            }
134
+        } 
135
+    }
136
+
137
+}

+ 55
- 0
Angular/src/assets/sass/theme/designer/components/menu/_slidemenu.scss View File

@@ -0,0 +1,55 @@
1
+.p-slidemenu {
2
+    padding: $verticalMenuPadding;
3
+    background: $menuBg;
4
+    color: $menuTextColor;
5
+    border: $menuBorder;
6
+    border-radius: $borderRadius;
7
+    width: $menuWidth;
8
+
9
+    .p-menuitem-link {
10
+        @include menuitem-link();
11
+    }
12
+
13
+    &.p-slidemenu-overlay {
14
+        background: $overlayMenuBg;
15
+        border: $overlayMenuBorder;
16
+        box-shadow: $overlayMenuShadow;
17
+    }
18
+
19
+    .p-slidemenu-list {
20
+        padding: $verticalMenuPadding;
21
+        background: $overlayMenuBg;
22
+        border: $overlayMenuBorder;
23
+        box-shadow: $overlayMenuShadow;
24
+    }
25
+
26
+    .p-slidemenu {
27
+        &.p-slidemenu-active {
28
+            > .p-slidemenu-link {
29
+                background: $menuitemActiveBg;
30
+
31
+                .p-slidemenu-text {
32
+                    color: $menuitemTextActiveColor;
33
+                }
34
+
35
+                .p-slidemenu-icon, .p-slidemenu-icon {
36
+                    color: $menuitemIconActiveColor;
37
+                }
38
+            }
39
+        }
40
+    }
41
+
42
+    .p-slidemenu-separator {
43
+        border-top: $divider;
44
+        margin: $menuSeparatorMargin;
45
+    }
46
+
47
+    .p-slidemenu-icon {
48
+        font-size: $menuitemSubmenuIconFontSize;
49
+    }
50
+
51
+    .p-slidemenu-backward {
52
+        padding: $menuitemPadding;
53
+	    color: $menuitemTextColor;
54
+    }
55
+}

+ 55
- 0
Angular/src/assets/sass/theme/designer/components/menu/_steps.scss View File

@@ -0,0 +1,55 @@
1
+.p-steps {
2
+
3
+    .p-steps-item {
4
+        .p-menuitem-link {
5
+            background: transparent;
6
+            transition: $listItemTransition;
7
+            border-radius: $borderRadius;
8
+            background: $stepsItemBg;
9
+
10
+            .p-steps-number {
11
+                color: $stepsItemNumberColor;
12
+                border: $stepsItemBorder;
13
+                background: $stepsItemBg;
14
+                min-width: $stepsItemNumberWidth;
15
+                height: $stepsItemNumberHeight;
16
+                line-height: $stepsItemNumberHeight;
17
+                font-size: $stepsItemNumberFontSize;
18
+                z-index: 1;
19
+                border-radius: $stepsItemNumberBorderRadius;
20
+            }
21
+
22
+            .p-steps-title {
23
+                margin-top: $inlineSpacing;
24
+                color: $stepsItemTextColor;
25
+            }
26
+
27
+            &:not(.p-disabled):focus {
28
+                @include focused();
29
+            }
30
+        }
31
+
32
+        &.p-highlight {
33
+            .p-steps-number {
34
+                background: $highlightBg;
35
+                color: $highlightTextColor;
36
+            }
37
+
38
+            .p-steps-title {
39
+                font-weight: $stepsItemActiveFontWeight;
40
+                color: $textColor;
41
+            }
42
+        }
43
+
44
+        &:before {
45
+            content:' ';
46
+            border-top: $divider;
47
+            width: 100%;
48
+            top: 50%;
49
+            left: 0;
50
+            display: block;
51
+            position: absolute;
52
+            margin-top: -1 * ($stepsItemNumberHeight / 2);
53
+        }
54
+    }
55
+}

+ 49
- 0
Angular/src/assets/sass/theme/designer/components/menu/_tabmenu.scss View File

@@ -0,0 +1,49 @@
1
+.p-tabmenu {
2
+    .p-tabmenu-nav {
3
+        background: $tabviewNavBg;
4
+        border: $tabviewNavBorder;
5
+        border-width: $tabviewNavBorderWidth;
6
+
7
+        .p-tabmenuitem {
8
+            margin-right: $tabviewHeaderSpacing;
9
+
10
+            .p-menuitem-link {
11
+                border: $tabviewHeaderBorder;
12
+                border-width: $tabviewHeaderBorderWidth;
13
+                border-color: $tabviewHeaderBorderColor;
14
+                background: $tabviewHeaderBg;
15
+                color: $tabviewHeaderTextColor;
16
+                padding: $tabviewHeaderPadding;
17
+                font-weight: $tabviewHeaderFontWeight;
18
+                border-top-right-radius: $borderRadius;
19
+                border-top-left-radius: $borderRadius;
20
+                transition: $listItemTransition;
21
+                margin: $tabviewHeaderMargin;
22
+
23
+                .p-menuitem-icon {
24
+                    margin-right: $inlineSpacing;
25
+                }
26
+
27
+                &:not(.p-disabled):focus {
28
+                    @include focused-inset();
29
+                }
30
+            }
31
+
32
+            &:not(.p-highlight):not(.p-disabled):hover {
33
+                .p-menuitem-link {
34
+                    background: $tabviewHeaderHoverBg;
35
+                    border-color: $tabviewHeaderHoverBorderColor;
36
+                    color: $tabviewHeaderTextHoverColor;
37
+                }
38
+            }
39
+
40
+            &.p-highlight {
41
+                .p-menuitem-link {
42
+                    background: $tabviewHeaderActiveBg;
43
+                    border-color: $tabviewHeaderActiveBorderColor;
44
+                    color: $tabviewHeaderTextActiveColor;
45
+                }
46
+            }
47
+        }
48
+    }
49
+}

+ 56
- 0
Angular/src/assets/sass/theme/designer/components/menu/_tieredmenu.scss View File

@@ -0,0 +1,56 @@
1
+.p-tieredmenu {
2
+    padding: $verticalMenuPadding;
3
+    background: $menuBg;
4
+    color: $menuTextColor;
5
+    border: $menuBorder;
6
+    border-radius: $borderRadius;
7
+    width: $menuWidth;
8
+
9
+    .p-menuitem-link {
10
+        @include menuitem-link();
11
+    }
12
+
13
+    &.p-tieredmenu-overlay {
14
+        background: $overlayMenuBg;
15
+        border: $overlayMenuBorder;
16
+        box-shadow: $overlayMenuShadow;
17
+    }
18
+
19
+    .p-submenu-list {
20
+        padding: $verticalMenuPadding;
21
+        background: $overlayMenuBg;
22
+        border: $overlayMenuBorder;
23
+        box-shadow: $overlayMenuShadow;
24
+    }
25
+
26
+    .p-menuitem {
27
+        margin: $verticalMenuitemMargin;
28
+    
29
+        &:last-child {
30
+            margin: 0;
31
+        }
32
+
33
+        &.p-menuitem-active {
34
+            > .p-menuitem-link {
35
+                background: $menuitemActiveBg;
36
+
37
+                .p-menuitem-text {
38
+                    color: $menuitemTextActiveColor;
39
+                }
40
+
41
+                .p-menuitem-icon, .p-submenu-icon {
42
+                    color: $menuitemIconActiveColor;
43
+                }
44
+            }
45
+        }
46
+    }
47
+
48
+    .p-menu-separator {
49
+        border-top: $divider;
50
+        margin: $menuSeparatorMargin;
51
+    }
52
+
53
+    .p-submenu-icon {
54
+        font-size: $menuitemSubmenuIconFontSize;
55
+    }
56
+}

+ 64
- 0
Angular/src/assets/sass/theme/designer/components/messages/_inlinemessage.scss View File

@@ -0,0 +1,64 @@
1
+.p-inline-message {
2
+    padding: $inlineMessagePadding;
3
+    margin: $inlineMessageMargin;
4
+    border-radius: $borderRadius;
5
+
6
+    &.p-inline-message-info {
7
+        background: $infoMessageBg;
8
+        border: $infoMessageBorder;
9
+        border-width: $inlineMessageBorderWidth;
10
+        color: $infoMessageTextColor;
11
+
12
+        .p-inline-message-icon {
13
+            color: $infoMessageIconColor;
14
+        }
15
+    }
16
+
17
+    &.p-inline-message-success {
18
+        background: $successMessageBg;
19
+        border: $successMessageBorder;
20
+        border-width: $inlineMessageBorderWidth;
21
+        color: $successMessageTextColor;
22
+
23
+        .p-inline-message-icon {
24
+            color: $successMessageIconColor;
25
+        }
26
+    }
27
+
28
+    &.p-inline-message-warn {
29
+        background: $warningMessageBg;
30
+        border: $warningMessageBorder;
31
+        border-width: $inlineMessageBorderWidth;
32
+        color: $warningMessageTextColor;
33
+
34
+        .p-inline-message-icon {
35
+            color: $warningMessageIconColor;
36
+        }
37
+    }
38
+
39
+    &.p-inline-message-error {
40
+        background: $errorMessageBg;
41
+        border: $errorMessageBorder;
42
+        border-width: $inlineMessageBorderWidth;
43
+        color: $errorMessageTextColor;
44
+
45
+        .p-inline-message-icon {
46
+            color: $errorMessageIconColor;
47
+        }
48
+    }
49
+
50
+    .p-inline-message-icon {
51
+        font-size: $inlineMessageIconFontSize;
52
+        margin-right: $inlineSpacing;
53
+    }
54
+
55
+    .p-inline-message-text {
56
+        font-size: $inlineMessageTextFontSize;
57
+    }
58
+
59
+    &.p-inline-message-icon-only {
60
+        .p-inline-message-icon {
61
+            margin-right: 0;
62
+        }
63
+    }
64
+}

+ 102
- 0
Angular/src/assets/sass/theme/designer/components/messages/_message.scss View File

@@ -0,0 +1,102 @@
1
+.p-message {
2
+    margin: $messageMargin;
3
+    border-radius: $borderRadius;
4
+
5
+    .p-message-wrapper {
6
+        padding: $messagePadding;
7
+    }
8
+
9
+    .p-message-close {
10
+        width: $actionIconWidth;
11
+        height: $actionIconHeight;
12
+        border-radius: $actionIconBorderRadius;
13
+        background: transparent;
14
+        transition: $actionIconTransition;
15
+
16
+        &:hover {
17
+            background: rgba(255,255,255,.3);
18
+        }
19
+
20
+        &:focus {
21
+            @include focused();
22
+        }
23
+    }
24
+
25
+    &.p-message-info {
26
+        background: $infoMessageBg;
27
+        border: $infoMessageBorder;
28
+        border-width: $messageBorderWidth;
29
+        color: $infoMessageTextColor;
30
+
31
+        .p-message-icon {
32
+            color: $infoMessageIconColor;
33
+        }
34
+
35
+        .p-message-close {
36
+            color: $infoMessageIconColor;
37
+        }
38
+    }
39
+
40
+    &.p-message-success {
41
+        background: $successMessageBg;
42
+        border: $successMessageBorder;
43
+        border-width: $messageBorderWidth;
44
+        color: $successMessageTextColor;
45
+
46
+        .p-message-icon {
47
+            color: $successMessageIconColor;
48
+        }
49
+
50
+        .p-message-close {
51
+            color: $successMessageIconColor;
52
+        }
53
+    }
54
+
55
+    &.p-message-warn {
56
+        background: $warningMessageBg;
57
+        border: $warningMessageBorder;
58
+        border-width: $messageBorderWidth;
59
+        color: $warningMessageTextColor;
60
+
61
+        .p-message-icon {
62
+            color: $warningMessageIconColor;
63
+        }
64
+
65
+        .p-message-close {
66
+            color: $warningMessageIconColor;
67
+        }
68
+    }
69
+
70
+    &.p-message-error {
71
+        background: $errorMessageBg;
72
+        border: $errorMessageBorder;
73
+        border-width: $messageBorderWidth;
74
+        color: $errorMessageTextColor;
75
+
76
+        .p-message-icon {
77
+            color: $errorMessageIconColor;
78
+        }
79
+
80
+        .p-message-close {
81
+            color: $errorMessageIconColor;
82
+        }
83
+    }
84
+
85
+    .p-message-text {
86
+        font-size: $messageTextFontSize;
87
+        font-weight: $messageTextFontWeight;
88
+    }
89
+
90
+    .p-message-icon {
91
+        font-size: $messageIconFontSize;
92
+        margin-right: $inlineSpacing;
93
+    }
94
+
95
+    .p-message-summary {
96
+        font-weight: 700;
97
+    }
98
+
99
+    .p-message-detail {
100
+        margin-left: $inlineSpacing;
101
+    }
102
+}

+ 95
- 0
Angular/src/assets/sass/theme/designer/components/messages/_toast.scss View File

@@ -0,0 +1,95 @@
1
+.p-toast {
2
+    opacity: $toastOpacity;
3
+
4
+    .p-toast-message {
5
+        margin: $toastMargin;
6
+        box-shadow: $toastShadow;
7
+        border-radius: $borderRadius;
8
+
9
+        .p-toast-message-content {
10
+            padding: $toastPadding;
11
+            border-width: $toastBorderWidth;
12
+
13
+            .p-toast-message-text {
14
+                margin: $toastMessageTextMargin;
15
+            }
16
+
17
+            .p-toast-message-icon {
18
+                font-size: $toastIconFontSize;
19
+            }
20
+
21
+            .p-toast-summary {
22
+                font-weight: $toastTitleFontWeight;
23
+            }
24
+
25
+            .p-toast-detail {
26
+                margin: $toastDetailMargin;
27
+            }
28
+        }
29
+
30
+        .p-toast-icon-close {
31
+            width: $toastIconFontSize;
32
+            height: $toastIconFontSize;
33
+            border-radius: $actionIconBorderRadius;
34
+            background: transparent;
35
+            transition: $actionIconTransition;
36
+
37
+            &:hover {
38
+                background: rgba(255,255,255,.3);
39
+            }
40
+
41
+            &:focus {
42
+                @include focused();
43
+            }
44
+        }
45
+
46
+        &.p-toast-message-info {
47
+            background: $infoMessageBg;
48
+            border: $infoMessageBorder;
49
+            border-width: $messageBorderWidth;
50
+            color: $infoMessageTextColor;
51
+
52
+            .p-toast-message-icon,
53
+            .p-toast-icon-close {
54
+                color: $infoMessageIconColor;
55
+            }
56
+        }
57
+
58
+        &.p-toast-message-success {
59
+            background: $successMessageBg;
60
+            border: $successMessageBorder;
61
+            border-width: $messageBorderWidth;
62
+            color: $successMessageTextColor;
63
+
64
+            .p-toast-message-icon,
65
+            .p-toast-icon-close {
66
+                color: $successMessageIconColor;
67
+            }
68
+        }
69
+
70
+        &.p-toast-message-warn {
71
+            background: $warningMessageBg;
72
+            border: $warningMessageBorder;
73
+            border-width: $messageBorderWidth;
74
+            color: $warningMessageTextColor;
75
+
76
+            .p-toast-message-icon,
77
+            .p-toast-icon-close {
78
+                color: $warningMessageIconColor;
79
+            }
80
+        }
81
+
82
+        &.p-toast-message-error {
83
+            background: $errorMessageBg;
84
+            border: $errorMessageBorder;
85
+            border-width: $messageBorderWidth;
86
+            color: $errorMessageTextColor;
87
+
88
+            .p-toast-message-icon,
89
+            .p-toast-icon-close {
90
+                color: $errorMessageIconColor;
91
+            }
92
+        }
93
+
94
+    }
95
+}

+ 30
- 0
Angular/src/assets/sass/theme/designer/components/misc/_avatar.scss View File

@@ -0,0 +1,30 @@
1
+.p-avatar {
2
+    background-color: $avatarBg;
3
+    border-radius: $borderRadius;
4
+
5
+    &.p-avatar-lg {
6
+        width: 3rem;
7
+        height: 3rem;
8
+        font-size: 1.5rem;
9
+
10
+        .p-avatar-icon {
11
+            font-size: 1.5rem;
12
+        }
13
+    }
14
+
15
+    &.p-avatar-xl {
16
+        width: 4rem;
17
+        height: 4rem;
18
+        font-size: 2rem;
19
+
20
+        .p-avatar-icon {
21
+            font-size: 2rem;
22
+        }
23
+    }
24
+}
25
+
26
+.p-avatar-group {
27
+    .p-avatar {
28
+        border: 2px solid $panelContentBg;
29
+    }
30
+}

+ 48
- 0
Angular/src/assets/sass/theme/designer/components/misc/_badge.scss View File

@@ -0,0 +1,48 @@
1
+.p-badge {
2
+    background: $badgeBg;
3
+    color: $badgeTextColor;
4
+    font-size: $badgeFontSize;
5
+    font-weight: $badgeFontWeight;
6
+    min-width: $badgeMinWidth;
7
+    height: $badgeHeight;
8
+    line-height: $badgeHeight;
9
+
10
+    &.p-badge-secondary {
11
+        background-color: $secondaryButtonBg;
12
+        color: $secondaryButtonTextColor;
13
+    }
14
+
15
+    &.p-badge-success {
16
+        background-color: $successButtonBg;
17
+        color: $successButtonTextColor;
18
+    }
19
+
20
+    &.p-badge-info {
21
+        background-color: $infoButtonBg;
22
+        color: $infoButtonTextColor;
23
+    }
24
+
25
+    &.p-badge-warning {
26
+        background-color: $warningButtonBg;
27
+        color: $warningButtonTextColor;
28
+    }
29
+
30
+    &.p-badge-danger {
31
+        background-color: $dangerButtonBg;
32
+        color: $dangerButtonTextColor;
33
+    }
34
+
35
+    &.p-badge-lg {
36
+        font-size: 1.5 * $badgeFontSize;
37
+        min-width: 1.5 * $badgeMinWidth;
38
+        height: 1.5 * $badgeHeight;
39
+        line-height: 1.5 * $badgeHeight;
40
+    }
41
+
42
+    &.p-badge-xl {
43
+        font-size: 2 * $badgeFontSize;
44
+        min-width: 2 * $badgeMinWidth;
45
+        height: 2 * $badgeHeight;
46
+        line-height: 2 * $badgeHeight;
47
+    }
48
+}

+ 0
- 0
Angular/src/assets/sass/theme/designer/components/misc/_blockui.scss View File


+ 36
- 0
Angular/src/assets/sass/theme/designer/components/misc/_chip.scss View File

@@ -0,0 +1,36 @@
1
+.p-chip {
2
+    background-color: $chipBg;
3
+    color: $chipTextColor;
4
+    border-radius: $chipBorderRadius;
5
+    padding: 0 nth($inputPadding, 2);
6
+
7
+    .p-chip-text {
8
+        line-height: 1.5;
9
+        margin-top: nth($inputPadding, 1) / 2;
10
+        margin-bottom: nth($inputPadding, 1) / 2;
11
+    }
12
+
13
+    .p-chip-icon {
14
+        margin-right: $inlineSpacing;
15
+    }
16
+
17
+    .pi-chip-remove-icon {
18
+        margin-left: $inlineSpacing;
19
+    }
20
+
21
+    img {
22
+        width: 1.5 + nth($inputPadding, 1);
23
+        height: 1.5 + nth($inputPadding, 1);
24
+        margin-left: -1 * nth($inputPadding, 2);
25
+        margin-right: $inlineSpacing;
26
+    }
27
+
28
+    .pi-chip-remove-icon {
29
+        border-radius: $borderRadius;
30
+        transition: $actionIconTransition;
31
+        
32
+        &:focus {
33
+            @include focused();
34
+        }
35
+    }
36
+}

+ 17
- 0
Angular/src/assets/sass/theme/designer/components/misc/_inplace.scss View File

@@ -0,0 +1,17 @@
1
+.p-inplace {
2
+    .p-inplace-display {
3
+        padding: $inplacePadding;
4
+        border-radius: $borderRadius;
5
+        transition: $formElementTransition;
6
+
7
+        &:not(.p-disabled):hover {
8
+            background: $inplaceHoverBg;
9
+            color: $inplaceTextHoverColor;
10
+        }
11
+
12
+        &:focus {
13
+            @include focused();
14
+        }
15
+    }
16
+}
17
+

+ 17
- 0
Angular/src/assets/sass/theme/designer/components/misc/_progressbar.scss View File

@@ -0,0 +1,17 @@
1
+.p-progressbar {
2
+    border: $progressBarBorder;
3
+    height: $progressBarHeight;
4
+    background: $progressBarBg;
5
+    border-radius: $borderRadius;
6
+
7
+    .p-progressbar-value {
8
+        border: 0 none;
9
+        margin: 0;
10
+        background: $progressBarValueBg;
11
+    }
12
+
13
+    .p-progressbar-label {
14
+        color: $textColor;
15
+        line-height: $progressBarHeight;
16
+    }
17
+}

+ 20
- 0
Angular/src/assets/sass/theme/designer/components/misc/_scrolltop.scss View File

@@ -0,0 +1,20 @@
1
+.p-scrolltop {
2
+    width: $scrollTopWidth;
3
+    height: $scrollTopHeight;
4
+    border-radius: $scrollTopBorderRadius;
5
+    box-shadow: $inputOverlayShadow;
6
+    transition: $actionIconTransition;
7
+
8
+    &.p-link {
9
+        background: $scrollTopBg;
10
+
11
+        &:hover {
12
+            background: $scrollTopHoverBg;
13
+        }
14
+    }
15
+
16
+    .p-scrolltop-icon {
17
+        font-size: $scrollTopFontSize;
18
+        color: $scrollTopTextColor;
19
+    }
20
+}

+ 8
- 0
Angular/src/assets/sass/theme/designer/components/misc/_skeleton.scss View File

@@ -0,0 +1,8 @@
1
+.p-skeleton {
2
+    background-color: $skeletonBg;
3
+    border-radius: $borderRadius;
4
+
5
+    &:after {
6
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
7
+    }
8
+}

+ 33
- 0
Angular/src/assets/sass/theme/designer/components/misc/_tag.scss View File

@@ -0,0 +1,33 @@
1
+.p-tag {
2
+    background: $badgeBg;
3
+    color: $badgeTextColor;
4
+    font-size: $badgeFontSize;
5
+    font-weight: $badgeFontWeight;
6
+    padding: $tagPadding;
7
+    border-radius: $borderRadius;
8
+
9
+    &.p-tag-success {
10
+        background-color: $successButtonBg;
11
+        color: $successButtonTextColor;
12
+    }
13
+
14
+    &.p-tag-info {
15
+        background-color: $infoButtonBg;
16
+        color: $infoButtonTextColor;
17
+    }
18
+
19
+    &.p-tag-warning {
20
+        background-color: $warningButtonBg;
21
+        color: $warningButtonTextColor;
22
+    }
23
+
24
+    &.p-tag-danger {
25
+        background-color: $dangerButtonBg;
26
+        color: $dangerButtonTextColor;
27
+    }
28
+
29
+    .p-tag-icon {
30
+        margin-right: $inlineSpacing / 2;
31
+        font-size: $badgeFontSize;
32
+    }
33
+}

+ 11
- 0
Angular/src/assets/sass/theme/designer/components/misc/_terminal.scss View File

@@ -0,0 +1,11 @@
1
+.p-terminal {
2
+	background: $panelContentBg;
3
+	color: $panelContentTextColor;
4
+	border: $panelContentBorder;
5
+	padding: $panelContentPadding;
6
+
7
+	.p-terminal-input {
8
+		font-size: $fontSize;
9
+		font-family: $fontFamily;
10
+	}
11
+}

+ 139
- 0
Angular/src/assets/sass/theme/designer/components/multimedia/_galleria.scss View File

@@ -0,0 +1,139 @@
1
+.p-galleria {
2
+    .p-galleria-close {
3
+        margin: $galleriaCloseIconMargin;
4
+        background: $galleriaCloseIconBg;
5
+        color: $galleriaCloseIconColor;
6
+        width: $galleriaCloseIconWidth;
7
+        height: $galleriaCloseIconHeight;
8
+        transition: $actionIconTransition;
9
+        border-radius: $galleriaCloseIconBorderRadius;
10
+
11
+        .p-galleria-close-icon {
12
+            font-size: $galleriaCloseIconFontSize;
13
+        }
14
+
15
+        &:hover {
16
+            background: $galleriaCloseIconHoverBg;
17
+            color: $galleriaCloseIconHoverColor;
18
+        }
19
+    }
20
+
21
+    .p-galleria-item-nav {
22
+        background: $galleriaItemNavigatorBg;
23
+        color: $galleriaItemNavigatorColor;
24
+        width: $galleriaItemNavigatorWidth;
25
+        height: $galleriaItemNavigatorHeight;
26
+        transition: $actionIconTransition;
27
+        border-radius: $galleriaItemNavigatorBorderRadius;
28
+        margin: $galleriaItemNavigatorMargin;
29
+
30
+        .p-galleria-item-prev-icon,
31
+        .p-galleria-item-next-icon {
32
+            font-size: $galleriaItemNavigatorFontSize;
33
+        }
34
+
35
+        &:not(.p-disabled) {
36
+            &:hover {
37
+                background: $galleriaItemNavigatorHoverBg;
38
+                color: $galleriaItemNavigatorHoverColor;
39
+            }
40
+        }
41
+    }
42
+
43
+    .p-galleria-caption {
44
+        background: $galleriaCaptionBg;
45
+        color: $galleriaCaptionTextColor;
46
+        padding: $galleriaCaptionPadding;
47
+    }
48
+
49
+    .p-galleria-indicators {
50
+        padding: $galleriaIndicatorsPadding;
51
+
52
+        .p-galleria-indicator {
53
+            button {
54
+                background-color: $galleriaIndicatorBg;
55
+                width: $galleriaIndicatorWidth;
56
+                height: $galleriaIndicatorHeight;
57
+                transition: $actionIconTransition;
58
+                border-radius: $galleriaIndicatorBorderRadius;
59
+
60
+                &:hover {
61
+                    background: $galleriaIndicatorHoverBg;
62
+                }
63
+            }
64
+
65
+            &.p-highlight {
66
+                button {
67
+                    background: $highlightBg;
68
+                    color: $highlightTextColor;
69
+                }
70
+            }
71
+        }
72
+    }
73
+
74
+    &.p-galleria-indicators-bottom,
75
+    &.p-galleria-indicators-top {
76
+        .p-galleria-indicator {
77
+            margin-right: $inlineSpacing;
78
+        }
79
+    }
80
+
81
+    &.p-galleria-indicators-left,
82
+    &.p-galleria-indicators-right {
83
+        .p-galleria-indicator {
84
+            margin-bottom: $inlineSpacing;
85
+        }
86
+    }
87
+
88
+    &.p-galleria-indicator-onitem {
89
+        .p-galleria-indicators {
90
+            background: $galleriaIndicatorsBgOnItem;
91
+
92
+            .p-galleria-indicator {
93
+                button {
94
+                    background: $galleriaIndicatorBgOnItem;
95
+
96
+                    &:hover {
97
+                        background: $galleriaIndicatorHoverBgOnItem;
98
+                    }
99
+                }
100
+
101
+                &.p-highlight {
102
+                    button {
103
+                        background: $highlightBg;
104
+                        color: $highlightTextColor;
105
+                    }
106
+                }
107
+            }
108
+        }
109
+    }
110
+
111
+    .p-galleria-thumbnail-container {
112
+        background: $galleriaThumbnailContainerBg;
113
+        padding: $galleriaThumbnailContainerPadding;
114
+
115
+        .p-galleria-thumbnail-prev,
116
+        .p-galleria-thumbnail-next {
117
+            margin: $inlineSpacing;
118
+            background-color: $galleriaThumbnailNavigatorBg;
119
+            color: $galleriaThumbnailNavigatorColor;
120
+            width: $galleriaThumbnailNavigatorWidth;
121
+            height: $galleriaThumbnailNavigatorHeight;
122
+            transition: $actionIconTransition;
123
+            border-radius: $galleriaThumbnailNavigatorBorderRadius;
124
+
125
+            &:hover {
126
+                background: $galleriaThumbnailNavigatorHoverBg;
127
+                color: $galleriaThumbnailNavigatorHoverColor;
128
+            }
129
+        }
130
+
131
+        .p-galleria-thumbnail-item-content:focus {
132
+                @include focused();
133
+        }
134
+    }
135
+}
136
+
137
+.p-galleria-mask {
138
+    --maskbg: #{$galleriaMaskBg};
139
+}

+ 44
- 0
Angular/src/assets/sass/theme/designer/components/multimedia/_image.scss View File

@@ -0,0 +1,44 @@
1
+.p-image-mask {
2
+    --maskbg: #{$imageMaskBg};
3
+}
4
+
5
+.p-image-preview-indicator {
6
+    background-color: transparent;
7
+    color: $imagePreviewIndicatorColor;
8
+    transition: $actionIconTransition;
9
+}
10
+
11
+.p-image-preview-container {
12
+    &:hover {
13
+        > .p-image-preview-indicator {
14
+            background-color: $imagePreviewIndicatorBg;
15
+        }
16
+    }
17
+}
18
+
19
+.p-image-toolbar {
20
+    padding: $imagePreviewToolbarPadding;
21
+}
22
+
23
+.p-image-action.p-link {
24
+    color: $imagePreviewActionIconColor;
25
+    background-color: $imagePreviewActionIconBg;
26
+    width: $imagePreviewActionIconWidth;
27
+    height: $imagePreviewActionIconHeight;
28
+    border-radius: $imagePreviewActionIconBorderRadius;
29
+    transition: $actionIconTransition;
30
+    margin-right: $inlineSpacing;
31
+
32
+    &:last-child {
33
+        margin-right: 0;
34
+    }
35
+
36
+    &:hover {
37
+        color: $imagePreviewActionIconHoverColor;
38
+        background-color: $imagePreviewActionIconHoverBg;
39
+    }
40
+
41
+    i {
42
+        font-size: $imagePreviewActionIconFontSize;
43
+    }
44
+}

+ 67
- 0
Angular/src/assets/sass/theme/designer/components/overlay/_confirmpopup.scss View File

@@ -0,0 +1,67 @@
1
+.p-confirm-popup {
2
+    background: $overlayContentBg;
3
+    color: $panelContentTextColor;
4
+    border: $overlayContentBorder;
5
+    border-radius: $borderRadius;
6
+    box-shadow: $overlayContainerShadow;
7
+
8
+    .p-confirm-popup-content {
9
+        padding: $panelContentPadding;
10
+    }
11
+
12
+    .p-confirm-popup-footer {
13
+        text-align: right;
14
+        padding: $panelFooterPadding;
15
+
16
+        button {
17
+            margin: 0 $inlineSpacing 0 0;
18
+            width: auto;
19
+
20
+            &:last-child {
21
+                margin: 0;
22
+            }
23
+        }
24
+    }
25
+
26
+    &:after {
27
+        border: solid transparent;
28
+        border-color: rgba($overlayContentBg, 0);
29
+        border-bottom-color: $overlayContentBg;
30
+    }
31
+
32
+    &:before {
33
+        border: solid transparent;
34
+
35
+        @if (nth($overlayContentBorder, 2) == 'none') {
36
+            border-color: rgba($overlayContentBg, 0);
37
+            border-bottom-color: $overlayContentBg;
38
+        }
39
+        @else {
40
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
41
+            border-bottom-color: nth($overlayContentBorder, 3);
42
+        }
43
+    }
44
+
45
+    &.p-confirm-popup-flipped {
46
+        &:after {
47
+            border-top-color: $overlayContentBg;
48
+        }
49
+
50
+        &:before {
51
+            @if (nth($overlayContentBorder, 2) == 'none') {
52
+                border-top-color: $overlayContentBg;
53
+            }
54
+            @else {
55
+                border-top-color: nth($overlayContentBorder, 3);
56
+            }
57
+        }
58
+    }
59
+
60
+    .p-confirm-popup-icon {
61
+        font-size: $primeIconFontSize * 1.5;
62
+    }
63
+
64
+    .p-confirm-popup-message {
65
+        margin-left: $inlineSpacing * 2;
66
+    }
67
+}

+ 59
- 0
Angular/src/assets/sass/theme/designer/components/overlay/_dialog.scss View File

@@ -0,0 +1,59 @@
1
+.p-dialog {
2
+    border-radius: $borderRadius;
3
+    box-shadow: $overlayContainerShadow;
4
+    border: $overlayContentBorder;
5
+
6
+    .p-dialog-header {
7
+        border-bottom: $dialogHeaderBorder;
8
+        background: $dialogHeaderBg;
9
+        color: $dialogHeaderTextColor;
10
+        padding: $dialogHeaderPadding;
11
+        border-top-right-radius: $borderRadius;
12
+        border-top-left-radius: $borderRadius;
13
+
14
+        .p-dialog-title {
15
+            font-weight: $dialogHeaderFontWeight;
16
+            font-size: $dialogHeaderFontSize;
17
+        }
18
+
19
+        .p-dialog-header-icon {
20
+            @include action-icon();
21
+            margin-right: $inlineSpacing;
22
+
23
+            &:last-child {
24
+                margin-right: 0;
25
+            }
26
+        }
27
+    }
28
+
29
+    .p-dialog-content {
30
+        background: $overlayContentBg;
31
+        color: $panelContentTextColor;
32
+        padding: $dialogContentPadding;
33
+    }
34
+
35
+    .p-dialog-footer {
36
+        border-top:  $dialogFooterBorder;
37
+        background: $overlayContentBg;
38
+        color: $panelFooterTextColor;
39
+        padding: $dialogFooterPadding;
40
+        text-align: right;
41
+        border-bottom-right-radius: $borderRadius;
42
+        border-bottom-left-radius: $borderRadius;
43
+
44
+        button {
45
+            margin: 0 $inlineSpacing 0 0;
46
+            width: auto;
47
+        }
48
+    }
49
+
50
+    &.p-confirm-dialog {
51
+        .p-confirm-dialog-icon {
52
+            font-size: $primeIconFontSize * 2;
53
+        }
54
+
55
+        .p-confirm-dialog-message {
56
+            margin-left: $inlineSpacing * 2;
57
+        }
58
+    }
59
+}

+ 62
- 0
Angular/src/assets/sass/theme/designer/components/overlay/_overlaypanel.scss View File

@@ -0,0 +1,62 @@
1
+.p-overlaypanel {
2
+    background: $overlayContentBg;
3
+    color: $panelContentTextColor;
4
+    border: $overlayContentBorder;
5
+    border-radius: $borderRadius;
6
+    box-shadow: $overlayContainerShadow;
7
+
8
+    .p-overlaypanel-content {
9
+        padding: $panelContentPadding;
10
+    }
11
+
12
+    .p-overlaypanel-close {
13
+        background: $buttonBg;
14
+        color: $buttonTextColor;
15
+        width: $actionIconWidth;
16
+        height: $actionIconHeight;
17
+        transition: $actionIconTransition;
18
+        border-radius: $actionIconBorderRadius;
19
+        position: absolute;
20
+        top: -1 * $actionIconWidth / 2;
21
+        right: -1 * $actionIconWidth / 2;
22
+
23
+        &:enabled:hover {
24
+            background: $buttonHoverBg;
25
+            color: $buttonTextHoverColor;
26
+        }
27
+    }
28
+
29
+    &:after {
30
+        border: solid transparent;
31
+        border-color: rgba($overlayContentBg, 0);
32
+        border-bottom-color: $overlayContentBg;
33
+    }
34
+
35
+    &:before {
36
+        border: solid transparent;
37
+
38
+        @if (nth($overlayContentBorder, 2) == 'none') {
39
+            border-color: rgba($overlayContentBg, 0);
40
+            border-bottom-color: $overlayContentBg;
41
+        }
42
+        @else {
43
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
44
+            border-bottom-color: nth($overlayContentBorder, 3);
45
+        }
46
+    }
47
+
48
+    &.p-overlaypanel-flipped {
49
+        &:after {
50
+            border-top-color: $overlayContentBg;
51
+        }
52
+
53
+        &:before {
54
+            @if (nth($overlayContentBorder, 2) == 'none') {
55
+                border-top-color: $overlayContentBg;
56
+            }
57
+            @else {
58
+                border-top-color: nth($overlayContentBorder, 3);
59
+            }
60
+        }
61
+    }
62
+}

+ 23
- 0
Angular/src/assets/sass/theme/designer/components/overlay/_sidebar.scss View File

@@ -0,0 +1,23 @@
1
+.p-sidebar {
2
+    background: $overlayContentBg;
3
+    color: $panelContentTextColor;
4
+    border: $overlayContentBorder;
5
+    box-shadow: $overlayContainerShadow;
6
+
7
+    .p-sidebar-header {
8
+        padding: $panelHeaderPadding;
9
+
10
+        .p-sidebar-close,
11
+        .p-sidebar-icon {
12
+            @include action-icon();
13
+        }
14
+
15
+        & + .p-sidebar-content {
16
+            padding-top: 0;
17
+        }
18
+    }
19
+
20
+    .p-sidebar-content {
21
+        padding: $panelContentPadding;
22
+    }
23
+}

+ 33
- 0
Angular/src/assets/sass/theme/designer/components/overlay/_tooltip.scss View File

@@ -0,0 +1,33 @@
1
+.p-tooltip {
2
+    .p-tooltip-text {
3
+        background: $tooltipBg;
4
+        color: $tooltipTextColor;
5
+        padding: $tooltipPadding;
6
+        box-shadow: $inputOverlayShadow;
7
+        border-radius: $borderRadius;
8
+    }
9
+
10
+    &.p-tooltip-right {
11
+        .p-tooltip-arrow {
12
+            border-right-color: $tooltipBg;
13
+        }
14
+    }
15
+
16
+    &.p-tooltip-left {
17
+        .p-tooltip-arrow {
18
+            border-left-color: $tooltipBg;
19
+        }
20
+    }
21
+
22
+    &.p-tooltip-top {
23
+        .p-tooltip-arrow {
24
+            border-top-color: $tooltipBg;
25
+        }
26
+    }
27
+
28
+    &.p-tooltip-bottom {
29
+        .p-tooltip-arrow {
30
+            border-bottom-color: $tooltipBg;
31
+        }
32
+    }
33
+}

+ 119
- 0
Angular/src/assets/sass/theme/designer/components/panel/_accordion.scss View File

@@ -0,0 +1,119 @@
1
+.p-accordion {
2
+    .p-accordion-header {
3
+        .p-accordion-header-link {
4
+            padding: $accordionHeaderPadding;
5
+            border: $accordionHeaderBorder;
6
+            color: $accordionHeaderTextColor;
7
+            background: $accordionHeaderBg;
8
+            font-weight: $accordionHeaderFontWeight;
9
+            border-radius: $borderRadius;
10
+            transition: $listItemTransition;
11
+
12
+            .p-accordion-toggle-icon {
13
+                margin-right: $inlineSpacing;
14
+            }
15
+        }
16
+
17
+        &:not(.p-disabled) {
18
+            .p-accordion-header-link {
19
+                &:focus {
20
+                    @include focused();
21
+                }
22
+            }
23
+        }
24
+
25
+        &:not(.p-highlight):not(.p-disabled):hover {
26
+            .p-accordion-header-link {
27
+                background: $accordionHeaderHoverBg;
28
+                border-color: $accordionHeaderHoverBorderColor;
29
+                color: $accordionHeaderTextHoverColor;
30
+            }
31
+        }
32
+
33
+        &:not(.p-disabled).p-highlight {
34
+            .p-accordion-header-link {
35
+                background: $accordionHeaderActiveBg;
36
+                border-color: $accordionHeaderActiveBorderColor;
37
+                color: $accordionHeaderTextActiveColor;
38
+                border-bottom-right-radius: 0;
39
+                border-bottom-left-radius: 0;
40
+            }
41
+
42
+            &:hover {
43
+                .p-accordion-header-link {
44
+                    border-color: $accordionHeaderActiveHoverBorderColor;
45
+                    background: $accordionHeaderActiveHoverBg;
46
+                    color: $accordionHeaderTextActiveHoverColor;
47
+                }
48
+            }
49
+        }
50
+    }
51
+
52
+    .p-accordion-content {
53
+        padding: $accordionContentPadding;
54
+        border: $accordionContentBorder;
55
+        background: $accordionContentBg;
56
+        color: $accordionContentTextColor;
57
+        border-top: 0;
58
+        border-top-right-radius: 0;
59
+        border-top-left-radius: 0;
60
+        border-bottom-right-radius: $borderRadius;
61
+        border-bottom-left-radius: $borderRadius;
62
+    }
63
+
64
+    p-accordiontab {
65
+        .p-accordion-tab {
66
+            margin-bottom: $accordionSpacing;
67
+        }
68
+        
69
+        @if $accordionSpacing == 0 {
70
+            .p-accordion-header {
71
+                .p-accordion-header-link {
72
+                    border-radius: 0;
73
+                }
74
+            }
75
+
76
+            .p-accordion-content {
77
+                border-radius: 0;
78
+            }
79
+
80
+            &:not(:first-child) {
81
+                .p-accordion-header {
82
+                    .p-accordion-header-link {
83
+                        border-top: 0 none;
84
+                    }
85
+
86
+                    &:not(.p-highlight):not(.p-disabled):hover,
87
+                    &:not(.p-disabled).p-highlight:hover {
88
+                        .p-accordion-header-link {
89
+                            border-top: 0 none;
90
+                        }
91
+                    }
92
+                }
93
+            }
94
+
95
+            &:first-child {
96
+                .p-accordion-header {
97
+                    .p-accordion-header-link {
98
+                        border-top-right-radius: $borderRadius;
99
+                        border-top-left-radius: $borderRadius;
100
+                    }
101
+                }
102
+            }
103
+
104
+            &:last-child {
105
+                .p-accordion-header:not(.p-highlight) {
106
+                    .p-accordion-header-link {
107
+                        border-bottom-right-radius: $borderRadius;
108
+                        border-bottom-left-radius: $borderRadius;
109
+                    }
110
+                }
111
+
112
+                .p-accordion-content {
113
+                    border-bottom-right-radius: $borderRadius;
114
+                    border-bottom-left-radius: $borderRadius;
115
+                }
116
+            }
117
+        } 
118
+    }
119
+}

+ 30
- 0
Angular/src/assets/sass/theme/designer/components/panel/_card.scss View File

@@ -0,0 +1,30 @@
1
+.p-card {
2
+    background: $panelContentBg;
3
+    color: $panelContentTextColor;
4
+    box-shadow: $cardShadow;
5
+    border-radius: $borderRadius;
6
+
7
+    .p-card-body {
8
+        padding: $cardBodyPadding;
9
+    }
10
+
11
+    .p-card-title {
12
+        font-size: $cardTitleFontSize;
13
+        font-weight: $cardTitleFontWeight;
14
+        margin-bottom: $inlineSpacing;
15
+    }
16
+
17
+    .p-card-subtitle {
18
+        font-weight: $cardSubTitleFontWeight;
19
+        margin-bottom: $inlineSpacing;
20
+        color: $cardSubTitleColor;
21
+    }
22
+
23
+    .p-card-content {
24
+        padding: $cardContentPadding;
25
+    }
26
+
27
+    .p-card-footer {
28
+        padding: $cardFooterPadding;
29
+    }
30
+}

+ 31
- 0
Angular/src/assets/sass/theme/designer/components/panel/_divider.scss View File

@@ -0,0 +1,31 @@
1
+.p-divider {
2
+    .p-divider-content {
3
+        background-color: $panelContentBg;
4
+    }
5
+
6
+    &.p-divider-horizontal {
7
+        margin: $dividerHorizontalMargin;
8
+        padding: $dividerHorizontalPadding;
9
+
10
+        &:before {
11
+            border-top: $dividerSize $dividerColor;
12
+        }
13
+
14
+        .p-divider-content {
15
+            padding: 0 $inlineSpacing;
16
+        }
17
+    }
18
+
19
+    &.p-divider-vertical {
20
+        margin: $dividerVerticalMargin;
21
+        padding: $dividerVerticalPadding;
22
+
23
+        &:before {
24
+            border-left: $dividerSize $dividerColor;
25
+        }
26
+
27
+        .p-divider-content {
28
+            padding: $inlineSpacing 0;
29
+        }
30
+    }
31
+}

+ 47
- 0
Angular/src/assets/sass/theme/designer/components/panel/_fieldset.scss View File

@@ -0,0 +1,47 @@
1
+.p-fieldset {
2
+    border: $panelContentBorder;
3
+    background: $panelContentBg;
4
+    color: $panelContentTextColor;
5
+    border-radius: $borderRadius;
6
+
7
+    .p-fieldset-legend {
8
+        padding: $panelHeaderPadding;
9
+        border: $panelHeaderBorder;
10
+        color: $panelHeaderTextColor;
11
+        background: $panelHeaderBg;
12
+        font-weight: $panelHeaderFontWeight;
13
+        border-radius: $borderRadius;
14
+    }
15
+
16
+    &.p-fieldset-toggleable {
17
+        .p-fieldset-legend {
18
+            padding: 0;
19
+            transition: $actionIconTransition;
20
+
21
+            a {
22
+                padding: $panelHeaderPadding;
23
+                color: $panelHeaderTextColor;
24
+                border-radius: $borderRadius;
25
+                transition: $listItemTransition;
26
+
27
+                .p-fieldset-toggler {
28
+                    margin-right: $inlineSpacing;
29
+                }
30
+
31
+                &:focus {
32
+                    @include focused();
33
+                }
34
+            }
35
+
36
+            &:hover {
37
+                background: $panelHeaderHoverBg;
38
+                border-color: $panelHeaderHoverBorderColor;
39
+                color: $panelHeaderTextHoverColor;
40
+            }
41
+        }
42
+    }
43
+
44
+    .p-fieldset-content {
45
+        padding: $panelContentPadding;
46
+    }
47
+}

+ 42
- 0
Angular/src/assets/sass/theme/designer/components/panel/_panel.scss View File

@@ -0,0 +1,42 @@
1
+.p-panel {
2
+    .p-panel-header {
3
+        border: $panelHeaderBorder;
4
+        padding: $panelHeaderPadding;
5
+        background: $panelHeaderBg;
6
+        color: $panelHeaderTextColor;
7
+        border-top-right-radius: $borderRadius;
8
+        border-top-left-radius: $borderRadius;
9
+
10
+        .p-panel-title {
11
+            font-weight: $panelHeaderFontWeight;
12
+        }
13
+
14
+        .p-panel-header-icon {
15
+            @include action-icon();
16
+        }
17
+    }
18
+
19
+    &.p-panel-toggleable {
20
+        .p-panel-header {
21
+            padding: $panelToggleableHeaderPadding;
22
+        }
23
+    }
24
+
25
+    .p-panel-content {
26
+        padding: $panelContentPadding;
27
+        border: $panelContentBorder;
28
+        background: $panelContentBg;
29
+        color: $panelContentTextColor;
30
+        border-bottom-right-radius: $borderRadius;
31
+        border-bottom-left-radius: $borderRadius;
32
+        border-top: 0 none;
33
+    }
34
+
35
+    .p-panel-footer {
36
+        padding: $panelFooterPadding;
37
+        border: $panelFooterBorder;
38
+        background: $panelFooterBg;
39
+        color: $panelFooterTextColor;
40
+        border-top: 0 none;
41
+    }
42
+}

+ 6
- 0
Angular/src/assets/sass/theme/designer/components/panel/_scrollpanel.scss View File

@@ -0,0 +1,6 @@
1
+.p-scrollpanel {
2
+    .p-scrollpanel-bar {
3
+        background: $scrollPanelTrackBg;
4
+        border: $scrollPanelTrackBorder;
5
+    }
6
+}

+ 19
- 0
Angular/src/assets/sass/theme/designer/components/panel/_splitter.scss View File

@@ -0,0 +1,19 @@
1
+.p-splitter {
2
+    border: $panelContentBorder;
3
+    background: $panelContentBg;
4
+    border-radius: $borderRadius;
5
+    color: $panelContentTextColor;
6
+
7
+    .p-splitter-gutter {
8
+        transition: $actionIconTransition;
9
+        background: $splitterGutterBg;
10
+
11
+        .p-splitter-gutter-handle {
12
+            background: $splitterGutterHandleBg;
13
+        }
14
+    }
15
+
16
+    .p-splitter-gutter-resizing {
17
+        background: $splitterGutterHandleBg;
18
+    }
19
+}

+ 78
- 0
Angular/src/assets/sass/theme/designer/components/panel/_tabview.scss View File

@@ -0,0 +1,78 @@
1
+.p-tabview {
2
+    .p-tabview-nav {
3
+        background: $tabviewNavBg;
4
+        border: $tabviewNavBorder;
5
+        border-width: $tabviewNavBorderWidth;
6
+
7
+        li {
8
+            margin-right: $tabviewHeaderSpacing;
9
+
10
+            .p-tabview-nav-link {
11
+                border: $tabviewHeaderBorder;
12
+                border-width: $tabviewHeaderBorderWidth;
13
+                border-color: $tabviewHeaderBorderColor;
14
+                background: $tabviewHeaderBg;
15
+                color: $tabviewHeaderTextColor;
16
+                padding: $tabviewHeaderPadding;
17
+                font-weight: $tabviewHeaderFontWeight;
18
+                border-top-right-radius: $borderRadius;
19
+                border-top-left-radius: $borderRadius;
20
+                transition: $listItemTransition;
21
+                margin: $tabviewHeaderMargin;
22
+
23
+                &:not(.p-disabled):focus {
24
+                    @include focused-inset();
25
+                }
26
+            }
27
+
28
+            &:not(.p-highlight):not(.p-disabled):hover {
29
+                .p-tabview-nav-link {
30
+                    background: $tabviewHeaderHoverBg;
31
+                    border-color: $tabviewHeaderHoverBorderColor;
32
+                    color: $tabviewHeaderTextHoverColor;
33
+                }
34
+            }
35
+
36
+            &.p-highlight {
37
+                .p-tabview-nav-link {
38
+                    background: $tabviewHeaderActiveBg;
39
+                    border-color: $tabviewHeaderActiveBorderColor;
40
+                    color: $tabviewHeaderTextActiveColor;
41
+                }
42
+            }
43
+        }
44
+    }
45
+
46
+    .p-tabview-left-icon {
47
+        margin-right: $inlineSpacing;
48
+    }
49
+
50
+    .p-tabview-right-icon {
51
+        margin-left: $inlineSpacing;
52
+    }
53
+
54
+    .p-tabview-close {
55
+        margin-left: $inlineSpacing;
56
+    }
57
+
58
+    .p-tabview-nav-btn.p-link {
59
+        background: $tabviewHeaderActiveBg;
60
+        color: $tabviewHeaderTextActiveColor;
61
+        width: $buttonIconOnlyWidth;
62
+        box-shadow: $raisedButtonShadow;
63
+        border-radius: 0;
64
+
65
+        &:focus {
66
+            @include focused-inset();
67
+        }
68
+    }
69
+
70
+    .p-tabview-panels {
71
+        background: $tabviewContentBg;
72
+        padding: $tabviewContentPadding;
73
+        border: $tabviewContentBorder;
74
+        color: $tabviewContentTextColor;
75
+        border-bottom-right-radius: $borderRadius;
76
+        border-bottom-left-radius: $borderRadius;
77
+    }
78
+}

+ 10
- 0
Angular/src/assets/sass/theme/designer/components/panel/_toolbar.scss View File

@@ -0,0 +1,10 @@
1
+.p-toolbar {
2
+    background: $panelHeaderBg;
3
+    border: $panelHeaderBorder;
4
+    padding: $panelHeaderPadding;
5
+    border-radius: $borderRadius;
6
+
7
+    .p-toolbar-separator {
8
+        margin: 0 $inlineSpacing;
9
+    }
10
+}

+ 6800
- 0
Angular/src/assets/theme/amber/theme-dark.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/amber/theme-light.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/blue/theme-dark.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/blue/theme-light.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/bluegrey/theme-dark.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/bluegrey/theme-light.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/brown/theme-dark.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/brown/theme-light.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/cyan/theme-dark.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/cyan/theme-light.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/deeporange/theme-dark.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/deeporange/theme-light.css
File diff suppressed because it is too large
View File


+ 6800
- 0
Angular/src/assets/theme/deeppurple/theme-dark.css
File diff suppressed because it is too large
View File


+ 0
- 0
Angular/src/assets/theme/deeppurple/theme-light.css View File


Some files were not shown because too many files changed in this diff

Powered by TurnKey Linux.