Compare commits
	
		
			7 Commits
		
	
	
		
			release/1.
			...
			misc-ui-4
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|   | 6db1833a45 | ||
|   | 8b2edaa6fd | ||
|   | 8caeed2ce5 | ||
|   | 03be582b54 | ||
|   | 1ce84ee56b | ||
|   | cb39ad8500 | ||
|   | 74be02b6de | 
| @@ -4,9 +4,8 @@ | ||||
|         @click="navigate"> | ||||
|         <td class="c-list-item__name"> | ||||
|             <a :href="objectLink" ref="objectLink"> | ||||
|                 <div class="c-list-item__type-icon" | ||||
|                      :class="item.type.cssClass"></div> | ||||
|                 {{item.model.name}} | ||||
|                 <div class="c-list-item__type-icon" :class="item.type.cssClass"></div> | ||||
|                 <div class="c-list-item__name-value">{{item.model.name}}</div> | ||||
|             </a> | ||||
|         </td> | ||||
|         <td class="c-list-item__type">{{ item.type.name }}</td> | ||||
| @@ -20,17 +19,24 @@ | ||||
|  | ||||
|     /******************************* LIST ITEM */ | ||||
|     .c-list-item { | ||||
|         &__name { | ||||
|             @include ellipsize(); | ||||
|         &__name a { | ||||
|             display: flex; | ||||
|  | ||||
|             > * + * { margin-left: $interiorMarginSm; } | ||||
|         } | ||||
|  | ||||
|         &__type-icon { | ||||
|             // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon | ||||
|             color: $colorKey; | ||||
|             display: inline-block; | ||||
|             width: 1em; | ||||
|             margin-right:$interiorMarginSm; | ||||
|         } | ||||
|  | ||||
|         &__name-value { | ||||
|             @include ellipsize(); | ||||
|         } | ||||
|  | ||||
|         &.is-alias { | ||||
|             // Object is an alias to an original. | ||||
|             [class*='__type-icon'] { | ||||
| @@ -48,7 +54,6 @@ | ||||
|             } | ||||
|         } | ||||
|     } | ||||
|  | ||||
| </style> | ||||
|  | ||||
| <script> | ||||
|   | ||||
| @@ -78,9 +78,12 @@ | ||||
|  | ||||
|         td { | ||||
|             $p: floor($interiorMargin * 1.5); | ||||
|             font-size: 1.1em; | ||||
|             @include ellipsize(); | ||||
|             line-height: 120%; // Needed for icon alignment | ||||
|             max-width: 0; | ||||
|             padding-top: $p; | ||||
|             padding-bottom: $p; | ||||
|             width: 25%; | ||||
|  | ||||
|             &:not(.c-list-item__name) { | ||||
|                 color: $colorItemFgDetails; | ||||
|   | ||||
| @@ -5,21 +5,17 @@ | ||||
|                 @input="search" | ||||
|                 @clear="search"> | ||||
|             </search> | ||||
|         <div class="c-notebook__controls"> | ||||
|             <div class="select c-notebook__controls__time"> | ||||
|                 <select v-model="showTime"> | ||||
|                     <option value="0" selected="selected">Show all</option> | ||||
|                     <option value="1">Last hour</option> | ||||
|                     <option value="8">Last 8 hours</option> | ||||
|                     <option value="24">Last 24 hours</option> | ||||
|                 </select> | ||||
|             </div> | ||||
|             <div class="select c-notebook__controls__sort"> | ||||
|                 <select v-model="sortEntries"> | ||||
|                     <option value="newest" :selected="sortEntries === 'newest'">Newest first</option> | ||||
|                     <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option> | ||||
|                 </select> | ||||
|             </div> | ||||
|         <div class="c-notebook__controls "> | ||||
|             <select class="c-notebook__controls__time" v-model="showTime"> | ||||
|                 <option value="0" selected="selected">Show all</option> | ||||
|                 <option value="1">Last hour</option> | ||||
|                 <option value="8">Last 8 hours</option> | ||||
|                 <option value="24">Last 24 hours</option> | ||||
|             </select> | ||||
|             <select class="c-notebook__controls__time" v-model="sortEntries"> | ||||
|                 <option value="newest" :selected="sortEntries === 'newest'">Newest first</option> | ||||
|                 <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option> | ||||
|             </select> | ||||
|         </div> | ||||
|     </div> | ||||
|     <div class="c-notebook__drag-area icon-plus" | ||||
|   | ||||
| @@ -41,28 +41,24 @@ | ||||
|                     <div class="grid-cell label" | ||||
|                          title="The field to be plotted as a value for this series.">Value</div> | ||||
|                     <div class="grid-cell value"> | ||||
|                         <div class="select"> | ||||
|                             <select ng-model="form.yKey"> | ||||
|                                 <option ng-repeat="option in yKeyOptions" | ||||
|                                         value="{{option.value}}" | ||||
|                                         ng-selected="option.value == form.yKey"> | ||||
|                                     {{option.name}} | ||||
|                                 </option> | ||||
|                             </select> | ||||
|                         </div> | ||||
|                         <select ng-model="form.yKey"> | ||||
|                             <option ng-repeat="option in yKeyOptions" | ||||
|                                     value="{{option.value}}" | ||||
|                                     ng-selected="option.value == form.yKey"> | ||||
|                                 {{option.name}} | ||||
|                             </option> | ||||
|                         </select> | ||||
|                     </div> | ||||
|                 </li> | ||||
|                 <li class="grid-row"> | ||||
|                     <div class="grid-cell label" | ||||
|                          title="The line rendering style for this series.">Line Style</div> | ||||
|                     <div class="grid-cell value"> | ||||
|                         <div class="select"> | ||||
|                             <select ng-model="form.interpolate"> | ||||
|                                 <option value="none">None</option> | ||||
|                                 <option value="linear">Linear interpolate</option> | ||||
|                                 <option value="stepAfter">Step after</option> | ||||
|                             </select> | ||||
|                         </div> | ||||
|                         <select ng-model="form.interpolate"> | ||||
|                             <option value="none">None</option> | ||||
|                             <option value="linear">Linear interpolate</option> | ||||
|                             <option value="stepAfter">Step after</option> | ||||
|                         </select> | ||||
|                     </div> | ||||
|                 </li> | ||||
|                 <li class="grid-row"> | ||||
| @@ -160,15 +156,13 @@ | ||||
|                 <div class="grid-cell label" | ||||
|                      title="The position of the legend relative to the plot display area.">Position</div> | ||||
|                 <div class="grid-cell value"> | ||||
|                     <div class="select"> | ||||
|                         <select ng-model="form.position"> | ||||
|                             <option value="hidden">Hidden</option> | ||||
|                             <option value="top">Top</option> | ||||
|                             <option value="right">Right</option> | ||||
|                             <option value="bottom">Bottom</option> | ||||
|                             <option value="left">Left</option> | ||||
|                         </select> | ||||
|                     </div> | ||||
|                     <select ng-model="form.position"> | ||||
|                         <option value="hidden">Hidden</option> | ||||
|                         <option value="top">Top</option> | ||||
|                         <option value="right">Right</option> | ||||
|                         <option value="bottom">Bottom</option> | ||||
|                         <option value="left">Left</option> | ||||
|                     </select> | ||||
|                 </div> | ||||
|             </li> | ||||
|             <li class="grid-row"> | ||||
| @@ -180,15 +174,13 @@ | ||||
|                 <div class="grid-cell label" | ||||
|                      title="What to display in the legend when it's collapsed.">When collapsed show</div> | ||||
|                 <div class="grid-cell value"> | ||||
|                     <div class="select"> | ||||
|                         <select ng-model="form.valueToShowWhenCollapsed"> | ||||
|                             <option value="none">nothing</option> | ||||
|                             <option value="nearestTimestamp">nearest timestamp</option> | ||||
|                             <option value="nearestValue">nearest Value</option> | ||||
|                             <option value="min">minimum value</option> | ||||
|                             <option value="max">maximum value</option> | ||||
|                         </select> | ||||
|                     </div> | ||||
|                     <select ng-model="form.valueToShowWhenCollapsed"> | ||||
|                         <option value="none">Nothing</option> | ||||
|                         <option value="nearestTimestamp">Nearest timestamp</option> | ||||
|                         <option value="nearestValue">Nearest value</option> | ||||
|                         <option value="min">Minimum value</option> | ||||
|                         <option value="max">Maximum value</option> | ||||
|                     </select> | ||||
|                 </div> | ||||
|             </li> | ||||
|             <li class="grid-row"> | ||||
|   | ||||
| @@ -34,7 +34,7 @@ | ||||
|     <div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable" :style="{ 'max-width': widthWithScroll}"> | ||||
|         <table class="c-table__headers c-telemetry-table__headers"> | ||||
|             <thead> | ||||
|                 <tr> | ||||
|                 <tr class="c-telemetry-table__headers__name"> | ||||
|                     <table-column-header | ||||
|                         v-for="(title, key, headerIndex) in headers" | ||||
|                         :key="key" | ||||
| @@ -50,7 +50,7 @@ | ||||
|                         :sortOptions="sortOptions" | ||||
|                         >{{title}}</table-column-header> | ||||
|                 </tr> | ||||
|                 <tr> | ||||
|                 <tr class="c-telemetry-table__headers__filter"> | ||||
|                     <table-column-header | ||||
|                         v-for="(title, key, headerIndex) in headers" | ||||
|                         :key="key" | ||||
| @@ -214,6 +214,22 @@ | ||||
|         } | ||||
|     } | ||||
|  | ||||
|     /******************************* EDITING */ | ||||
|     .is-editing { | ||||
|         .c-telemetry-table__headers__name { | ||||
|             th[draggable], | ||||
|             th[draggable] > * { | ||||
|                 cursor: move; | ||||
|             } | ||||
|  | ||||
|             th[draggable]:hover { | ||||
|                 $b: $editSelectableColor; | ||||
|                 background: $b; | ||||
|                 > * { background: $b; } | ||||
|             } | ||||
|         } | ||||
|     } | ||||
|  | ||||
|     /******************************* LEGACY */ | ||||
|     .s-status-taking-snapshot, | ||||
|     .overlay.snapshot { | ||||
|   | ||||
| @@ -55,7 +55,7 @@ $basicCr: 4px; | ||||
|  | ||||
| // Base colors | ||||
| $colorBodyBg: #393939; | ||||
| $colorBodyFg: #aaa; | ||||
| $colorBodyFg: #aaaaaa; | ||||
| $colorBodyFgEm: #fff; | ||||
| $colorGenBg: #222; | ||||
| $colorHeadBg: #262626; | ||||
| @@ -65,7 +65,7 @@ $colorStatusBarFg: $colorBodyFg; | ||||
| $colorStatusBarFgHov: #aaa; | ||||
| $colorKey: #0099cc; | ||||
| $colorKeyFg: #fff; | ||||
| $colorKeyHov: #00c0f6; | ||||
| $colorKeyHov: #26d8ff; | ||||
| $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%); | ||||
| $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%); | ||||
| $colorKeySelectedBg: $colorKey; | ||||
| @@ -116,13 +116,16 @@ $editColorBgBase: darken($editColor, $dlSpread); | ||||
| $editColorBg: rgba($editColorBgBase, 0.2); | ||||
| $editColorFg: lighten($editColor, $dlSpread); | ||||
| $editColorHov: lighten($editColor, 20%); | ||||
|  | ||||
| // Canvas | ||||
| $editCanvasColorBg: $editColorBg; //#002524; | ||||
| $editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%); | ||||
| $editCanvasColorBg: $editColorBg; | ||||
| $editCanvasColorGrid: rgba($editColorBgBase, 0.4); | ||||
|  | ||||
| // Selectable | ||||
| $editSelectableColor: #006563; | ||||
| $editSelectableColorFg: lighten($editSelectableColor, 20%); | ||||
| $editSelectableColorHov: lighten($editSelectableColor, 10%); | ||||
|  | ||||
| // Selectable selected | ||||
| $editSelectableColorSelected: $editSelectableColorHov; | ||||
| $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%); | ||||
| @@ -222,6 +225,13 @@ $overlayColorFg: $colorMenuFg; | ||||
| $overlayCr: $interiorMarginLg; | ||||
| $overlayBrightnessAdjust: brightness(1.3); | ||||
|  | ||||
| // Toolbar | ||||
| $toolBarEditColorBg: darken($editColorBgBase, 5%); | ||||
| $toolBarEditColorFg: lighten($editColorBgBase, 20%); | ||||
| $toolBarEditColorBtnFg: $toolBarEditColorFg; | ||||
| $toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%); | ||||
| $toolBarEditColorBtnFgHover: lighten($toolBarEditColorFg, 10%); | ||||
|  | ||||
| // Indicator colors | ||||
| $colorIndicatorAvailable: $colorKey; | ||||
| $colorIndicatorDisabled: #555555; | ||||
| @@ -371,17 +381,6 @@ $createBtnTextTransform: uppercase; | ||||
|     box-shadow: rgba(black, 0.5) 0 0.5px 2px; | ||||
| } | ||||
|  | ||||
| /**************************************************** NOT USED, LEAVE FOR NOW */ | ||||
| // Slider controls, not in use | ||||
| /* | ||||
| $sliderColorBase: $colorKey; | ||||
| $sliderColorRangeHolder: rgba(black, 0.07); | ||||
| $sliderColorRange: rgba($sliderColorBase, 0.2); | ||||
| $sliderColorRangeHov: rgba($sliderColorBase, 0.4); | ||||
| $sliderColorKnob: darken($sliderColorBase, 20%); | ||||
| $sliderColorKnobHov: rgba($sliderColorBase, 0.7); | ||||
| $sliderColorRangeValHovBg: $sliderColorRange; | ||||
| $sliderColorRangeValHovFg: $colorBodyFg; | ||||
| $sliderKnobW: 15px; | ||||
| $sliderKnobR: 2px; | ||||
| */ | ||||
| @mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) { | ||||
|     @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px); | ||||
| } | ||||
|   | ||||
| @@ -69,7 +69,7 @@ $colorStatusBarFg: $colorBodyFg; | ||||
| $colorStatusBarFgHov: #aaa; | ||||
| $colorKey: #0099cc; | ||||
| $colorKeyFg: #fff; | ||||
| $colorKeyHov: #00c0f6; | ||||
| $colorKeyHov: #26d8ff; | ||||
| $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%); | ||||
| $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%); | ||||
| $colorKeySelectedBg: $colorKey; | ||||
| @@ -120,13 +120,16 @@ $editColorBgBase: darken($editColor, $dlSpread); | ||||
| $editColorBg: rgba($editColorBgBase, 0.2); | ||||
| $editColorFg: lighten($editColor, $dlSpread); | ||||
| $editColorHov: lighten($editColor, 20%); | ||||
|  | ||||
| // Canvas | ||||
| $editCanvasColorBg: $editColorBg; //#002524; | ||||
| $editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%); | ||||
| $editCanvasColorBg: $editColorBg; | ||||
| $editCanvasColorGrid: rgba($editColorBgBase, 0.4); | ||||
|  | ||||
| // Selectable | ||||
| $editSelectableColor: #006563; | ||||
| $editSelectableColorFg: lighten($editSelectableColor, 20%); | ||||
| $editSelectableColorHov: lighten($editSelectableColor, 10%); | ||||
|  | ||||
| // Selectable selected | ||||
| $editSelectableColorSelected: $editSelectableColorHov; | ||||
| $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%); | ||||
| @@ -142,7 +145,7 @@ $colorGridLines: rgba($editColor, 0.2); | ||||
| /************************************************** BROWSING */ | ||||
| $browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2); | ||||
| $browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px; | ||||
| $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6); | ||||
| $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.5); | ||||
|  | ||||
| // Icons | ||||
| $colorIconAlias: #4af6f3; | ||||
| @@ -226,6 +229,13 @@ $overlayColorFg: $colorMenuFg; | ||||
| $overlayCr: $interiorMarginLg; | ||||
| $overlayBrightnessAdjust: brightness(1.3); | ||||
|  | ||||
| // Toolbar | ||||
| $toolBarEditColorBg: darken($editColorBgBase, 5%); | ||||
| $toolBarEditColorFg: lighten($editColorBgBase, 20%); | ||||
| $toolBarEditColorBtnFg: $toolBarEditColorFg; | ||||
| $toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%); | ||||
| $toolBarEditColorBtnFgHover: lighten($toolBarEditColorFg, 10%); | ||||
|  | ||||
| // Indicator colors | ||||
| $colorIndicatorAvailable: $colorKey; | ||||
| $colorIndicatorDisabled: #555555; | ||||
| @@ -375,6 +385,10 @@ $createBtnTextTransform: uppercase; | ||||
|     box-shadow: rgba(black, 0.5) 0 0.5px 2px; | ||||
| } | ||||
|  | ||||
| @mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) { | ||||
|     @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px); | ||||
| } | ||||
|  | ||||
| /**************************************************** OVERRIDES */ | ||||
| .c-frame { | ||||
|     &:not(.no-frame) { | ||||
|   | ||||
| @@ -110,26 +110,29 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov | ||||
| /************************************************** EDITING */ | ||||
| // Base Colors | ||||
| $dlSpread: 20%; | ||||
| $editColor: #00c7c3; | ||||
| $editColor: #6afdff; | ||||
| $editColorAlt: #9971ff; | ||||
| $editColorBgBase: darken($editColor, $dlSpread); | ||||
| $editColorBg: darken($editColor, $dlSpread); | ||||
| $editColorFg: lighten($editColor, $dlSpread); | ||||
| $editColorBgBase: lighten($editColor, 20%); | ||||
| $editColorBg: $editColor; | ||||
| $editColorFg: darken($editColor, $dlSpread); | ||||
| $editColorHov: lighten($editColor, 20%); | ||||
|  | ||||
| // Canvas | ||||
| $editCanvasColorBg: #e6ffff; | ||||
| $editCanvasColorGrid: darken($editCanvasColorBg, 10%); | ||||
| $editCanvasColorBg: lighten($editColorBgBase, 5%); | ||||
| $editCanvasColorGrid: $editColorBgBase; | ||||
|  | ||||
| // Selectable | ||||
| $editSelectableColor: #acdad6; | ||||
| $editSelectableColor: #00b3b1; | ||||
| $editSelectableColorFg: darken($editSelectableColor, 20%); | ||||
| $editSelectableColorHov: darken($editSelectableColor, 10%); | ||||
| $editSelectableColorHov: darken($editSelectableColor, 20%); | ||||
|  | ||||
| // Selectable selected | ||||
| $editSelectableColorSelected: $editColor; | ||||
| $editSelectableColorSelected: #c60; //$editSelectableColorHov; | ||||
| $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 50%); | ||||
| $editSelectableColorFg: darken($editSelectableColor, 40%); | ||||
| $editSelectableBorder: 1px dotted $editSelectableColor; | ||||
| $editSelectableBorderHov: 1px dotted $editColorAlt; | ||||
| $editSelectableBorderSelected: 1px solid $editColor; | ||||
| $editSelectableBorderSelected: 1px solid $editSelectableColorSelected; | ||||
| $editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px; | ||||
| $editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px; | ||||
| $editBorderDrilledIn: 1px dashed $editColorAlt; | ||||
| @@ -138,7 +141,7 @@ $colorGridLines: rgba($editColor, 0.2); | ||||
| /************************************************** BROWSING */ | ||||
| $browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2); | ||||
| $browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px; | ||||
| $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6); | ||||
| $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.5); | ||||
|  | ||||
| // Icons | ||||
| $colorIconAlias: #4af6f3; | ||||
| @@ -222,6 +225,13 @@ $overlayColorFg: $colorMenuFg; | ||||
| $overlayCr: $interiorMarginLg; | ||||
| $overlayBrightnessAdjust: brightness(1); | ||||
|  | ||||
| // Toolbar | ||||
| $toolBarEditColorBg: darken($editColorBgBase, 5%); | ||||
| $toolBarEditColorFg: rgba(black, 0.7); | ||||
| $toolBarEditColorBtnFg: $toolBarEditColorFg; | ||||
| $toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%); | ||||
| $toolBarEditColorBtnFgHover: rgba(black, 0.9); | ||||
|  | ||||
| // Indicator colors | ||||
| $colorIndicatorAvailable: $colorKey; | ||||
| $colorIndicatorDisabled: #444; | ||||
| @@ -370,16 +380,6 @@ $createBtnTextTransform: uppercase; | ||||
|     background: $c; | ||||
| } | ||||
|  | ||||
|  | ||||
| /**************************************************** NOT USED, LEAVE FOR NOW */ | ||||
|  | ||||
| // Content status | ||||
| /* | ||||
| $colorAlert: #ff3c00; | ||||
| $colorWarningHi: #990000; | ||||
| $colorWarningLo: #ff9900; | ||||
| $colorDiagnostic: #a4b442; | ||||
| $colorCommand: #3693bd; | ||||
| $colorInfo: #2294a2; | ||||
| $colorOk: #33cc33; | ||||
| */ | ||||
| @mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) { | ||||
|     @include cSelect($bg, $fg, lighten($bg, 20%), none); | ||||
| } | ||||
|   | ||||
| @@ -228,6 +228,17 @@ input[type=number]::-webkit-outer-spin-button { | ||||
|     } | ||||
| } | ||||
|  | ||||
| // SELECTS | ||||
| select { | ||||
|     @include appearanceNone(); | ||||
|     @include themedSelect(); | ||||
|     background-repeat: no-repeat, no-repeat; | ||||
|     background-position: right .4em top 90%, 0 0; | ||||
|     border: none; | ||||
|     border-radius: $controlCr; | ||||
|     padding: 1px 20px 1px $interiorMargin; | ||||
| } | ||||
|  | ||||
| /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */ | ||||
| .c-hyperlink { | ||||
|     &--link { | ||||
| @@ -421,21 +432,31 @@ input[type=number]::-webkit-outer-spin-button { | ||||
|  | ||||
| .c-toolbar { | ||||
|     $p: $interiorMargin; | ||||
|     border-top: 1px solid $colorInteriorBorder; | ||||
|     background: $toolBarEditColorBg; | ||||
|     border-radius: $basicCr; | ||||
|     height: $p + 24px; // Need to standardize the height | ||||
|     padding-top: $p; | ||||
|     padding: $p; | ||||
|  | ||||
|     &__separator { | ||||
|         @include cToolbarSeparator(); | ||||
|     } | ||||
|  | ||||
|     .c-click-icon, | ||||
|     .c-labeled-input { | ||||
|         color: $toolBarEditColorBtnFg; | ||||
|     } | ||||
|  | ||||
|     .c-click-icon { | ||||
|         @include cControl(); | ||||
|         $pLR: $interiorMargin - 1; | ||||
|         $pTB: 2px; | ||||
|         color: $colorBodyFg; | ||||
|         padding: $pTB $pLR; | ||||
|  | ||||
|         &:hover { | ||||
|             background: $toolBarEditColorBtnBgHover !important; | ||||
|             color: $toolBarEditColorBtnFgHover !important; | ||||
|         } | ||||
|  | ||||
|         &--swatched { | ||||
|             padding-bottom: floor($pTB / 2); | ||||
|             width: 2em; // Standardize the width | ||||
| @@ -535,7 +556,7 @@ input[type=number]::-webkit-outer-spin-button { | ||||
|  | ||||
| input[type="range"] { | ||||
|     // HTML5 range inputs | ||||
|     -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ | ||||
|     @include appearanceNone(); /* Hides the slider so that custom slider can be made */ | ||||
|     background: transparent; /* Otherwise white in Chrome */ | ||||
|     &:focus { | ||||
|         outline: none; /* Removes the blue border. */ | ||||
|   | ||||
| @@ -60,6 +60,16 @@ | ||||
|     width: $d; | ||||
| } | ||||
|  | ||||
| @mixin appearanceNone() { | ||||
|     -moz-appearance: none; | ||||
|     -webkit-appearance: none; | ||||
|     appearance: none; | ||||
|  | ||||
|     &:focus { | ||||
|         outline: none; | ||||
|     } | ||||
| } | ||||
|  | ||||
| @mixin isAlias() { | ||||
|     &:after { | ||||
|         color:$colorIconAlias; | ||||
| @@ -194,7 +204,7 @@ | ||||
| } | ||||
|  | ||||
| @mixin htmlInputReset() { | ||||
|     appearance: none; | ||||
|     @include appearanceNone(); | ||||
|     background: transparent; | ||||
|     border: none; | ||||
|     border-radius: 0; | ||||
| @@ -263,6 +273,7 @@ | ||||
|     display: inline-flex; | ||||
|     align-items: center; | ||||
|     justify-content: center; | ||||
|     line-height: $fs; // Remove effect on top and bottom padding | ||||
|     overflow: hidden; | ||||
|  | ||||
|     &:before, | ||||
| @@ -272,6 +283,10 @@ | ||||
|         flex: 0 0 auto; | ||||
|     } | ||||
|  | ||||
|     &:before { | ||||
|         font-size: 0.9em; | ||||
|     } | ||||
|  | ||||
|     &:after { | ||||
|         font-size: 0.8em; | ||||
|     } | ||||
| @@ -279,15 +294,18 @@ | ||||
|     [class*="__label"] { | ||||
|         @include ellipsize(); | ||||
|         display: block; | ||||
|         line-height: $fs; // Remove effect on top and bottom padding | ||||
|         font-size: $fs; | ||||
|     } | ||||
|  | ||||
|     &[class*='icon'] > [class*="__label"] { | ||||
|         // When button holds both an icon and a label, provide margin between them. | ||||
|         margin-left: $interiorMarginSm; | ||||
|     } | ||||
| } | ||||
|  | ||||
| @mixin cButton() { | ||||
|     @include cControl(); | ||||
|     @include themedButton(); | ||||
|     //@include buttonBehavior(); | ||||
|     border-radius: $controlCr; | ||||
|     color: $colorBtnFg; | ||||
|     cursor: pointer; | ||||
| @@ -329,12 +347,12 @@ | ||||
|     // Make the icon bigger relative to its container | ||||
|     @include cControl(); | ||||
|     $pLR: 4px; | ||||
|     $pTB: 3px; | ||||
|     $pTB: 4px; | ||||
|     background: none; | ||||
|     box-shadow: none; | ||||
|     border-radius: $controlCr; | ||||
|     cursor: pointer; | ||||
|     padding: $pTB $pLR ; | ||||
|     padding: $pTB $pLR; | ||||
|  | ||||
|     @include hover() { | ||||
|         background: $colorClickIconBgHov; | ||||
| @@ -421,6 +439,13 @@ | ||||
|     } | ||||
| } | ||||
|  | ||||
| @mixin cSelect($bg, $fg, $arwClr, $shdw) { | ||||
|     $svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value | ||||
|     background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg; | ||||
|     color: $fg; | ||||
|     box-shadow: $shdw; | ||||
| } | ||||
|  | ||||
| @mixin wrappedInput() { | ||||
|     // An input that is wrapped. Optionally includes a __label or icon element. | ||||
|     // Based on .c-search. | ||||
|   | ||||
| @@ -18,9 +18,6 @@ | ||||
|     .c-search { | ||||
|         @include wrappedInput(); | ||||
|  | ||||
|         padding-top: 2px; | ||||
|         padding-bottom: 2px; | ||||
|  | ||||
|         &:before { | ||||
|             // Mag glass icon | ||||
|             content: $glyph-icon-magnify; | ||||
|   | ||||
| @@ -184,7 +184,6 @@ | ||||
|         } | ||||
|  | ||||
|         /******************************* MAIN AREA */ | ||||
|  | ||||
|         &__main-container { | ||||
|             // Wrapper for main views | ||||
|             flex: 1 1 auto !important; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user