Skip to content

Commit 89b4d4a

Browse files
lippserdlippserd
committed
Version v1.0.0
1 parent 7972e82 commit 89b4d4a

1,444 files changed

Lines changed: 615269 additions & 0 deletions

File tree

Some content is hidden

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

‎VERSION‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v1.0.0

‎asset/css/action-link-and-button-link.less‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.action-link {
2+
color: var(--control-color, @control-color);
3+
}
4+
5+
.button-link {
6+
.action-link();
7+
.rounded-corners(3px);
8+
9+
background: var(--default-input-bg, @default-input-bg);
10+
display: inline-block;
11+
padding: 0.25em 0.5em;
12+
13+
&:hover {
14+
background: var(--default-input-hover-bg, @default-input-hover-bg);
15+
text-decoration: none;
16+
}
17+
18+
&[aria-disabled="true"] {
19+
background: none;
20+
border: 1px solid var(--control-disabled-color, @control-disabled-color);
21+
color: var(--control-disabled-color, @control-disabled-color);
22+
cursor: not-allowed;
23+
24+
.user-select(none);
25+
}
26+
}

‎asset/css/animations.less‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// By courtesy of https://csslab.app/animations/wobble
2+
@keyframes wobble-effect {
3+
0%, 100% {
4+
transform: translateX(0%);
5+
transform-origin: 50% 50%;
6+
}
7+
8+
15% {
9+
transform: translateX(calc(-1 * var(--wobble-distance))) rotate(calc(-1 * var(--wobble-rotation)));
10+
}
11+
12+
30% {
13+
transform: translateX(calc(var(--wobble-distance) / 2)) rotate(var(--wobble-rotation));
14+
}
15+
16+
45% {
17+
transform: translateX(calc(var(--wobble-distance) / -2)) rotate(calc(var(--wobble-rotation) / -1.8));
18+
}
19+
20+
60% {
21+
transform: translateX(calc(var(--wobble-distance) / 3.3)) rotate(calc(var(--wobble-rotation) / 3));
22+
}
23+
24+
75% {
25+
transform: translateX(calc(var(--wobble-distance) / -5.5)) rotate(calc(var(--wobble-rotation) / -5));
26+
}
27+
}

‎asset/css/awesome-icons.less‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
:root, :host {
2+
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
3+
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
4+
}
5+
6+
@font-face {
7+
font-family: 'Font Awesome 6 Free';
8+
font-style: normal;
9+
font-weight: 400;
10+
font-display: block;
11+
src: url('@{iplWebAssets}/font/awesome/fa-regular-400.woff2') format('woff2'),
12+
url('@{iplWebAssets}/font/awesome/fa-regular-400.ttf') format('truetype');
13+
}
14+
15+
.far,
16+
.fa-regular {
17+
font-family: 'Font Awesome 6 Free';
18+
font-weight: 400;
19+
}
20+
21+
@font-face {
22+
font-family: 'Font Awesome 6 Free';
23+
font-style: normal;
24+
font-weight: 900;
25+
font-display: block;
26+
src: url('@{iplWebAssets}/font/awesome/fa-solid-900.woff2') format('woff2'),
27+
url('@{iplWebAssets}/font/awesome/fa-solid-900.ttf') format('truetype');
28+
}
29+
30+
.fa,
31+
.fas,
32+
.fa-solid {
33+
font-family: 'Font Awesome 6 Free';
34+
font-weight: 900;
35+
}

