Skip to content

N
nexpie-grafana-theme
Commit fcc3a7f6 by Torkel Ödegaard
Options

ux(less): more less refactoring and cleanup, modals, and dropdowns

parent 5836a6ec
Showing with 194 additions and 496 deletions
public/less/base/code.less
...@@ -6,17 +6,18 @@ ...@@ -6,17 +6,18 @@
// Inline and block code styles // Inline and block code styles
code, code,
pre { pre {
padding: 0 3px 2px;
#font > #family > .monospace; #font > #family > .monospace;
font-size: @baseFontSize - 2; font-size: @baseFontSize - 2;
color: @grayDark;
background-color: @codeTagBackground; background-color: @codeTagBackground;
color: @textColor;
border: 1px solid darken(@codeTagBackground, 15%);
padding: 2px;
.border-radius(3px); .border-radius(3px);
} }
// Inline code // Inline code
code { code {
padding: 2px 4px;
color: #d14; color: #d14;
background-color: #f7f7f9; background-color: #f7f7f9;
border: 1px solid #e1e1e8; border: 1px solid #e1e1e8;
...@@ -26,7 +27,6 @@ code { ...@@ -26,7 +27,6 @@ code {
// Blocks of code // Blocks of code
pre { pre {
display: block; display: block;
padding: (@baseLineHeight - 1) / 2;
margin: 0 0 @baseLineHeight / 2; margin: 0 0 @baseLineHeight / 2;
font-size: @baseFontSize - 1; // 14px to 13px font-size: @baseFontSize - 1; // 14px to 13px
line-height: @baseLineHeight; line-height: @baseLineHeight;
...@@ -35,8 +35,6 @@ pre { ...@@ -35,8 +35,6 @@ pre {
white-space: pre; white-space: pre;
white-space: pre-wrap; white-space: pre-wrap;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid rgba(0,0,0,.15);
.border-radius(@baseBorderRadius);
// Make prettyprint styles more spaced out for readability // Make prettyprint styles more spaced out for readability
&.prettyprint { &.prettyprint {
......
public/less/bootstrap/bootstrap.less
...@@ -21,8 +21,6 @@ ...@@ -21,8 +21,6 @@
@import "forms.less"; @import "forms.less";
// Components: common // Components: common
@import "dropdowns.less";
@import "component-animations.less";
@import "close.less"; @import "close.less";
// Components: Buttons & Alerts // Components: Buttons & Alerts
...@@ -33,7 +31,6 @@ ...@@ -33,7 +31,6 @@
@import "navs.less"; @import "navs.less";
// Components: Popovers // Components: Popovers
@import "modals.less";
@import "tooltip.less"; @import "tooltip.less";
// Components: Misc // Components: Misc
......
public/less/bootstrap/component-animations.less deleted 100644 → 0
//
// Component animations
// --------------------------------------------------
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
.transition(height .35s ease);
&.in {
height: auto;
}
}
public/less/bootstrap/modals.less deleted 100644 → 0
//
// Modals
// --------------------------------------------------
// Background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindexModalBackdrop;
background-color: @black;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop,
.modal-backdrop.fade.in {
.opacity(70);
}
// Base modal
.modal {
position: fixed;
z-index: @zindexModal;
width: 100%;
background-color: @white;
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box);
// Remove focus outline from opened modal
outline: none;
&.fade {
.transition(e('opacity .3s linear, top .3s ease-out'));
top: -25%;
}
&.fade.in { top: 10%; }
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
// Close icon
.close { margin-top: 2px; }
// Heading
h3 {
margin: 0;
line-height: 30px;
}
}
// Body (where all modal content resides)
.modal-body {
position: relative;
overflow-y: auto;
//max-height: 700px;
padding: 15px;
}
// Remove bottom margin if need be
.modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right; // right align buttons
background-color: #f5f5f5;
border-top: 1px solid #ddd;
.box-shadow(inset 0 1px 0 @white);
.clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}
public/less/bootswatch.dark.less
...@@ -212,19 +212,7 @@ a:hover { ...@@ -212,19 +212,7 @@ a:hover {
.border-radius(0); .border-radius(0);
} }
.modal {
background-color: @grafanaPanelBackground;
}
.modal-header {
border-bottom: 1px solid @grafanaPanelBackground;
}
.modal-footer { .modal-footer {
background-color: @grafanaPanelBackground;
border-top: 1px solid @grafanaPanelBackground;
.border-radius(0 0 0px 0px);
.box-shadow(none);
} }
......
public/less/bootstrap/dropdowns.less → public/less/components/dropdown.less
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
z-index: @zindexDropdown; z-index: @zindexDropdown;
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
float: left; float: left;
min-width: 160px; min-width: 140px;
padding: 5px 0; padding: 5px 0;
margin: 2px 0 0; // override default ul margin: 2px 0 0; // override default ul
list-style: none; list-style: none;
...@@ -67,12 +67,17 @@ ...@@ -67,12 +67,17 @@
// Links within the dropdown menu // Links within the dropdown menu
> li > a { > li > a {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px 3px 15px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @dropdownLinkColor; color: @dropdownLinkColor;
white-space: nowrap; white-space: nowrap;
i {
padding-right: 5px;
color: @linkColorDisabled;
}
} }
} }
......
public/less/components/modals.less 0 → 100644
//
// Modals
// --------------------------------------------------
// Background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindexModalBackdrop;
background-color: @black;
}
.modal-backdrop,
.modal-backdrop.fade.in {
.opacity(70);
}
// Base modal
.modal {
position: fixed;
z-index: @zindexModal;
width: 100%;
background-color: @grafanaPanelBackground;
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box);
outline: none;
max-width: 800px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 20%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid @grafanaPanelBackground;
}
// Body (where all modal content resides)
.modal-body {
position: relative;
overflow-y: auto;
}
// Remove bottom margin if need be
.modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
border-top: 1px solid @grafanaPanelBackground;
background-color: @grafanaPanelBackground;
text-align: right; // right align buttons
.clearfix(); // clear it in case folks use .pull-* classes on buttons
}
.modal-no-header {
border: 1px solid @grafanaTargetFuncBackground;
text-align: center;
h3 {
margin-top: 30px;
}
.modal-close {
float: right;
font-size: 140%;
padding: 10px;
}
.modal-tagline {
font-size: 16px;
}
}
.confirm-modal {
max-width: 500px;
.confirm-modal-icon {
padding-top: 41px;
font-size: 280%;
color: @green;
padding-bottom: 20px;
}
.confirm-modal-title {
font-size: 18px;
color: @linkColor;
margin-bottom: 15px;
}
.confirm-modal-buttons {
margin-top: 35px;
margin-bottom: 35px;
button {
margin-right: 5px
}
}
}
.share-modal-body {
text-align: center;
padding: 10px 0;
.tight-form {
text-align: left;
}
.share-modal-options {
margin: 11px 20px 33px 20px;
}
.share-modal-big-icon {
.fa, .icon-gf {
font-size: 70px;
}
}
.share-snapshot-info-text {
margin: 10px 105px;
strong {
color: @headingsColor;
font-weight: 500;
}
}
.share-snapshot-header {
margin: 20px 0 22px 0;
}
.tight-form {
text-align: left;
}
.share-snapshot-link {
max-width: 716px;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
}
public/less/components/tags.less 0 → 100644
// Labels & Badges
.label-tag {
background-color: @purple;
color: darken(@white, 5%);
white-space: nowrap;
border-radius: 3px;
text-shadow: none;
font-size: 13px;
padding: 2px 6px;
border-width: 1px;
border-style: solid;
.icon-tag {
position: relative;
top: 1px;
padding-right: 4px;
}
}
.label-tag:hover {
opacity: 0.85;
background-color: darken(@purple, 10%);
}
public/less/components/typeahead.less 0 → 100644
// typeahead max height
.typeahead {
max-height: 300px;
overflow-y: auto;
}
public/less/grafana.dark.less
@import "variables.dark.less"; @import "variables.dark.less";
@import "bootstrap/bootstrap.less"; @import "bootstrap/bootstrap.less";
@import "bootswatch.dark.less"; @import "bootswatch.dark.less";
@import "overrides.less";
@import "grafana.less"; @import "grafana.less";
public/less/grafana.less
...@@ -39,6 +39,10 @@ ...@@ -39,6 +39,10 @@
@import "./components/navbar.less"; @import "./components/navbar.less";
@import "./components/popovers.less"; @import "./components/popovers.less";
@import "./components/alerts.less"; @import "./components/alerts.less";
@import "./components/typeahead.less";
@import "./components/tags.less";
@import "./components/modals.less";
@import "./components/dropdown.less";
// PAGES // PAGES
@import "./pages/login.less"; @import "./pages/login.less";
...@@ -81,15 +85,6 @@ ...@@ -81,15 +85,6 @@
width: 24px; width: 24px;
} }
.modal {
max-width: 800px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 20%;
}
.histogram-chart { .histogram-chart {
position:relative; position:relative;
} }
...@@ -237,93 +232,6 @@ ...@@ -237,93 +232,6 @@
td:first-child { text-align: right; } td:first-child { text-align: right; }
} }
.modal-no-header {
border: 1px solid @grafanaTargetFuncBackground;
text-align: center;
h3 {
margin-top: 30px;
}
.modal-close {
float: right;
font-size: 140%;
padding: 10px;
}
.modal-tagline {
font-size: 16px;
}
}
.confirm-modal {
max-width: 500px;
.confirm-modal-icon {
padding-top: 41px;
font-size: 280%;
color: @green;
padding-bottom: 20px;
}
.confirm-modal-title {
font-size: 18px;
color: @linkColor;
margin-bottom: 15px;
}
.confirm-modal-buttons {
margin-top: 35px;
margin-bottom: 35px;
button {
margin-right: 5px
}
}
}
.share-modal-body {
text-align: center;
padding: 10px 0;
.tight-form {
text-align: left;
}
.share-modal-options {
margin: 11px 20px 33px 20px;
}
.share-modal-big-icon {
.fa, .icon-gf {
font-size: 70px;
}
}
.share-snapshot-info-text {
margin: 10px 105px;
strong {
color: @headingsColor;
font-weight: 500;
}
}
.share-snapshot-header {
margin: 20px 0 22px 0;
}
.tight-form {
text-align: left;
}
.share-snapshot-link {
max-width: 716px;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
}
.query-keyword { .query-keyword {
font-weight: bold; font-weight: bold;
color: @blue; color: @blue;
......
public/less/grafana.light.less
@import "variables.light.less"; @import "variables.light.less";
@import "bootstrap/bootstrap.less"; @import "bootstrap/bootstrap.less";
@import "bootswatch.light.less"; @import "bootswatch.light.less";
@import "overrides.less";
@import "grafana.less"; @import "grafana.less";
public/less/overrides.less deleted 100644 → 0
// Backgrounds
// ---------------------
/* ===================================================
* popover-extra-placements.css v0.1
* http://twitter.github.com/bootstrap-popover-extra-placements
* ===================================================
* Copyright 2012 Daniel Kleehammer
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
/*************************
* Top Positions
*************************/
/** Top Left **/
.popover.topLeft {
margin-top: -10px;
}
.popover.topLeft .arrow {
bottom: -10px;
left: 25%;
margin-left: -10px;
border-width: 10px 10px 0;
border-top-color: @popoverTitleBackground;
}
.popover.topLeft .arrow:after {
border-width: 11px 11px 0;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -1px;
left: -11px;
}
/** Top Right **/
.popover.topRight {
margin-top: -10px;
}
.popover.topRight .arrow {
bottom: -10px;
left: 75%;
margin-left: -10px;
border-width: 10px 10px 0;
border-top-color: @popoverTitleBackground;;
}
.popover.topRight .arrow:after {
border-width: 11px 11px 0;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -1px;
left: -11px;
}
/*************************
* Right Positions
*************************/
.popover {
&.rightTop .arrow {
top: 10%;
left: -@popoverArrowOuterWidth;
margin-top: -@popoverArrowOuterWidth;
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: @popoverArrowOuterColor;
&:after {
left: 1px;
bottom: -@popoverArrowWidth;
border-left-width: 0;
border-right-color: @popoverArrowColor;
}
}
&.rightBottom .arrow {
top: 90%;
left: -@popoverArrowOuterWidth;
margin-top: -@popoverArrowOuterWidth;
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: @popoverArrowOuterColor;
&:after {
left: 1px;
bottom: -@popoverArrowWidth;
border-left-width: 0;
border-right-color: @popoverArrowColor;
}
}
&.bottomLeft .arrow {
left: 10%;
margin-left: -@popoverArrowOuterWidth;
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: @popoverArrowOuterColor;
top: -@popoverArrowOuterWidth;
&:after {
top: 1px;
margin-left: -@popoverArrowWidth;
border-top-width: 0;
border-bottom-color: @popoverArrowColor;
}
}
&.bottomRight .arrow {
left: 90%;
margin-left: -@popoverArrowOuterWidth;
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: @popoverArrowOuterColor;
top: -@popoverArrowOuterWidth;
&:after {
top: 1px;
margin-left: -@popoverArrowWidth;
border-top-width: 0;
border-bottom-color: @popoverArrowColor;
}
}
&.leftTop .arrow {
top: 10%;
right: -@popoverArrowOuterWidth;
margin-top: -@popoverArrowOuterWidth;
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: @popoverArrowOuterColor;
&:after {
right: 1px;
border-right-width: 0;
border-left-color: @popoverArrowColor;
bottom: -@popoverArrowWidth;
}
}
&.leftBottom .arrow {
top: 90%;
right: -@popoverArrowOuterWidth;
margin-top: -@popoverArrowOuterWidth;
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: @popoverArrowOuterColor;
&:after {
right: 1px;
border-right-width: 0;
border-left-color: @popoverArrowColor;
bottom: -@popoverArrowWidth;
}
}
&.topLeft .arrow {
left: 10%;
margin-left: -@popoverArrowOuterWidth;
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
&:after {
bottom: 1px;
margin-left: -@popoverArrowWidth;
border-bottom-width: 0;
border-top-color: @popoverArrowColor;
}
}
&.topRight .arrow {
left: 90%;
margin-left: -@popoverArrowOuterWidth;
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
&:after {
bottom: 1px;
margin-left: -@popoverArrowWidth;
border-bottom-width: 0;
border-top-color: @popoverArrowColor;
}
}
}
// typeahead max height
.typeahead {
max-height: 300px;
overflow-y: auto;
}
// Labels & Badges
.label-tag {
background-color: @purple;
color: darken(@white, 5%);
white-space: nowrap;
border-radius: 3px;
text-shadow: none;
font-size: 13px;
padding: 2px 6px;
border-width: 1px;
border-style: solid;
.icon-tag {
position: relative;
top: 1px;
padding-right: 4px;
}
}
.label-tag:hover {
opacity: 0.85;
background-color: darken(@purple, 10%);
}
.label-tag-email {
padding-left: 25px;
background: @black url(/img/envelope.png) 5px 50% no-repeat !important;
border-color: @black !important;
font-size: 12px;
font-weight: normal;
border-radius: 5px;
}
// inspector
.inspector-request-table {
td {
padding: 5px;
}
td:first-child {
white-space: nowrap;
}
}
.modal-body {
padding: 0;
}
// pre
code, pre {
background-color: @codeTagBackground;
color: @textColor;
border: 1px solid darken(@codeTagBackground, 15%);
padding: 2px;
}
.dropdown-menu {
min-width: 140px;
> li > a {
padding: 3px 20px 3px 15px;
i {
padding-right: 5px;
color: @linkColorDisabled;
}
}
}
.dropdown-submenu>.dropdown-menu.dropdown-submenu-left {
left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;
}
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