Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
microsoft
GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/base/browser/ui/button/button.css
3296 views
1
/*---------------------------------------------------------------------------------------------
2
* Copyright (c) Microsoft Corporation. All rights reserved.
3
* Licensed under the MIT License. See License.txt in the project root for license information.
4
*--------------------------------------------------------------------------------------------*/
5
6
.monaco-text-button {
7
box-sizing: border-box;
8
display: flex;
9
width: 100%;
10
padding: 4px;
11
border-radius: 2px;
12
text-align: center;
13
cursor: pointer;
14
justify-content: center;
15
align-items: center;
16
border: 1px solid var(--vscode-button-border, transparent);
17
line-height: 18px;
18
}
19
20
.monaco-text-button:focus {
21
outline-offset: 2px !important;
22
}
23
24
.monaco-text-button:hover {
25
text-decoration: none !important;
26
}
27
28
.monaco-button.disabled:focus,
29
.monaco-button.disabled {
30
opacity: 0.4 !important;
31
cursor: default;
32
}
33
34
.monaco-text-button .codicon {
35
margin: 0 0.2em;
36
color: inherit !important;
37
}
38
39
.monaco-text-button.monaco-text-button-with-short-label {
40
flex-direction: row;
41
flex-wrap: wrap;
42
padding: 0 4px;
43
overflow: hidden;
44
height: 28px;
45
}
46
47
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
48
flex-basis: 100%;
49
}
50
51
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
52
flex-grow: 1;
53
width: 0;
54
overflow: hidden;
55
}
56
57
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
58
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
59
display: flex;
60
justify-content: center;
61
align-items: center;
62
font-weight: normal;
63
font-style: inherit;
64
padding: 4px 0;
65
}
66
67
.monaco-button-dropdown {
68
display: flex;
69
cursor: pointer;
70
}
71
72
.monaco-button-dropdown.disabled {
73
cursor: default;
74
}
75
76
.monaco-button-dropdown > .monaco-button:focus {
77
outline-offset: -1px !important;
78
}
79
80
.monaco-button-dropdown.disabled > .monaco-button.disabled,
81
.monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
82
.monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
83
opacity: 0.4 !important;
84
}
85
86
.monaco-button-dropdown > .monaco-button.monaco-text-button {
87
border-right-width: 0 !important;
88
}
89
90
.monaco-button-dropdown .monaco-button-dropdown-separator {
91
padding: 4px 0;
92
cursor: default;
93
}
94
95
.monaco-button-dropdown .monaco-button-dropdown-separator > div {
96
height: 100%;
97
width: 1px;
98
}
99
100
.monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
101
border: 1px solid var(--vscode-button-border, transparent);
102
border-left-width: 0 !important;
103
border-radius: 0 2px 2px 0;
104
display: flex;
105
align-items: center;
106
}
107
108
.monaco-button-dropdown > .monaco-button.monaco-text-button {
109
border-radius: 2px 0 0 2px;
110
}
111
112
.monaco-description-button {
113
display: flex;
114
flex-direction: column;
115
align-items: center;
116
margin: 4px 5px; /* allows button focus outline to be visible */
117
}
118
119
.monaco-description-button .monaco-button-description {
120
font-style: italic;
121
font-size: 11px;
122
padding: 4px 20px;
123
}
124
125
.monaco-description-button .monaco-button-label,
126
.monaco-description-button .monaco-button-description {
127
display: flex;
128
justify-content: center;
129
align-items: center;
130
}
131
132
.monaco-description-button .monaco-button-label > .codicon,
133
.monaco-description-button .monaco-button-description > .codicon {
134
margin: 0 0.2em;
135
color: inherit !important;
136
}
137
138
/* default color styles - based on CSS variables */
139
140
.monaco-button.default-colors,
141
.monaco-button-dropdown.default-colors > .monaco-button{
142
color: var(--vscode-button-foreground);
143
background-color: var(--vscode-button-background);
144
}
145
146
.monaco-button.default-colors:hover,
147
.monaco-button-dropdown.default-colors > .monaco-button:hover {
148
background-color: var(--vscode-button-hoverBackground);
149
}
150
151
.monaco-button.default-colors.secondary,
152
.monaco-button-dropdown.default-colors > .monaco-button.secondary {
153
color: var(--vscode-button-secondaryForeground);
154
background-color: var(--vscode-button-secondaryBackground);
155
}
156
157
.monaco-button.default-colors.secondary:hover,
158
.monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
159
background-color: var(--vscode-button-secondaryHoverBackground);
160
}
161
162
.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
163
background-color: var(--vscode-button-background);
164
border-top: 1px solid var(--vscode-button-border);
165
border-bottom: 1px solid var(--vscode-button-border);
166
}
167
168
.monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
169
background-color: var(--vscode-button-secondaryBackground);
170
}
171
172
.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
173
background-color: var(--vscode-button-separator);
174
}
175
176