ux: progress on time picker dropdown version

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();
+      }
+    };
   };
 }
 

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 {

public/app/features/dashboard/timepicker/dropdown.html

@@ -1,61 +1,72 @@
-<div class="row pull-right">
-	<form name="timeForm" class="gf-timepicker-absolute-section">
-		<h3>Time range</h3>
-
-		<label class="small">From:</label>
-		<div class="gf-form-inline">
-			<div class="gf-form max-width-28">
-				<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
-			</div>
-			<div class="gf-form">
-				<button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
-					<i class="fa fa-calendar"></i>
-				</button>
-			</div>
+<div class="graph-annotation">
+	<div class="graph-annotation__header">
+		<div class="graph-annotation__user" bs-tooltip="'Created by {{ctrl.login}}'">
 		</div>
 
-		<div ng-if="openFromPicker">
-			<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
+		<div class="graph-annotation__title">
+			<span>Time Picker</span>
 		</div>
+	</div>
 
+	<div class="graph-annotation__body">
+		<form name="timeForm" class="gf-timepicker-absolute-section">
+			<h3 class="section-heading">Custom range</h3>
 
-		<label class="small">To:</label>
-		<div class="gf-form-inline">
-			<div class="gf-form max-width-28">
-				<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
+			<label class="small">From:</label>
+			<div class="gf-form-inline">
+				<div class="gf-form max-width-28">
+					<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
+				</div>
+				<div class="gf-form">
+					<button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
+						<i class="fa fa-calendar"></i>
+					</button>
+				</div>
 			</div>
-			<div class="gf-form">
-				<button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
-					<i class="fa fa-calendar"></i>
-				</button>
+
+			<div ng-if="openFromPicker">
+				<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
 			</div>
-		</div>
 
-		<div ng-if="openToPicker">
-			<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
-		</div>
 
-		<label class="small">Refreshing every:</label>
-		<div class="gf-form-inline">
-			<div class="gf-form max-width-28">
-				<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
+			<label class="small">To:</label>
+			<div class="gf-form-inline">
+				<div class="gf-form max-width-28">
+					<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
+				</div>
+				<div class="gf-form">
+					<button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
+						<i class="fa fa-calendar"></i>
+					</button>
+				</div>
 			</div>
-			<div class="gf-form">
-				<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+
+			<div ng-if="openToPicker">
+				<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
 			</div>
-		</div>
 
-	</form>
+			<label class="small">Refreshing every:</label>
+			<div class="gf-form-inline">
+				<div class="gf-form max-width-28">
+					<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
+				</div>
+				<div class="gf-form">
+					<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+				</div>
+			</div>
 
-	<div class="gf-timepicker-relative-section">
-		<h3>Quick ranges</h3>
-		<ul ng-repeat="group in ctrl.timeOptions">
-			<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
-				<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
-			</li>
-		</ul>
-	</div>
+		</form>
 
+		<div class="gf-timepicker-relative-section">
+			<h3 class="section-heading">Quick ranges</h3>
+			<ul ng-repeat="group in ctrl.timeOptions">
+				<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
+					<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
+				</li>
+			</ul>
+		</div>
+
+		<div class="clearfix"></div>
+	</div>
 </div>
-<div class="clearfix"></div>
 

public/app/features/dashboard/timepicker/timepicker.ts

@@ -1,5 +1,3 @@
-///<reference path="../../../headers/common.d.ts" />
-
 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: '<gf-time-picker-dropdown ctrl="ctrl" />',
+      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);

public/app/plugins/panel/graph/graph.ts

@@ -1,5 +1,3 @@
-///<reference path="../../../headers/common.d.ts" />
-
 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: '',

public/sass/_variables.dark.scss

@@ -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;

public/sass/_variables.light.scss

@@ -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;

public/sass/components/_modals.scss

@@ -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;
-  }
-}
-
-

public/sass/components/_page_header.scss

@@ -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;
-  }
-}
-

public/sass/mixins/_drop_element.scss

@@ -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%;
-    }
-  }
-}
-