‎asset/css/balls.less‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
@ball-pad: 1/6em;
2+
3+
.ball {
4+
border-radius: 50%;
5+
display: inline-flex;
6+
align-items: center;
7+
justify-content: center;
8+
}
9+
10+
.ball-size-xs {
11+
height: 1/3em;
12+
width: 1/3em;
13+
14+
i.icon, span {
15+
display: none;
16+
}
17+
}
18+
19+
.ball-size-s {
20+
height: 0.5em;
21+
width: 0.5em;
22+
23+
i.icon, span {
24+
display: none;
25+
}
26+
}
27+
28+
.ball-size-m {
29+
height: 0.75em;
30+
width: 0.75em;
31+
line-height: 0;
32+
33+
i.icon::before {
34+
font-size: .75 - @ball-pad * 2;
35+
line-height: 1em;
36+
}
37+
38+
span {
39+
display: none;
40+
}
41+
}
42+
43+
.ball-size-ml {
44+
height: 1em;
45+
width: 1em;
46+
line-height: 0;
47+
48+
i.icon {
49+
line-height: 0.3;
50+
51+
&::before {
52+
font-size: 0.8 - @ball-pad * 2;
53+
line-height: 1 - @ball-pad * 2;
54+
}
55+
}
56+
57+
span {
58+
display: none;
59+
}
60+
}
61+
62+
.ball-size-l {
63+
height: 1.5em;
64+
width: 1.5em;
65+
line-height: 1em;
66+
67+
i.icon::before, span {
68+
font-size: 1 - @ball-pad * 2;
69+
line-height: 1.5 - @ball-pad * 2;
70+
}
71+
}
72+
73+
.ball-size-xl {
74+
width: 2em;
75+
height: 2em;
76+
77+
i.icon::before, span {
78+
line-height: 2 - @ball-pad * 2;
79+
}
80+
}
81+
82+
.ball-outline(@color) {
83+
border: @ball-pad solid @color;
84+
}
85+
86+
.ball-solid(@color) {
87+
background-color: @color;
88+
color: var(--default-text-color-inverted, @default-text-color-inverted);
89+
padding: @ball-pad;
90+
}
91+
92+
.state-ball {
93+
.ball();
94+
95+
&.state-pending:not(.ball-size-l, .ball-size-xl) {
96+
.ball-solid(var(--state-pending, @state-pending));
97+
}
98+
99+
&.state-pending.ball-size-l,
100+
&.state-pending.ball-size-xl {
101+
.ball-outline(var(--state-pending, @state-pending));
102+
}
103+
104+
&.state-up:not(.ball-size-l, .ball-size-xl) {
105+
.ball-solid(var(--state-up, @state-up));
106+
}
107+
108+
&.state-up.ball-size-l,
109+
&.state-up.ball-size-xl {
110+
.ball-outline(var(--state-up, @state-up));
111+
}
112+
113+
&.state-down {
114+
.ball-solid(var(--state-down, @state-down));
115+
}
116+
117+
&.state-ok:not(.ball-size-l, .ball-size-xl) {
118+
.ball-solid(var(--state-ok, @state-ok));
119+
}
120+
121+
&.state-ok.ball-size-l,
122+
&.state-ok.ball-size-xl {
123+
.ball-outline(var(--state-ok, @state-ok));
124+
}
125+
126+
&.state-warning {
127+
.ball-solid(var(--state-warning, @state-warning));
128+
}
129+
130+
&.state-critical {
131+
.ball-solid(var(--state-critical, @state-critical));
132+
}
133+
134+
&.state-unknown {
135+
.ball-solid(var(--state-unknown, @state-unknown));
136+
}
137+
138+
&.handled {
139+
opacity: 0.6;
140+
}
141+
142+
i.icon {
143+
text-align: center;
144+
145+
&::before {
146+
margin-right: 0;
147+
}
148+
}
149+
150+
// Specific icon styles
151+
&.ball-size-l i {
152+
&.fa-sitemap::before {
153+
font-size: 8px; // px to ignore browser min font-size
154+
}
155+
}
156+
157+
&.ball-size-xl i {
158+
&.fa-sitemap::before {
159+
font-size: .857em;
160+
line-height: (2 - @ball-pad * 2) / .857;
161+
}
162+
}
163+
}

‎asset/css/callout.less‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Layout
2+
.callout {
3+
display: flex;
4+
column-gap: 1em;
5+
justify-content: start;
6+
7+
&.callout-fit-content {
8+
width: fit-content;
9+
}
10+
11+
i.icon::before {
12+
margin-right: 0;
13+
}
14+
15+
p {
16+
margin: 0;
17+
}
18+
19+
.callout-title {
20+
margin-bottom: .5em;
21+
}
22+
23+
.callout-text {
24+
display: flex;
25+
flex-direction: column;
26+
}
27+
}
28+
29+
// Style
30+
.callout {
31+
padding: .5em 1em;
32+
border: 1px solid var(--callout-color);
33+
background-color: var(--callout-bg-color);
34+
border-radius: .25em;
35+
36+
i.icon {
37+
color: var(--callout-color);
38+
font-size: 1.5em;
39+
}
40+
41+
&.callout-type-info {
42+
--callout-color: @callout-info-color;
43+
--callout-bg-color: @callout-info-bg;
44+
}
45+
46+
&.callout-type-success {
47+
--callout-color: @callout-success-color;
48+
--callout-bg-color: @callout-success-bg;
49+
}
50+
51+
&.callout-type-warning {
52+
--callout-color: @callout-warning-color;
53+
--callout-bg-color: @callout-warning-bg;
54+
}
55+
56+
&.callout-type-error {
57+
--callout-color: @callout-error-color;
58+
--callout-bg-color: @callout-error-bg;
59+
}
60+
}

‎asset/css/cancel-button.less‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.cancel-button {
2+
display: inline-flex;
3+
align-items: baseline;
4+
padding: .5em 1em;
5+
6+
.appearance(none);
7+
.rounded-corners();
8+
line-height: normal;
9+
cursor: pointer;
10+
11+
background: var(--cancel-button-bg, @cancel-button-bg);
12+
border: 1px solid var(--cancel-button-border-color, @cancel-button-border-color);
13+
color: var(--cancel-button-color, @cancel-button-color);
14+
15+
&:focus,
16+
&:hover {
17+
background-color: var(--cancel-button-hover-bg, @cancel-button-hover-bg);
18+
color: var(--cancel-button-hover-color, @cancel-button-hover-color);
19+
}
20+
21+
&[disabled] {
22+
background: none;
23+
cursor: default;
24+
25+
border: 1px solid var(--control-disabled-color, @control-disabled-color);
26+
color: var(--control-disabled-color, @control-disabled-color);
27+
28+
&:focus,
29+
&:hover {
30+
background: none;
31+
color: var(--control-disabled-color, @control-disabled-color);
32+
}
33+
}
34+
}

0 commit comments

Comments
 (0)