mirror of
https://github.com/Rnhmjoj/solarized-dark-ui
synced 2025-01-10 09:24:21 +01:00
Initial commit
This commit is contained in:
Matt Colyer
commit
baa0ae5f85
6
atom.less
Normal file
6
atom.less
Normal file
@ -0,0 +1,6 @@
|
||||
@import "ui-variables";
|
||||
|
||||
#root-view {
|
||||
font: caption;
|
||||
background-color: @app-background-color;
|
||||
}
|
||||
53
buttons.less
Normal file
53
buttons.less
Normal file
@ -0,0 +1,53 @@
|
||||
@import "ui-variables";
|
||||
@import "ui-mixins";
|
||||
|
||||
.btn-background (@color, @hover-color, @selected-color, @text-color) {
|
||||
color: @text-color;
|
||||
background-color: transparent;
|
||||
background-image: -webkit-linear-gradient(@color, darken(@color, 5%));
|
||||
|
||||
&:hover {
|
||||
color: @text-color-highlight;
|
||||
background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 5%));
|
||||
}
|
||||
&.selected,
|
||||
&.selected:hover {
|
||||
color: @text-color-highlight;
|
||||
background-image: -webkit-linear-gradient(darken(@selected-color, 5%), @selected-color);
|
||||
&:hover {
|
||||
background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 5%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-variant (@color) {
|
||||
@bg: darken(@color, 10%);
|
||||
@hover: @color;
|
||||
@selected: @color;
|
||||
.btn-background(@bg, @hover, @selected, @text-color-highlight);
|
||||
}
|
||||
|
||||
.btn {
|
||||
.btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
.btn-variant(@background-color-info);
|
||||
}
|
||||
.btn.btn-info {
|
||||
.btn-variant(@background-color-info);
|
||||
}
|
||||
.btn.btn-success {
|
||||
.btn-variant(@background-color-success);
|
||||
}
|
||||
.btn.btn-warning {
|
||||
.btn-variant(@background-color-warning);
|
||||
}
|
||||
.btn.btn-error {
|
||||
.btn-variant(@background-color-error);
|
||||
}
|
||||
|
||||
.caret {
|
||||
border-top: 5px solid #fff;
|
||||
margin-top: -1px;
|
||||
}
|
||||
35
editor.less
Normal file
35
editor.less
Normal file
@ -0,0 +1,35 @@
|
||||
@import "ui-variables";
|
||||
@import "ui-mixins";
|
||||
|
||||
.editor.mini {
|
||||
color: @text-color-highlight;
|
||||
background-color: @input-background-color;
|
||||
border: 1px solid @input-border-color;
|
||||
box-shadow:
|
||||
inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
border-radius: @component-border-radius;
|
||||
padding-left: @component-padding/2;
|
||||
|
||||
.cursor { border-color: #fff; }
|
||||
.selection .region { background-color: #444; }
|
||||
}
|
||||
|
||||
.editor.editor-colors.mini.is-focused {
|
||||
background-color: lighten(@input-background-color, 5%);
|
||||
}
|
||||
|
||||
// FIXME: these should go in syntax themes?
|
||||
.editor .gutter.drop-shadow {
|
||||
-webkit-box-shadow: -2px 0 10px 2px #222;
|
||||
}
|
||||
|
||||
@-webkit-keyframes highlight {
|
||||
from { background-color: rgba(100, 255, 100, 0.7); }
|
||||
to { background-color: null; }
|
||||
}
|
||||
|
||||
.editor .highlighted.selection .region {
|
||||
-webkit-animation-name: highlight;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
}
|
||||
9
git.less
Normal file
9
git.less
Normal file
@ -0,0 +1,9 @@
|
||||
@import "ui-mixins";
|
||||
@import "ui-variables";
|
||||
|
||||
.status { .text(normal); }
|
||||
.status-added { .text(info); }
|
||||
.status-ignored { .text(subtle); }
|
||||
.status-modified { .text(warning); }
|
||||
.status-removed { .text(error); }
|
||||
.status-renamed { .text(success); }
|
||||
125
lists.less
Normal file
125
lists.less
Normal file
@ -0,0 +1,125 @@
|
||||
@import "ui-variables";
|
||||
@import "ui-mixins";
|
||||
@import "octicon-mixins";
|
||||
|
||||
.list-group, .list-tree {
|
||||
li:not(.list-nested-item),
|
||||
li.list-nested-item > .list-item {
|
||||
.text(normal);
|
||||
}
|
||||
|
||||
.generate-list-item-text-color(@class) {
|
||||
li:not(.list-nested-item).text-@{class},
|
||||
li.list-nested-item.text-@{class} > .list-item {
|
||||
.text(@class);
|
||||
}
|
||||
}
|
||||
.generate-list-item-text-color(subtle);
|
||||
.generate-list-item-text-color(info);
|
||||
.generate-list-item-text-color(success);
|
||||
.generate-list-item-text-color(warning);
|
||||
.generate-list-item-text-color(error);
|
||||
.generate-list-item-text-color(selected);
|
||||
|
||||
.generate-list-item-status-color(@textClass, @status) {
|
||||
li:not(.list-nested-item).status-@{status},
|
||||
li.list-nested-item.status-@{status} > .list-item {
|
||||
.text(@textClass);
|
||||
}
|
||||
}
|
||||
.generate-list-item-status-color(subtle, ignored);
|
||||
.generate-list-item-status-color(info, added);
|
||||
.generate-list-item-status-color(success, renamed);
|
||||
.generate-list-item-status-color(warning, modified);
|
||||
.generate-list-item-status-color(error, removed);
|
||||
|
||||
li:not(.list-nested-item):hover,
|
||||
li.list-nested-item:hover > .list-item, // i.e. highlight directory when hover child file
|
||||
li.list-nested-item .list-item:hover,
|
||||
li.list-nested-item .list-item:hover .disclosure-arrow,
|
||||
.selected > .list-nested-item > .list-item .disclosure-arrow,
|
||||
.selected > .list-nested-item > .list-item:hover .disclosure-arrow {
|
||||
.text(highlight);
|
||||
}
|
||||
}
|
||||
|
||||
.select-list ol.list-group,
|
||||
&.select-list ol.list-group {
|
||||
li.two-lines {
|
||||
.secondary-line { color: @text-color-subtle; }
|
||||
&.selected .secondary-line { color: lighten(@text-color-subtle, 10%); }
|
||||
}
|
||||
|
||||
// We want to highlight the background of the list items because we dont
|
||||
// know their size.
|
||||
li.selected {
|
||||
background-color: @background-color-highlight;
|
||||
&:before{ display: none; }
|
||||
}
|
||||
|
||||
&.mark-active{
|
||||
@active-icon-size: 14px;
|
||||
|
||||
// pad in front of the text where the icon would be We'll pad the non-
|
||||
// active items with a 'fake' icon so other classes can pad the item
|
||||
// without worrying about the icon padding.
|
||||
li:before {
|
||||
content: '';
|
||||
background-color: transparent;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
left: auto; right: auto;
|
||||
height: @active-icon-size;
|
||||
width: @active-icon-size;
|
||||
}
|
||||
> li:not(.active):before {
|
||||
margin-right: @component-icon-padding;
|
||||
}
|
||||
li.active {
|
||||
.octicon(check, @active-icon-size);
|
||||
&:before {
|
||||
margin-right: @component-icon-padding;
|
||||
color: @text-color-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-list.popover-list {
|
||||
background-color: @overlay-background-color;
|
||||
-webkit-box-shadow: 0 0 3px 3px @base-border-color;
|
||||
padding: @component-padding/2;
|
||||
border-radius: @component-border-radius;
|
||||
border: 1px solid @overlay-border-color;
|
||||
|
||||
.editor {
|
||||
margin-bottom: @component-padding/2;
|
||||
}
|
||||
|
||||
.list-group li {
|
||||
padding-left: @component-padding/2;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-sortable {
|
||||
li {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
// For sortable lists in the settings view
|
||||
li.ui-sortable-placeholder {
|
||||
visibility: visible !important;
|
||||
background-color: darken(@pane-item-background-color, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
li.ui-draggable-dragging, li.ui-sortable-helper {
|
||||
line-height: @component-line-height;
|
||||
height: @component-line-height;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
list-style: none;
|
||||
padding: 0 @component-padding;
|
||||
background: @background-color-highlight;
|
||||
box-shadow: 0 0 1px @base-border-color;
|
||||
}
|
||||
20
loading.less
Normal file
20
loading.less
Normal file
@ -0,0 +1,20 @@
|
||||
@import "ui-variables";
|
||||
@import "ui-mixins";
|
||||
|
||||
.loading-spinner(@size) {
|
||||
width: @size;
|
||||
height: @size;
|
||||
display: block;
|
||||
|
||||
background-image: url(images/octocat-spinner-128.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.loading-spinner-medium {
|
||||
.loading-spinner(64px);
|
||||
}
|
||||
|
||||
.loading-spinner-small {
|
||||
.loading-spinner(32px);
|
||||
}
|
||||
36
overlays.less
Normal file
36
overlays.less
Normal file
@ -0,0 +1,36 @@
|
||||
@import "ui-variables";
|
||||
|
||||
.overlay {
|
||||
color: @text-color;
|
||||
background-color: @overlay-background-color;
|
||||
padding: @component-padding;
|
||||
border: 1px solid @overlay-border-color;
|
||||
box-shadow: 0 0 10px @base-border-color;
|
||||
border-radius: @component-border-radius;
|
||||
|
||||
.editor.mini {
|
||||
margin-bottom: @component-padding;
|
||||
}
|
||||
|
||||
.select-list ol.list-group,
|
||||
&.select-list ol.list-group {
|
||||
|
||||
background-color: lighten(@overlay-background-color, 3%);
|
||||
|
||||
li {
|
||||
padding: @component-padding;
|
||||
border-bottom: 1px solid @overlay-background-color;
|
||||
|
||||
&.two-lines { padding: @component-padding/2 @component-padding; }
|
||||
|
||||
.status.icon {
|
||||
float: right;
|
||||
margin-left: @component-icon-padding;
|
||||
&:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
16
package.cson
Normal file
16
package.cson
Normal file
@ -0,0 +1,16 @@
|
||||
'stylesheets': [
|
||||
'atom'
|
||||
'utilities'
|
||||
'text'
|
||||
'git'
|
||||
'sites'
|
||||
'loading'
|
||||
'buttons'
|
||||
'panels'
|
||||
'panes'
|
||||
'lists'
|
||||
'editor'
|
||||
'tabs'
|
||||
'overlays'
|
||||
'dropdowns'
|
||||
]
|
||||
85
panels.less
Normal file
85
panels.less
Normal file
@ -0,0 +1,85 @@
|
||||
@import "ui-mixins";
|
||||
@import "ui-variables";
|
||||
@import "buttons";
|
||||
|
||||
.panel {
|
||||
&.bordered {
|
||||
border: 1px solid @base-border-color;
|
||||
border-radius: @component-border-radius;
|
||||
|
||||
.panel-heading {
|
||||
border-radius: @component-border-radius @component-border-radius 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-panel {
|
||||
.text(normal);
|
||||
position: relative;
|
||||
|
||||
opacity: 0.8;
|
||||
background-color: @tool-panel-background-color;
|
||||
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.panel-bottom {
|
||||
border-top: 1px solid @tool-panel-border-color;
|
||||
box-shadow: inset 0 1px 0 @background-color-highlight;
|
||||
}
|
||||
|
||||
&.panel-left {
|
||||
border-right: 1px solid @tool-panel-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.inset-panel {
|
||||
position: relative;
|
||||
background-color: @inset-panel-background-color;
|
||||
border-radius: @component-border-radius;
|
||||
|
||||
border: 1px solid @inset-panel-border-color;
|
||||
box-shadow:
|
||||
inset 0 1px 3px fadeout(@inset-panel-border-color, 40%),
|
||||
inset 0 -1px 3px fadeout(@background-color-highlight, 3%);
|
||||
|
||||
.panel-heading {
|
||||
border-radius: @component-border-radius @component-border-radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-blurred {
|
||||
.tool-panel,
|
||||
.inset-panel {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
.text(normal);
|
||||
|
||||
margin: 0;
|
||||
border-bottom: 1px solid @panel-heading-border-color;
|
||||
border-top: 1px solid fadein(@background-color-highlight, 10%);
|
||||
padding: @component-padding - 2px @component-padding;
|
||||
|
||||
font-size: @font-size;
|
||||
line-height: 1;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%));
|
||||
|
||||
.btn {
|
||||
padding: 1px 5px;
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
|
||||
@bg: lighten(@button-background-color, 10%);
|
||||
@hover: lighten(@button-background-color-hover, 10%);
|
||||
@selected: lighten(@button-background-color-selected, 10%);
|
||||
@text: lighten(@text-color, 10%);
|
||||
.btn-background(@bg, @hover, @selected, @text);
|
||||
}
|
||||
}
|
||||
14
sites.less
Normal file
14
sites.less
Normal file
@ -0,0 +1,14 @@
|
||||
@import "ui-mixins";
|
||||
@import "ui-variables";
|
||||
|
||||
.ui-site(@num, @color) {
|
||||
.ui-site-@{num} {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-site(1, @ui-site-color-1);
|
||||
.ui-site(2, @ui-site-color-2);
|
||||
.ui-site(3, @ui-site-color-3);
|
||||
.ui-site(4, @ui-site-color-4);
|
||||
.ui-site(5, @ui-site-color-5);
|
||||
65
tabs.less
Normal file
65
tabs.less
Normal file
@ -0,0 +1,65 @@
|
||||
@import "ui-variables";
|
||||
@import "ui-mixins";
|
||||
|
||||
.tab-bar {
|
||||
height: @tab-height + 6px;
|
||||
border-bottom: 4px solid @tab-bar-border-color;
|
||||
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 1px;
|
||||
background-color: @tab-bar-background-color;
|
||||
}
|
||||
|
||||
.tab {
|
||||
height: @tab-height;
|
||||
line-height: @tab-height;
|
||||
color: @text-color;
|
||||
margin: 0;
|
||||
background-image: -webkit-linear-gradient(@tab-background-color, darken(@tab-background-color, 10%));
|
||||
box-shadow:
|
||||
inset 0 2px 0 rgba(255, 255, 255, 0.1),
|
||||
inset 0 1px 0 rgba(0, 0, 0, 1),
|
||||
inset 1px 0 0 @background-color-highlight,
|
||||
inset -1px 0 0 @background-color-highlight;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: @text-color-highlight;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
height: @tab-height + 1px;
|
||||
background-image: -webkit-linear-gradient(@tab-background-color-active, @tab-bar-border-color);
|
||||
color: @text-color-highlight;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(0, 0, 0, 0.5),
|
||||
inset 0 2px 0 rgba(255, 255, 255, 0.1),
|
||||
inset 1px 0 0 rgba(255, 255, 255, 0.1),
|
||||
inset -1px 0 0 rgba(255, 255, 255, 0.1)
|
||||
}
|
||||
|
||||
.tab.active:hover .close-icon {
|
||||
color: @text-color-highlight;
|
||||
}
|
||||
|
||||
// Bootstrap nav tabs.
|
||||
.nav.nav-tabs {
|
||||
border-bottom-color: @tab-background-color-active;
|
||||
|
||||
> li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> li > a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
> li.active > a {
|
||||
.text(highlight);
|
||||
border: none;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background-color: @background-color-highlight;
|
||||
}
|
||||
}
|
||||
72
text.less
Normal file
72
text.less
Normal file
@ -0,0 +1,72 @@
|
||||
@import "ui-mixins";
|
||||
@import "ui-variables";
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
line-height: 1em;
|
||||
margin-bottom: 15px
|
||||
}
|
||||
h1 { font-size: 2em; }
|
||||
h2 { font-size: 1.5em; }
|
||||
h3 { font-size: 1.2em; }
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
pre {
|
||||
box-shadow: none;
|
||||
color: @text-color;
|
||||
background: @inset-panel-background-color;
|
||||
border-radius: @component-border-radius;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
.text(highlight);
|
||||
background: @background-color-highlight;
|
||||
border-radius: @component-border-radius;
|
||||
}
|
||||
|
||||
.selected { .text(highlight); }
|
||||
|
||||
.text-smaller { font-size: 0.9em; }
|
||||
|
||||
.text-subtle { .text(subtle); }
|
||||
.text-highlight { .text(highlight); }
|
||||
|
||||
.text-info { .text(info); }
|
||||
.text-warning { .text(warning); }
|
||||
.text-success { .text(success); }
|
||||
.text-error { .text(error); }
|
||||
|
||||
.highlight {
|
||||
color: @text-color-highlight;
|
||||
font-weight: bold;
|
||||
text-shadow: none;
|
||||
background-color: @background-color-highlight;
|
||||
border-radius: @component-border-radius;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.highlight-color(@name, @color) {
|
||||
.highlight-@{name} {
|
||||
color: @text-color-highlight;
|
||||
font-weight: bold;
|
||||
text-shadow: none;
|
||||
background-color: @color;
|
||||
border-radius: @component-border-radius;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
}
|
||||
.highlight-color(info, @background-color-info);
|
||||
.highlight-color(warning, @background-color-warning);
|
||||
.highlight-color(error, @background-color-error);
|
||||
.highlight-color(success, @background-color-success);
|
||||
39
ui-mixins.less
Normal file
39
ui-mixins.less
Normal file
@ -0,0 +1,39 @@
|
||||
@import "ui-variables";
|
||||
|
||||
// Pattern matching; ish is cray.
|
||||
// http://lesscss.org/#-pattern-matching-and-guard-expressions
|
||||
.text(normal) {
|
||||
font-weight: normal;
|
||||
color: @text-color;
|
||||
text-shadow: 0 -1px 0 #333;
|
||||
}
|
||||
.text(subtle) {
|
||||
font-weight: normal;
|
||||
color: @text-color-subtle;
|
||||
text-shadow: none;
|
||||
}
|
||||
.text(highlight) {
|
||||
font-weight: normal;
|
||||
color: @text-color-highlight;
|
||||
text-shadow: 0 -1px 0 #333;
|
||||
}
|
||||
.text(selected) {
|
||||
.text(highlight)
|
||||
}
|
||||
|
||||
.text(info) {
|
||||
color: @text-color-info;
|
||||
text-shadow: none;
|
||||
}
|
||||
.text(success) {
|
||||
color: @text-color-success;
|
||||
text-shadow: none;
|
||||
}
|
||||
.text(warning) {
|
||||
color: @text-color-warning;
|
||||
text-shadow: none;
|
||||
}
|
||||
.text(error) {
|
||||
color: @text-color-error;
|
||||
text-shadow: none;
|
||||
}
|
||||
76
ui-variables.less
Normal file
76
ui-variables.less
Normal file
@ -0,0 +1,76 @@
|
||||
// Colors
|
||||
|
||||
@text-color: #aaa;
|
||||
@text-color-subtle: #555;
|
||||
@text-color-highlight: #fff;
|
||||
@text-color-selected: @text-color-highlight;
|
||||
|
||||
@text-color-info: #5293d8;
|
||||
@text-color-success: #1fe977;
|
||||
@text-color-warning: #f78a46;
|
||||
@text-color-error: #c00;
|
||||
|
||||
@background-color-info: #0098ff;
|
||||
@background-color-success: #17ca65;
|
||||
@background-color-warning: #ff4800;
|
||||
@background-color-error: #c00;
|
||||
@background-color-highlight: rgba(255, 255, 255, 0.07);
|
||||
@background-color-selected: @background-color-highlight;
|
||||
|
||||
@app-background-color: #333;
|
||||
|
||||
@base-background-color: lighten(@tool-panel-background-color, 5%);
|
||||
@base-border-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
@pane-item-background-color: @base-background-color;
|
||||
@pane-item-border-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
@input-background-color: #212224;
|
||||
@input-border-color: @base-border-color;
|
||||
|
||||
@tool-panel-background-color: #1d1f21;
|
||||
@tool-panel-border-color: @base-border-color;
|
||||
|
||||
@inset-panel-background-color: #161719;
|
||||
@inset-panel-border-color: @base-border-color;
|
||||
|
||||
@panel-heading-background-color: #43484d;
|
||||
@panel-heading-border-color: fadein(@base-border-color, 10%);
|
||||
|
||||
@overlay-background-color: #202123;
|
||||
@overlay-border-color: @background-color-highlight;
|
||||
|
||||
@button-background-color: #43484d;
|
||||
@button-background-color-hover: lighten(@button-background-color, 5%);
|
||||
@button-background-color-selected: #5c6064;
|
||||
@button-border-color: @base-border-color;
|
||||
|
||||
@tab-bar-background-color: @inset-panel-background-color;
|
||||
@tab-bar-border-color: darken(@tab-background-color-active, 10%);
|
||||
@tab-background-color: #292c2f;
|
||||
@tab-background-color-active: @panel-heading-background-color;
|
||||
@tab-border-color: transparent;
|
||||
|
||||
@tree-view-background-color: @tool-panel-background-color;
|
||||
@tree-view-border-color: @tool-panel-border-color;
|
||||
|
||||
@ui-site-color-1: @background-color-success; // green
|
||||
@ui-site-color-2: @background-color-info; // blue
|
||||
@ui-site-color-3: @background-color-warning; // orange
|
||||
@ui-site-color-4: #db2ff4; // purple
|
||||
@ui-site-color-5: #f5e11d; // yellow
|
||||
|
||||
|
||||
// Sizes
|
||||
|
||||
@font-size: 12px;
|
||||
|
||||
@disclosure-arrow-size: 12px;
|
||||
|
||||
@component-padding: 10px;
|
||||
@component-icon-padding: 5px;
|
||||
@component-icon-size: 16px;
|
||||
@component-line-height: 25px;
|
||||
@component-border-radius: 2px;
|
||||
|
||||
@tab-height: 30px;
|
||||
19
utilities.less
Normal file
19
utilities.less
Normal file
@ -0,0 +1,19 @@
|
||||
@import "ui-mixins";
|
||||
@import "ui-variables";
|
||||
|
||||
.key-binding {
|
||||
background: -webkit-linear-gradient(
|
||||
rgba(100, 100, 100, 0.5),
|
||||
rgba(70,70,70, 0.5));
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1);
|
||||
display: inline-block;
|
||||
line-height: 100%;
|
||||
padding: 1px 3px;
|
||||
border-radius: @component-border-radius;
|
||||
margin-left: @component-icon-padding;
|
||||
}
|
||||
|
||||
.badge {
|
||||
.text(highlight);
|
||||
background: @background-color-highlight;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user