Skip to content

N
nexpie-grafana-theme
Commit 7c9728df by Torkel Ödegaard
Options

ux(less): refactoring and cleanup

parent 37b031af
Showing with 264 additions and 210 deletions
public/less/base/base.less
...@@ -4,6 +4,25 @@ html { ...@@ -4,6 +4,25 @@ html {
body { body {
height: 100%; height: 100%;
background: @bodyBackground; margin: 0;
font-family: @baseFontFamily;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @textColor;
background-color: @bodyBackground;
}
// Links
// -------------------------
a {
color: @linkColor;
text-decoration: none;
}
a:hover,
a:focus {
color: @linkColorHover;
} }
public/less/base/forms.less
//
// Forms
// --------------------------------------------------
// GENERAL STYLES
// --------------
// Make all forms have space below them
form {
margin: 0 0 @baseLineHeight;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
// Groups of fields with labels on top (legends)
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
border: 0;
border-bottom: 1px solid #e5e5e5;
// Small
small {
font-size: @baseLineHeight * .75;
color: @grayLight;
}
}
// Set font for forms
label,
input,
button,
select,
textarea {
#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
label {
display: block;
margin-bottom: 5px;
}
// Form controls
// -------------------------
// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: @baseLineHeight;
padding: 4px 6px;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @inputText;
vertical-align: top;
}
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea,
.uneditable-input {
width: 206px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows
textarea {
height: auto;
}
// Everything else
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: @inputBackground;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s");
// Focus state
&:focus {
border-color: rgba(82,168,236, .8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
line-height: @inputHeight;
}
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid @inputBorder;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
// Placeholder
// -------------------------
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
input,
textarea {
.placeholder();
}
// INPUT SIZES
// -----------
// General classes for quick sizes
.input-mini { width: 60px; }
.input-small { width: 90px; }
.input-medium { width: 150px; }
.input-large { width: 210px; }
.input-xlarge { width: 270px; }
.input-xxlarge { width: 530px; }
// GRID SIZING FOR INPUTS
// ----------------------
// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);
// DISABLED STATE
// --------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
background-color: @inputDisabledBackground;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
}
// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
.box-shadow(@shadow);
}
}
input[type=text].input-fluid { input[type=text].input-fluid {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
......
public/less/bootstrap/bootstrap.less
...@@ -14,12 +14,8 @@ ...@@ -14,12 +14,8 @@
@import "reset.less"; @import "reset.less";
// Grid system and page structure // Grid system and page structure
@import "scaffolding.less";
@import "grid.less"; @import "grid.less";
// Base CSS
@import "forms.less";
// Components: common // Components: common
@import "close.less"; @import "close.less";
......
public/less/bootstrap/scaffolding.less deleted 100644 → 0
//
// Scaffolding
// --------------------------------------------------
// Body reset
// -------------------------
body {
margin: 0;
font-family: @baseFontFamily;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @textColor;
background-color: @bodyBackground;
}
// Links
// -------------------------
a {
color: @linkColor;
text-decoration: none;
}
a:hover,
a:focus {
color: @linkColorHover;
text-decoration: underline;
}
// Images
// -------------------------
// Rounded corners
.img-rounded {
.border-radius(6px);
}
// Add polaroid-esque trim
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
.box-shadow(0 1px 3px rgba(0,0,0,.1));
}
// Perfect circle
.img-circle {
.border-radius(500px); // crank the border-radius so it works with most reasonably sized images
}
public/less/bootswatch.dark.less
...@@ -85,149 +85,3 @@ hr { ...@@ -85,149 +85,3 @@ hr {
} }
} }
// FORMS
// -----------------------------------------------------
input, textarea, select {
border-width: 2px;
.border-radius(1px);
}
select, textarea,
input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"],
input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="color"], .uneditable-input {
color: @grayLight;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
border-color: #444;
}
input:focus,
textarea:focus,
input.focused,
textarea.focused {
border-color: rgba(82,168,236,1);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
.box-shadow(none); // override for file inputs
.tab-focus();
}
legend, label {
color: @textColor;
border-bottom: 0px solid #222;
}
.form-actions {
border-top: 1px solid #222;
}
// TABLES
// -----------------------------------------------------
.table {
.border-radius(1px);
tbody tr.success td {
background-color: @green;
color: @white;
}
tbody tr.error td {
background-color: @red;
color: @white;
}
tbody tr.info td {
background-color: @blue;
color: @white;
}
}
.label {
color: @white;
}
.badge {
border-radius: 0;
font-weight: 200;
}
.label, .alert { background-color: darken(@gray, 20%); }
.label:hover { background-color: darken(@gray, 30%); }
.label-important,
.alert-danger,
.alert-error { background-color: @red; }
.label-important:hover { background-color: darken(@red, 10%); }
.label-warning { background-color: darken(@orange, 10%); }
.label-warning:hover { background-color: darken(@orange, 20%); }
.label-success, .alert-success { background-color: darken(@green, 3%); }
.label-success:hover { background-color: darken(@green, 13%); }
.label-info, .alert-info { background-color: darken(@blueDark, 10%); }
.label-info:hover { background-color: darken(@blueDark, 20%); }
// MISC
// -----------------------------------------------------
a:hover {
text-decoration: none;
}
.well, .hero-unit {
.border-radius(0px);
}
.well, .hero-unit {
border-top: solid 1px lighten(@grayDark, 5%);
.box-shadow(0 2px 4px rgba(0,0,0,.8));
}
.thumbnail {
border-color: @grayDark;
}
.progress {
background-color: #060606;
background-image: none;
.border-radius(0);
}
.modal-footer {
}
.footer {
border-top: 1px solid @grayDark;
}
// MEDIA QUERIES
// -----------------------------------------------------
.caret {
color: @textColor
}
.dropdown-submenu > a:after {
border-left-color: @textColor;
}
public/less/components/gf-form.less
...@@ -53,12 +53,9 @@ input[type=checkbox].gf-form-checkbox { ...@@ -53,12 +53,9 @@ input[type=checkbox].gf-form-checkbox {
} }
select.gf-form-input { select.gf-form-input {
border: none; padding: 2px 3px;
margin: 0px;
border-radius: 0;
height: 36px;
padding: 9px 3px;
font-size: 15px; font-size: 15px;
box-sizing: content-box;
} }
.gf-size-xs { width: 60px; } .gf-size-xs { width: 60px; }
......
public/less/variables.dark.less
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
@headingsFontWeight: 400; // instead of browser default, bold @headingsFontWeight: 400; // instead of browser default, bold
@headingsFontStyle: normal; @headingsFontStyle: normal;
@headingsColor: darken(@white,11%); // empty to use BS default, @textColor @headingsColor: darken(@white,11%); // empty to use BS default, @textColor
@inputText: @black; @inputText: @grayLight;
// Component sizing // Component sizing
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment