diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 54600ecc9f4..d52506cc5a7 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -18,35 +18,34 @@ -
-
Add dashboards
-
- +
+
+
Add dashboards
+
+ +
-
+
Search results ({{ctrl.filteredDashboards.length}})
- - - - - -
- {{playlistItem.title}} - - -
-
-
-
-
+
+ + + + + +
+ {{playlistItem.title}} + + +
+
@@ -56,7 +55,8 @@
-
+ +
Added dashboards
@@ -89,13 +89,10 @@
- - Save - Cancel - + Save + Cancel
diff --git a/public/app/features/playlist/partials/playlist_search.html b/public/app/features/playlist/partials/playlist_search.html index e3005c1b74b..12b3d563820 100644 --- a/public/app/features/playlist/partials/playlist_search.html +++ b/public/app/features/playlist/partials/playlist_search.html @@ -2,25 +2,25 @@ - -
- - - - starred - | - - - tags - - - | - - - - {{tagName}} - - - -
+
+ + + + starred + | + + + tags + + + | + + + + {{tagName}} + + + +
+ diff --git a/public/less/_grafana.scss b/public/less/_grafana.scss index dd896261c93..84d74c18ff6 100644 --- a/public/less/_grafana.scss +++ b/public/less/_grafana.scss @@ -1,69 +1,72 @@ +@import "grid-variables"; // MIXINS -@import "./mixins/_mixins.scss"; -@import "./mixins/_buttons.scss"; +@import "mixins/mixins"; +@import "mixins/buttons"; +@import "mixins/breakpoints"; +@import "mixins/grid"; +@import "mixins/grid-framework"; // BASE -@import "./base/_normalize.scss"; -@import "./base/_base.scss"; -@import "./base/_type.scss"; -@import "./base/_forms.scss"; -@import "./base/_fonts.scss"; -@import "./base/_code.scss"; +@import "base/normalize"; +@import "base/base"; +@import "base/type"; +@import "base/forms"; +@import "base/fonts"; +@import "base/grid"; // UTILS -@import "./utils/_utils.scss"; -@import "./utils/_validation.scss"; -@import "./utils/_angular.scss"; +@import "utils/utils"; +@import "utils/validation"; +@import "utils/angular"; // LAYOUTS -// @import "./bootstrap/grid.scss"; -@import "./layout/_page.scss"; +@import "layout/page"; // COMPONENTS -@import "./components/_panel_graph.scss"; -@import "./components/_submenu.scss"; -@import "./components/_panel_dashlist.scss"; -@import "./components/_panel_singlestat.scss"; -@import "./components/_panel_table.scss"; -@import "./components/_tagsinput.scss"; -@import "./components/_tables_lists.scss"; -@import "./components/_search.scss"; -@import "./components/_dashboard.scss"; -@import "./components/_tightform.scss"; -@import "./components/_gf-form.scss"; -@import "./components/_sidemenu.scss"; -@import "./components/_navbar.scss"; -@import "./components/_gfbox.scss"; -@import "./components/_pagination.scss"; -@import "./components/_tabs.scss"; -@import "./components/_timepicker.scss"; -@import "./components/_filter-controls.scss"; -@import "./components/_filter-list.scss"; -@import "./components/_filter-table.scss"; -@import "./components/_scrollbar.scss"; -@import "./components/_old_stuff.scss"; -@import "./components/_navbar.scss"; -@import "./components/_popovers.scss"; -@import "./components/_alerts.scss"; -@import "./components/_typeahead.scss"; -@import "./components/_tags.scss"; -@import "./components/_modals.scss"; -@import "./components/_dropdown.scss"; -@import "./components/_color_picker.scss"; -@import "./components/_tooltip.scss"; -@import "./components/_buttons.scss"; -@import "./components/_footer.scss"; -@import "./components/_infobox.scss"; -@import "./components/_shortcuts.scss"; -@import "./components/_query_editor.scss"; -@import "./components/_navs.scss"; +@import "components/panel_graph.scss"; +@import "components/submenu.scss"; +@import "components/panel_dashlist.scss"; +@import "components/panel_singlestat.scss"; +@import "components/panel_table.scss"; +@import "components/tagsinput.scss"; +@import "components/tables_lists.scss"; +@import "components/search.scss"; +@import "components/dashboard.scss"; +@import "components/tightform.scss"; +@import "components/gf-form.scss"; +@import "components/sidemenu.scss"; +@import "components/navbar.scss"; +@import "components/gfbox.scss"; +@import "components/pagination.scss"; +@import "components/tabs.scss"; +@import "components/timepicker.scss"; +@import "components/filter-controls.scss"; +@import "components/filter-list.scss"; +@import "components/filter-table.scss"; +@import "components/scrollbar.scss"; +@import "components/old_stuff.scss"; +@import "components/navbar.scss"; +@import "components/popovers.scss"; +@import "components/alerts.scss"; +@import "components/typeahead.scss"; +@import "components/tags.scss"; +@import "components/modals.scss"; +@import "components/dropdown.scss"; +@import "components/color_picker.scss"; +@import "components/tooltip.scss"; +@import "components/buttons.scss"; +@import "components/footer.scss"; +@import "components/infobox.scss"; +@import "components/shortcuts.scss"; +@import "components/query_editor.scss"; +@import "components/navs.scss"; // PAGES -@import "./pages/_login.scss"; -@import "./pages/_playlist.scss"; -@import "./pages/_admin.scss"; -@import "./pages/_alerting.scss"; -@import "./pages/_apps.scss"; -@import "./pages/_signup.scss"; +@import "pages/login.scss"; +@import "pages/playlist.scss"; +@import "pages/admin.scss"; +@import "pages/alerting.scss"; +@import "pages/apps.scss"; +@import "pages/signup.scss"; diff --git a/public/less/_grid-variables.scss b/public/less/_grid-variables.scss new file mode 100644 index 00000000000..a362b11b49a --- /dev/null +++ b/public/less/_grid-variables.scss @@ -0,0 +1,36 @@ + + +// Grid breakpoints +// +// Define the minimum and maximum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +$grid-breakpoints: ( + xs: 0, + sm: 544px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; + + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +$container-max-widths: ( + sm: 576px, + md: 720px, + lg: 940px, + xl: 1140px +) !default; + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; + +$enable-flex: false; + diff --git a/public/less/base/_grid.scss b/public/less/base/_grid.scss new file mode 100644 index 00000000000..32cd79f0094 --- /dev/null +++ b/public/less/base/_grid.scss @@ -0,0 +1,32 @@ + +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +.container { + @include make-container(); + @include make-container-max-widths(); +} + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + @include make-container(); +} + +// Row +// +// Rows contain and clear the floats of your columns. + +.row { + @include make-row(); +} + +// Columns +// +// Common styles for small and large grid columns + +@include make-grid-columns(); diff --git a/public/less/mixins/_grid-framework.scss b/public/less/mixins/_grid-framework.scss new file mode 100644 index 00000000000..15d1e6bdf86 --- /dev/null +++ b/public/less/mixins/_grid-framework.scss @@ -0,0 +1,47 @@ +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `$grid-columns`. + +@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + $breakpoint-counter: 0; + @each $breakpoint in map-keys($breakpoints) { + $breakpoint-counter: ($breakpoint-counter + 1); + @include media-breakpoint-up($breakpoint, $breakpoints) { + @if $enable-flex { + .col-#{$breakpoint} { + position: relative; + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + min-height: 1px; + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); + } + } + + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @include make-col($i, $columns); + } + } + + @each $modifier in (pull, push) { + @for $i from 0 through $columns { + .#{$modifier}-#{$breakpoint}-#{$i} { + @include make-col-modifier($modifier, $i, $columns) + } + } + } + + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through ($columns - 1) { + @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0 + .offset-#{$breakpoint}-#{$i} { + @include make-col-modifier(offset, $i, $columns) + } + } + } + } + } +} diff --git a/public/less/mixins/_grid.scss b/public/less/mixins/_grid.scss new file mode 100644 index 00000000000..6e67f92cd39 --- /dev/null +++ b/public/less/mixins/_grid.scss @@ -0,0 +1,75 @@ +/// Grid system +// +// Generate semantic grid columns with these mixins. + +@mixin make-container($gutter: $grid-gutter-width) { + margin-left: auto; + margin-right: auto; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + @if not $enable-flex { + @include clearfix(); + } +} + + +// For each breakpoint, define the maximum width of the container in a media query +@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { + @each $breakpoint, $container-max-width in $max-widths { + @include media-breakpoint-up($breakpoint, $breakpoints) { + max-width: $container-max-width; + } + } +} + +@mixin make-row($gutter: $grid-gutter-width) { + @if $enable-flex { + display: flex; + flex-wrap: wrap; + } @else { + @include clearfix(); + } + margin-left: ($gutter / -2); + margin-right: ($gutter / -2); +} + +@mixin make-col($size, $columns: $grid-columns) { + position: relative; + min-height: 1px; + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); + + @if $enable-flex { + flex: 0 0 percentage($size / $columns); + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($size / $columns); + } @else { + float: left; + width: percentage($size / $columns); + } +} + +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); +} + +@mixin make-col-push($size, $columns: $grid-columns) { + left: if($size > 0, percentage($size / $columns), auto); +} + +@mixin make-col-pull($size, $columns: $grid-columns) { + right: if($size > 0, percentage($size / $columns), auto); +} + +@mixin make-col-modifier($type, $size, $columns) { + // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) + @if $type == push { + @include make-col-push($size, $columns); + } @else if $type == pull { + @include make-col-pull($size, $columns); + } @else if $type == offset { + @include make-col-offset($size, $columns); + } +} diff --git a/public/less/utils/_flex.scss b/public/less/utils/_flex.scss new file mode 100644 index 00000000000..bcf2c2fa2a5 --- /dev/null +++ b/public/less/utils/_flex.scss @@ -0,0 +1,32 @@ +@if $enable-flex { + @each $breakpoint in map-keys($grid-breakpoints) { + // Flex column reordering + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-first { order: -1; } + .flex-#{$breakpoint}-last { order: 1; } + } + + // Alignment for every item + @include media-breakpoint-up($breakpoint) { + .flex-items-#{$breakpoint}-top { align-items: flex-start; } + .flex-items-#{$breakpoint}-middle { align-items: center; } + .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } + } + + // Alignment per item + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-top { align-self: flex-start; } + .flex-#{$breakpoint}-middle { align-self: center; } + .flex-#{$breakpoint}-bottom { align-self: flex-end; } + } + + // Horizontal alignment of item + @include media-breakpoint-up($breakpoint) { + .flex-items-#{$breakpoint}-left { justify-content: flex-start; } + .flex-items-#{$breakpoint}-center { justify-content: center; } + .flex-items-#{$breakpoint}-right { justify-content: flex-end; } + .flex-items-#{$breakpoint}-around { justify-content: space-around; } + .flex-items-#{$breakpoint}-between { justify-content: space-between; } + } + } +}