Skip to content

Commit 857e1b2

Browse files
deckdomdeckdom
committed
Added DateTimePicker; Styling & Images cleanup
1 parent 0da1c56 commit 857e1b2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+2646
-1411
lines changed

‎package-lock.json

+100
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@
4242
"http-server": "^14.1.1",
4343
"postcss": "^8.4.29",
4444
"postcss-cli": "^10.1.0",
45+
"postcss-combine-duplicated-selectors": "^10.0.3",
4546
"postcss-import": "^15.1.0",
47+
"postcss-plugin-namespace": "^0.0.3",
4648
"postcss-url": "^10.1.3",
4749
"requirejs": "^2.0.5",
4850
"uglify-js": "^3.17.4"

‎postcss.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
const config = {
22
plugins: [
33
require('postcss-import'),
4+
require('postcss-plugin-namespace')('.aloha', {
5+
/** We want to prefix all `.ui-` styles, as they are from jquery ui */
6+
ignore: /^\.(?!ui-)/,
7+
}),
48
require('postcss-url')({
59
// Result is just the relative path without the leading '../'.
610
url: (asset) => asset.relativePath
711
}),
12+
require('postcss-combine-duplicated-selectors')({
13+
removeDuplicatedProperties: true,
14+
}),
815
require('autoprefixer'),
916
require('cssnano')
1017
]

‎src/img/multisplit-base.jpg

-929 Bytes
Binary file not shown.

‎src/img/multisplit-close.gif

-210 Bytes
Binary file not shown.

‎src/img/multisplit-open.gif

-207 Bytes
Binary file not shown.

‎src/plugins/common/ui/css/button.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
2+
.aloha .aloha-button {
3+
display: inline-flex;
4+
border-radius: 2px;
5+
background: transparent;
6+
border: 1px solid transparent;
7+
padding: 2px;
8+
align-items: center;
9+
position: relative;
10+
box-sizing: border-box;
11+
transition: 200ms;
12+
font-size: 14px;
13+
cursor: pointer;
14+
}
15+
16+
.aloha .aloha-button .aloha-button-icon {
17+
font-size: 20px;
18+
height: 20px;
19+
width: 20px;
20+
}
21+
22+
.aloha .aloha-button .aloha-button-text {
23+
padding: 2px 4px 2px 2px;
24+
line-height: 1;
25+
}
26+
27+
.aloha .aloha-button .aloha-button-text:not(:last-child) {
28+
padding-right: 0px;
29+
}
30+
31+
.aloha .aloha-button .aloha-button-icon+.aloha-button-text {
32+
margin-left: 2px;
33+
}
34+
35+
.aloha .aloha-button.icon-only>.aloha-button-text {
36+
display: none;
37+
}
38+
39+
.aloha .aloha-button:not(:disabled):hover {
40+
background: #efefef;
41+
border-color: #d6d6d6;
42+
}
43+
44+
.aloha .aloha-button:not(:disabled).active {
45+
background-color: #efefef;
46+
border-color: #aaa;
47+
}
48+
49+
.aloha .aloha-button:not(:disabled).active:hover {
50+
background-color: #fff;
51+
border-color: #666;
52+
}
53+
54+
.aloha .aloha-button:disabled {
55+
background-color: #cbcbcb;
56+
border-color: #7f7f7f;
57+
color: #6f6f6f;
58+
cursor: not-allowed;
59+
}

‎src/plugins/common/ui/css/checkbox.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.aloha-ui .checkbox-container {
2+
display: flex;
3+
flex-direction: column;
4+
flex-wrap: nowrap;
5+
width: 100%;
6+
padding: 0 4px;
7+
box-sizing: border-box;
8+
margin: 8px 0;
9+
}
10+
11+
.aloha-ui .checkbox-container {
12+
padding: 4px;
13+
}
14+
15+
.aloha-ui .checkbox-container .checkbox-label {
16+
display: flex;
17+
flex-direction: row;
18+
flex-wrap: nowrap;
19+
align-items: flex-start;
20+
}
21+
22+
.aloha-ui .checkbox-container .checkbox-element {
23+
margin-left: 0px;
24+
flex: 0 0;
25+
height: 14px;
26+
display: block;
27+
}
28+
29+
.aloha-ui .checkbox-container .checkbox-label-content {
30+
color: #000;
31+
font-size: 14px;
32+
display: block;
33+
flex: 1 1 auto;
34+
}

‎src/plugins/common/ui/css/color-picker.css

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
.aloha-ui .aloha-color-picker .aloha-color-picker-grid {
2+
display: flex;
3+
max-width: 400px;
4+
flex-direction: row;
5+
flex-wrap: wrap;
6+
}
7+
8+
.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item {
9+
width: 26px;
10+
height: 26px;
11+
border-radius: 50%;
12+
border: 2px solid #000;
13+
background: var(--aloha-color-palette-item);
14+
transition: 200ms;
15+
margin: 8px;
16+
box-shadow: 0px 1px 3px #9e9e9e;
17+
}
18+
19+
.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.active {
20+
border-color: #3B73D7;
21+
}
22+
23+
.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.color-palette-item:hover {
24+
border-color: var(--aloha-color-palette-item);
25+
}
26+
27+
.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.clear-value {
28+
display: none;
29+
}
30+
31+
.aloha-ui .aloha-color-picker.with-clear .aloha-color-picker-grid .color-picker-item.clear-value {
32+
display: block;
33+
}
34+
35+
.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.clear-value::after {
36+
display: block;
37+
content: '';
38+
width: 100%;
39+
transform: rotate(-45deg);
40+
height: 2px;
41+
background: #f00;
42+
}
43+
44+
.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.clear-value:hover {
45+
border-color: #f00;
46+
}
47+
48+
.aloha-ui .aloha-color-picker .color-picker-custom {
49+
display: none;
50+
flex-direction: row;
51+
flex-wrap: nowrap;
52+
}
53+
54+
.aloha-ui .aloha-color-picker.with-custom-colors .color-picker-custom {
55+
display: flex;
56+
}
57+
58+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-input-container {
59+
flex: 1 1 auto;
60+
}
61+
62+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color.color-red .ui-slider-range {
63+
background-color: rgb(206, 15, 15);
64+
}
65+
66+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color.color-green .ui-slider-range {
67+
background-color: rgb(24, 221, 6);
68+
}
69+
70+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color.color-blue .ui-slider-range {
71+
background-color: rgb(48, 30, 207);
72+
}
73+
74+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color.color-transparency {
75+
display: none;
76+
}
77+
78+
.aloha-ui .aloha-color-picker.with-transparency .color-picker-custom .custom-color.color-transparency {
79+
display: block
80+
}
81+
82+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-preview-container {
83+
flex: 0 0 auto;
84+
min-height: 1px;
85+
margin: 6px 6px 0;
86+
display: flex;
87+
flex-direction: column;
88+
}
89+
90+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-preview {
91+
width: 60px;
92+
height: 60px;
93+
border: 1px solid #000;
94+
box-shadow: 2px 2px 2px #c5c5c5;
95+
margin: 0 auto auto;
96+
}
97+
98+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-input {
99+
box-sizing: border-box;
100+
height: 24px;
101+
font-size: 14px;
102+
border-radius: 2px;
103+
border: 1px solid #aeaeae;
104+
}
105+
106+
.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-confirm {
107+
flex: 0 0 auto;
108+
font-size: 13px;
109+
display: block;
110+
box-sizing: border-box;
111+
margin: auto auto 1px;
112+
border: 1px solid #aeaeae;
113+
padding: 3px 5px;
114+
}

0 commit comments

Comments
 (0)