Skip to content

N
nexpie-grafana-theme
Commit 008a0314 by Torkel Ödegaard
Options

ux(sass): fixes and tweaks

parent b05939ec
Showing with 151 additions and 297 deletions
public/app/core/components/navbar/navbar.html
<div class="navbar"> <div class="navbar-inner">
<div class="navbar-inner"> <div class="top-nav-btn top-nav-menu-btn">
<div class="top-nav-btn top-nav-menu-btn"> <a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()"> <span class="top-nav-logo-background">
<span class="top-nav-logo-background"> <img class="logo-icon" src="public/img/grafana_icon.svg"></img>
<img class="logo-icon" src="public/img/grafana_icon.svg"></img> </span>
</span> <i class="icon-gf icon-gf-grafana_wordmark"></i>
<i class="icon-gf icon-gf-grafana_wordmark"></i> <i class="fa fa-caret-down"></i>
<i class="fa fa-caret-down"></i> </a>
</a> </div>
</div>
<div ng-if="ctrl.title">
<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
</nav-button>
</div>
<div ng-transclude></div> <div ng-if="ctrl.title">
<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
</nav-button>
</div> </div>
</div>
<div ng-transclude></div>
</div>
public/app/core/components/navbar/navbar.ts
...@@ -25,6 +25,7 @@ export function navbarDirective() { ...@@ -25,6 +25,7 @@ export function navbarDirective() {
}, },
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
ctrl.icon = attrs.icon; ctrl.icon = attrs.icon;
elem.addClass('navbar');
} }
}; };
} }
......
public/app/features/org/partials/orgDetails.html
...@@ -17,9 +17,10 @@ ...@@ -17,9 +17,10 @@
</div> </div>
</form> </form>
<h3>Address</h3>
<form name="addressForm" class="gf-form-group"> <form name="addressForm" class="gf-form-group">
<h3>Address</h3>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl"> <div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address1</span> <span class="gf-form-label gf-size-sm">Address1</span>
......
public/app/features/org/partials/orgUsers.html
...@@ -2,15 +2,13 @@ ...@@ -2,15 +2,13 @@
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page-wide"> <div class="page-header">
<h1>Organization users</h1>
<button class="btn btn-success pull-right" ng-click="openInviteModal()"> <button class="btn btn-success" ng-click="openInviteModal()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Add or Invite Add or Invite
</button> </button>
</div>
<h1>Organization users</h1>
<br>
<tabset> <tabset>
<tab heading="Users ({{users.length}})"> <tab heading="Users ({{users.length}})">
......
public/sass/_old_responsive.scss
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
display: none; display: none;
} }
.page-container { .page-container {
padding: 10px 20px; padding: ($spacer * 1) ($spacer * 2);
} }
} }
......
public/sass/_variables.dark.scss
...@@ -105,7 +105,6 @@ $table-border: $gray-dark; // table and cell border ...@@ -105,7 +105,6 @@ $table-border: $gray-dark; // table and cell border
// ------------------------- // -------------------------
$btnBackground: $gray-dark; $btnBackground: $gray-dark;
$btnBackgroundHighlight: darken($gray-light, 15%); $btnBackgroundHighlight: darken($gray-light, 15%);
$btnBackgroundShadow: darken($gray-light, 15%);
$btnBorder: #bbb; $btnBorder: #bbb;
$btnPrimaryBackground: $blue-dark; $btnPrimaryBackground: $blue-dark;
......
public/sass/_variables.scss
...@@ -78,8 +78,8 @@ $grid-gutter-width: 30px !default; ...@@ -78,8 +78,8 @@ $grid-gutter-width: 30px !default;
$enable-flex: false; $enable-flex: false;
$form-sizes: ( $form-sizes: (
xs: 60px, xs: 80px,
sm: 80px, sm: 100px,
md: 120px, md: 120px,
lg: 150px, lg: 150px,
xl: 200px, xl: 200px,
...@@ -172,7 +172,7 @@ $table-sm-cell-padding: .3rem !default; ...@@ -172,7 +172,7 @@ $table-sm-cell-padding: .3rem !default;
// Forms // Forms
$input-padding-x: .75rem !default; $input-padding-x: .75rem !default;
$input-padding-y: .5rem !default; $input-padding-y: .5rem !default;
$input-line-height: 1.25 !default; $input-line-height: 1.25rem !default;
$input-border-radius: $border-radius !default; $input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default; $input-border-radius-lg: $border-radius-lg !default;
......
public/sass/base/_forms.scss
...@@ -6,17 +6,6 @@ ...@@ -6,17 +6,6 @@
// GENERAL STYLES // GENERAL STYLES
// -------------- // --------------
// Make all forms have space below them
form {
margin: 0 0 $line-height-base;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
// Groups of fields with labels on top (legends) // Groups of fields with labels on top (legends)
legend { legend {
display: block; display: block;
...@@ -56,84 +45,69 @@ label { ...@@ -56,84 +45,69 @@ label {
display: block; display: block;
} }
// Form controls // // Form controls
// ------------------------- // // -------------------------
//
// Shared size and type resets // // Shared size and type resets
select, // select,
textarea, // textarea,
input[type="text"], // input[type="text"],
input[type="password"], // input[type="password"],
input[type="datetime"], // input[type="datetime"],
input[type="datetime-local"], // input[type="datetime-local"],
input[type="date"], // input[type="date"],
input[type="month"], // input[type="month"],
input[type="time"], // input[type="time"],
input[type="week"], // input[type="week"],
input[type="number"], // input[type="number"],
input[type="email"], // input[type="email"],
input[type="url"], // input[type="url"],
input[type="search"], // input[type="search"],
input[type="tel"], // input[type="tel"],
input[type="color"], // input[type="color"],
.uneditable-input { // .uneditable-input {
display: inline-block; // display: inline-block;
height: $input-height; // height: $input-height;
line-height: $input-line-height; // line-height: $input-line-height;
padding: 4px 6px; // padding: 4px 6px;
font-size: $font-size-base; // font-size: $font-size-base;
color: $input-color; // color: $input-color;
vertical-align: top; // vertical-align: top;
} // }
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea,
.uneditable-input {
width: 206px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows // Reset height since textareas have rows
textarea { textarea {
height: auto; height: auto;
} }
// Everything else // // Everything else
textarea, // textarea,
input[type="text"], // input[type="text"],
input[type="password"], // input[type="password"],
input[type="datetime"], // input[type="datetime"],
input[type="datetime-local"], // input[type="datetime-local"],
input[type="date"], // input[type="date"],
input[type="month"], // input[type="month"],
input[type="time"], // input[type="time"],
input[type="week"], // input[type="week"],
input[type="number"], // input[type="number"],
input[type="email"], // input[type="email"],
input[type="url"], // input[type="url"],
input[type="search"], // input[type="search"],
input[type="tel"], // input[type="tel"],
input[type="color"], // input[type="color"] {
.uneditable-input { // background-color: $input-bg;
background-color: $input-bg; // border: 1px solid $input-border-color;
border: 1px solid $input-border-color; // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // @include transition("border linear .2s, box-shadow linear .2s");
@include transition("border linear .2s, box-shadow linear .2s"); //
// // Focus state
// Focus state // &:focus {
&:focus { // border-color: rgba(82,168,236, .8);
border-color: rgba(82,168,236, .8); // outline: 0;
outline: 0; // @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
@include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); // }
} // }
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes // Reset width of input images, buttons, radios, checkboxes
input[type="file"], input[type="file"],
...@@ -207,7 +181,7 @@ textarea[disabled], ...@@ -207,7 +181,7 @@ textarea[disabled],
input[readonly], input[readonly],
select[readonly], select[readonly],
textarea[readonly] { textarea[readonly] {
cursor: not-allowed; cursor: $cursor-disabled;
background-color: $input-bg-disabled; background-color: $input-bg-disabled;
} }
...@@ -216,6 +190,7 @@ input[type="radio"][disabled], ...@@ -216,6 +190,7 @@ input[type="radio"][disabled],
input[type="checkbox"][disabled], input[type="checkbox"][disabled],
input[type="radio"][readonly], input[type="radio"][readonly],
input[type="checkbox"][readonly] { input[type="checkbox"][readonly] {
cursor: $cursor-disabled;
background-color: transparent; background-color: transparent;
} }
......
public/sass/components/_gf-form.scss
...@@ -42,12 +42,15 @@ $gf-form-margin: 4px; ...@@ -42,12 +42,15 @@ $gf-form-margin: 4px;
} }
.gf-form-label { .gf-form-label {
padding: $input-padding-y $input-padding-x;
line-height: $input-line-height;
flex-shrink: 0; flex-shrink: 0;
background-color: $input-label-bg; background-color: $input-label-bg;
display: block; display: block;
padding: 8px 7px;
font-size: $font-size-sm; font-size: $font-size-sm;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent;
} }
.gf-form-checkbox { .gf-form-checkbox {
...@@ -65,53 +68,46 @@ $gf-form-margin: 4px; ...@@ -65,53 +68,46 @@ $gf-form-margin: 4px;
.gf-size-max { width: 100%; } .gf-size-max { width: 100%; }
.gf-size-auto { width: auto; } .gf-size-auto { width: auto; }
.gf-form-input {
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-image: none;
background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color;
@include border-radius($input-border-radius);
@include box-shadow($input-box-shadow);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
&::placeholder {
color: $input-color-placeholder;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
&:disabled,
&[readonly] {
background-color: $input-bg-disabled;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
select, &:disabled {
[type=text], cursor: $cursor-disabled;
[type=email],
[type=number],
[type=password] {
&.gf-form-input {
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-image: none;
background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color;
@include border-radius($input-border-radius);
@include box-shadow($input-box-shadow);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
&::placeholder {
color: $input-color-placeholder;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
&:disabled,
&[readonly] {
background-color: $input-bg-disabled;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
&:disabled {
cursor: $cursor-disabled;
}
} }
&.gf-size-auto { width: auto; } &.gf-size-auto { width: auto; }
......
public/sass/components/_navbar.scss
.navbar { .navbar {
display: block;
overflow: visible; overflow: visible;
position: relative; position: relative;
z-index: 110; z-index: 110;
......
public/sass/components/_navs.scss
...@@ -16,78 +16,23 @@ ...@@ -16,78 +16,23 @@
.nav > li > a { .nav > li > a {
display: block; display: block;
} }
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: $gray-lighter;
}
// Redeclare pull classes because of specifity // Redeclare pull classes because of specifity
.nav > .pull-right { .nav > .pull-right {
float: right; float: right;
} }
// Nav headers (for dropdowns and lists)
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: $line-height-base;
color: $gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// NAV LIST
// --------
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: $white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: $link-color;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
// TABS AND PILLS // TABS AND PILLS
// ------------- // -------------
// Common styles // Common styles
.nav-tabs, .nav-tabs {
.nav-pills {
@include clearfix(); @include clearfix();
} }
.nav-tabs > li, .nav-tabs > li {
.nav-pills > li {
float: left; float: left;
} }
.nav-tabs > li > a, .nav-tabs > li > a {
.nav-pills > li > a {
padding-right: 12px; padding-right: 12px;
padding-left: 12px; padding-left: 12px;
margin-right: 2px; margin-right: 2px;
...@@ -99,12 +44,16 @@ ...@@ -99,12 +44,16 @@
// Give the tabs something to sit on // Give the tabs something to sit on
.nav-tabs { .nav-tabs {
border-bottom: 1px solid #ddd; border-bottom: 1px solid $divider-border-color;
padding-left: 10px;
margin: 0 0 10px 0;
} }
// Make the list-items overlay the bottom border // Make the list-items overlay the bottom border
.nav-tabs > li { .nav-tabs > li {
margin-bottom: -1px; margin-bottom: -1px;
} }
// Actual tabs (as links) // Actual tabs (as links)
.nav-tabs > li > a { .nav-tabs > li > a {
padding-top: 8px; padding-top: 8px;
...@@ -114,80 +63,18 @@ ...@@ -114,80 +63,18 @@
@include border-radius(4px 4px 0 0); @include border-radius(4px 4px 0 0);
&:hover, &:hover,
&:focus { &:focus {
border-color: $gray-lighter $gray-lighter #ddd; border-color: $divider-border-color;
} }
} }
// Active state, and it's :hover/:focus to override normal :hover/:focus // Active state, and it's :hover/:focus to override normal :hover/:focus
.nav-tabs > .active > a, .nav-tabs > .active > a,
.nav-tabs > .active > a:hover, .nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus { .nav-tabs > .active > a:focus {
color: $gray; @include border-radius(3px);
background-color: $body-bg; border: 1px solid $divider-border-color;
border: 1px solid #ddd; background-color: transparent;
border-bottom-color: transparent; border-bottom: 1px solid $panel-bg;
cursor: default; color: $link-color;
}
// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.nav .dropdown-toggle .caret {
border-top-color: $link-color;
border-bottom-color: $link-color;
margin-top: 6px;
}
.nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret {
border-top-color: $link-hover-color;
border-bottom-color: $link-hover-color;
}
/* move down carets for tabs */
.nav-tabs .dropdown-toggle .caret {
margin-top: 8px;
}
// Active dropdown links
// -------------------------
.nav .active .dropdown-toggle .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.nav-tabs .active .dropdown-toggle .caret {
border-top-color: $gray;
border-bottom-color: $gray;
}
// Active:hover/:focus dropdown links
// -------------------------
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
// Open dropdowns
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
color: $white;
background-color: $gray-light;
border-color: $gray-light;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
border-top-color: $white;
border-bottom-color: $white;
@include opacity(100);
}
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover,
.tabs-stacked .open > a:focus {
border-color: $gray-light;
} }
// Show/hide tabbable areas // Show/hide tabbable areas
......
public/sass/components/_tabs.scss
.nav-tabs-alt { .nav-tabs-alt {
border-bottom: 1px solid $divider-border-color;
padding-left: 10px;
margin: 0 0 10px 0;
& > li > a { & > li > a {
color: darken($link-color, 20%); color: darken($link-color, 20%);
...@@ -16,7 +13,7 @@ ...@@ -16,7 +13,7 @@
li.active > a:focus, li.active > a:focus,
li.active > a:hover { li.active > a:hover {
@include border-radius(3px); @include border-radius(3px);
border: 1px solid $divider-border-color; border: 1px solid $divider-border-color;
background-color: transparent; background-color: transparent;
border-bottom: 1px solid $panel-bg; border-bottom: 1px solid $panel-bg;
color: $link-color; color: $link-color;
......
public/sass/components/_tightform.scss
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
.tight-form-func { .tight-form-func {
background: $tight-form-func-bg; background: $tight-form-func-bg;
&.show-function-controls { &.show-function-controls {
padding-top: 5px; padding-top: 5px;
min-width: 100px; min-width: 100px;
...@@ -131,7 +131,7 @@ input[type=text].tight-form-clear-input { ...@@ -131,7 +131,7 @@ input[type=text].tight-form-clear-input {
padding: 8px 7px; padding: 8px 7px;
border: none; border: none;
margin: 0px; margin: 0px;
background: transparent; background: transparent;
border-radius: 0; border-radius: 0;
border-right: 1px solid $tight-form-border; border-right: 1px solid $tight-form-border;
} }
...@@ -141,6 +141,7 @@ input[type=text].tight-form-clear-input { ...@@ -141,6 +141,7 @@ input[type=text].tight-form-clear-input {
[type=number], [type=number],
[type=password] { [type=password] {
&.tight-form-input { &.tight-form-input {
background-color: $input-bg;
border: none; border: none;
border-right: 1px solid $tight-form-border; border-right: 1px solid $tight-form-border;
margin: 0px; margin: 0px;
...@@ -167,6 +168,7 @@ input[type=checkbox].tight-form-checkbox { ...@@ -167,6 +168,7 @@ input[type=checkbox].tight-form-checkbox {
select.tight-form-input { select.tight-form-input {
border: none; border: none;
border-right: 1px solid $tight-form-border; border-right: 1px solid $tight-form-border;
background-color: $input-bg;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
height: 36px; height: 36px;
......
public/sass/layout/_page.scss
...@@ -25,10 +25,11 @@ ...@@ -25,10 +25,11 @@
.page-container { .page-container {
background-color: $page-bg; background-color: $page-bg;
position: relative; position: relative;
padding: 25px 56px 10px 56px; padding: ($spacer * 2) ($spacer * 4);
max-width: 1060px; max-width: 1060px;
margin-left: 0; margin-left: 0;
height: 100%; //min-height: 100%;
padding-bottom: $spacer * 5;
} }
.page-header { .page-header {
......
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