Skip to content

Commit 4669e1d

Browse files
tobiutobiu
committed
Implement Button Styles for Neo Cyberpunk #8029 
1 parent 72fef25 commit 4669e1d

1 file changed

Lines changed: 113 additions & 0 deletions

File tree

  • resources/scss/theme-cyberpunk/button

‎resources/scss/theme-cyberpunk/button/Base.scss‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
:root .neo-theme-cyberpunk {
2+
--button-background-color : transparent;
3+
--button-background-color-active : var(--cyber-bg-alt);
4+
--button-background-color-disabled : transparent;
5+
--button-background-color-hover : rgba(0, 210, 255, 0.1);
6+
--button-background-image : none;
7+
--button-background-gradient-end : none;
8+
--button-background-gradient-start : none;
9+
--button-badge-background-color : var(--cyber-red);
10+
--button-badge-color : #fff;
11+
--button-badge-margin-left : -10px;
12+
--button-badge-margin-top : -10px;
13+
--button-border : 1px solid var(--cyber-border);
14+
--button-border-active : 1px solid var(--cyber-cyan);
15+
--button-border-disabled : 1px solid var(--cyber-border);
16+
--button-border-hover : 1px solid var(--cyber-cyan);
17+
--button-border-pressed : 1px solid var(--cyber-cyan);
18+
--button-border-radius : 0;
19+
--button-border-width : 1px;
20+
--button-glyph-color : var(--cyber-cyan);
21+
--button-glyph-color-active : var(--cyber-cyan);
22+
--button-glyph-color-disabled : var(--neo-disabled-opacity);
23+
--button-glyph-color-hover : #fff;
24+
--button-glyph-margin : 1px 6px 0 0;
25+
--button-height : initial;
26+
--button-margin : 2px;
27+
--button-opacity-disabled : var(--neo-disabled-opacity);
28+
--button-outline-active : none;
29+
--button-padding : 5px 12px 5px 12px;
30+
--button-ripple-background-color : rgba(0, 210, 255, 0.3);
31+
--button-text-color : var(--cyber-text);
32+
--button-text-color-active : var(--cyber-cyan);
33+
--button-text-color-disabled : var(--neo-disabled-opacity);
34+
--button-text-color-hover : #fff;
35+
--button-text-font-family : var(--neo-font-family);
36+
--button-text-font-size : 11px;
37+
--button-text-font-weight : 600;
38+
--button-text-line-height : 11px;
39+
--button-text-transform : none;
40+
--button-use-gradients : false;
41+
42+
// {module: Button, ui: --ghost}
43+
--button-ghost-background-color : transparent;
44+
--button-ghost-background-color-active : var(--cyber-bg-alt);
45+
--button-ghost-background-color-disabled : inherit;
46+
--button-ghost-background-color-hover : transparent;
47+
--button-ghost-background-image : none;
48+
--button-ghost-badge-background-color : var(--button-badge-color);
49+
--button-ghost-badge-color : var(--button-badge-background-color);
50+
--button-ghost-border : none;
51+
--button-ghost-border-active : 1px solid var(--cyber-cyan);
52+
--button-ghost-border-disabled : inherit;
53+
--button-ghost-border-hover : 1px solid var(--cyber-cyan);
54+
--button-ghost-border-pressed : 1px solid var(--cyber-cyan);
55+
--button-ghost-glyph-color : var(--button-text-color);
56+
--button-ghost-glyph-color-active : var(--button-text-color);
57+
--button-ghost-glyph-color-disabled : inherit;
58+
--button-ghost-glyph-color-hover : var(--button-text-color);
59+
--button-ghost-opacity-disabled : var(--neo-disabled-opacity);
60+
--button-ghost-ripple-background-color : inherit;
61+
--button-ghost-text-color : var(--button-text-color);
62+
--button-ghost-text-color-active : var(--button-text-color);
63+
--button-ghost-text-color-disabled : inherit;
64+
--button-ghost-text-color-hover : var(--button-text-color);
65+
66+
// {module: Button, ui: --secondary}
67+
--button-secondary-background-color : var(--cyber-cyan);
68+
--button-secondary-background-color-active : var(--cyber-bg-alt);
69+
--button-secondary-background-color-disabled: inherit;
70+
--button-secondary-background-color-hover : var(--cyber-cyan);
71+
--button-secondary-background-image : none;
72+
--button-secondary-badge-background-color : var(--button-badge-color);
73+
--button-secondary-badge-color : var(--button-badge-background-color);
74+
--button-secondary-border : 1px solid var(--cyber-cyan);
75+
--button-secondary-border-active : 1px solid var(--cyber-cyan);
76+
--button-secondary-border-disabled : inherit;
77+
--button-secondary-border-hover : 1px solid var(--cyber-cyan);
78+
--button-secondary-border-pressed : 1px solid var(--cyber-cyan);
79+
--button-secondary-glyph-color : #000;
80+
--button-secondary-glyph-color-active : var(--cyber-cyan);
81+
--button-secondary-glyph-color-disabled : inherit;
82+
--button-secondary-glyph-color-hover : #000;
83+
--button-secondary-opacity-disabled : var(--neo-disabled-opacity);
84+
--button-secondary-ripple-background-color : inherit;
85+
--button-secondary-text-color : #000;
86+
--button-secondary-text-color-active : var(--cyber-cyan);
87+
--button-secondary-text-color-disabled : inherit;
88+
--button-secondary-text-color-hover : #000;
89+
90+
// {module: Button, ui: --tertiary}
91+
--button-tertiary-background-color : transparent;
92+
--button-tertiary-background-color-active : var(--cyber-bg-alt);
93+
--button-tertiary-background-color-disabled : inherit;
94+
--button-tertiary-background-color-hover : rgba(0, 210, 255, 0.1);
95+
--button-tertiary-background-image : none;
96+
--button-tertiary-badge-background-color : var(--button-badge-background-color);
97+
--button-tertiary-badge-color : var(--button-badge-color);
98+
--button-tertiary-border : 1px solid transparent;
99+
--button-tertiary-border-active : 1px solid var(--cyber-cyan);
100+
--button-tertiary-border-disabled : inherit;
101+
--button-tertiary-border-hover : 1px solid var(--cyber-cyan);
102+
--button-tertiary-border-pressed : 1px solid var(--cyber-cyan);
103+
--button-tertiary-glyph-color : var(--button-glyph-color);
104+
--button-tertiary-glyph-color-active : var(--button-glyph-color);
105+
--button-tertiary-glyph-color-disabled : inherit;
106+
--button-tertiary-glyph-color-hover : var(--button-glyph-color);
107+
--button-tertiary-opacity-disabled : var(--neo-disabled-opacity);
108+
--button-tertiary-ripple-background-color : inherit;
109+
--button-tertiary-text-color : var(--button-text-color);
110+
--button-tertiary-text-color-active : var(--button-text-color);
111+
--button-tertiary-text-color-disabled : inherit;
112+
--button-tertiary-text-color-hover : var(--button-text-color);
113+
}

0 commit comments

Comments
 (0)