mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux: progress on time picker dropdown version
This commit is contained in:
Torkel Ödegaard
@@ -1,175 +0,0 @@
|
||||
//
|
||||
// Modals
|
||||
// --------------------------------------------------
|
||||
|
||||
// Background
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
background-color: $modal-backdrop-bg;
|
||||
}
|
||||
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.fade.in {
|
||||
@include opacity(70);
|
||||
}
|
||||
|
||||
// Base modal
|
||||
.modal {
|
||||
position: fixed;
|
||||
z-index: $zindex-modal;
|
||||
width: 100%;
|
||||
background-color: $panel-bg;
|
||||
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||
@include background-clip(padding-box);
|
||||
outline: none;
|
||||
|
||||
max-width: 750px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: $body-bg;
|
||||
@include brand-bottom-border();
|
||||
@include clearfix();
|
||||
|
||||
.gf-tabs-link.active {
|
||||
background-color: $panel-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header-title {
|
||||
font-size: $font-size-h3;
|
||||
float: left;
|
||||
padding-top: $spacer * 0.75;
|
||||
margin: 0 $spacer*3 0 $spacer*1.5;
|
||||
}
|
||||
|
||||
.modal-header-close {
|
||||
float: right;
|
||||
padding: 0.75rem $spacer;
|
||||
}
|
||||
|
||||
// Body (where all modal content resides)
|
||||
.modal-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $spacer*2;
|
||||
}
|
||||
|
||||
// Remove bottom margin if need be
|
||||
.modal-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
padding: 14px 15px 15px;
|
||||
border-top: 1px solid $panel-bg;
|
||||
background-color: $panel-bg;
|
||||
text-align: right; // right align buttons
|
||||
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
|
||||
}
|
||||
|
||||
.modal--narrow {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.confirm-modal {
|
||||
max-width: 500px;
|
||||
|
||||
.confirm-modal-icon {
|
||||
padding-top: 41px;
|
||||
font-size: 280%;
|
||||
color: $green;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.confirm-modal-text {
|
||||
font-size: $font-size-h4;
|
||||
color: $link-color;
|
||||
margin-bottom: $spacer*2;
|
||||
padding-top: $spacer;
|
||||
}
|
||||
|
||||
.confirm-modal-text2 {
|
||||
font-size: $font-size-root;
|
||||
padding-top: $spacer;
|
||||
}
|
||||
|
||||
.confirm-modal-buttons {
|
||||
margin-bottom: $spacer;
|
||||
button {
|
||||
margin-right: $spacer/2;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content-confirm-text {
|
||||
margin-bottom: 2rem;
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-modal-body {
|
||||
padding: 10px 0;
|
||||
|
||||
.tight-form {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.share-modal-options {
|
||||
margin: 11px 0px 33px 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.share-modal-big-icon {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 2rem;
|
||||
.fa, .icon-gf {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.share-modal-info-text {
|
||||
margin-top: 5px;
|
||||
strong {
|
||||
color: $headings-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.share-modal-header {
|
||||
display: flex;
|
||||
margin: 0px 0 22px 0;
|
||||
}
|
||||
|
||||
.share-modal-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tight-form {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.share-modal-link {
|
||||
max-width: 716px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,159 +0,0 @@
|
||||
|
||||
.page-header-canvas {
|
||||
background: linear-gradient(90deg, #292a2d, black);
|
||||
box-shadow: inset 0px -4px 14px $dark-2;
|
||||
border-bottom: 1px solid $dark-4;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 2.5rem 0 0 0;
|
||||
|
||||
.btn {
|
||||
float: right;
|
||||
margin-left: 1rem;
|
||||
|
||||
// better align icons
|
||||
.fa {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__inner {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.page-header__title {
|
||||
font-size: $font-size-h2;
|
||||
margin-bottom: 1px;
|
||||
padding-top: $spacer;
|
||||
}
|
||||
|
||||
.page-header__img {
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.page-header__icon {
|
||||
font-size: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
|
||||
&.fa {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.gicon {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.icon-gf {
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__logo {
|
||||
margin: 0 $spacer;
|
||||
}
|
||||
|
||||
.page-header__sub-title {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.page-header-stamps-type {
|
||||
color: $link-color-disabled;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-breadcrumbs {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
counter-reset: flag;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
|
||||
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
padding: 0 7px 0 37px;
|
||||
position: relative;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 10px;
|
||||
border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background: #333;
|
||||
background: linear-gradient(#333, #000);
|
||||
}
|
||||
|
||||
&.active::after,
|
||||
&:hover::after {
|
||||
background: #333;
|
||||
background: linear-gradient(135deg, #333, #000);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -14px; // half of square's length
|
||||
|
||||
// same dimension as the line-height of .breadcrumb-item
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
transform: scale(0.707) rotate(45deg);
|
||||
// we need to prevent the arrows from getting buried under the next link
|
||||
z-index: 1;
|
||||
|
||||
// background same as links but the gradient will be rotated to compensate with the transform applied
|
||||
background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
|
||||
|
||||
// stylish arrow design using box shadow
|
||||
box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
|
||||
|
||||
// 5px - for rounded arrows and
|
||||
// 50px - to prevent hover glitches on the border created using shadows*/
|
||||
border-radius: 0 5px 0 50px;
|
||||
}
|
||||
|
||||
// we dont need an arrow after the last link
|
||||
&:last-child::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user