maxcoredev.github.io/buttons.css at master · maxcoredev/maxcoredev.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
.button {
    color: #000;
    background: #fff;
    font-weight: var(--bold);
    border-radius: var(--border-radius);
    transition: all var(--transition-duration) ease;
    border: 1px solid var(--border-color-medium);
    cursor: pointer;
    outline: none;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center; /* vertical */
    justify-content: center; /* horisontal */
}

/* Misc */

.button.block {width:100%;}
.button.square {padding:0;}

/* Disabled */

.button[disabled] {opacity:0.7;cursor:default;}

/* Pending */

.button.pending {color:transparent !important;text-shadow:none !important;}
.button.pending svg {opacity:0;}
.button.pending:after {color:#000;content:'...';position:absolute;top:0;left:0;right:0;bottom:0;display:inline-flex;align-items:center;justify-content:center;}

/* States */

.button.current:not([disabled]) {background:var(--current);}
.button:focus:not([disabled])   {background:var(--focus);}
.button:hover:not([disabled])   {background:var(--hover);text-decoration:none;}
.button:active:not([disabled])  {background:var(--active);}

.button:not(.red):not(.green):not(.blue):not(.on-dark) {background-clip:padding-box;}

.button:not(.red):not(.green):not(.blue):not(.on-dark).current,
.button:not(.red):not(.green):not(.blue):not(.on-dark):not([disabled]):focus,
.button:not(.red):not(.green):not(.blue):not(.on-dark):not([disabled]):hover,
.button:not(.red):not(.green):not(.blue):not(.on-dark):not([disabled]):active {border-color:var(--border-color-dark);background-clip:padding-box;}

/* Size */

.button.tiny             {height:24px;min-width:24px;padding:0 12px;font-size:var(--font-size-tiny);}
.button.small            {height:30px;min-width:30px;padding:0 15px;font-size:var(--font-size-small);}
.button.medium           {height:36px;min-width:36px;padding:0 18px;font-size:var(--font-size-medium);}
.button, .button.regular {height:42px;min-width:42px;padding:0 21px;font-size:var(--font-size-regular);}
.button.big              {height:48px;min-width:48px;padding:0 24px;font-size:var(--font-size-big);}
.button.large            {height:54px;min-width:54px;padding:0 27px;font-size:var(--font-size-large);}

/* Icons */

.button svg {height:100%;}
.button.icon-left {padding-left:0;}
.button.icon-right {padding-right:0;}

.button.tiny.icon-left svg                           {padding:0   6px  0   6px;}
.button.small.icon-left svg                          {padding:1px 7px  1px 8px;}
.button.medium.icon-left svg                         {padding:2px 9px  2px 9px;}
.button.icon-left svg, .button.regular.icon-left svg {padding:3px 10px 3px 11px;}
.button.big.icon-left svg                            {padding:4px 12px 4px 12px;}
.button.large.icon-left svg                          {padding:5px 13px 5px 14px;}

.button.tiny.icon-right svg                            {padding:0   6px  0   6px;}
.button.small.icon-right svg                           {padding:1px 8px  1px 7px;}
.button.medium.icon-right svg                          {padding:2px 9px  2px 9px;}
.button.icon-right svg, .button.regular.icon-right svg {padding:3px 11px 3px 10px;}
.button.big.icon-right svg                             {padding:4px 12px 4px 12px;}
.button.large.icon-right svg                           {padding:5px 14px 5px 13px;}

/* Colored */

.button.blue:after, .button.green:after, .button.pending.red:after {color:#fff;}

.button.blue, .button.green, .button.red {
    color: #fff;
    fill: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.05);
    border-color: var(--border-color-light);
    background-clip: border-box;
}

.button.red                        {background:var(--red);}
.button.red.current                {background:var(--red-current);}
.button.red:focus:not([disabled])  {background:var(--red-focus);}
.button.red:hover:not([disabled])  {background:var(--red-hover);}
.button.red:active:not([disabled]) {background:var(--red-active) !important;}

.button.green                        {background:var(--green);}
.button.green.current                {background:var(--green-current);}
.button.green:focus:not([disabled])  {background:var(--green-focus);}
.button.green:hover:not([disabled])  {background:var(--green-hover);}
.button.green:active:not([disabled]) {background:var(--green-active) !important;}

.button.blue                        {background:var(--blue);}
.button.blue.current                {background:var(--blue-current);}
.button.blue:focus:not([disabled])  {background:var(--blue-focus);}
.button.blue:hover:not([disabled])  {background:var(--blue-hover);}
.button.blue:active:not([disabled]) {background:var(--blue-active) !important;}

/* Outlined */

.button.outlined {background:transparent;}
.button.outlined:not(:focus):not(:hover):not(:active):not(.current):not(.on-dark) {text-shadow:none;}

.button.outlined.red {color:var(--red);fill:var(--red);border-color:var(--red);}
.button.outlined.red:not([disabled]):hover {background:var(--red);}
.button.outlined.red:after {color:var(--red);}

.button.outlined.green {color:var(--green);fill:var(--green);border-color:var(--green)}
.button.outlined.green:not([disabled]):hover {background:var(--green);}
.button.outlined.green:after {color:var(--green);}

.button.outlined.blue  {color:var(--blue);fill:var(--blue);border-color:var(--blue)}
.button.outlined.blue:not([disabled]):hover {background:var(--blue);}
.button.outlined.blue:after {color:var(--blue);}

.button.outlined:focus, .button.outlined:hover:not([disabled]), .button.outlined:active, .button.outlined.current {color:#fff;fill:#fff;}

.button.outlined:focus, .button.outlined:hover:not([disabled]), .button.outlined:active, .button.outlined.current {border-color:var(--border-color-light);}

/* On dark */

.button.on-dark, .button.on-dark:focus, .button.on-dark:hover:not([disabled]), .button.on-dark:active, .button.on-dark.current {
    border-color: transparent;
    border-top-color: rgba(255,255,255,0.1);
    border-left-color: rgba(255,255,255,0.1);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}