diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts index bfbd9e9950e..bf0dae2c631 100644 --- a/public/app/core/services/popover_srv.ts +++ b/public/app/core/services/popover_srv.ts @@ -68,6 +68,13 @@ function popoverSrv($compile, $rootScope, $timeout) { openDrop = drop; openDrop.open(); }, 100); + + // return close function + return function() { + if (drop) { + drop.close(); + } + }; }; } diff --git a/public/app/features/annotations/annotation_tooltip.ts b/public/app/features/annotations/annotation_tooltip.ts index 4828eb671a6..03d42c382f7 100644 --- a/public/app/features/annotations/annotation_tooltip.ts +++ b/public/app/features/annotations/annotation_tooltip.ts @@ -4,7 +4,7 @@ import coreModule from 'app/core/core_module'; import alertDef from '../alerting/alert_def'; /** @ngInject **/ -export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv, popoverSrv, $compile) { +export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv, $compile) { function sanitizeString(str) { try { diff --git a/public/app/features/dashboard/timepicker/dropdown.html b/public/app/features/dashboard/timepicker/dropdown.html index 59b58679d65..f8077badec5 100644 --- a/public/app/features/dashboard/timepicker/dropdown.html +++ b/public/app/features/dashboard/timepicker/dropdown.html @@ -1,61 +1,72 @@ -
-
-

Time range

- - -
-
- -
-
- -
+
+
+
-
- +
+ Time Picker
- - - -
-
- -
-
- -
-
- -
- -
- - -
-
- -
-
- -
-
- - - -
-

Quick ranges

-
    -
  • - -
    • -
+
+
+

Custom range

+ + +
+
+ +
+
+ +
+
+ +
+ +
+ + + +
+
+ +
+
+ +
+
+ +
+ +
+ + +
+
+ +
+
+ +
+
+ +
+ +
+

Quick ranges

+
    +
  • + +
    • +
