├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── atom-ui.less ├── package.json └── styles ├── badges.less ├── button-groups.less ├── buttons.less ├── git-status.less ├── icons.less ├── inputs.less ├── layout.less ├── lists.less ├── loading.less ├── messages.less ├── mixins └── mixins.less ├── modals.less ├── panels.less ├── private ├── README.md ├── alerts.less ├── close.less ├── code.less ├── forms.less ├── links.less ├── navs.less ├── scaffolding.less ├── sections.less ├── tables.less └── utilities.less ├── select-list.less ├── site-colors.less ├── text.less ├── tooltip.less └── variables └── variables.less /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | See the [Atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md) 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 GitHub Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | 23 | --------------------------------- 24 | Forked from Bootstrap 3.3.6 25 | --------------------------------- 26 | 27 | 28 | The MIT License (MIT) 29 | 30 | Copyright (c) 2011-2015 Twitter, Inc 31 | 32 | Permission is hereby granted, free of charge, to any person obtaining a copy 33 | of this software and associated documentation files (the "Software"), to deal 34 | in the Software without restriction, including without limitation the rights 35 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 36 | copies of the Software, and to permit persons to whom the Software is 37 | furnished to do so, subject to the following conditions: 38 | 39 | The above copyright notice and this permission notice shall be included in 40 | all copies or substantial portions of the Software. 41 | 42 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 43 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 44 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 45 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 46 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 47 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 48 | THE SOFTWARE. 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > :warning: Note: This package is now a part of the [core Atom repository](https://github.com/atom/atom/tree/master/static/atom-ui), please direct all issues and pull requests there in the future! 2 | 3 | # :sparkles: Atom UI :sparkles: 4 | 5 | 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. 6 | 7 | > Note: This package gets bundled with Atom and isn't meant to be used outside of the Atom editor. It depends on variables provided by Atom themes. 8 | 9 | 10 | ## Components 11 | 12 | Here a list of [all components](https://github.com/atom/atom-ui/blob/master/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. 13 | 14 | ![Styleguide](https://cloud.githubusercontent.com/assets/378023/15767543/ccecf9bc-2983-11e6-9c5e-d228d39f52b0.png) 15 | 16 | 17 | ## Contributing 18 | 19 | Because Atom UI isn't a normal Atom package, the "auto-reload" of the Less files in Dev Mode isn't supported. In order to test your changes, do the following: 20 | 21 | 1. Clone this repo as a sibling to [atom/atom](https://github.com/atom/atom) 22 | 2. Change [this import path](https://github.com/atom/atom/blob/master/static/atom.less#L27) to `@import "../../atom-ui/atom-ui.less";` 23 | 3. Make some changes 24 | 4. Manually reload all styles with `ctrl-shift-cmd-r` (macOS) 25 | 26 | If building Atom feels like too much effort, you can also also test (override) changes in your `styles.less` file or DevTools. Just be aware that the source order isn't the same. `atom-ui` gets loaded before all packages and themes. 27 | 28 | 29 | ## Feature requests 30 | 31 | If you need something, feel free to open an issue and it might can be added. :v: 32 | -------------------------------------------------------------------------------- /atom-ui.less: -------------------------------------------------------------------------------- 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"; 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom-ui", 3 | "version": "0.4.1", 4 | "description": "Atom's UI library", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/atom/atom-ui.git" 8 | }, 9 | "license": "MIT", 10 | "bugs": { 11 | "url": "https://github.com/atom/atom-ui/issues" 12 | }, 13 | "homepage": "https://github.com/atom/atom-ui/" 14 | } 15 | -------------------------------------------------------------------------------- /styles/badges.less: -------------------------------------------------------------------------------- 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; 20 | @bg: @background-color-selected; ) { 21 | color: @fg; 22 | background-color: @bg; 23 | } 24 | .badge-color(); 25 | &.badge-info { .badge-color(white, @background-color-info); } 26 | &.badge-success { .badge-color(white, @background-color-success); } 27 | &.badge-warning { .badge-color(white, @background-color-warning); } 28 | &.badge-error { .badge-color(white, @background-color-error); } 29 | 30 | 31 | // Size ---------------------- 32 | 33 | .badge-size( @size: @font-size; ) { 34 | @padding: round(@size/4); 35 | font-size: @size; 36 | min-width: @size + @padding*2; 37 | padding: @padding round(@padding*1.5); 38 | } 39 | .badge-size(); // default 40 | 41 | // Fixed size 42 | &.badge-large { .badge-size(18px); } 43 | &.badge-medium { .badge-size(14px); } 44 | &.badge-small { .badge-size(10px); } 45 | 46 | // Flexible size 47 | // The size changes depending on the parent element 48 | // Best used for larger sizes, since em's can cause rounding errors 49 | &.badge-flexible { 50 | @size: .8em; 51 | @padding: @size/2; 52 | font-size: @size; 53 | min-width: @size + @padding*2; 54 | padding: @padding @padding*1.5; 55 | } 56 | 57 | 58 | // Icon ---------------------- 59 | 60 | &.icon { 61 | font-size: round(@component-icon-size*0.8); 62 | padding: @component-icon-padding @component-icon-padding*2; 63 | } 64 | 65 | } 66 | -------------------------------------------------------------------------------- /styles/button-groups.less: -------------------------------------------------------------------------------- 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 | } 188 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | @import "variables/variables"; 2 | @import "ui-variables"; 3 | @import "mixins/mixins"; 4 | 5 | // 6 | // Buttons 7 | // -------------------------------------------------- 8 | 9 | 10 | // Base styles 11 | // -------------------------------------------------- 12 | 13 | .btn { 14 | display: inline-block; 15 | margin-bottom: 0; // For input.btn 16 | height: @component-line-height + 2px; 17 | padding: 0 @component-padding; 18 | font-size: @font-size; 19 | font-weight: normal; 20 | line-height: @component-line-height; 21 | text-align: center; 22 | vertical-align: middle; 23 | border: none; 24 | border-radius: @component-border-radius; 25 | background-color: @btn-default-bg; 26 | white-space: nowrap; 27 | cursor: pointer; 28 | z-index: 0; 29 | -webkit-user-select: none; 30 | 31 | &, 32 | &:active, 33 | &.active { 34 | &:focus, 35 | &.focus { 36 | .tab-focus(); 37 | } 38 | } 39 | 40 | &:hover, 41 | &:focus, 42 | &.focus { 43 | color: @btn-default-color; 44 | text-decoration: none; 45 | background-color: @button-background-color-hover; 46 | } 47 | 48 | &:active, 49 | &.active { 50 | outline: 0; 51 | background-image: none; 52 | box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 53 | } 54 | 55 | &.selected, 56 | &.selected:hover { 57 | // we want the selected button to behave like the :hover button; it's on top of the other buttons. 58 | z-index: 1; 59 | color: @text-color-selected; 60 | background-color: @button-background-color-selected; 61 | } 62 | 63 | &.disabled, 64 | &[disabled], 65 | fieldset[disabled] & { 66 | cursor: @cursor-disabled; 67 | opacity: .65; 68 | box-shadow: none; 69 | } 70 | 71 | a& { 72 | &.disabled, 73 | fieldset[disabled] & { 74 | pointer-events: none; // Future-proof disabling of clicks on `` elements 75 | } 76 | } 77 | } 78 | 79 | 80 | // Button variants 81 | // -------------------------------------------------- 82 | 83 | .button-variant(@color; @background;) { 84 | color: @color; 85 | background-color: @background; 86 | 87 | &:focus, 88 | &.focus { 89 | color: @color; 90 | background-color: darken(@background, 10%); 91 | } 92 | &:hover { 93 | color: @color; 94 | background-color: darken(@background, 10%); 95 | } 96 | &:active, 97 | &.active { 98 | color: @color; 99 | background-color: darken(@background, 10%); 100 | 101 | &:hover, 102 | &:focus, 103 | &.focus { 104 | color: @color; 105 | background-color: darken(@background, 17%); 106 | } 107 | } 108 | &.selected, 109 | &.selected:hover { 110 | // we want the selected button to behave like the :hover button; it's on top of the other buttons. 111 | z-index: 1; 112 | background-color: darken(@background, 10%); 113 | } 114 | 115 | &.disabled, 116 | &[disabled], 117 | fieldset[disabled] & { 118 | &:hover, 119 | &:focus, 120 | &.focus { 121 | background-color: @background; 122 | } 123 | } 124 | 125 | .badge { 126 | color: @background; 127 | background-color: @color; 128 | } 129 | } 130 | 131 | .btn-primary { 132 | .button-variant(@btn-primary-color; @btn-primary-bg;); 133 | } 134 | // Success appears as green 135 | .btn-success { 136 | .button-variant(@btn-success-color; @btn-success-bg;); 137 | } 138 | // Info appears as blue-green 139 | .btn-info { 140 | .button-variant(@btn-info-color; @btn-info-bg;); 141 | } 142 | // Warning appears as orange 143 | .btn-warning { 144 | .button-variant(@btn-warning-color; @btn-warning-bg;); 145 | } 146 | // Danger and error appear as red 147 | .btn-error { 148 | .button-variant(@btn-error-color; @btn-error-bg;); 149 | } 150 | 151 | 152 | // Button Sizes 153 | // -------------------------------------------------- 154 | 155 | .btn-xs, 156 | .btn-group-xs > .btn { 157 | padding: @component-padding/4 @component-padding/2; 158 | font-size: @font-size - 2px; 159 | height: auto; 160 | line-height: 1.3em; 161 | &.icon:before { 162 | font-size: @font-size - 2px; 163 | } 164 | } 165 | .btn-sm, 166 | .btn-group-sm > .btn { 167 | padding: @component-padding/4 @component-padding/2; 168 | height: auto; 169 | line-height: 1.3em; 170 | &.icon:before { 171 | font-size: @font-size + 1px; 172 | } 173 | } 174 | .btn-lg, 175 | .btn-group-lg > .btn { 176 | font-size: @font-size + 2px; 177 | padding: @component-padding - 2px @component-padding + 2px; 178 | height: auto; 179 | line-height: 1.3em; 180 | &.icon:before { 181 | font-size: @font-size + 6px; 182 | } 183 | } 184 | 185 | 186 | // Link button 187 | // ------------------------- 188 | 189 | // Make a button look and behave like a link 190 | .btn-link { 191 | color: @link-color; 192 | font-weight: normal; 193 | border-radius: 0; 194 | &, 195 | &:active, 196 | &.active, 197 | &[disabled], 198 | fieldset[disabled] & { 199 | background-color: transparent; 200 | box-shadow: none; 201 | } 202 | &:hover, 203 | &:focus { 204 | color: @link-hover-color; 205 | text-decoration: @link-hover-decoration; 206 | background-color: transparent; 207 | } 208 | &[disabled], 209 | fieldset[disabled] & { 210 | &:hover, 211 | &:focus { 212 | color: @btn-link-disabled-color; 213 | text-decoration: none; 214 | } 215 | } 216 | } 217 | 218 | 219 | // Block button 220 | // -------------------------------------------------- 221 | 222 | .btn-block { 223 | display: block; 224 | width: 100%; 225 | } 226 | 227 | // Vertically space out multiple block buttons 228 | .btn-block + .btn-block { 229 | margin-top: 5px; 230 | } 231 | 232 | // Specificity overrides 233 | input[type="submit"], 234 | input[type="reset"], 235 | input[type="button"] { 236 | &.btn-block { 237 | width: 100%; 238 | } 239 | } 240 | 241 | 242 | // Icon buttons 243 | // -------------------------------------------------- 244 | 245 | .btn.icon { 246 | &:before { 247 | width: initial; 248 | height: initial; 249 | margin-right: .3125em; 250 | } 251 | &:empty:before { 252 | margin-right: 0; 253 | } 254 | } 255 | 256 | 257 | // Button Toolbar 258 | // -------------------------------------------------- 259 | 260 | .btn-toolbar { 261 | > .btn-group + .btn-group, 262 | > .btn-group + .btn, 263 | > .btn + .btn { 264 | float: none; 265 | display: inline-block; 266 | margin-left: 0; 267 | } 268 | > * { 269 | margin-right: @component-padding / 2; 270 | } 271 | > *:last-child { 272 | margin-right: 0; 273 | } 274 | } 275 | -------------------------------------------------------------------------------- /styles/git-status.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | // 4 | // Git Status 5 | // -------------------------------------------------- 6 | 7 | .status { 8 | &-ignored { color: @text-color-subtle; } 9 | &-added { color: @text-color-success; } 10 | &-modified { color: @text-color-warning; } 11 | &-removed { color: @text-color-error; } 12 | &-renamed { color: @text-color-info; } 13 | } 14 | -------------------------------------------------------------------------------- /styles/icons.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .icon::before { 4 | margin-right: @component-icon-padding; 5 | } 6 | 7 | a.icon { 8 | text-decoration: none; 9 | color: @text-color; 10 | &:hover{ 11 | color: @text-color-highlight; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /styles/inputs.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | @component-size: @component-icon-size; // use for text-less controls like radio, checkboxes etc. 4 | @component-margin-side: .3em; 5 | @text-component-height: 2em; 6 | @component-background-color: mix(@text-color, @base-background-color, 20%); 7 | 8 | 9 | // 10 | // Overrides 11 | // ------------------------- 12 | 13 | input.input-radio, 14 | input.input-checkbox, 15 | input.input-toggle { 16 | margin-top: 0; // Override Bootstrap's 4px 17 | } 18 | .input-label { 19 | margin-bottom: 0; 20 | } 21 | 22 | // 23 | // Mixins 24 | // ------------------------- 25 | 26 | .input-field-mixin() { 27 | padding: .25em .4em; 28 | line-height: 1.5; // line-height + padding = @text-component-height 29 | border-radius: @component-border-radius; 30 | border: 1px solid @input-border-color; 31 | background-color: @input-background-color; 32 | &::-webkit-input-placeholder { 33 | color: @text-color-subtle; 34 | } 35 | &:invalid { 36 | color: @text-color-error; 37 | border-color: @background-color-error; 38 | } 39 | } 40 | 41 | .input-block-mixin() { 42 | display: block; 43 | width: 100%; 44 | } 45 | 46 | 47 | // 48 | // Checkbox 49 | // ------------------------- 50 | 51 | .input-checkbox { 52 | vertical-align: middle; 53 | 54 | & when (@use-custom-controls) { 55 | -webkit-appearance: none; 56 | display: inline-block; 57 | position: relative; 58 | width: @component-size; 59 | height: @component-size; 60 | font-size: inherit; 61 | border-radius: @component-border-radius; 62 | background-color: @component-background-color; 63 | transition: background-color .16s cubic-bezier(0.5, 0.15, 0.2, 1); 64 | 65 | &&:focus { 66 | outline: 0; // TODO: Add it back 67 | } 68 | &:active { 69 | background-color: @background-color-info; 70 | } 71 | 72 | &:before, 73 | &:after { 74 | content: ""; 75 | position: absolute; 76 | top: @component-size * .75; 77 | left: @component-size * .4; 78 | height: 2px; 79 | border-radius: 1px; 80 | background-color: @base-background-color; 81 | transform-origin: 0 0; 82 | opacity: 0; 83 | transition: transform .1s cubic-bezier(0.5, 0.15, 0.2, 1), opacity .1s cubic-bezier(0.5, 0.15, 0.2, 1); 84 | } 85 | &:before { 86 | width: @component-size * .33; 87 | transform: translate3d(0,0,0) rotate(225deg) scale(0); 88 | } 89 | &:after { 90 | width: @component-size * .66; 91 | margin: -1px; 92 | transform: translate3d(0,0,0) rotate(-45deg) scale(0); 93 | transition-delay: .05s; 94 | } 95 | 96 | &:checked { 97 | background-color: @background-color-info; 98 | &:active { 99 | background-color: @component-background-color; 100 | } 101 | &:before { 102 | opacity: 1; 103 | transform: translate3d(0,0,0) rotate(225deg) scale(1); 104 | transition-delay: .05s; 105 | } 106 | &:after { 107 | opacity: 1; 108 | transform: translate3d(0, 0, 0) rotate(-45deg) scale(1); 109 | transition-delay: 0; 110 | } 111 | } 112 | 113 | &:indeterminate { 114 | background-color: @background-color-info; 115 | &:active { 116 | background-color: @component-background-color; 117 | } 118 | &:after { 119 | opacity: 1; 120 | transform: translate3d(@component-size * -.14, @component-size * -.25, 0) rotate(0deg) scale(1); 121 | transition-delay: 0; 122 | } 123 | } 124 | } 125 | } 126 | 127 | 128 | // 129 | // Color 130 | // ------------------------- 131 | 132 | 133 | .input-color { 134 | vertical-align: middle; 135 | 136 | & when (@use-custom-controls) { 137 | -webkit-appearance: none; 138 | padding: 0; 139 | width: @component-size * 2.5; 140 | height: @component-size * 2.5; 141 | border-radius: 50%; 142 | border: 2px solid @input-border-color; 143 | background-color: @input-background-color; 144 | &::-webkit-color-swatch-wrapper { padding: 0; } 145 | &::-webkit-color-swatch { 146 | border: 1px solid hsla(0,0%,0%,.1); 147 | border-radius: 50%; 148 | transition: transform .16s cubic-bezier(0.5, 0.15, 0.2, 1); 149 | &:active { 150 | transition-duration: 0s; 151 | transform: scale(.9); 152 | } 153 | } 154 | } 155 | } 156 | 157 | 158 | 159 | // 160 | // Label 161 | // ------------------------- 162 | 163 | .input-label { 164 | .input-radio, 165 | .input-checkbox, 166 | .input-toggle { 167 | margin-top: -.25em; // Vertical center (visually) - since most labels are upper case. 168 | margin-right: @component-margin-side; 169 | } 170 | } 171 | 172 | 173 | // 174 | // Number 175 | // ------------------------- 176 | 177 | .input-number { 178 | vertical-align: middle; 179 | 180 | & when (@use-custom-controls) { 181 | .input-field-mixin(); 182 | position: relative; 183 | width: auto; 184 | .platform-darwin & { 185 | padding-right: 1.2em; // space for the spin button 186 | &::-webkit-inner-spin-button { 187 | -webkit-appearance: menulist-button; 188 | position: absolute; 189 | top: 1px; 190 | bottom: 1px; 191 | right: 1px; 192 | width: calc(.6em ~'+' 9px); // magic numbers, OMG! 193 | outline: 1px solid @input-background-color; 194 | outline-offset: -1px; // reduces border radius (that can't be changed) 195 | border-right: .2em solid @background-color-highlight; // a bit more padding 196 | background-color: @background-color-highlight; 197 | transition: transform .16s cubic-bezier(0.5, 0.15, 0.2, 1); 198 | &:active { 199 | transform: scale(.9); 200 | transition-duration: 0s; 201 | } 202 | } 203 | } 204 | } 205 | } 206 | 207 | 208 | // 209 | // Radio 210 | // ------------------------- 211 | 212 | .input-radio { 213 | vertical-align: middle; 214 | 215 | & when (@use-custom-controls) { 216 | -webkit-appearance: none; 217 | display: inline-block; 218 | position: relative; 219 | width: @component-size; 220 | height: @component-size; 221 | font-size: inherit; 222 | border-radius: 50%; 223 | background-color: @component-background-color; 224 | transition: background-color .16s cubic-bezier(0.5, 0.15, 0.2, 1); 225 | 226 | &:before { 227 | content: ""; 228 | position: absolute; 229 | width: inherit; 230 | height: inherit; 231 | border-radius: inherit; 232 | border: @component-size/3 solid transparent; 233 | background-clip: content-box; 234 | background-color: @base-background-color; 235 | transform: scale(0); 236 | transition: transform .1s cubic-bezier(0.5, 0.15, 0.2, 1); 237 | } 238 | &&:focus { 239 | outline: none; 240 | } 241 | &:active { 242 | background-color: @background-color-info; 243 | } 244 | &:checked { 245 | background-color: @background-color-info; 246 | &:before { 247 | transform: scale(1); 248 | } 249 | } 250 | } 251 | } 252 | 253 | 254 | // 255 | // Range (Slider) 256 | // ------------------------- 257 | 258 | .input-range { 259 | & when (@use-custom-controls) { 260 | -webkit-appearance: none; 261 | margin: @component-padding 0; 262 | height: 4px; 263 | border-radius: @component-border-radius; 264 | background-color: @component-background-color; 265 | &::-webkit-slider-thumb { 266 | -webkit-appearance: none; 267 | width: @component-size; 268 | height: @component-size; 269 | border-radius: 50%; 270 | background-color: @background-color-info; 271 | transition: transform .16s; 272 | &:active { 273 | transition-duration: 0s; 274 | transform: scale(.9); 275 | } 276 | } 277 | } 278 | } 279 | 280 | 281 | // 282 | // Search 283 | // ------------------------- 284 | 285 | .input-search { 286 | .input-block-mixin(); 287 | &&::-webkit-search-cancel-button { 288 | -webkit-appearance: searchfield-cancel-button; 289 | } 290 | 291 | & when (@use-custom-controls) { 292 | .input-field-mixin(); 293 | } 294 | } 295 | 296 | 297 | // 298 | // Select 299 | // ------------------------- 300 | 301 | .input-select { 302 | vertical-align: middle; 303 | 304 | & when (@use-custom-controls) { 305 | height: calc(@text-component-height ~'+' 2px); // + 2px? Magic! 306 | border-radius: @component-border-radius; 307 | border: 1px solid @button-border-color; 308 | background-color: @button-background-color; 309 | } 310 | } 311 | 312 | 313 | // 314 | // Text 315 | // ------------------------- 316 | 317 | .input-text { 318 | .input-block-mixin(); 319 | 320 | & when (@use-custom-controls) { 321 | .input-field-mixin(); 322 | } 323 | } 324 | 325 | 326 | // 327 | // Text Area 328 | // ------------------------- 329 | 330 | .input-textarea { 331 | .input-block-mixin(); 332 | 333 | & when (@use-custom-controls) { 334 | .input-field-mixin(); 335 | } 336 | } 337 | 338 | 339 | // 340 | // Toggle 341 | // ------------------------- 342 | 343 | .input-toggle { 344 | & when (@use-custom-controls) { 345 | -webkit-appearance: none; 346 | display: inline-block; 347 | position: relative; 348 | font-size: inherit; 349 | width: @component-size * 2; 350 | height: @component-size; 351 | vertical-align: middle; 352 | border-radius: 2em; 353 | background-color: @component-background-color; 354 | transition: background-color .2s cubic-bezier(0.5, 0.15, 0.2, 1); 355 | 356 | &&:focus { 357 | outline: 0; 358 | } 359 | &:checked { 360 | background-color: @background-color-info; 361 | } 362 | 363 | // Thumb 364 | &:before { 365 | content: ""; 366 | position: absolute; 367 | width: @component-size; 368 | height: @component-size; 369 | border-radius: inherit; 370 | border: @component-size/4 solid transparent; 371 | background-clip: content-box; 372 | background-color: @base-background-color; 373 | transition: transform .2s cubic-bezier(0.5, 0.15, 0.2, 1); 374 | } 375 | &:active:before { 376 | opacity: .5; 377 | } 378 | &:checked:before { 379 | transform: translate3d(100%, 0, 0); 380 | } 381 | } 382 | } 383 | -------------------------------------------------------------------------------- /styles/layout.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "mixins/mixins"; 3 | 4 | .padded { 5 | padding: @component-padding; 6 | } 7 | 8 | // Blocks 9 | 10 | .center-block { 11 | display: block; 12 | margin-left: auto; 13 | margin-right: auto; 14 | } 15 | 16 | // Must be div.block so as not to affect syntax highlighting. 17 | ul.block, 18 | div.block { 19 | margin-bottom: @component-padding; 20 | } 21 | div > ul.block:last-child, 22 | div > div.block:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | // Inline Blocks 27 | 28 | .inline-block, 29 | .inline-block-tight { 30 | display: inline-block; 31 | vertical-align: middle; 32 | } 33 | .inline-block { 34 | margin-right: @component-padding; 35 | } 36 | .inline-block-tight { 37 | margin-right: @component-padding/2; 38 | } 39 | div > .inline-block:last-child, 40 | div > .inline-block-tight:last-child { 41 | margin-right: 0; 42 | } 43 | 44 | .inline-block .inline-block { 45 | vertical-align: top; 46 | } 47 | 48 | // Centering 49 | // ------------------------- 50 | 51 | .pull-center { 52 | margin-left: auto; 53 | margin-right: auto; 54 | } 55 | 56 | // Floats 57 | // ------------------------- 58 | 59 | // Use left margin when it's in a float: right element. 60 | // Sets the margin correctly when inline blocks are hidden and shown. 61 | .pull-right { 62 | float: right !important; 63 | 64 | .inline-block { 65 | margin-right: 0; 66 | margin-left: @component-padding; 67 | } 68 | .inline-block-tight { 69 | margin-right: 0; 70 | margin-left: @component-padding/2; 71 | } 72 | 73 | > .inline-block:first-child, 74 | > .inline-block-tight:first-child { 75 | margin-left: 0; 76 | } 77 | } 78 | 79 | .pull-left { 80 | float: left !important; 81 | } 82 | 83 | .clearfix { 84 | .clearfix(); 85 | } 86 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | @import "variables/variables"; 2 | @import "ui-variables"; 3 | @import "mixins/mixins"; 4 | 5 | @import "octicon-mixins"; 6 | 7 | // 8 | // List options 9 | // -------------------------------------------------- 10 | 11 | // Unstyled keeps list items block level, just removes default browser padding and list-style 12 | .list-unstyled { 13 | padding-left: 0; 14 | list-style: none; 15 | } 16 | 17 | // Inline turns list items into inline-block 18 | .list-inline { 19 | .list-unstyled(); 20 | margin-left: -5px; 21 | 22 | > li { 23 | display: inline-block; 24 | padding-left: 5px; 25 | padding-right: 5px; 26 | } 27 | } 28 | 29 | 30 | // 31 | // List groups 32 | // -------------------------------------------------- 33 | 34 | // Mixins 35 | 36 | .list-group-item-variant(@state; @background; @color) { 37 | .list-group-item-@{state} { 38 | color: @color; 39 | background-color: @background; 40 | 41 | a&, 42 | button& { 43 | color: @color; 44 | 45 | .list-group-item-heading { 46 | color: inherit; 47 | } 48 | 49 | &:hover, 50 | &:focus { 51 | color: @color; 52 | background-color: darken(@background, 5%); 53 | } 54 | &.active, 55 | &.active:hover, 56 | &.active:focus { 57 | color: #fff; 58 | background-color: @color; 59 | border-color: @color; 60 | } 61 | } 62 | } 63 | } 64 | 65 | 66 | 67 | // Individual list items 68 | // 69 | // Use on `li`s or `div`s within the `.list-group` parent. 70 | 71 | .list-group-item { 72 | position: relative; 73 | display: block; 74 | padding: 10px 15px; 75 | // Place the border on the list items and negative margin up for better styling 76 | margin-bottom: -1px; 77 | background-color: @list-group-bg; 78 | border: 1px solid @list-group-border; 79 | 80 | // Round the first and last items 81 | &:first-child { 82 | .border-top-radius(@list-group-border-radius); 83 | } 84 | &:last-child { 85 | margin-bottom: 0; 86 | .border-bottom-radius(@list-group-border-radius); 87 | } 88 | } 89 | 90 | 91 | // Interactive list items 92 | // 93 | // Use anchor or button elements instead of `li`s or `div`s to create interactive items. 94 | // Includes an extra `.active` modifier class for showing selected items. 95 | 96 | a.list-group-item, 97 | button.list-group-item { 98 | color: @list-group-link-color; 99 | 100 | .list-group-item-heading { 101 | color: @list-group-link-heading-color; 102 | } 103 | 104 | // Hover state 105 | &:hover, 106 | &:focus { 107 | text-decoration: none; 108 | color: @list-group-link-hover-color; 109 | background-color: @list-group-hover-bg; 110 | } 111 | } 112 | 113 | button.list-group-item { 114 | width: 100%; 115 | text-align: left; 116 | } 117 | 118 | .list-group-item { 119 | // Disabled state 120 | &.disabled, 121 | &.disabled:hover, 122 | &.disabled:focus { 123 | background-color: @list-group-disabled-bg; 124 | color: @list-group-disabled-color; 125 | cursor: @cursor-disabled; 126 | 127 | // Force color to inherit for custom content 128 | .list-group-item-heading { 129 | color: inherit; 130 | } 131 | .list-group-item-text { 132 | color: @list-group-disabled-text-color; 133 | } 134 | } 135 | 136 | // Active class on item itself, not parent 137 | &.active, 138 | &.active:hover, 139 | &.active:focus { 140 | z-index: 2; // Place active items above their siblings for proper border styling 141 | color: @list-group-active-color; 142 | background-color: @list-group-active-bg; 143 | border-color: @list-group-active-border; 144 | 145 | // Force color to inherit for custom content 146 | .list-group-item-heading, 147 | .list-group-item-heading > small, 148 | .list-group-item-heading > .small { 149 | color: inherit; 150 | } 151 | .list-group-item-text { 152 | color: @list-group-active-text-color; 153 | } 154 | } 155 | } 156 | 157 | 158 | // Contextual variants 159 | // 160 | // Add modifier classes to change text and background color on individual items. 161 | // Organizationally, this must come after the `:hover` states. 162 | 163 | .list-group-item-variant(success; @state-success-bg; @state-success-text); 164 | .list-group-item-variant(info; @state-info-bg; @state-info-text); 165 | .list-group-item-variant(warning; @state-warning-bg; @state-warning-text); 166 | .list-group-item-variant(danger; @state-danger-bg; @state-danger-text); 167 | 168 | 169 | // Custom content options 170 | // 171 | // Extra classes for creating well-formatted content within `.list-group-item`s. 172 | 173 | .list-group-item-heading { 174 | margin-top: 0; 175 | margin-bottom: 5px; 176 | } 177 | .list-group-item-text { 178 | margin-bottom: 0; 179 | line-height: 1.3; 180 | } 181 | 182 | 183 | 184 | // This is a bootstrap override 185 | // --------------------------------------------- 186 | 187 | .list-group, 188 | .list-group .list-group-item { 189 | background-color: transparent; 190 | border: none; 191 | padding: 0; 192 | margin: 0; 193 | position: static; 194 | } 195 | 196 | .list-group, 197 | .list-tree { 198 | margin: 0; 199 | padding: 0; 200 | list-style: none; 201 | cursor: default; 202 | 203 | li:not(.list-nested-item), 204 | li.list-nested-item > .list-item { 205 | line-height: @component-line-height; 206 | text-wrap: none; 207 | white-space: nowrap; 208 | } 209 | 210 | // The background highlight uses ::before rather than the item background so 211 | // it can span the entire width of the parent container rather than the size 212 | // of the list item. 213 | .selected::before { 214 | content: ''; 215 | background-color: @background-color-selected; 216 | position: absolute; 217 | left: 0; 218 | right: 0; 219 | height: @component-line-height; 220 | } 221 | 222 | // Make sure the background highlight is below the content. 223 | .selected > * { 224 | position: relative; 225 | } 226 | 227 | .icon::before { 228 | margin-right: @component-icon-padding; 229 | position: relative; 230 | top: 1px; 231 | } 232 | .no-icon { 233 | padding-left: @component-icon-padding + @component-icon-size; 234 | } 235 | } 236 | 237 | 238 | 239 | // 240 | // List Tree 241 | // -------------------------------------------------- 242 | 243 | // Handle indentation of the tree. Assume disclosure arrows. 244 | 245 | .list-tree { 246 | .list-nested-item > .list-tree > li, 247 | .list-nested-item > .list-group > li { 248 | padding-left: @component-icon-size + @component-icon-padding; 249 | } 250 | 251 | &.has-collapsable-children { 252 | @disclosure-arrow-padding: @disclosure-arrow-size + @component-icon-padding; 253 | li.list-item { 254 | margin-left: @disclosure-arrow-padding; 255 | } 256 | 257 | .list-nested-item.collapsed > .list-group, 258 | .list-nested-item.collapsed > .list-tree { 259 | display: none; 260 | } 261 | 262 | // Nested items always get disclosure arrows 263 | .list-nested-item > .list-item { 264 | .octicon(chevron-down, @disclosure-arrow-size); 265 | &::before{ 266 | position: relative; 267 | top: -1px; 268 | margin-right: @component-icon-padding; 269 | } 270 | } 271 | .list-nested-item.collapsed > .list-item { 272 | .octicon(chevron-right, @disclosure-arrow-size); 273 | &::before{ 274 | left: 1px; 275 | } 276 | } 277 | 278 | .list-nested-item > .list-tree > li, 279 | .list-nested-item > .list-group > li { 280 | padding-left: @disclosure-arrow-padding; 281 | } 282 | 283 | // You want a subtree to be flat -- no collapsable children 284 | .has-flat-children, 285 | &.has-flat-children { 286 | li.list-item { 287 | margin-left: 0; 288 | } 289 | } 290 | } 291 | } 292 | -------------------------------------------------------------------------------- /styles/loading.less: -------------------------------------------------------------------------------- 1 | // 2 | // Loading 3 | // -------------------------------------------------- 4 | 5 | .loading-spinner(@size) { 6 | display: block; 7 | width: @size; 8 | height: @size; 9 | background-image: url(images/octocat-spinner-128.gif); 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | 13 | &.inline-block { 14 | display: inline-block; 15 | } 16 | } 17 | 18 | .loading-spinner-tiny { .loading-spinner(16px); } 19 | .loading-spinner-small { .loading-spinner(32px); } 20 | .loading-spinner-medium { .loading-spinner(48px); } 21 | .loading-spinner-large { .loading-spinner(64px); } 22 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .info-messages, 4 | .error-messages { 5 | margin: 0; 6 | padding: 0; 7 | list-style: none; 8 | } 9 | 10 | .error-messages { 11 | color: @text-color-error; 12 | } 13 | 14 | ul.background-message { 15 | font-size: @font-size * 3; 16 | 17 | margin: 0; 18 | padding: 0; 19 | 20 | li { 21 | margin: 0; 22 | padding: 0; 23 | list-style: none; 24 | } 25 | 26 | &.centered { 27 | display: flex; 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | right: 0; 32 | bottom: 0; 33 | 34 | align-items: center; 35 | text-align: center; 36 | 37 | li { 38 | width: 100%; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /styles/mixins/mixins.less: -------------------------------------------------------------------------------- 1 | 2 | // Core mixins 3 | // ---------------------------------------- 4 | 5 | // Focus 6 | // 7 | .tab-focus() { 8 | outline: 2px auto @text-color-info; 9 | outline-offset: -2px; 10 | } 11 | 12 | 13 | // Border-radius 14 | // 15 | .border-top-radius(@radius) { 16 | border-top-right-radius: @radius; 17 | border-top-left-radius: @radius; 18 | } 19 | .border-right-radius(@radius) { 20 | border-bottom-right-radius: @radius; 21 | border-top-right-radius: @radius; 22 | } 23 | .border-bottom-radius(@radius) { 24 | border-bottom-right-radius: @radius; 25 | border-bottom-left-radius: @radius; 26 | } 27 | .border-left-radius(@radius) { 28 | border-bottom-left-radius: @radius; 29 | border-top-left-radius: @radius; 30 | } 31 | 32 | 33 | // Clearfix 34 | // 35 | // For modern browsers 36 | // 1. The space content is one way to avoid an Opera bug when the 37 | // contenteditable attribute is included anywhere else in the document. 38 | // Otherwise it causes space to appear at the top and bottom of elements 39 | // that are clearfixed. 40 | // 2. The use of `table` rather than `block` is only necessary if using 41 | // `:before` to contain the top-margins of child elements. 42 | // 43 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 44 | 45 | .clearfix() { 46 | &:before, 47 | &:after { 48 | content: " "; // 1 49 | display: table; // 2 50 | } 51 | &:after { 52 | clear: both; 53 | } 54 | } 55 | 56 | 57 | // CSS image replacement 58 | // 59 | // Heads up! v3 launched with only `.hide-text()`, but per our pattern for 60 | // mixins being reused as classes with the same name, this doesn't hold up. As 61 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. 62 | // 63 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 64 | 65 | // Deprecated as of v3.0.1 (has been removed in v4) 66 | .hide-text() { 67 | font: ~"0/0" a; 68 | color: transparent; 69 | text-shadow: none; 70 | background-color: transparent; 71 | border: 0; 72 | } 73 | 74 | // New mixin to use as of v3.0.1 75 | .text-hide() { 76 | .hide-text(); 77 | } 78 | 79 | 80 | // Text overflow 81 | // Requires inline-block or block for proper styling 82 | 83 | .text-overflow() { 84 | overflow: hidden; 85 | text-overflow: ellipsis; 86 | white-space: nowrap; 87 | } 88 | -------------------------------------------------------------------------------- /styles/modals.less: -------------------------------------------------------------------------------- 1 | 2 | // 3 | // Modals 4 | // -------------------------------------------------- 5 | 6 | .overlay, // deprecated .overlay 7 | atom-panel.modal { 8 | position: absolute; 9 | display: block; 10 | top: 0; 11 | left: 50%; 12 | width: 500px; 13 | margin-left: -250px; 14 | z-index: 9999; 15 | box-sizing: border-box; 16 | border-top: none; 17 | border-top-left-radius: 0; 18 | border-top-right-radius: 0; 19 | 20 | color: @text-color; 21 | background-color: @overlay-background-color; 22 | 23 | padding: 10px; 24 | 25 | // shrink modals when window gets narrow 26 | @media (max-width: 500px) { 27 | & { 28 | width: 100%; 29 | left: 0; 30 | margin-left: 0; 31 | } 32 | } 33 | 34 | h1 { 35 | margin-top: 0; 36 | color: @text-color-highlight; 37 | font-size: 1.6em; 38 | font-weight: bold; 39 | } 40 | 41 | h2 { 42 | font-size: 1.3em; 43 | } 44 | 45 | atom-text-editor[mini] { 46 | margin-bottom: 10px; 47 | } 48 | 49 | .message { 50 | padding-top: 5px; 51 | font-size: 11px; 52 | } 53 | 54 | &.mini { 55 | width: 200px; 56 | margin-left: -100px; 57 | font-size: 12px; 58 | } 59 | } 60 | 61 | 62 | // Deprecated: overlay, from-top, from-bottom, floating 63 | // -------------------------------------------------- 64 | // TODO: Remove these! 65 | 66 | .overlay.from-top { 67 | top: 0; 68 | border-top: none; 69 | border-top-left-radius: 0; 70 | border-top-right-radius: 0; 71 | } 72 | 73 | .overlay.from-bottom { 74 | bottom: 0; 75 | border-bottom: none; 76 | border-bottom-left-radius: 0; 77 | border-bottom-right-radius: 0; 78 | } 79 | 80 | .overlay.floating { 81 | left: auto; 82 | } 83 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | // 2 | // Panels 3 | // -------------------------------------------------- 4 | 5 | .tool-panel, // deprecated: .tool-panel 6 | .panel, // deprecated: .panel 7 | atom-panel { 8 | background-color: @tool-panel-background-color; 9 | } 10 | 11 | .inset-panel { 12 | border-radius: @component-border-radius; 13 | background-color: @inset-panel-background-color; 14 | } 15 | 16 | .panel-heading { 17 | margin: 0; 18 | padding: @component-padding; 19 | border-radius: 0; 20 | font-size: @font-size; 21 | line-height: 1; 22 | background-color: @panel-heading-background-color; 23 | 24 | .inset-panel & { 25 | border-radius: @component-border-radius @component-border-radius 0 0; 26 | } 27 | 28 | .btn { 29 | @btn-height: @component-line-height - 5px; 30 | height: @btn-height; 31 | line-height: @btn-height; 32 | font-size: @font-size - 2px; 33 | position: relative; 34 | top: -5px; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /styles/private/README.md: -------------------------------------------------------------------------------- 1 | # Private components 2 | 3 | > Private! Don't use these in packages. 4 | 5 | If you need something, feel free to open an issue and it might can be made public. 6 | -------------------------------------------------------------------------------- /styles/private/alerts.less: -------------------------------------------------------------------------------- 1 | @import "../variables/variables"; 2 | @import "ui-variables"; 3 | 4 | // 5 | // Alerts 6 | // -------------------------------------------------- 7 | 8 | //## Define alert colors, border radius, and padding. 9 | 10 | @alert-padding: 15px; 11 | @alert-border-radius: @border-radius-base; 12 | @alert-link-font-weight: bold; 13 | 14 | @alert-success-bg: @state-success-bg; 15 | @alert-success-text: @state-success-text; 16 | @alert-success-border: @state-success-border; 17 | 18 | @alert-info-bg: @state-info-bg; 19 | @alert-info-text: @state-info-text; 20 | @alert-info-border: @state-info-border; 21 | 22 | @alert-warning-bg: @state-warning-bg; 23 | @alert-warning-text: @state-warning-text; 24 | @alert-warning-border: @state-warning-border; 25 | 26 | @alert-danger-bg: @state-danger-bg; 27 | @alert-danger-text: @state-danger-text; 28 | @alert-danger-border: @state-danger-border; 29 | 30 | 31 | //## variant mixin 32 | 33 | .alert-variant(@background; @border; @text-color) { 34 | background-color: @background; 35 | border-color: @border; 36 | color: @text-color; 37 | 38 | hr { 39 | border-top-color: darken(@border, 5%); 40 | } 41 | .alert-link { 42 | color: darken(@text-color, 10%); 43 | } 44 | } 45 | 46 | 47 | // Base styles 48 | // ------------------------- 49 | 50 | .alert { 51 | padding: @alert-padding; 52 | margin-bottom: @line-height-computed; 53 | border: 1px solid transparent; 54 | border-radius: @alert-border-radius; 55 | 56 | // Headings for larger alerts 57 | h4 { 58 | margin-top: 0; 59 | // Specified for the h4 to prevent conflicts of changing @headings-color 60 | color: inherit; 61 | } 62 | 63 | // Provide class for links that match alerts 64 | .alert-link { 65 | font-weight: @alert-link-font-weight; 66 | } 67 | 68 | // Improve alignment and spacing of inner content 69 | > p, 70 | > ul { 71 | margin-bottom: 0; 72 | } 73 | 74 | > p + p { 75 | margin-top: 5px; 76 | } 77 | } 78 | 79 | // Dismissible alerts 80 | // 81 | // Expand the right padding and account for the close button's positioning. 82 | 83 | .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. 84 | .alert-dismissible { 85 | padding-right: (@alert-padding + 20); 86 | 87 | // Adjust close link position 88 | .close { 89 | position: relative; 90 | top: -2px; 91 | right: -21px; 92 | color: inherit; 93 | } 94 | } 95 | 96 | // Alternate styles 97 | // 98 | // Generate contextual modifier classes for colorizing the alert. 99 | 100 | .alert-success { 101 | .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); 102 | } 103 | 104 | .alert-info { 105 | .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); 106 | } 107 | 108 | .alert-warning { 109 | .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); 110 | } 111 | 112 | .alert-danger { 113 | .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); 114 | } 115 | -------------------------------------------------------------------------------- /styles/private/close.less: -------------------------------------------------------------------------------- 1 | // 2 | // Close icon (deprecated) 3 | // -------------------------------------------------- 4 | 5 | .close { 6 | @font-size-base: 14px; 7 | @close-font-weight: bold; 8 | @close-color: #000; 9 | @close-text-shadow: 0 1px 0 #fff; 10 | 11 | float: right; 12 | font-size: (@font-size-base * 1.5); 13 | font-weight: @close-font-weight; 14 | line-height: 1; 15 | color: @close-color; 16 | text-shadow: @close-text-shadow; 17 | opacity: .2; 18 | 19 | &:hover, 20 | &:focus { 21 | color: @close-color; 22 | text-decoration: none; 23 | cursor: pointer; 24 | opacity: .5; 25 | } 26 | 27 | // Additional properties for button version 28 | // iOS requires the button element instead of an anchor tag. 29 | // If you want the anchor version, it requires `href="#"`. 30 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 31 | button& { 32 | padding: 0; 33 | cursor: pointer; 34 | background: transparent; 35 | border: 0; 36 | -webkit-appearance: none; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /styles/private/code.less: -------------------------------------------------------------------------------- 1 | @import "../variables/variables"; 2 | @import "ui-variables"; 3 | 4 | // 5 | // Code (inline and block) 6 | // -------------------------------------------------- 7 | 8 | @code-color: @text-color-highlight; 9 | @code-bg: @background-color-highlight; 10 | 11 | @pre-color: @code-color; 12 | @pre-bg: @code-bg; 13 | @pre-border-color: @base-border-color; 14 | @pre-scrollable-max-height: 340px; 15 | 16 | // Inline and block code styles 17 | code, 18 | kbd, 19 | pre, 20 | samp { 21 | font-family: @font-family-monospace; 22 | } 23 | 24 | // Inline code 25 | code { 26 | padding: 2px 4px; 27 | font-size: 90%; 28 | color: @code-color; 29 | background-color: @code-bg; 30 | border-radius: @border-radius-base; 31 | } 32 | 33 | // User input typically entered via keyboard 34 | kbd { 35 | padding: 2px 4px; 36 | font-size: 90%; 37 | color: @code-color; 38 | background-color: @code-bg; 39 | border-radius: @border-radius-small; 40 | 41 | kbd { 42 | padding: 0; 43 | font-size: 100%; 44 | font-weight: bold; 45 | } 46 | } 47 | 48 | // Blocks of code 49 | pre { 50 | display: block; 51 | padding: ((@line-height-computed - 1) / 2); 52 | margin: 0 0 (@line-height-computed / 2); 53 | font-size: (@font-size-base - 1); // 14px to 13px 54 | line-height: @line-height-base; 55 | word-break: break-all; 56 | word-wrap: break-word; 57 | color: @pre-color; 58 | background-color: @pre-bg; 59 | border: 1px solid @pre-border-color; 60 | border-radius: @border-radius-base; 61 | 62 | // Account for some code outputs that place code tags in pre tags 63 | code { 64 | padding: 0; 65 | font-size: inherit; 66 | color: inherit; 67 | white-space: pre-wrap; 68 | background-color: transparent; 69 | border-radius: 0; 70 | } 71 | } 72 | 73 | // Enable scrollable blocks of code 74 | .pre-scrollable { 75 | max-height: @pre-scrollable-max-height; 76 | overflow-y: scroll; 77 | } 78 | -------------------------------------------------------------------------------- /styles/private/forms.less: -------------------------------------------------------------------------------- 1 | @import "../variables/variables"; 2 | @import "ui-variables"; 3 | @import "../mixins/mixins"; 4 | 5 | // 6 | // Forms 7 | // -------------------------------------------------- 8 | 9 | 10 | @input-bg: #fff; //** `` background color 11 | @input-bg-disabled: @gray-lighter; //** `` background color 12 | @input-color: @gray; //** Text color for ``s 13 | @input-border: #ccc; //** `` border color 14 | 15 | // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4 16 | //** Default `.form-control` border radius 17 | // This has no effect on ``s in CSS. 18 | @input-border-radius: @border-radius-base; //** Large `.form-control` border radius 19 | @input-border-radius-large: @border-radius-large; //** Small `.form-control` border radius 20 | @input-border-radius-small: @border-radius-small; 21 | @input-border-focus: #66afe9; //** Border color for inputs on focus 22 | @input-color-placeholder: #999; //** Placeholder text color 23 | @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); //** Default `.form-control` height 24 | @input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); //** Large `.form-control` height 25 | @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); //** Small `.form-control` height 26 | 27 | @form-group-margin-bottom: 15px; //** `.form-group` margin 28 | 29 | @legend-color: @gray-dark; 30 | @legend-border-color: #e5e5e5; 31 | 32 | @input-group-addon-bg: @gray-lighter; //** Background color for textual input addons 33 | @input-group-addon-border-color: @input-border; //** Border color for textual input addons 34 | 35 | @cursor-disabled: not-allowed; //** Disabled cursor for form controls and buttons. 36 | 37 | @grid-gutter-width: 30px; //** Padding between columns. Gets divided in half for the left and right. 38 | 39 | 40 | // Form validation states 41 | // 42 | // Used in forms.less to generate the form validation CSS for warnings, errors, 43 | // and successes. 44 | 45 | .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { 46 | // Color the label and help text 47 | .help-block, 48 | .control-label, 49 | .radio, 50 | .checkbox, 51 | .radio-inline, 52 | .checkbox-inline, 53 | &.radio label, 54 | &.checkbox label, 55 | &.radio-inline label, 56 | &.checkbox-inline label { 57 | color: @text-color; 58 | } 59 | // Set the border and box shadow on specific inputs to match 60 | .form-control { 61 | border-color: @border-color; 62 | box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work 63 | &:focus { 64 | border-color: darken(@border-color, 10%); 65 | box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); 66 | } 67 | } 68 | // Set validation states also for addons 69 | .input-group-addon { 70 | color: @text-color; 71 | border-color: @border-color; 72 | background-color: @background-color; 73 | } 74 | // Optional feedback icon 75 | .form-control-feedback { 76 | color: @text-color; 77 | } 78 | } 79 | 80 | 81 | // Form control focus state 82 | // 83 | // Generate a customized focus state and for any input with the specified color, 84 | // which defaults to the `@input-border-focus` variable. 85 | // 86 | // We highly encourage you to not customize the default value, but instead use 87 | // this to tweak colors on an as-needed basis. This aesthetic change is based on 88 | // WebKit's default styles, but applicable to a wider range of browsers. Its 89 | // usability and accessibility should be taken into account with any change. 90 | // 91 | // Example usage: change the default blue border and shadow to white for better 92 | // contrast against a dark gray background. 93 | .form-control-focus(@color: @input-border-focus) { 94 | @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); 95 | &:focus { 96 | border-color: @color; 97 | outline: 0; 98 | box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba; 99 | } 100 | } 101 | 102 | // Form control sizing 103 | // 104 | // Relative text size, padding, and border-radii changes for form controls. For 105 | // horizontal sizing, wrap controls in the predefined grid classes. `s in some browsers, due to the limited stylability of `s in IE10+. 271 | &::-ms-expand { 272 | border: 0; 273 | background-color: transparent; 274 | } 275 | 276 | // Disabled and read-only inputs 277 | // 278 | // HTML5 says that controls under a fieldset > legend:first-child won't be 279 | // disabled if the fieldset is disabled. Due to implementation difficulty, we 280 | // don't honor that edge case; we style them as disabled anyway. 281 | &[disabled], 282 | &[readonly], 283 | fieldset[disabled] & { 284 | background-color: @input-bg-disabled; 285 | opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 286 | } 287 | 288 | &[disabled], 289 | fieldset[disabled] & { 290 | cursor: @cursor-disabled; 291 | } 292 | 293 | // Reset height for `textarea`s 294 | textarea& { 295 | height: auto; 296 | } 297 | } 298 | 299 | 300 | // Form groups 301 | // 302 | // Designed to help with the organization and spacing of vertical forms. For 303 | // horizontal forms, use the predefined grid classes. 304 | 305 | .form-group { 306 | margin-bottom: @form-group-margin-bottom; 307 | } 308 | 309 | 310 | // Checkboxes and radios 311 | // 312 | // Indent the labels to position radios/checkboxes as hanging controls. 313 | 314 | .radio, 315 | .checkbox { 316 | position: relative; 317 | display: block; 318 | margin-top: 10px; 319 | margin-bottom: 10px; 320 | 321 | label { 322 | min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text 323 | padding-left: 20px; 324 | margin-bottom: 0; 325 | font-weight: normal; 326 | cursor: pointer; 327 | } 328 | } 329 | .radio input[type="radio"], 330 | .radio-inline input[type="radio"], 331 | .checkbox input[type="checkbox"], 332 | .checkbox-inline input[type="checkbox"] { 333 | position: absolute; 334 | margin-left: -20px; 335 | margin-top: 4px \9; 336 | } 337 | 338 | .radio + .radio, 339 | .checkbox + .checkbox { 340 | margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing 341 | } 342 | 343 | // Radios and checkboxes on same line 344 | .radio-inline, 345 | .checkbox-inline { 346 | position: relative; 347 | display: inline-block; 348 | padding-left: 20px; 349 | margin-bottom: 0; 350 | vertical-align: middle; 351 | font-weight: normal; 352 | cursor: pointer; 353 | } 354 | .radio-inline + .radio-inline, 355 | .checkbox-inline + .checkbox-inline { 356 | margin-top: 0; 357 | margin-left: 10px; // space out consecutive inline controls 358 | } 359 | 360 | // Apply same disabled cursor tweak as for inputs 361 | // Some special care is needed because