mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(less): more less refactoring and cleanup, modals, and dropdowns
This commit is contained in:
Torkel Ödegaard
parent
5836a6ec4b
commit
fcc3a7f6e4
@ -6,17 +6,18 @@
|
||||
// Inline and block code styles
|
||||
code,
|
||||
pre {
|
||||
padding: 0 3px 2px;
|
||||
#font > #family > .monospace;
|
||||
font-size: @baseFontSize - 2;
|
||||
color: @grayDark;
|
||||
background-color: @codeTagBackground;
|
||||
color: @textColor;
|
||||
border: 1px solid darken(@codeTagBackground, 15%);
|
||||
padding: 2px;
|
||||
|
||||
.border-radius(3px);
|
||||
}
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
color: #d14;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
@ -26,7 +27,6 @@ code {
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
padding: (@baseLineHeight - 1) / 2;
|
||||
margin: 0 0 @baseLineHeight / 2;
|
||||
font-size: @baseFontSize - 1; // 14px to 13px
|
||||
line-height: @baseLineHeight;
|
||||
@ -35,8 +35,6 @@ pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
.border-radius(@baseBorderRadius);
|
||||
|
||||
// Make prettyprint styles more spaced out for readability
|
||||
&.prettyprint {
|
||||
|
||||
3
public/less/bootstrap/bootstrap.less
vendored
3
public/less/bootstrap/bootstrap.less
vendored
@ -21,8 +21,6 @@
|
||||
@import "forms.less";
|
||||
|
||||
// Components: common
|
||||
@import "dropdowns.less";
|
||||
@import "component-animations.less";
|
||||
@import "close.less";
|
||||
|
||||
// Components: Buttons & Alerts
|
||||
@ -33,7 +31,6 @@
|
||||
@import "navs.less";
|
||||
|
||||
// Components: Popovers
|
||||
@import "modals.less";
|
||||
@import "tooltip.less";
|
||||
|
||||
// Components: Misc
|
||||
|
||||
@ -1,22 +0,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;
|
||||
}
|
||||
}
|
||||
@ -1,87 +0,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;
|
||||
}
|
||||
}
|
||||
@ -212,19 +212,7 @@ a:hover {
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: @grafanaPanelBackground;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid @grafanaPanelBackground;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: @grafanaPanelBackground;
|
||||
border-top: 1px solid @grafanaPanelBackground;
|
||||
.border-radius(0 0 0px 0px);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
z-index: @zindexDropdown;
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
min-width: 140px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0; // override default ul
|
||||
list-style: none;
|
||||
@ -67,12 +67,17 @@
|
||||
// Links within the dropdown menu
|
||||
> li > a {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
padding: 3px 20px 3px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: @baseLineHeight;
|
||||
color: @dropdownLinkColor;
|
||||
white-space: nowrap;
|
||||
|
||||
i {
|
||||
padding-right: 5px;
|
||||
color: @linkColorDisabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
149
public/less/components/modals.less
Normal file
149
public/less/components/modals.less
Normal file
@ -0,0 +1,149 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
24
public/less/components/tags.less
Normal file
24
public/less/components/tags.less
Normal file
@ -0,0 +1,24 @@
|
||||
|
||||
// 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%);
|
||||
}
|
||||
|
||||
6
public/less/components/typeahead.less
Normal file
6
public/less/components/typeahead.less
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
// typeahead max height
|
||||
.typeahead {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
@import "variables.dark.less";
|
||||
@import "bootstrap/bootstrap.less";
|
||||
@import "bootswatch.dark.less";
|
||||
@import "overrides.less";
|
||||
@import "grafana.less";
|
||||
|
||||
@ -39,6 +39,10 @@
|
||||
@import "./components/navbar.less";
|
||||
@import "./components/popovers.less";
|
||||
@import "./components/alerts.less";
|
||||
@import "./components/typeahead.less";
|
||||
@import "./components/tags.less";
|
||||
@import "./components/modals.less";
|
||||
@import "./components/dropdown.less";
|
||||
|
||||
// PAGES
|
||||
@import "./pages/login.less";
|
||||
@ -81,15 +85,6 @@
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
max-width: 800px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.histogram-chart {
|
||||
position:relative;
|
||||
}
|
||||
@ -237,93 +232,6 @@
|
||||
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 {
|
||||
font-weight: bold;
|
||||
color: @blue;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@import "variables.light.less";
|
||||
@import "bootstrap/bootstrap.less";
|
||||
@import "bootswatch.light.less";
|
||||
@import "overrides.less";
|
||||
@import "grafana.less";
|
||||
|
||||
@ -1,266 +0,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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user