Skip to content

Commit 08063d6

Browse files
simuraisimurai
authored
Merge pull request atom#18484 from atom/sm/atom-ui
Migrate 'atom-ui' into core
2 parents 9d6e4dc + 9be1881 commit 08063d6

Some content is hidden

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

50 files changed

+3945
-40
lines changed

‎package-lock.json

Lines changed: 5 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"atom-light-syntax": "file:packages/atom-light-syntax",
2727
"atom-light-ui": "file:packages/atom-light-ui",
2828
"atom-select-list": "^0.7.2",
29-
"atom-ui": "0.4.1",
3029
"autocomplete-atom-api": "https://www.atom.io/api/packages/autocomplete-atom-api/versions/0.10.7/tarball",
3130
"autocomplete-css": "https://www.atom.io/api/packages/autocomplete-css/versions/0.17.5/tarball",
3231
"autocomplete-html": "https://www.atom.io/api/packages/autocomplete-html/versions/0.8.8/tarball",

‎static/atom-ui/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# :sparkles: Atom UI :sparkles:
2+
3+
This is Atom's UI library. Originally forked from Bootstrap `3.3.6`, then merged with some core styles and now tweaked to Atom's needy needs.
4+
5+
## Components
6+
7+
Here a list of [all components](atom-ui.less). Open the [Styleguide](https://github.com/atom/styleguide) package (`cmd-ctrl-shift-g`) to see them in action and how to use them.
8+
9+
![Styleguide](https://cloud.githubusercontent.com/assets/378023/15767543/ccecf9bc-2983-11e6-9c5e-d228d39f52b0.png)
10+
11+
## Feature requests
12+
13+
If you need something, feel free to open an issue and it might can be added. :v:

‎static/atom-ui/_index.less

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Atom UI
2+
3+
// Private! Don't use these in packages.
4+
// If you need something, feel free to open an issue and it might can be made public
5+
@import "styles/private/scaffolding.less";
6+
7+
@import "styles/private/alerts.less";
8+
@import "styles/private/close.less";
9+
@import "styles/private/code.less";
10+
@import "styles/private/forms.less";
11+
@import "styles/private/links.less";
12+
@import "styles/private/navs.less";
13+
@import "styles/private/sections.less";
14+
@import "styles/private/tables.less";
15+
@import "styles/private/utilities.less";
16+
17+
18+
// Public components
19+
// Open the Styleguide to see them in action
20+
@import "styles/badges.less";
21+
@import "styles/button-groups.less";
22+
@import "styles/buttons.less";
23+
@import "styles/git-status.less";
24+
@import "styles/icons.less";
25+
@import "styles/inputs.less";
26+
@import "styles/layout.less";
27+
@import "styles/lists.less";
28+
@import "styles/loading.less";
29+
@import "styles/messages.less";
30+
@import "styles/modals.less";
31+
@import "styles/panels.less";
32+
@import "styles/select-list.less";
33+
@import "styles/site-colors.less";
34+
@import "styles/text.less";
35+
@import "styles/tooltip.less";

‎static/atom-ui/styles/badges.less

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import "ui-variables";
2+
3+
.badge {
4+
display: inline-block;
5+
line-height: 1;
6+
vertical-align: middle;
7+
font-weight: normal;
8+
text-align: center;
9+
white-space: nowrap;
10+
border-radius: 1em;
11+
12+
&:empty {
13+
display: none; // Hide when un-used
14+
}
15+
16+
17+
// Color ----------------------
18+
19+
.badge-color( @fg: @text-color-selected; @bg: @background-color-selected; ) {
20+
color: @fg;
21+
background-color: @bg;
22+
}
23+
.badge-color();
24+
&.badge-info { .badge-color(white, @background-color-info); }
25+
&.badge-success { .badge-color(white, @background-color-success); }
26+
&.badge-warning { .badge-color(white, @background-color-warning); }
27+
&.badge-error { .badge-color(white, @background-color-error); }
28+
29+
30+
// Size ----------------------
31+
32+
.badge-size( @size: @font-size; ) {
33+
@padding: round(@size/4);
34+
font-size: @size;
35+
min-width: @size + @padding*2;
36+
padding: @padding round(@padding*1.5);
37+
}
38+
.badge-size(); // default
39+
40+
// Fixed size
41+
&.badge-large { .badge-size(18px); }
42+
&.badge-medium { .badge-size(14px); }
43+
&.badge-small { .badge-size(10px); }
44+
45+
// Flexible size
46+
// The size changes depending on the parent element
47+
// Best used for larger sizes, since em's can cause rounding errors
48+
&.badge-flexible {
49+
@size: .8em;
50+
@padding: @size/2;
51+
font-size: @size;
52+
min-width: @size + @padding*2;
53+
padding: @padding @padding*1.5;
54+
}
55+
56+
57+
// Icon ----------------------
58+
59+
&.icon {
60+
font-size: round(@component-icon-size*0.8);
61+
padding: @component-icon-padding @component-icon-padding*2;
62+
}
63+
64+
}

‎static/atom-ui/styles/button-groups.less

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
@import "variables/variables";
2+
@import "ui-variables";
3+
@import "mixins/mixins";
4+
5+
//
6+
// Button groups
7+
// --------------------------------------------------
8+
9+
// Make the div behave like a button
10+
.btn-group,
11+
.btn-group-vertical {
12+
position: relative;
13+
display: inline-block;
14+
vertical-align: middle; // match .btn alignment given font-size hack above
15+
> .btn {
16+
position: relative;
17+
float: left;
18+
// Bring the "active" button to the front
19+
&:hover,
20+
&:focus,
21+
&:active,
22+
&.active {
23+
z-index: 2;
24+
}
25+
}
26+
}
27+
28+
29+
// Borders
30+
// ---------------------------------------------------------
31+
32+
.btn-group > .btn {
33+
border-left: 1px solid @button-border-color;
34+
border-right: 1px solid @button-border-color;
35+
}
36+
.btn-group > .btn:first-child {
37+
border-left: none;
38+
border-top-left-radius: @component-border-radius;
39+
border-bottom-left-radius: @component-border-radius;
40+
}
41+
.btn-group > .btn:last-child,
42+
.btn-group > .btn.selected:last-child,
43+
.btn-group > .dropdown-toggle {
44+
border-right: none;
45+
border-top-right-radius: @component-border-radius;
46+
border-bottom-right-radius: @component-border-radius;
47+
}
48+
49+
// Prevent double borders when buttons are next to each other
50+
.btn-group {
51+
.btn + .btn,
52+
.btn + .btn-group,
53+
.btn-group + .btn,
54+
.btn-group + .btn-group {
55+
margin-left: -1px;
56+
}
57+
}
58+
59+
// Optional: Group multiple button groups together for a toolbar
60+
.btn-toolbar {
61+
margin-left: -5px; // Offset the first child's margin
62+
&:extend(.clearfix all);
63+
64+
.btn,
65+
.btn-group,
66+
.input-group {
67+
float: left;
68+
}
69+
> .btn,
70+
> .btn-group,
71+
> .input-group {
72+
margin-left: 5px;
73+
}
74+
}
75+
76+
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
77+
border-radius: 0;
78+
}
79+
80+
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
81+
.btn-group > .btn:first-child {
82+
margin-left: 0;
83+
&:not(:last-child):not(.dropdown-toggle) {
84+
.border-right-radius(0);
85+
}
86+
}
87+
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
88+
.btn-group > .btn:last-child:not(:first-child),
89+
.btn-group > .dropdown-toggle:not(:first-child) {
90+
.border-left-radius(0);
91+
}
92+
93+
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
94+
.btn-group > .btn-group {
95+
float: left;
96+
}
97+
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
98+
border-radius: 0;
99+
}
100+
.btn-group > .btn-group:first-child:not(:last-child) {
101+
> .btn:last-child,
102+
> .dropdown-toggle {
103+
.border-right-radius(0);
104+
}
105+
}
106+
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
107+
.border-left-radius(0);
108+
}
109+
110+
// On active and open, don't show outline
111+
.btn-group .dropdown-toggle:active,
112+
.btn-group.open .dropdown-toggle {
113+
outline: 0;
114+
}
115+
116+
117+
// Sizing
118+
//
119+
// Remix the default button sizing classes into new ones for easier manipulation.
120+
121+
.btn-group-xs > .btn { &:extend(.btn-xs); }
122+
.btn-group-sm > .btn { &:extend(.btn-sm); }
123+
.btn-group-lg > .btn { &:extend(.btn-lg); }
124+
125+
126+
// Split button dropdowns
127+
// ----------------------
128+
129+
// Give the line between buttons some depth
130+
.btn-group > .btn + .dropdown-toggle {
131+
padding-left: 8px;
132+
padding-right: 8px;
133+
}
134+
.btn-group > .btn-lg + .dropdown-toggle {
135+
padding-left: 12px;
136+
padding-right: 12px;
137+
}
138+
139+
// The clickable button for toggling the menu
140+
// Remove the gradient and set the same inset shadow as the :active state
141+
.btn-group.open .dropdown-toggle {
142+
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
143+
144+
// Show no shadow for `.btn-link` since it has no other button styles.
145+
&.btn-link {
146+
box-shadow: none;
147+
}
148+
}
149+
150+
151+
// Reposition the caret
152+
.btn .caret {
153+
margin-left: 0;
154+
}
155+
// Carets in other button sizes
156+
.btn-lg .caret {
157+
border-width: @caret-width-large @caret-width-large 0;
158+
border-bottom-width: 0;
159+
}
160+
// Upside down carets for .dropup
161+
.dropup .btn-lg .caret {
162+
border-width: 0 @caret-width-large @caret-width-large;
163+
}
164+
165+
166+
// Justified button groups
167+
// ----------------------
168+
169+
.btn-group-justified {
170+
display: table;
171+
width: 100%;
172+
table-layout: fixed;
173+
border-collapse: separate;
174+
> .btn,
175+
> .btn-group {
176+
float: none;
177+
display: table-cell;
178+
width: 1%;
179+
}
180+
> .btn-group .btn {
181+
width: 100%;
182+
}
183+
184+
> .btn-group .dropdown-menu {
185+
left: auto;
186+
}
187+
}

0 commit comments

Comments
 (0)