mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge branch 'develop' into develop-light-theme
This commit is contained in:
Patrick O'Carroll
@@ -21,7 +21,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@include media-breakpoint-down(sm) {
|
||||
.react-grid-layout {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
position: relative;
|
||||
top: -3px;
|
||||
width: 250px;
|
||||
font-size: 80%;
|
||||
font-size: $font-size-sm;
|
||||
margin-left: 22px;
|
||||
color: $gray-2;
|
||||
white-space: normal;
|
||||
@@ -91,7 +91,6 @@
|
||||
color: $link-color-disabled;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.gicon {
|
||||
@@ -300,7 +299,7 @@
|
||||
// Typeahead
|
||||
// ---------
|
||||
.typeahead {
|
||||
z-index: 1051;
|
||||
z-index: $zindex-typeahead;
|
||||
margin-top: 2px; // give it some space to breathe
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
.footer {
|
||||
color: $footer-link-color;
|
||||
padding: 5rem 0 1rem 0;
|
||||
font-size: $font-size-xs;
|
||||
font-size: $font-size-sm;
|
||||
width: 98%; /* was causing horiz scrollbars - need to examine */
|
||||
|
||||
a {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
$gf-form-margin: 3px;
|
||||
$input-border: 1px solid $input-border-color;
|
||||
|
||||
.gf-form {
|
||||
margin-bottom: $gf-form-margin;
|
||||
@@ -20,6 +21,15 @@ $gf-form-margin: 3px;
|
||||
&--flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&--alt {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.gf-form-label {
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-disabled {
|
||||
@@ -115,7 +125,7 @@ $gf-form-margin: 3px;
|
||||
background-color: $input-bg;
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid $input-border-color;
|
||||
border: $input-border;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
@include box-shadow($input-box-shadow);
|
||||
white-space: nowrap;
|
||||
@@ -268,6 +278,7 @@ $gf-form-margin: 3px;
|
||||
position: relative;
|
||||
background-color: $input-bg;
|
||||
padding-right: $input-padding-x;
|
||||
border: $input-border;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
@@ -279,6 +290,10 @@ $gf-form-margin: 3px;
|
||||
content: '\f0d7';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gf-form-input {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-help-icon {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
position: fixed;
|
||||
z-index: $zindex-modal;
|
||||
width: 100%;
|
||||
background-color: $panel-bg;
|
||||
background: $page-bg;
|
||||
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||
@include background-clip(padding-box);
|
||||
outline: none;
|
||||
@@ -37,13 +37,10 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: $body-bg;
|
||||
@include brand-bottom-border();
|
||||
@include clearfix();
|
||||
|
||||
.gf-tabs-link.active {
|
||||
background-color: $panel-bg;
|
||||
}
|
||||
background: $page-header-bg;
|
||||
box-shadow: $page-header-shadow;
|
||||
border-bottom: 1px solid $page-header-border-color;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.modal-header-title {
|
||||
|
||||
@@ -1,19 +1,14 @@
|
||||
|
||||
.navbar {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
padding-left: $side-menu-width;
|
||||
box-shadow: $navbarShadow;
|
||||
z-index: 1;
|
||||
background: $navbarBackground;
|
||||
}
|
||||
|
||||
.navbar-inner {
|
||||
min-height: $navbarHeight;
|
||||
// box-shadow: $navbarShadow;
|
||||
z-index: $zindex-navbar-fixed;
|
||||
// background: $navbarBackground;
|
||||
height: $navbarHeight;
|
||||
padding-right: $spacer;
|
||||
display: flex;
|
||||
@include clearfix();
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sidemenu-open {
|
||||
@@ -22,47 +17,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .nav {
|
||||
position: relative;
|
||||
left: 0;
|
||||
float: left;
|
||||
|
||||
&--grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Links
|
||||
.navbar .nav > li > a {
|
||||
float: none;
|
||||
padding: 17px 13px 13px;
|
||||
color: $navbarLinkColor;
|
||||
text-decoration: none;
|
||||
|
||||
.fa { font-size: 115%; }
|
||||
}
|
||||
|
||||
// Hover/focus
|
||||
.navbar .nav > li > a:focus,
|
||||
.navbar .nav > li > a:hover {
|
||||
color: $navbarLinkColorHover;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Active nav items
|
||||
.navbar .nav > .active > a,
|
||||
.navbar .nav > .active > a:hover,
|
||||
.navbar .nav > .active > a:focus {
|
||||
color: $navbarLinkColorActive;
|
||||
text-decoration: none;
|
||||
background-color: $navbarLinkBackgroundActive;
|
||||
}
|
||||
|
||||
.navbar-page-btn {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@@ -106,3 +60,54 @@
|
||||
.navbar-mini-btn-wrapper {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.navbar-buttons {
|
||||
height: $navbarHeight;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
|
||||
.navbar__spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.navbar-button {
|
||||
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
|
||||
|
||||
display: inline-block;
|
||||
font-weight: $btn-font-weight;
|
||||
padding: 8px 11px;
|
||||
line-height: 16px;
|
||||
color: $text-muted;
|
||||
border: 1px solid #151515;
|
||||
margin-right: 1px;
|
||||
white-space: nowrap;
|
||||
|
||||
.gicon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&--add-panel {
|
||||
padding: 5px 10px;
|
||||
|
||||
.gicon {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&--tight {
|
||||
padding: 9px 4px;
|
||||
|
||||
.fa {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
159
public/sass/components/_page_header.scss
Normal file
159
public/sass/components/_page_header.scss
Normal file
@@ -0,0 +1,159 @@
|
||||
|
||||
.page-header-canvas {
|
||||
background: $page-header-bg;
|
||||
box-shadow: $page-header-shadow;
|
||||
border-bottom: 1px solid $page-header-border-color;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,47 @@
|
||||
|
||||
.add-panel {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.add-panel__header {
|
||||
padding: 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.add-panel__title {
|
||||
font-size: $font-size-md;
|
||||
margin-right: $spacer/2;
|
||||
}
|
||||
|
||||
.add-panel__sub-title {
|
||||
font-style: italic;
|
||||
color: $text-muted;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.add-panel__items {
|
||||
padding: 3px 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
height: calc(100% - 43px);
|
||||
align-content: flex-start;
|
||||
justify-content: space-around;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.add-panel__item {
|
||||
background: $card-background;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
border: $panel-border;
|
||||
border-radius: 3px;
|
||||
padding: $spacer/3 $spacer;
|
||||
width: 31%;
|
||||
height: 60px;
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
@include gradient-vertical($blue, lighten($blue, 20%));
|
||||
@include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
|
||||
border-radius: 6px;
|
||||
width: 6px;
|
||||
/* there must be 'right' for ps__thumb-y */
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
top: $navbarHeight;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
background-color: $black;
|
||||
@include opacity(70);
|
||||
@include opacity(75);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
@@ -44,12 +44,6 @@
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.search-switches {
|
||||
flex-grow: 1;
|
||||
padding: 1rem 1rem 0.75rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search-field-icon {
|
||||
font-size: $font-size-lg;
|
||||
padding: 1rem 1rem 0.75rem 1.5rem;
|
||||
@@ -57,18 +51,45 @@
|
||||
|
||||
.search-dropdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 800px;
|
||||
background: $page-bg;
|
||||
flex-direction: row;
|
||||
height: calc(100% - #{$navbarHeight});
|
||||
}
|
||||
|
||||
.search-dropdown__col_1 {
|
||||
background: $page-bg;
|
||||
max-width: 700px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.search-dropdown__col_2 {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.search-filter-box {
|
||||
background: $search-filter-box-bg;
|
||||
border-radius: 2px;
|
||||
padding: $spacer*1.5;
|
||||
max-width: 340px;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
margin-left: $spacer * 1.5;
|
||||
}
|
||||
|
||||
.search-filter-box__header {
|
||||
border-bottom: 1px solid $dark-5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
.search-results-container {
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: $spacer;
|
||||
position: relative;
|
||||
flex-grow: 10;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.label-tag {
|
||||
margin-left: 6px;
|
||||
@@ -84,9 +105,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.search-section {
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
padding: $panel-padding;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.search-section__header {
|
||||
font-size: $font-size-h6;
|
||||
padding: 0.6rem 0;
|
||||
padding: 8px 0 2px 0;
|
||||
color: $text-color-weak;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
@@ -105,7 +134,7 @@
|
||||
}
|
||||
|
||||
.search-section__header__icon {
|
||||
padding: 3px 10px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.search-section__header__toggle {
|
||||
@@ -170,24 +199,34 @@
|
||||
}
|
||||
|
||||
.search-item__tags {
|
||||
padding: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-item__actions {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.search-item__actions__item {
|
||||
display: none;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
.fa-star, .fa-star-o {
|
||||
color: $orange;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-item:hover {
|
||||
.search-item__actions__item {
|
||||
opacity: 0.8;
|
||||
width: 15px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.search-button-row {
|
||||
text-align: center;
|
||||
padding: $spacer*2 $spacer;
|
||||
background: $panel-bg;
|
||||
}
|
||||
|
||||
@@ -4,26 +4,34 @@
|
||||
flex-flow: column;
|
||||
flex-direction: column;
|
||||
width: $side-menu-width;
|
||||
background: $navbarBackground;
|
||||
z-index: 10;
|
||||
|
||||
z-index: $zindex-sidemenu;
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidemenu__logo_small_breakpoint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidemenu__close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-open {
|
||||
.sidemenu {
|
||||
background: $side-menu-bg;
|
||||
position: initial;
|
||||
height: auto;
|
||||
box-shadow: $side-menu-shadow;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.sidemenu__top,
|
||||
.sidemenu__bottom {
|
||||
display: block;
|
||||
@include media-breakpoint-up(sm) {
|
||||
.sidemenu-open {
|
||||
.sidemenu {
|
||||
background: $side-menu-bg;
|
||||
position: initial;
|
||||
height: auto;
|
||||
box-shadow: $side-menu-shadow;
|
||||
position: relative;
|
||||
z-index: $zindex-sidemenu;
|
||||
}
|
||||
.sidemenu__top,
|
||||
.sidemenu__bottom {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,21 +50,23 @@
|
||||
position: relative;
|
||||
@include left-brand-border();
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: $side-menu-item-hover-bg;
|
||||
@include left-brand-border-gradient();
|
||||
@include media-breakpoint-up(sm) {
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: $side-menu-item-hover-bg;
|
||||
@include left-brand-border-gradient();
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
top: 0px;
|
||||
// important to overlap it otherwise it can be hidden
|
||||
// again by the mouse getting outside the hover space
|
||||
left: $side-menu-width - 2px;
|
||||
@include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
|
||||
z-index: 1;
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
top: 0px;
|
||||
// important to overlap it otherwise it can be hidden
|
||||
// again by the mouse getting outside the hover space
|
||||
left: $side-menu-width - 2px;
|
||||
@include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
|
||||
z-index: $zindex-sidemenu;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -154,7 +164,7 @@ li.sidemenu-org-switcher {
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu__logo {
|
||||
.sidemenu__logo, .sidemenu__logo_small_breakpoint {
|
||||
display: block;
|
||||
padding: 0.4rem 1.0rem 0.4rem 0.65rem;
|
||||
min-height: $navbarHeight;
|
||||
@@ -172,3 +182,84 @@ li.sidemenu-org-switcher {
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.sidemenu-open {
|
||||
.navbar {
|
||||
padding-left: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-open--xs {
|
||||
.sidemenu {
|
||||
width: 100%;
|
||||
background: $side-menu-bg;
|
||||
position: initial;
|
||||
height: auto;
|
||||
box-shadow: $side-menu-shadow;
|
||||
position: relative;
|
||||
z-index: $zindex-sidemenu;
|
||||
}
|
||||
|
||||
.sidemenu__close {
|
||||
display: block;
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
.sidemenu__top,
|
||||
.sidemenu__bottom {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu {
|
||||
.sidemenu__logo {
|
||||
display: none;
|
||||
}
|
||||
.sidemenu__logo_small_breakpoint {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu__top {
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
.side-menu-header {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.sidemenu-link {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sidemenu-icon {
|
||||
display: none
|
||||
}
|
||||
|
||||
.dropdown-menu--sidemenu {
|
||||
display: block;
|
||||
position: unset;
|
||||
width: 100%;
|
||||
float: none;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
> li > a {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu__bottom {
|
||||
.dropdown-menu--sidemenu {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,10 @@
|
||||
}
|
||||
|
||||
.tabbed-view-header {
|
||||
background: $page-header-bg;
|
||||
box-shadow: $page-header-shadow;
|
||||
border-bottom: 1px solid $page-header-border-color;
|
||||
@include clearfix();
|
||||
@include brand-bottom-border();
|
||||
}
|
||||
|
||||
.tabbed-view-title {
|
||||
@@ -34,7 +36,7 @@
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
|
||||
padding: $tabs-padding;
|
||||
color: $text-color;
|
||||
i {
|
||||
font-size: 120%;
|
||||
|
||||
@@ -1,41 +1,8 @@
|
||||
.nav-tabs-alt {
|
||||
& > li > a {
|
||||
color: darken($link-color, 20%);
|
||||
}
|
||||
|
||||
li > a:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li.active > a,
|
||||
li.active > a:focus,
|
||||
li.active > a:hover {
|
||||
@include border-radius(3px);
|
||||
border: 1px solid $divider-border-color;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid $page-bg;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
li.disabled > a {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.open .dropdown-toggle {
|
||||
background-color: #060606;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 10px;
|
||||
background-color: $panel-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-tabs {
|
||||
@include clearfix();
|
||||
float: left;
|
||||
margin: $tabs-top-margin 0 0 0;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.gf-tabs-item {
|
||||
@@ -44,13 +11,17 @@
|
||||
}
|
||||
|
||||
.gf-tabs-link {
|
||||
padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer;
|
||||
padding: $tabs-padding;
|
||||
margin-right: $spacer/2;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
display: block;
|
||||
border: solid transparent;
|
||||
border-width: 2px 1px 1px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
||||
@include border-radius(2px 2px 0 0);
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@@ -60,20 +31,9 @@
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
@include border-radius(3px);
|
||||
border-color: rgba(216, 131, 40, 0.77);
|
||||
border-bottom: 1px solid $page-bg;
|
||||
border-color: $orange $dark-4 transparent;
|
||||
background: $page-bg;
|
||||
color: $link-color;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-tabs-wrapper {
|
||||
@include brand-bottom-border();
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.form-tabs-content {
|
||||
padding: $spacer*2 $spacer;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
.nav.gf-timepicker-nav {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.timepicker-timestring {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.gf-timepicker-nav {
|
||||
flex-wrap: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gf-timepicker-nav-btn {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gf-timepicker-dropdown {
|
||||
@@ -118,14 +118,3 @@
|
||||
@extend .fa-chevron-left;
|
||||
}
|
||||
|
||||
.gf-timepicker-time-control {
|
||||
font-size: $font-size-sm;
|
||||
a {
|
||||
padding: 18px 7px 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dashnav-move-timeframe {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
@@ -21,33 +21,22 @@
|
||||
|
||||
.playlist-active,
|
||||
.user-activity-low {
|
||||
.react-resizable-handle
|
||||
.add-row-panel-hint,
|
||||
.dash-row-menu-container,
|
||||
.panel-drop-zone
|
||||
.dashnav-refresh-action,
|
||||
.dashnav-zoom-out,
|
||||
.navbar-button--refresh,
|
||||
.navbar-buttons--zoom,
|
||||
.navbar-buttons--actions,
|
||||
.panel-menu-container,
|
||||
.dashnav-action-icons,
|
||||
.panel-info-corner--info,
|
||||
.panel-info-corner--links,
|
||||
.dashnav-move-timeframe {
|
||||
.panel-info-corner--links {
|
||||
opacity: 0;
|
||||
transition: all 1.5s ease-in-out 1s;
|
||||
}
|
||||
|
||||
// navbar buttons
|
||||
.navbar {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
transition: all 1.5s ease-in-out 1s;
|
||||
.fa {
|
||||
opacity: 0;
|
||||
transition: all 1.5s ease-in-out 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.navbar-page-btn {
|
||||
|
||||
Reference in New Issue
Block a user