public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(less): more less cleanup, restructuring

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-15 13:51:56 +01:00
parent 35a1a04f50
commit c11322a016
14 changed files with 108 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/less/components/buttons.less
-61
View File
@@ -96,67 +96,6 @@
border: 1px solid @grafanaTargetFuncHightlight;
}
// Cross-browser Jank
// --------------------------------------------------
button.btn,
input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;
}
// IE7 has some default padding on button controls
*padding-top: 3px;
*padding-bottom: 3px;
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}
// Link buttons
// --------------------------------------------------
// Make a button look and behave like a link
.btn-link,
.btn-link:active,
.btn-link[disabled] {
background-color: transparent;
background-image: none;
.box-shadow(none);
}
.btn-link {
border-color: transparent;
cursor: pointer;
color: @linkColor;
.border-radius(0);
}
.btn-link:hover,
.btn-link:focus {
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
color: @grayDark;
text-decoration: none;
}
.btn-text {
color: @btnText;
margin: 0;
public/less/components/dashboard.less
+17
View File
@@ -1,3 +1,6 @@
.template-variable {
color: @variable;
}
.grafana-row {
margin-bottom: 5px;
@@ -266,3 +269,17 @@ div.flot-text {
height: 15px;
display: block;
}
.dashboard-header {
font-family: "grafana-icons";
font-size: 22px;
text-align: center;
span {
display: inline-block;
border: none;
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-bottom: 2px solid transparent;
padding: 1.2rem .2rem .4rem .2rem;
}
}
public/less/components/footer.less
+9
View File
@@ -0,0 +1,9 @@
.grafana-version-info {
position: absolute;
bottom: 2px;
left: 3px;
font-size: 80%;
color: darken(@gray, 25%);
a { color: darken(@gray, 25%); }
}
public/less/components/infobox.less
+20
View File
@@ -0,0 +1,20 @@
.grafana-info-box:before {
content: "\f05a";
font-family:'FontAwesome';
position: absolute;
top: -8px;
left: -8px;
font-size: 20px;
color: @blue;
}
.grafana-info-box {
position: relative;
padding: 5px 15px;
background-color: @grafanaTargetBackground;
border: 1px solid @grafanaTargetBorder;
h5 {
margin-top: 5px;
}
}
public/less/components/query_editor.less
+16
View File
@@ -0,0 +1,16 @@
.query-keyword {
font-weight: bold;
color: @blue;
}
.query-segment-key {
border-right: none;
padding-right: 1px;
}
.query-segment-operator {
padding-right: 1px;
border-right: none;
color: @orange;
}
public/less/components/shortcuts.less
+6
View File
@@ -0,0 +1,6 @@
.shortcut-table {
td { padding: 3px; }
th:last-child { text-align: left; }
td:first-child { text-align: right; }
}
public/less/components/tooltip.less
+4
View File
@@ -96,3 +96,7 @@
border-bottom: 0px solid #c8c8c8;
}
.grafana-tip {
padding-left: 5px;
}
public/less/components/typeahead.less
+5
View File
@@ -4,3 +4,8 @@
max-height: 300px;
overflow-y: auto;
}
.typeahead strong {
color: @yellow;
}
public/less/grafana.less
+6 -101
View File
@@ -7,6 +7,7 @@
@import "./base/code.less";
// UTILS
@import "./utils/utils.less";
@import "./utils/validation.less";
@import "./utils/angular.less";
@@ -49,6 +50,10 @@
@import "./components/color_picker.less";
@import "./components/tooltip.less";
@import "./components/buttons.less";
@import "./components/footer.less";
@import "./components/infobox.less";
@import "./components/shortcuts.less";
@import "./components/query_editor.less";
// PAGES
@import "./pages/login.less";
@@ -56,105 +61,5 @@
@import "./pages/admin.less";
@import "./pages/alerting.less";
@import "./pages/apps.less";
@import "./pages/signup.less";
.grafana-version-info {
position: absolute;
bottom: 2px;
left: 3px;
font-size: 80%;
color: darken(@gray, 25%);
a { color: darken(@gray, 25%); }
}
.template-variable {
color: @variable;
}
.grafana-info-box:before {
content: "\f05a";
font-family:'FontAwesome';
position: absolute;
top: -8px;
left: -8px;
font-size: 20px;
color: @blue;
}
.grafana-info-box {
position: relative;
padding: 5px 15px;
background-color: @grafanaTargetBackground;
border: 1px solid @grafanaTargetBorder;
h5 {
margin-top: 5px;
}
}
.grafana-tip {
padding-left: 5px;
}
.shortcut-table {
td { padding: 3px; }
th:last-child { text-align: left; }
td:first-child { text-align: right; }
}
.query-keyword {
font-weight: bold;
color: @blue;
}
.query-segment-key {
border-right: none;
padding-right: 1px;
}
.query-segment-operator {
padding-right: 1px;
border-right: none;
color: @orange;
}
.highlight-word {
color: @orange;
}
.body-copy-emphasis {
color: @headingsColor;
}
.signup-page-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background-image: url(/img/background_tease.jpg);
.signup-logo-container {
width: 150px;
margin: 0 auto;
padding: 80px 0;
}
}
.typeahead strong {
color: @yellow;
}
.dashboard-header {
font-family: "grafana-icons";
font-size: 22px;
text-align: center;
span {
display: inline-block;
border: none;
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-bottom: 2px solid transparent;
padding: 1.2rem .2rem .4rem .2rem;
}
}
public/less/layout/page.less
+3 -3
View File
@@ -10,9 +10,9 @@
}
.main-view {
background-image: url(/img/grafana_pattern.png);
background-position: 100% -550px;
background-repeat: no-repeat;
// background-image: url(/img/grafana_pattern.png);
// background-position: 100% -550px;
// background-repeat: no-repeat;
height: 100%;
}
public/less/pages/login.less
+1
View File
@@ -98,6 +98,7 @@
background: #dd4b39;
color: white;
}
.btn-github {
background: #555;
color: white;
public/less/pages/signup.less
+17
View File
@@ -0,0 +1,17 @@
.signup-page-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background-image: url(/img/background_tease.jpg);
.signup-logo-container {
width: 150px;
margin: 0 auto;
padding: 80px 0;
}
}
public/less/utils/utils.less
+4
View File
@@ -0,0 +1,4 @@
.highlight-word {
color: @orange;
}
public/less/variables.dark.less
-1
View File
@@ -148,7 +148,6 @@
@btnInverseText: @textColor;
@btnInverseBorder: #333;
@btnText: @gray;
@iconContainerBackground: @black;