Move Bootstrap to a separate package

This commit is contained in:
simurai 2016-05-28 09:14:33 +09:00
parent 57c17fb2a4
commit 95d9b9946a
19 changed files with 334 additions and 643 deletions

View File

@ -6,26 +6,19 @@
@import "./variables/ui-variables";
@import "ui-variables";
// Octicons
@import "octicon-utf-codes";
@import "octicon-mixins";
@import "workspace-view";
@import "bootstrap-overrides";
@import "badges";
@import "buttons";
@import "icons";
@import "links";
@import "panes";
@import "panels";
@import "sections";
@import "lists";
@import "popover-list";
@import "messages";
@import "markdown";
@import "text-editor-light";
@import "select-list";
@import "syntax";
@import "text";
@import "utilities";
@import "octicons";
// Normalize + scaffolding
@import "normalize";
@import "scaffolding";
// Core components
@import "cursors";
@import "panels";
@import "panes";
@import "syntax";
@import "text-editor-light";
@import "workspace-view";

View File

@ -1,65 +0,0 @@
@import "ui-variables";
.badge {
display: inline-block;
line-height: 1;
vertical-align: middle;
font-weight: normal;
text-align: center;
white-space: nowrap;
border-radius: 1em;
&:empty {
display: none; // Hide when un-used
}
// Color ----------------------
.badge-color( @fg: @text-color-selected;
@bg: @background-color-selected; ) {
color: @fg;
background-color: @bg;
}
.badge-color();
&.badge-info { .badge-color(white, @background-color-info); }
&.badge-success { .badge-color(white, @background-color-success); }
&.badge-warning { .badge-color(white, @background-color-warning); }
&.badge-error { .badge-color(white, @background-color-error); }
// Size ----------------------
.badge-size( @size: @font-size; ) {
@padding: round(@size/4);
font-size: @size;
min-width: @size + @padding*2;
padding: @padding round(@padding*1.5);
}
.badge-size(); // default
// Fixed size
&.badge-large { .badge-size(18px); }
&.badge-medium { .badge-size(14px); }
&.badge-small { .badge-size(10px); }
// Flexible size
// The size changes depending on the parent element
// Best used for larger sizes, since em's can cause rounding errors
&.badge-flexible {
@size: .8em;
@padding: @size/2;
font-size: @size;
min-width: @size + @padding*2;
padding: @padding @padding*1.5;
}
// Icon ----------------------
&.icon {
font-size: round(@component-icon-size*0.8);
padding: @component-icon-padding @component-icon-padding*2;
}
}

View File

@ -1,41 +0,0 @@
@import "ui-variables";
.nav {
> li > a {
border-radius: @component-border-radius;
}
> li > a:hover {
background-color: @background-color-highlight;
}
&.nav-pills > li.active > a {
background-color: @background-color-selected;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit; // inherit from themes
}
body {
font-family: inherit; // inherit from html
font-size: inherit; // inherit from html
}
// Latest Bootstrap specifies the font properties again instead of inheriting
.tooltip {
font-family: @font-family;
font-size: @font-size;
}
// disable some <kbd> styling, will be styled in themes
kbd {
color: inherit;
background-color: none;
box-shadow: none;
}

38
static/bootstrap.less vendored
View File

@ -1,31 +1,17 @@
// Core variables and mixins
@import "../node_modules/bootstrap/less/variables.less";
@import "../node_modules/bootstrap/less/mixins.less";
/* Most of the Bootstrap styles are now in a seperate package */
/* TODO: Remove this file if nothing burned down */
// Reset
@import "../node_modules/bootstrap/less/normalize.less";
// Below the removed styles
// Core variables and mixins
// @import "../node_modules/bootstrap/less/variables.less";
// @import "../node_modules/bootstrap/less/mixins.less";
// Core CSS
@import "../node_modules/bootstrap/less/scaffolding.less";
@import "../node_modules/bootstrap/less/type.less";
@import "../node_modules/bootstrap/less/code.less";
@import "../node_modules/bootstrap/less/grid.less";
@import "../node_modules/bootstrap/less/tables.less";
@import "../node_modules/bootstrap/less/forms.less";
@import "../node_modules/bootstrap/less/buttons.less";
// @import "../node_modules/bootstrap/less/grid.less";
// Components
@import "../node_modules/bootstrap/less/button-groups.less";
@import "../node_modules/bootstrap/less/input-groups.less";
@import "../node_modules/bootstrap/less/navs.less";
@import "../node_modules/bootstrap/less/labels.less";
@import "../node_modules/bootstrap/less/alerts.less";
@import "../node_modules/bootstrap/less/list-group.less";
@import "../node_modules/bootstrap/less/thumbnails.less";
@import "../node_modules/bootstrap/less/close.less";
// Components w/ JavaScript
@import "../node_modules/bootstrap/less/tooltip.less";
// Utility classes
@import "../node_modules/bootstrap/less/utilities.less";
// @import "../node_modules/bootstrap/less/input-groups.less";
// @import "../node_modules/bootstrap/less/labels.less";
// @import "../node_modules/bootstrap/less/thumbnails.less";
// @import "../node_modules/bootstrap/less/close.less";

View File

@ -1,99 +0,0 @@
@import "ui-variables";
.btn {
color: @text-color;
border-radius: @component-border-radius;
border: none;
text-shadow: none;
height: @component-line-height + 2px;
line-height: @component-line-height;
padding: 0 @component-padding;
font-size: @font-size;
z-index: 0;
background-color: @button-background-color;
&:hover {
background-color: @button-background-color-hover;
}
&.selected,
&.selected:hover {
// we want the selected button to behave like the :hover button; it's on top of the other buttons.
z-index: 1;
background-color: @button-background-color-selected;
}
}
.btn.btn-xs,
.btn-group-xs > .btn {
padding: @component-padding/4 @component-padding/2;
font-size: @font-size - 2px;
height: auto;
line-height: 1.3em;
&.icon:before {
font-size: @font-size - 2px;
}
}
.btn.btn-sm,
.btn-group-sm > .btn {
padding: @component-padding/4 @component-padding/2;
height: auto;
line-height: 1.3em;
&.icon:before {
font-size: @font-size + 1px;
}
}
.btn.btn-lg,
.btn-group-lg > .btn {
font-size: @font-size + 2px;
padding: @component-padding - 2px @component-padding + 2px;
height: auto;
line-height: 1.3em;
&.icon:before {
font-size: @font-size + 6px;
}
}
.btn-group > .btn {
border-left: 1px solid @button-border-color;
border-right: 1px solid @button-border-color;
}
.btn-group > .btn:first-child {
border-left: none;
border-top-left-radius: @component-border-radius;
border-bottom-left-radius: @component-border-radius;
}
.btn-group > .btn:last-child,
.btn-group > .btn.selected:last-child,
.btn-group > .dropdown-toggle {
border-right: none;
border-top-right-radius: @component-border-radius;
border-bottom-right-radius: @component-border-radius;
}
// Icon buttons
.btn.icon {
&:before {
width: initial;
height: initial;
margin-right: .3125em;
}
&:empty:before {
margin-right: 0;
}
}
.btn-toolbar {
> .btn-group + .btn-group, > .btn-group + .btn, > .btn + .btn {
float: none;
display: inline-block;
margin-left: 0;
}
> * {
margin-right: @component-padding / 2;
}
> *:last-child {
margin-right: 0;
}
}

View File

@ -1,14 +0,0 @@
@import "ui-variables";
.icon::before {
margin-right: @component-icon-padding;
}
a.icon,
button.icon {
text-decoration: none;
color: @text-color;
&:hover{
color: @text-color-highlight;
}
}

View File

@ -1,10 +0,0 @@
@import "ui-variables";
a {
cursor: pointer;
color: @text-color-highlight;
&:hover {
color: @text-color-highlight;
text-decoration: underline;
}
}

View File

@ -1,102 +0,0 @@
@import "ui-variables";
@import "octicon-mixins";
// This is a bootstrap override
.list-group,
.list-group .list-group-item {
background-color: transparent;
border: none;
padding: 0;
margin: 0;
position: static;
}
.list-group,
.list-tree {
margin: 0;
padding: 0;
list-style: none;
cursor: default;
li:not(.list-nested-item),
li.list-nested-item > .list-item {
line-height: @component-line-height;
text-wrap: none;
white-space: nowrap;
}
// The background highlight uses ::before rather than the item background so
// it can span the entire width of the parent container rather than the size
// of the list item.
.selected::before {
content: '';
background-color: @background-color-selected;
position: absolute;
left: 0;
right: 0;
height: @component-line-height;
}
// Make sure the background highlight is below the content.
.selected > * {
position: relative;
}
.icon::before {
margin-right: @component-icon-padding;
position: relative;
top: 1px;
}
.no-icon {
padding-left: @component-icon-padding + @component-icon-size;
}
}
// Handle indentation of the tree. Assume disclosure arrows.
.list-tree {
.list-nested-item > .list-tree > li,
.list-nested-item > .list-group > li {
padding-left: @component-icon-size + @component-icon-padding;
}
&.has-collapsable-children {
@disclosure-arrow-padding: @disclosure-arrow-size + @component-icon-padding;
li.list-item {
margin-left: @disclosure-arrow-padding;
}
.list-nested-item.collapsed > .list-group,
.list-nested-item.collapsed > .list-tree {
display: none;
}
// Nested items always get disclosure arrows
.list-nested-item > .list-item {
.octicon(chevron-down, @disclosure-arrow-size);
&::before{
position: relative;
top: -1px;
margin-right: @component-icon-padding;
}
}
.list-nested-item.collapsed > .list-item {
.octicon(chevron-right, @disclosure-arrow-size);
&::before{
left: 1px;
}
}
.list-nested-item > .list-tree > li,
.list-nested-item > .list-group > li {
padding-left: @disclosure-arrow-padding;
}
// You want a subtree to be flat -- no collapsable children
.has-flat-children,
&.has-flat-children {
li.list-item {
margin-left: 0;
}
}
}
}

View File

@ -1,17 +0,0 @@
.source.gfm {
.markup.heading {
font-weight: bold;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.comment.quote {
font-style: italic;
}
}

View File

@ -1,41 +0,0 @@
@import "ui-variables";
.info-messages,
.error-messages {
margin: 0;
padding: 0;
list-style: none;
}
.error-messages {
color: @text-color-error;
}
ul.background-message {
font-size: @font-size * 3;
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
}
&.centered {
display: -webkit-flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-align-items: center;
text-align: center;
li {
width: 100%;
}
}
}

274
static/normalize.less vendored Normal file
View File

@ -0,0 +1,274 @@
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
// Modified to Chrome only.
//
// Remove default margin.
//
body {
margin: 0;
}
// HTML5 display definitions
// ==========================================================================
//
// 1. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
//
audio,
canvas,
progress,
video {
vertical-align: baseline; // 1
}
//
// Prevent modern browsers from displaying `audio` without controls.
//
audio:not([controls]) {
display: none;
}
// Links
// ==========================================================================
//
// Improve readability of focused elements when they are also in an
// active/hover state.
//
a:active,
a:hover {
outline: 0;
}
// Text-level semantics
// ==========================================================================
//
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari and Chrome.
//
dfn {
font-style: italic;
}
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Grouping content
// ==========================================================================
//
// Address differences between Firefox and other browsers.
//
hr {
box-sizing: content-box;
height: 0;
}
//
// Contain overflow in all browsers.
//
pre {
overflow: auto;
}
//
// Address odd `em`-unit font size rendering in all browsers.
//
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
// Forms
// ==========================================================================
//
// Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `select`, unless a `border` property is set.
//
//
// 1. Correct color not being inherited.
// Known issue: affects color of disabled elements.
// 2. Correct font properties not being inherited.
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
//
button,
input,
optgroup,
select,
textarea {
color: inherit; // 1
font: inherit; // 2
margin: 0; // 3
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
//
button,
select {
text-transform: none;
}
//
// 1. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
input[type="reset"],
input[type="submit"] {
cursor: pointer; // 1
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
// `font-size` values of the `input`, it causes the cursor style of the
// decrement button to change from `default` to `text`.
//
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
//
input[type="search"] {
-webkit-appearance: textfield; // 1
box-sizing: content-box; //2
}
//
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
// Safari (but not Chrome) clips the cancel button when the search input has
// padding (and `textfield` appearance).
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Define consistent border, margin, and padding.
//
fieldset {
border: 1px solid;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
padding: 0; // 1
}
//
// Don't inherit the `font-weight` (applied by a rule above).
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
//
optgroup {
font-weight: bold;
}
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

View File

@ -1,12 +0,0 @@
.select-list.popover-list {
width: 200px;
min-width: 200px;
margin-left: 0;
position: relative;
}
.select-list.popover-list ol.list-group {
position: relative;
overflow-y: scroll;
max-height: 200px;
}

34
static/scaffolding.less Normal file
View File

@ -0,0 +1,34 @@
@import "ui-variables";
@import "octicon-mixins";
//
// Octicon font
// --------------------------------------------------
@font-face { .octicon-font(); }
//
// Scaffolding
// --------------------------------------------------
*,
*:before,
*:after {
box-sizing: border-box; // Reset the box-sizing
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
html {
font-family: @font-family;
font-size: @font-size;
line-height: 1.428571429; // 20/14
color: @text-color;
background-color: @app-background-color;
}

View File

@ -1,35 +0,0 @@
@import "ui-variables";
section, .section {
position: relative;
margin-top: 0;
&:last-child { margin-bottom: 0; }
&.bordered {
margin: 0;
padding: @component-padding*2 0;
border-top: 1px solid @background-color-highlight;
border-bottom: 1px solid @tool-panel-border-color;
}
.section-heading:first-child {
margin-top: 0;
font-weight: bold;
color: @text-color-highlight;
}
}
div > section:first-child,
form > section:first-child,
div > .section:first-child,
form > .section:first-child {
border-top: none;
padding-top: 0;
}
div > section:last-child,
form > section:last-child,
div > .section:last-child,
form > .section:last-child {
border-bottom: none;
padding-bottom: 0;
}

View File

@ -1,40 +0,0 @@
@import "ui-variables";
@import "octicon-mixins";
.select-list {
.loading {
.loading-message {
.octicon(hourglass);
&:before {
font-size: 1.1em;
width: 1.1em;
height: 1.1em;
margin-right: 5px;
}
}
.badge {
margin-left: 10px;
}
}
ol.list-group {
position: relative;
overflow-y: auto;
max-height: 312px;
margin: @component-padding 0 0 0;
padding: 0;
li {
display: block;
.primary-line,
.secondary-line {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}

View File

@ -1,39 +0,0 @@
@import "ui-variables";
.text-bits (@type) {
@text-color-name: "text-color-@{type}";
@bg-color-name: "background-color-@{type}";
@text-color: @@text-color-name;
@bg-color: @@bg-color-name;
code {
color: @text-color;
background: fadeout(@bg-color, 80%);
}
a, a code {
text-decoration: underline;
color: darken(@text-color, 10%);
&:hover {
color: darken(@text-color, 15%);
}
}
}
.text-info {
.text-bits(info);
}
.text-success {
.text-bits(success);
}
.text-warning {
.text-bits(warning);
}
.text-error {
.text-bits(error);
}

View File

@ -1,66 +0,0 @@
@import "ui-variables";
:focus {
outline: none;
}
.pull-center {
margin-left: auto;
margin-right: auto;
}
.padded {
padding: @component-padding;
}
// Blocks
// Must be div.block so as not to affect syntax highlighting.
ul.block,
div.block {
margin-bottom: @component-padding;
}
div > ul.block:last-child,
div > div.block:last-child {
margin-bottom: 0;
}
// Inline Blocks
.inline-block,
.inline-block-tight {
display: inline-block;
vertical-align: middle;
}
.inline-block {
margin-right: @component-padding;
}
.inline-block-tight {
margin-right: @component-padding/2;
}
div > .inline-block:last-child,
div > .inline-block-tight:last-child {
margin-right: 0;
}
.inline-block .inline-block {
vertical-align: top;
}
// Use left margin when it's in a float: right element.
// Sets the margin correctly when inline blocks are hidden and shown.
.pull-right {
.inline-block {
margin-right: 0;
margin-left: @component-padding;
}
.inline-block-tight {
margin-right: 0;
margin-left: @component-padding/2;
}
> .inline-block:first-child,
> .inline-block-tight:first-child {
margin-left: 0;
}
}

View File

@ -17,7 +17,7 @@
@background-color-success: #17ca65;
@background-color-warning: #ff4800;
@background-color-error: #c00;
@background-color-highlight: rgba(255, 255, 255, 0.10);
@background-color-highlight: hsla(0,0%,0%,.1);
@background-color-selected: @background-color-highlight;
@app-background-color: #fff;

View File

@ -1,19 +1,4 @@
@import "ui-variables";
@import "octicon-mixins";
@font-face { .octicon-font(); }
html {
font-family: @font-family;
font-size: @font-size;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
atom-workspace {
display: flex;
@ -28,7 +13,7 @@ atom-workspace {
atom-workspace-axis {
position: relative;
}
atom-workspace-axis.horizontal {
display: flex;
flex: 1;