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="top-nav-btn top-nav-menu-btn">
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="top-nav-logo-background">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
</span>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
<i class="fa fa-caret-down"></i>
</a>
</div>
<div class="navbar-inner">
<div class="top-nav-btn top-nav-menu-btn">
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="top-nav-logo-background">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
</span>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
<i class="fa fa-caret-down"></i>
</a>
</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 ng-transclude></div>
</div>
public/app/core/components/navbar/navbar.ts
......@@ -25,6 +25,7 @@ export function navbarDirective() {
},
link: function(scope, elem, attrs, ctrl) {
ctrl.icon = attrs.icon;
elem.addClass('navbar');
}
};
}
......
public/app/features/org/partials/orgDetails.html
......@@ -17,9 +17,10 @@
</div>
</form>
<h3>Address</h3>
<form name="addressForm" class="gf-form-group">
<h3>Address</h3>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address1</span>
......
public/app/features/org/partials/orgUsers.html
......@@ -2,15 +2,13 @@
</navbar>
<div class="page-container">
<div class="page-wide">
<button class="btn btn-success pull-right" ng-click="openInviteModal()">
<div class="page-header">
<h1>Organization users</h1>
<button class="btn btn-success" ng-click="openInviteModal()">
<i class="fa fa-plus"></i>
Add or Invite
</button>
<h1>Organization users</h1>
<br>
</div>
<tabset>
<tab heading="Users ({{users.length}})">
......
public/sass/_old_responsive.scss
......@@ -28,7 +28,7 @@
display: none;
}
.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
// -------------------------
$btnBackground: $gray-dark;
$btnBackgroundHighlight: darken($gray-light, 15%);
$btnBackgroundShadow: darken($gray-light, 15%);
$btnBorder: #bbb;
$btnPrimaryBackground: $blue-dark;
......
public/sass/_variables.scss
......@@ -78,8 +78,8 @@ $grid-gutter-width: 30px !default;
$enable-flex: false;
$form-sizes: (
xs: 60px,
sm: 80px,
xs: 80px,
sm: 100px,
md: 120px,
lg: 150px,
xl: 200px,
......@@ -172,7 +172,7 @@ $table-sm-cell-padding: .3rem !default;
// Forms
$input-padding-x: .75rem !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-lg: $border-radius-lg !default;
......
public/sass/base/_forms.scss
......@@ -6,17 +6,6 @@
// 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)
legend {
display: block;
......@@ -56,84 +45,69 @@ label {
display: block;
}
// Form controls
// -------------------------
// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: $input-height;
line-height: $input-line-height;
padding: 4px 6px;
font-size: $font-size-base;
color: $input-color;
vertical-align: top;
}
// // Form controls
// // -------------------------
//
// // Shared size and type resets
// select,
// textarea,
// input[type="text"],
// input[type="password"],
// input[type="datetime"],
// input[type="datetime-local"],
// input[type="date"],
// input[type="month"],
// input[type="time"],
// input[type="week"],
// input[type="number"],
// input[type="email"],
// input[type="url"],
// input[type="search"],
// input[type="tel"],
// input[type="color"],
// .uneditable-input {
// display: inline-block;
// height: $input-height;
// line-height: $input-line-height;
// padding: 4px 6px;
// font-size: $font-size-base;
// color: $input-color;
// 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
textarea {
height: auto;
}
// Everything else
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: $input-bg;
border: 1px solid $input-border-color;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@include transition("border linear .2s, box-shadow linear .2s");
// Focus state
&:focus {
border-color: rgba(82,168,236, .8);
outline: 0;
@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;
}
// // Everything else
// textarea,
// input[type="text"],
// input[type="password"],
// input[type="datetime"],
// input[type="datetime-local"],
// input[type="date"],
// input[type="month"],
// input[type="time"],
// input[type="week"],
// input[type="number"],
// input[type="email"],
// input[type="url"],
// input[type="search"],
// input[type="tel"],
// input[type="color"] {
// background-color: $input-bg;
// border: 1px solid $input-border-color;
// @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
// @include transition("border linear .2s, box-shadow linear .2s");
//
// // Focus state
// &:focus {
// border-color: rgba(82,168,236, .8);
// outline: 0;
// @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
// }
// }
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
......@@ -207,7 +181,7 @@ textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
cursor: $cursor-disabled;
background-color: $input-bg-disabled;
}
......@@ -216,6 +190,7 @@ input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
cursor: $cursor-disabled;
background-color: transparent;
}
......
public/sass/components/_gf-form.scss
......@@ -42,12 +42,15 @@ $gf-form-margin: 4px;
}
.gf-form-label {
padding: $input-padding-y $input-padding-x;
line-height: $input-line-height;
flex-shrink: 0;
background-color: $input-label-bg;
display: block;
padding: 8px 7px;
font-size: $font-size-sm;
margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent;
}
.gf-form-checkbox {
......@@ -65,53 +68,46 @@ $gf-form-margin: 4px;
.gf-size-max { width: 100%; }
.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,
[type=text],
[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;
}
&:disabled {
cursor: $cursor-disabled;
}
&.gf-size-auto { width: auto; }
......
public/sass/components/_navbar.scss
.navbar {
display: block;
overflow: visible;
position: relative;
z-index: 110;
......
public/sass/components/_navs.scss
......@@ -16,78 +16,23 @@
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: $gray-lighter;
}
// Redeclare pull classes because of specifity
.nav > .pull-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
// -------------
// Common styles
.nav-tabs,
.nav-pills {
.nav-tabs {
@include clearfix();
}
.nav-tabs > li,
.nav-pills > li {
.nav-tabs > li {
float: left;
}
.nav-tabs > li > a,
.nav-pills > li > a {
.nav-tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
......@@ -99,12 +44,16 @@
// Give the tabs something to sit on
.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
.nav-tabs > li {
margin-bottom: -1px;
}
// Actual tabs (as links)
.nav-tabs > li > a {
padding-top: 8px;
......@@ -114,80 +63,18 @@
@include border-radius(4px 4px 0 0);
&:hover,
&: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
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: $gray;
background-color: $body-bg;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
// 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;
@include border-radius(3px);
border: 1px solid $divider-border-color;
background-color: transparent;
border-bottom: 1px solid $panel-bg;
color: $link-color;
}
// Show/hide tabbable areas
......
public/sass/components/_tabs.scss
.nav-tabs-alt {
border-bottom: 1px solid $divider-border-color;
padding-left: 10px;
margin: 0 0 10px 0;
& > li > a {
color: darken($link-color, 20%);
......@@ -16,7 +13,7 @@
li.active > a:focus,
li.active > a:hover {
@include border-radius(3px);
border: 1px solid $divider-border-color;
border: 1px solid $divider-border-color;
background-color: transparent;
border-bottom: 1px solid $panel-bg;
color: $link-color;
......
public/sass/components/_tightform.scss
......@@ -112,7 +112,7 @@
.tight-form-func {
background: $tight-form-func-bg;
&.show-function-controls {
padding-top: 5px;
min-width: 100px;
......@@ -131,7 +131,7 @@ input[type=text].tight-form-clear-input {
padding: 8px 7px;
border: none;
margin: 0px;
background: transparent;
background: transparent;
border-radius: 0;
border-right: 1px solid $tight-form-border;
}
......@@ -141,6 +141,7 @@ input[type=text].tight-form-clear-input {
[type=number],
[type=password] {
&.tight-form-input {
background-color: $input-bg;
border: none;
border-right: 1px solid $tight-form-border;
margin: 0px;
......@@ -167,6 +168,7 @@ input[type=checkbox].tight-form-checkbox {
select.tight-form-input {
border: none;
border-right: 1px solid $tight-form-border;
background-color: $input-bg;
margin: 0px;
border-radius: 0;
height: 36px;
......
public/sass/layout/_page.scss
......@@ -25,10 +25,11 @@
.page-container {
background-color: $page-bg;
position: relative;
padding: 25px 56px 10px 56px;
padding: ($spacer * 2) ($spacer * 4);
max-width: 1060px;
margin-left: 0;
height: 100%;
//min-height: 100%;
padding-bottom: $spacer * 5;
}
.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