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
|
// 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 {
|
|||||||
// 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 {
|
|||||||
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 {
|
||||||
|
|||||||
3
public/less/bootstrap/bootstrap.less
vendored
3
public/less/bootstrap/bootstrap.less
vendored
@ -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 @@
|
|||||||
@import "navs.less";
|
@import "navs.less";
|
||||||
|
|
||||||
// Components: Popovers
|
// Components: Popovers
|
||||||
@import "modals.less";
|
|
||||||
@import "tooltip.less";
|
@import "tooltip.less";
|
||||||
|
|
||||||
// Components: Misc
|
// 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);
|
.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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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 @@
|
|||||||
// 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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 "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";
|
||||||
|
|||||||
@ -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 @@
|
|||||||
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 @@
|
|||||||
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;
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
@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";
|
||||||
|
|||||||
@ -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