+
+ +
+
-
diff --git a/public/app/features/dashboard/timepicker/timepicker.ts b/public/app/features/dashboard/timepicker/timepicker.ts index 14d97b900fd..6903c090371 100644 --- a/public/app/features/dashboard/timepicker/timepicker.ts +++ b/public/app/features/dashboard/timepicker/timepicker.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import angular from 'angular'; import moment from 'moment'; @@ -25,10 +23,11 @@ export class TimePickerCtrl { refresh: any; isUtc: boolean; firstDayOfWeek: number; + closeDropdown: any; /** @ngInject */ - constructor(private $scope, private $rootScope, private timeSrv) { - $scope.ctrl = this; + constructor(private $scope, private $rootScope, private timeSrv, private popoverSrv, private $element) { + this.$scope.ctrl = this; $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope); $rootScope.onAppEvent('shift-time-backward', () => this.move(-1), $scope); @@ -108,10 +107,15 @@ export class TimePickerCtrl { this.refresh.options.unshift({text: 'off'}); - this.$rootScope.appEvent('show-dash-editor', { - editview: 'timepicker', - scope: this.$scope, - cssClass: 'gf-timepicker-dropdown', + this.closeDropdown = this.popoverSrv.show({ + element: this.$element[0], + position: 'bottom center', + template: '', + openOn: 'click', + classNames: 'drop-popover drop-popover--form', + model: { + ctrl: this + }, }); } @@ -121,7 +125,7 @@ export class TimePickerCtrl { } this.timeSrv.setTime(this.editTimeRaw); - this.$rootScope.appEvent('hide-dash-editor'); + this.closeDropdown(); } absoluteFromChanged() { @@ -144,7 +148,7 @@ export class TimePickerCtrl { } this.timeSrv.setTime(range); - this.$rootScope.appEvent('hide-dash-editor'); + this.closeDropdown(); } } @@ -175,9 +179,20 @@ export function timePickerDirective() { }; } +export function timePickerDropdown() { + return { + restrict: 'E', + templateUrl: 'public/app/features/dashboard/timepicker/dropdown.html', + scope: { + ctrl: "=" + } + }; +} + angular.module('grafana.directives').directive('gfTimePickerSettings', settingsDirective); angular.module('grafana.directives').directive('gfTimePicker', timePickerDirective); +angular.module('grafana.directives').directive('gfTimePickerDropdown', timePickerDropdown); import {inputDateDirective} from './input_date'; angular.module("grafana.directives").directive('inputDatetime', inputDateDirective); diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index f8567d02fad..70b2c4547e7 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -1,5 +1,3 @@ -/// - import 'vendor/flot/jquery.flot'; import 'vendor/flot/jquery.flot.selection'; import 'vendor/flot/jquery.flot.time'; @@ -22,7 +20,7 @@ import {EventManager} from 'app/features/annotations/all'; import {convertValuesToHistogram, getSeriesValues} from './histogram'; /** @ngInject **/ -function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { +function graphDirective($rootScope, timeSrv, contextSrv) { return { restrict: 'A', template: '', diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss deleted file mode 100644 index 70493a4363d..00000000000 --- a/public/sass/_variables.dark.scss +++ /dev/null @@ -1,347 +0,0 @@ -// Global values -// -------------------------------------------------- - -$theme-name: dark; - -// Grays -// ------------------------- -$black: #000; - -// ------------------------- -$black: #000; -$dark-1: #141414; -$dark-2: #1f1f20; -$dark-3: #262628; -$dark-4: #333333; -$dark-5: #444444; -$gray-1: #555555; -$gray-2: #8e8e8e; -$gray-3: #b3b3b3; -$gray-4: #D8D9DA; -$gray-5: #ECECEC; -$gray-6: #f4f5f8; -$gray-7: #fbfbfb; -$gray-blue: #292a2d; - -$white: #fff; - -// Accent colors -// ------------------------- -$blue: #33B5E5; -$blue-dark: #005f81; -$green: #299c46; -$red: #d44a3a; -$yellow: #ECBB13; -$pink: #FF4444; -$purple: #9933CC; -$variable: #32D1DF; -$orange: #eb7b18; - -$brand-primary: $orange; -$brand-success: $green; -$brand-warning: $brand-primary; -$brand-danger: $red; - -// Status colors -// ------------------------- -$online: #10a345; -$warn: #F79520; -$critical: #ed2e18; - -// Scaffolding -// ------------------------- -$body-bg: rgb(23,24,25); -$page-bg: rgb(22, 23, 25); - -$body-color: $gray-4; -$text-color: $gray-4; -$text-color-strong: $white; -$text-color-weak: $gray-2; -$text-color-faint: $dark-5; -$text-color-emphasis: $gray-5; - -$text-shadow-strong: 1px 1px 4px $black; -$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); - -// gradients -$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%); -$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); - -// Links -// ------------------------- -$link-color: darken($white, 11%); -$link-color-disabled: darken($link-color, 30%); -$link-hover-color: $white; -$external-link-color: $blue; - -// Typography -// ------------------------- -$headings-color: darken($white,11%); -$abbr-border-color: $gray-3 !default; -$text-muted: $text-color-weak; - -$blockquote-small-color: $gray-3 !default; -$blockquote-border-color: $gray-4 !default; - -$hr-border-color: rgba(0,0,0,.1) !default; - -// Components -$component-active-color: #fff !default; -$component-active-bg: $brand-primary !default; - -// Panel -// ------------------------- -$panel-bg: #212124; -$panel-border-color: $dark-1; -$panel-border: solid 1px $panel-border-color; -$panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); -$panel-header-hover-bg: $dark-4; -$panel-header-menu-hover-bg: $dark-5; - -$divider-border-color: #555; - -// Graphite Target Editor -$tight-form-bg: $dark-3; - -$tight-form-func-bg: #333334; -$tight-form-func-highlight-bg: #444445; - -$modal-backdrop-bg: #353c42 ; -$code-tag-bg: $gray-1; -$code-tag-border: lighten($code-tag-bg, 2%); - -// cards -$card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, #343436, #262628); -$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3); - -// Lists -$list-item-bg: $card-background; -$list-item-hover-bg: lighten($gray-blue, 2%); -$list-item-link-color: $text-color; -$list-item-shadow: $card-shadow; - -// Scrollbars -$scrollbarBackground: #404357; -$scrollbarBackground2: #3a3a3a; - -$scrollbarBorder: black; - -// Tables -// ------------------------- -$table-bg: transparent; // overall background-color -$table-bg-accent: $dark-3; // for striping -$table-bg-hover: $dark-4; // for hover -$table-border: $dark-3; // table and cell border - -// Buttons -// ------------------------- - -$btn-primary-bg: #ff6600; -$btn-primary-bg-hl: #bc3e06; - -$btn-secondary-bg: $blue-dark; -$btn-secondary-bg-hl: lighten($blue-dark, 5%); - -$btn-success-bg: $green; -$btn-success-bg-hl: darken($green, 6%); - -$btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); - -$btn-danger-bg: $red; -$btn-danger-bg-hl: darken($red, 8%); - -$btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 4%); -$btn-inverse-text-color: $link-color; - -$btn-link-color: $gray-3; - -$iconContainerBackground: $black; - -$btn-divider-left: $dark-4; -$btn-divider-right: $dark-2; - -$btn-drag-image: '../img/grab_dark.svg'; - -// Forms -// ------------------------- -$input-bg: $black; -$input-bg-disabled: $dark-3; - -$input-color: $gray-4; -$input-border-color: $dark-3; -$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.10); -$input-border-focus: $input-border-color !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; -$input-color-placeholder: $gray-1 !default; -$input-label-bg: $gray-blue; -$input-label-border-color: transparent; -$input-invalid-border-color: lighten($red, 5%); - -// Search -$search-shadow: 0 0 35px 0 $body-bg; -$search-filter-box-bg: $gray-blue; - -// Dropdowns -// ------------------------- -$dropdownBackground: $dark-3; -$dropdownBorder: rgba(0,0,0,.2); -$dropdownDividerTop: transparent; -$dropdownDividerBottom: #444; -$dropdownDivider: $dropdownDividerBottom; -$dropdownTitle: $link-color-disabled; - -$dropdownLinkColor: $text-color; -$dropdownLinkColorHover: $white; -$dropdownLinkColorActive: $white; - -$dropdownLinkBackgroundActive: $dark-4; -$dropdownLinkBackgroundHover: $dark-4; - -$dropdown-link-color: $gray-3; - -// COMPONENT VARIABLES -// -------------------------------------------------- - -// ------------------------- -$placeholderText: darken($text-color, 25%); - - -// Horizontal forms & lists -// ------------------------- -$horizontalComponentOffset: 180px; - - -// Wells -// ------------------------- -$wellBackground: #131517; - -$navbarHeight: 52px; -$navbarBackgroundHighlight: $dark-3; -$navbarBackground: $panel-bg; -$navbarBorder: 1px solid $body-bg; -$navbarShadow: 0 0 20px black; - -$navbarText: $gray-4; -$navbarLinkColor: $gray-4; -$navbarLinkColorHover: $white; -$navbarLinkColorActive: $navbarLinkColorHover; -$navbarLinkBackgroundHover: transparent; -$navbarLinkBackgroundActive: $navbarBackground; -$navbarBrandColor: $link-color; -$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg; - -$navbarButtonBackground: $navbarBackground; -$navbarButtonBackgroundHighlight: $body-bg; - -// Sidemenu -// ------------------------- -$side-menu-bg: $black; -$side-menu-item-hover-bg: $dark-2; -$side-menu-shadow: 0 0 20px black; -$breadcrumb-hover-hl: #111; - -// Menu dropdowns -// ------------------------- -$menu-dropdown-bg: $body-bg; -$menu-dropdown-hover-bg: $dark-2; -$menu-dropdown-border-color: $dark-3; -$menu-dropdown-shadow: 5px 5px 20px -5px $black; - -// Breadcrumb -// ------------------------- -$page-nav-bg: $black; -$page-nav-shadow: 5px 5px 20px -5px $black; -$page-nav-breadcrumb-color: $gray-3; - - -// Pagination -// ------------------------- -$paginationBackground: $body-bg; -$paginationBorder: transparent; -$paginationActiveBackground: $blue; - -// Form states and alerts -// ------------------------- -$warning-text-color: $warn; -$error-text-color: #E84D4D; -$success-text-color: #12D95A; -$info-text-color: $blue-dark; - -$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); - -// popover -$popover-bg: $panel-bg; -$popover-color: $text-color; -$popover-border-color: $dark-4; -$popover-shadow: 0 0 20px black; - -$popover-help-bg: $btn-secondary-bg; -$popover-help-color: $text-color; - -$popover-error-bg: $btn-danger-bg; - -// Tooltips and popovers -// ------------------------- -$tooltipColor: $popover-help-color; -$tooltipBackground: $popover-help-bg; -$tooltipArrowWidth: 5px; -$tooltipArrowColor: $tooltipBackground; -$tooltipLinkColor: $link-color; -$graph-tooltip-bg: $dark-1; - -// images -$checkboxImageUrl: '../img/checkbox.png'; - -// info box -$info-box-background: linear-gradient(100deg, #1a4552, #00374a); - -// footer -$footer-link-color: $gray-2; -$footer-link-hover: $gray-4; - -// collapse box -$collapse-box-body-border: $dark-5; -$collapse-box-body-error-border: $red; - -// json-explorer -$json-explorer-default-color: $text-color; -$json-explorer-string-color: #23d662; -$json-explorer-number-color: $variable; -$json-explorer-boolean-color: $variable; -$json-explorer-null-color: #EEC97D; -$json-explorer-undefined-color: rgb(239, 143, 190); -$json-explorer-function-color: #FD48CB; -$json-explorer-rotate-time: 100ms; -$json-explorer-toggler-opacity: 0.6; -$json-explorer-toggler-color: #45376F; -$json-explorer-bracket-color: #9494FF; -$json-explorer-key-color: #23A0DB; -$json-explorer-url-color: #027BFF; - -// Changelog and diff -// ------------------------- -$diff-label-bg: $dark-2; -$diff-label-fg: $white; - -$diff-group-bg: $dark-4; -$diff-arrow-color: $white; - -$diff-json-bg: $dark-4; -$diff-json-fg: $gray-5; - -$diff-json-added: #457740; -$diff-json-deleted: #a04338; - -$diff-json-old: #a04338; -$diff-json-new: #457740; - -$diff-json-changed-fg: $gray-5; -$diff-json-changed-num: $text-color; - -$diff-json-icon: $gray-7; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss deleted file mode 100644 index f33ef4debed..00000000000 --- a/public/sass/_variables.light.scss +++ /dev/null @@ -1,362 +0,0 @@ -// Cosmo 2.3.2 -// Variables -// -------------------------------------------------- - - -// Global values -// -------------------------------------------------- - -$theme-name: light; - -// Grays -// ------------------------- -$black: #000; - -// ------------------------- -$black: #000; -$dark-1: #141414; -$dark-2: #1d1d1f; -$dark-3: #262628; -$dark-4: #373737; -$dark-5: #444444; -$gray-1: #555555; -$gray-2: #7B7B7B; -$gray-3: #b3b3b3; -$gray-4: #D8D9DA; -$gray-5: #ECECEC; -$gray-6: #f4f5f8; -$gray-7: #fbfbfb; - -$white: #fff; - -// Accent colors -// ------------------------- -$blue: #2AB2E4; -$blue-dark: #3CAAD6; -$green: #3aa655; -$red: #d44939; -$yellow: #FF851B; -$orange: #Ff7941; -$pink: #E671B8; -$purple: #9954BB; -$variable: #2AB2E4; - -$brand-primary: $orange; -$brand-success: $green; -$brand-warning: $orange; -$brand-danger: $red; - -// Status colors -// ------------------------- -$online: #01A64F; -$warn: #F79520; -$critical: #EC2128; - -// Scaffolding -// ------------------------- - -$body-bg: $white; -$page-bg: $white; -$body-color: $gray-1; -$text-color: $gray-1; -$text-color-strong: $white; -$text-color-weak: $gray-3; -$text-color-faint: $gray-4; -$text-color-emphasis: $dark-5; - -$text-shadow-strong: none; -$text-shadow-faint: none; - -// gradients -$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%); -$page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%); - -// Links -// ------------------------- -$link-color: $gray-1; -$link-color-disabled: lighten($link-color, 30%); -$link-hover-color: darken($link-color, 20%); -$external-link-color: $blue; - -// Typography -// ------------------------- -$headings-color: $text-color; -$abbr-border-color: $gray-2 !default; -$text-muted: $text-color-weak; - -$blockquote-small-color: $gray-2 !default; -$blockquote-border-color: $gray-3 !default; - -$hr-border-color: $dark-3 !default; - -// Components -$component-active-color: $white !default; -$component-active-bg: $brand-primary !default; - -// Panel -// ------------------------- - -$panel-bg: $gray-7; -$panel-border-color: $gray-5; -$panel-border: solid 1px $panel-border-color; -$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); -$panel-header-hover-bg: $gray-6; -$panel-header-menu-hover-bg: $gray-4; - -$divider-border-color: $gray-2; - -// Graphite Target Editor -$tight-form-bg: #eaebee; - -$tight-form-func-bg: $gray-5; -$tight-form-func-highlight-bg: $gray-6; - -$modal-backdrop-bg: $body-bg; -$code-tag-bg: $gray-6; -$code-tag-border: darken($code-tag-bg, 3%); - -// cards -$card-background: linear-gradient(135deg, $gray-5, $gray-6); -$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7); -$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1); - -// Lists -$list-item-bg: $card-background; -$list-item-hover-bg: darken($gray-5, 5%); -$list-item-link-color: $text-color; -$list-item-shadow: $card-shadow; - -// Tables -// ------------------------- -$table-bg: transparent; // overall background-color -$table-bg-accent: $gray-5; // for striping -$table-bg-hover: $gray-5; // for hover -$table-bg-active: $table-bg-hover !default; -$table-border: $gray-3; // table and cell border - -// Scrollbars -$scrollbarBackground: $gray-5; -$scrollbarBackground2: $gray-5; -$scrollbarBorder: $gray-4; - -// Buttons -// ------------------------- -$btn-primary-bg: $brand-primary; -$btn-primary-bg-hl: lighten($brand-primary, 8%); - -$btn-secondary-bg: $blue-dark; -$btn-secondary-bg-hl: lighten($blue-dark, 4%); - -$btn-success-bg: lighten($green, 3%); -$btn-success-bg-hl: darken($green, 3%); - -$btn-warning-bg: lighten($orange, 3%); -$btn-warning-bg-hl: darken($orange, 3%); - -$btn-danger-bg: lighten($red, 3%); -$btn-danger-bg-hl: darken($red, 3%); - -$btn-inverse-bg: $gray-5; -$btn-inverse-bg-hl: darken($gray-5, 5%); -$btn-inverse-text-color: $dark-4; - -$btn-link-color: $gray-1; - -$btn-divider-left: $gray-4; -$btn-divider-right: $gray-7; -$btn-drag-image: '../img/grab_light.svg'; - -$iconContainerBackground: $white; - -// Forms -// ------------------------- -$input-bg: $gray-7; -$input-bg-disabled: $gray-5; - -$input-color: $dark-3; -$input-border-color: $gray-5; -$input-box-shadow: none; -$input-border-focus: $blue !default; -$input-box-shadow-focus: $blue !default; -$input-color-placeholder: $gray-4 !default; -$input-label-bg: #eaebee; -$input-label-border-color: #e3e4e7; -$input-invalid-border-color: lighten($red, 5%); - -// Sidemenu -// ------------------------- -$side-menu-bg: $body-bg; -$side-menu-item-hover-bg: $gray-6; -$side-menu-shadow: 0 0 5px #c2c2c2; - -// Menu dropdowns -// ------------------------- -$menu-dropdown-bg: $white; -$menu-dropdown-hover-bg: $gray-6; -$menu-dropdown-border-color: $gray-4; -$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4; - -// Breadcrumb -// ------------------------- -$page-nav-bg: #eaebee; -$page-nav-shadow: 5px 5px 20px -5px $gray-4; -$page-nav-breadcrumb-color: $black; -$breadcrumb-hover-hl: #d9dadd; - -// search -$search-shadow: 0 5px 30px 0 $gray-4; -$search-filter-box-bg: $gray-4; - -// Dropdowns -// ------------------------- -$dropdownBackground: $white; -$dropdownBorder: $gray-4; -$dropdownDividerTop: $gray-6; -$dropdownDividerBottom: $white; -$dropdownDivider: $dropdownDividerTop; -$dropdownTitle: $gray-3; - -$dropdownLinkColor: $dark-3; -$dropdownLinkColorHover: $link-color; -$dropdownLinkColorActive: $link-color; - -$dropdownLinkBackgroundActive: $gray-6; -$dropdownLinkBackgroundHover: $gray-6; - -// COMPONENT VARIABLES -// -------------------------------------------------- - - -// Input placeholder text color -// ------------------------- -$placeholderText: $gray-2; - - -// Hr border color -// ------------------------- -$hrBorder: $gray-3; - - -// Horizontal forms & lists -// ------------------------- -$horizontalComponentOffset: 180px; - - -// Wells -// ------------------------- -$wellBackground: $gray-3; - - -// Navbar -// ------------------------- - -$navbarHeight: 52px; -$navbarBackgroundHighlight: #f8f8f8; -$navbarBackground: #f2f3f7; -$navbarBorder: 1px solid $gray-4; -$navbarShadow: 0 0 3px #c1c1c1; - -$navbarText: #444; -$navbarLinkColor: #444; -$navbarLinkColorHover: #000; -$navbarLinkColorActive: #333; -$navbarLinkBackgroundHover: transparent; -$navbarLinkBackgroundActive: darken($navbarBackground, 6.5%); -$navbarDropdownShadow: inset 0px 4px 7px -4px darken($body-bg, 20%); - -$navbarBrandColor: $navbarLinkColor; - -$navbarButtonBackground: lighten($navbarBackground, 3%); -$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); - - -// Pagination -// ------------------------- -$paginationBackground: $gray-2; -$paginationBorder: transparent; -$paginationActiveBackground: $blue; - - -// Form states and alerts -// ------------------------- -$warning-text-color: lighten($orange, 10%); -$error-text-color: lighten($red, 10%); -$success-text-color: lighten($green, 10%); -$info-text-color: $blue; - -$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-info-bg: $blue-dark; - -// popover -$popover-bg: $panel-bg; -$popover-color: $text-color; -$popover-border-color: $gray-5; -$popover-shadow: 0 0 20px $white; - -$popover-help-bg: $blue-dark; -$popover-help-color: $gray-6; -$popover-error-bg: $btn-danger-bg; - -// Tooltips and popovers -// ------------------------- -$tooltipColor: $popover-help-color; -$tooltipBackground: $popover-help-bg; -$tooltipArrowWidth: 5px; -$tooltipArrowColor: $tooltipBackground; -$tooltipLinkColor: lighten($popover-help-color, 5%); -$graph-tooltip-bg: $gray-5; - -// images -$checkboxImageUrl: '../img/checkbox_white.png'; - -// info box -$info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff); - -// footer -$footer-link-color: $gray-3; -$footer-link-hover: $dark-5; - -// collapse box -$collapse-box-body-border: $gray-4; -$collapse-box-body-error-border: $red; - -// json explorer -$json-explorer-default-color: black; -$json-explorer-string-color: green; -$json-explorer-number-color: blue; -$json-explorer-boolean-color: red; -$json-explorer-null-color: #855A00; -$json-explorer-undefined-color: rgb(202, 11, 105); -$json-explorer-function-color: #FF20ED; -$json-explorer-rotate-time: 100ms; -$json-explorer-toggler-opacity: 0.6; -$json-explorer-toggler-color: #45376F; -$json-explorer-bracket-color: blue; -$json-explorer-key-color: #00008B; -$json-explorer-url-color: blue; - -// Changelog and diff -// ------------------------- -$diff-label-bg: $gray-5; -$diff-label-fg: $gray-2; - -$diff-switch-bg: $gray-7; -$diff-switch-disabled: $gray-5; - -$diff-arrow-color: $dark-3; -$diff-group-bg: $gray-7; - -$diff-json-bg: $gray-5; -$diff-json-fg: $gray-2; - -$diff-json-added: lighten(desaturate($green, 30%), 10%); -$diff-json-deleted: desaturate($red, 35%); - -$diff-json-old: #5a372a; -$diff-json-new: #664e33; - -$diff-json-changed-fg: $gray-6; -$diff-json-changed-num: $gray-4; -$diff-json-icon: $gray-4; diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss deleted file mode 100644 index 137afc11bd7..00000000000 --- a/public/sass/components/_modals.scss +++ /dev/null @@ -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; - } -} - - diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss deleted file mode 100644 index 1d5268472bf..00000000000 --- a/public/sass/components/_page_header.scss +++ /dev/null @@ -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; - } -} - diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss deleted file mode 100644 index f1bb69efd98..00000000000 --- a/public/sass/mixins/_drop_element.scss +++ /dev/null @@ -1,280 +0,0 @@ - -@mixin drop-theme($themeName, $theme-bg, $theme-color, $border-color: $theme-bg) { - .drop-element.drop-#{$themeName} { - max-width: 100%; - max-height: 100%; - - .drop-content { - border-radius: $border-radius-lg; - position: relative; - font-family: inherit; - background: $theme-bg; - color: $theme-color; - padding: 0.65rem; - font-size: $font-size-sm; - word-wrap: break-word; - max-width: 20rem; - border: 1px solid $border-color; - - &:before { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-width: $popover-arrow-size; - border-style: solid; - pointer-events: null; - } - } - - &.drop-wide { - .drop-content { - max-width: 40rem; - } - } - - // Centers and middles - - &.drop-element-attached-bottom.drop-element-attached-center .drop-content { - margin-bottom: $popover-arrow-size; - - &:before { - top: 100%; - left: 50%; - margin-left: - $popover-arrow-size; - border-top-color: $border-color; - } - } - - &.drop-element-attached-top.drop-element-attached-center .drop-content { - margin-top: $popover-arrow-size; - - &:before { - bottom: 100%; - left: 50%; - margin-left: - $popover-arrow-size; - border-bottom-color: $border-color; - } - } - - &.drop-element-attached-right.drop-element-attached-middle .drop-content { - margin-right: $popover-arrow-size; - - &:before { - left: 100%; - top: 50%; - margin-top: - $popover-arrow-size; - border-left-color: $border-color; - } - } - - &.drop-element-attached-left.drop-element-attached-middle .drop-content { - margin-left: $popover-arrow-size; - - &:before { - right: 100%; - top: 50%; - margin-top: - $popover-arrow-size; - border-right-color: $border-color; - } - } - - // Target middle/center, element corner - &.drop-element-attached-left.drop-target-attached-center .drop-content { - left: - $popover-arrow-size * 2; - } - - &.drop-element-attached-right.drop-target-attached-center .drop-content { - left: $popover-arrow-size * 2; - } - - &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { - margin-top: $popover-arrow-size; - - &:before { - bottom: 100%; - left: $popover-arrow-size; - border-bottom-color: $border-color; - } - } - - &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { - margin-top: $popover-arrow-size; - - &:before { - bottom: 100%; - right: $popover-arrow-size; - border-bottom-color: $border-color; - } - } - - &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { - margin-bottom: $popover-arrow-size; - - &:before { - top: 100%; - left: $popover-arrow-size; - border-top-color: $border-color; - } - } - - &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { - margin-bottom: $popover-arrow-size; - - &:before { - top: 100%; - right: $popover-arrow-size; - border-top-color: $border-color; - } - } - - // Top and bottom corners - &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { - margin-top: $popover-arrow-size; - - &:before { - bottom: 100%; - left: $popover-arrow-size; - border-bottom-color: $border-color; - } - } - - &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { - margin-top: $popover-arrow-size; - - &:before { - bottom: 100%; - right: $popover-arrow-size; - border-bottom-color: $border-color; - } - } - - &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { - margin-bottom: $popover-arrow-size; - - &:before { - top: 100%; - left: $popover-arrow-size; - border-top-color: $border-color; - } - } - - &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { - margin-bottom: $popover-arrow-size; - - &:before { - top: 100%; - right: $popover-arrow-size; - border-top-color: $border-color; - } - } - - // Side corners - &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { - margin-right: $popover-arrow-size; - - &:before { - top: $popover-arrow-size; - left: 100%; - border-left-color: $border-color; - } - } - - &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { - margin-left: $popover-arrow-size; - - &:before { - top: $popover-arrow-size; - right: 100%; - border-right-color: $border-color; - } - } - - &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { - margin-right: $popover-arrow-size; - - &:before { - bottom: $popover-arrow-size; - left: 100%; - border-left-color: $border-color; - } - } - - &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { - margin-left: $popover-arrow-size; - - &:before { - bottom: $popover-arrow-size; - right: 100%; - border-right-color: $border-color; - } - } - } -} - -@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") { - .#{$themePrefix}-element.#{$themePrefix}-#{$themeName} { - transform: translateZ(0); - transition: opacity 100ms; - opacity: 0; - .#{$themePrefix}-content { - transition: transform 0.2s $easing; - transform: scale(0.8) translateZ(0); - } - &.#{$themePrefix}-open { - display: none; - } - &.#{$themePrefix}-open-transitionend { - display: block; - } - &.#{$themePrefix}-after-open { - transition: none; - opacity: 1; - .#{$themePrefix}-content { - transform: scale(1) translateZ(0); - } - } - // Centers and middles - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { - transform-origin: 50% calc(100% + #{$attachmentOffset}); - } - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { - transform-origin: 50% (-$attachmentOffset); - } - &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { - transform-origin: calc(100% + #{$attachmentOffset}) 50%; - } - &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { - transform-origin: -($attachmentOffset 50%); - } - // Top and bottom corners - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { - transform-origin: 0 (-$attachmentOffset); - } - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { - transform-origin: 100% (-$attachmentOffset); - } - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { - transform-origin: 0 calc(100% + #{$attachmentOffset}); - } - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { - transform-origin: 100% calc(100% + #{$attachmentOffset}); - } - // Side corners - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { - transform-origin: calc(100% + #{$attachmentOffset}) 0; - } - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { - transform-origin: (-$attachmentOffset) 0; - } - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { - transform-origin: calc(100% + #{$attachmentOffset}) 100%; - } - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { - transform-origin: (-$attachmentOffset) 100%; - } - } -} -