[Frontend] Refactor glyphs to classes
Squashes #1103, fixes #1047. Squashed commit of the following: commit0e060f174dAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Fri Jul 29 14:55:34 2016 -0700 [Frontend] Added button to .s-button Fixes #1047 commit9f74395a79Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Fri Jul 29 14:43:36 2016 -0700 [Frontend] Fixing problems from circleci Fixes #1047 commit7278c9534cAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Fri Jul 29 14:37:21 2016 -0700 [Frontend] CSS fixes for s-status classes Fixes #1047 Fixed .s-status-editing and s-status-pending; commit4606d617d1Merge:d5bff5559436f7Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Fri Jul 29 13:58:51 2016 -0700 Merge remote-tracking branch 'origin/master' into frontend-1047 commitd5bff555e0Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 19:09:33 2016 -0700 [Frontend] Updated glyphs used by plot view switcher Fixes #1047 commitb72d82baefAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 19:09:00 2016 -0700 [Frontend] Tree styles in left pane and selector-list Fixes #1047 commitaf36b9996dAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 18:32:34 2016 -0700 [Frontend] Form validation styling Fixes #1047 <mct-form> must now include class 'validates' to display validation glyph icons; removed 'no-validate' from markup; cleaned up validation scss; commit69dc893b4bAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 17:11:52 2016 -0700 [Frontend] Glyphs to classes, mobile Fixes #1047 Fixes and enhancements for mobile, particularly in tree; Removed `display: inline-block` from containerSubtle mixin; commit7bca18b186Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 11:36:19 2016 -0700 [Frontend] Rename .s-menu-btn, remove unused Fixes #1047 .s-menu-btn > .s-menu-button; .create-btn > .create-button; removed unused l-btn, t-btn, t-btns-zoom from markup commit5d229198b7Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 11:25:36 2016 -0700 [Frontend] Rename .s-clickable-icon to .s-icon-button Fixes #1047 commit36479e2e8bAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 11:20:30 2016 -0700 [Frontend] Rename .s-btn to .s-button Fixes #1047 commit89e4f06de9Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 11:12:07 2016 -0700 [Frontend] Apply clickable-icon class Fixes #1047 commite65ca1cb8bAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Thu Jul 28 10:52:35 2016 -0700 [Frontend] Updated icons Fixes #1047 - Clock, timer, plots updated commit3e7eb98ac2Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Wed Jul 27 18:05:06 2016 -0700 [Frontend] Standardizing styles Fixes #1047 - Finessing mini-tab and making able to control per theme; s-clickable and s-toggle-icon classes cleaned up commit18e08074a8Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Wed Jul 27 16:33:25 2016 -0700 [Frontend] Tweaks to sass code Fixes #1047 - Splitter and mini-tab-icon elements commit44fda8d68fAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Wed Jul 27 09:24:53 2016 -0700 [Frontend] Multiple UI fixes and tweaks Fixes #1047 mini-tabs, splitters and bg-splash updated; moved position of Inspector collapse mini-tab to allow position transition; splitter-sm class added for Timelines; commit2aee8bc0d8Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jul 26 15:53:32 2016 -0700 [Frontend] Updated splash image Fixes #1047 commit624f09777fMerge:ce7591f4d2f159Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jul 26 15:02:55 2016 -0700 Merge remote-tracking branch 'origin/master' into frontend-1047 commitce7591f642Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jul 26 11:22:23 2016 -0700 [Frontend] Fixed clock indicator Fixes #1047 Restored no-collapse and float-right properties; commit5324c8edbaAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 25 18:14:38 2016 -0700 [Frontend] New font and project file Fixes #1047 New font files that were missed in last commit; updated icomoon proj file; fixed missing char codes in glyphs.scss; commita3b2628883Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 25 17:54:00 2016 -0700 [Frontend] Revised and new icon art Fixes #1047 New icons for overlay and stacked plots; revised art and new description for Fixed Position object; commit8a41c6dbc7Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 25 17:52:41 2016 -0700 [Frontend] Removing glyph definitions Fixes #1047 Updated comment commiteb293b21ebAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 25 11:56:18 2016 -0700 [Frontend] Removing glyph definitions Fixes #1047 Removed commented code commitd8b1fb7781Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 25 11:17:45 2016 -0700 [Frontend] Removing glyph definitions; updating tests Fixes #1047 Search and removal of "glyph" definitions in bundle and other JS files; updating tests accordingly; commit650fbcc921Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 25 10:20:33 2016 -0700 [Frontend] Removing glyph definitions; updating tests Fixes #1047 Search and removal of "glyph" definitions in bundle and other JS files; updating tests accordingly; commit574b8bd5c1Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Fri Jul 22 19:11:56 2016 -0700 [Frontend] Updated tests for glyph refactoring Fixes #1047 Fixing test cases commitdd84177441Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Fri Jul 22 18:47:45 2016 -0700 [Frontend] Updated tests and examples for glyph refactoring Fixes #1047 WIP: Fixing test cases: fixed test in Timers that was expecting glyph return; commit2231f8e124Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 17:45:20 2016 -0700 [Frontend] Updated tests for glyph refactoring Fixes #1047 Fixing test cases: fixed test in Timers that was expecting glyph return; commitae59ecfa97Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 17:38:45 2016 -0700 [Frontend] Fixed style Fixes #1047 WIP: fixed line-height issue for t-item-icon class commitd43bff1445Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 17:07:49 2016 -0700 [Frontend] Fixed colors Fixes #1047 WIP: fixed colors and style defs related to clickable icons commitc2db6f8805Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 16:32:17 2016 -0700 [Frontend] Fixed colors Fixes #1047 WIP: fixed colors related to changes to btnSubtle mixin; new constants for clickable icons commita4753c44d1Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 15:23:58 2016 -0700 [Frontend] Added new icon-brackets to symbols font Fixes #1047 WIP commit2704640b94Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 15:11:28 2016 -0700 [Frontend] Normalize color constants Fixes #1047 Normalize color constant values for themes; consolidated and cleaned up btn-related mixins; fixed hover color issues commit421286c7e4Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 14:10:13 2016 -0700 [Frontend] Convert new Fixed Position Display from glyphs Fixes #1047 WIP commita4111f3855Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 14:07:38 2016 -0700 [Frontend] Refactoring Timeline glyphs, s-btn fixes Fixes #1047 WIP: Timeline-related glyph refactoring; s-btn styles and hover color fixes commit883f999215Merge:9d9cabb14f1a1fAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jul 21 08:53:23 2016 -0700 Merge remote-tracking branch 'origin/master' into frontend-1047 commit9d9cabb760Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jul 19 16:20:20 2016 -0700 [Frontend] Glyph refactoring Fixes #1047 WIP: search, toolbar buttons; mods to flex archetypes commit28b663ce41Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 18 14:58:40 2016 -0700 [Frontend] Glyph-related style changes to toolbars and buttons Fixes #1047 Glyph refactoring WIP for toolbar buttons; Timeline glyph refactoring continued commita9326f572fAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 18 13:36:45 2016 -0700 [Frontend] Glyph-related style changes to Timelines Fixes #1047 Timeline glyph refactoring; Resource Graph icons in swimlanes now display grayed-out version when not added to the Resource Graph; minor color tweaks commitd6e1737803Merge:88054e56176ca2Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Mon Jul 18 10:29:32 2016 -0700 [Frontend] Merge master into frontend-1047 Fixes #1047 Resolved conflict in icomoon.json file commit88054e5e8eAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jun 30 16:55:40 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In progress: significant mods to pane collapse/expand buttons and symbols, minor tweaks to splitter look, limits glyph definitions commit7c47343f5cAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jun 30 16:52:21 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In progress: updated font files glyphs, mostly for pane collapse icons commitfd00bdce54Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jun 30 12:20:55 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In progress: search menu commit272b4b649eAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jun 30 12:11:25 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In progress: moved limits classes out of _contants and into _glyphs; timers, entanglement context menu items, form validation, date picker. commit95d26e6fe7Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Wed Jun 29 14:18:12 2016 -0700 [Frontend] Refactoring glyphs to classes Fixes #1047 In-progress; limits commit26b30d96dbAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jun 28 17:16:18 2016 -0700 [Frontend] Refactoring glyphs to classes Fixes #1047 In-progress; overlay close, search inputs, messages and message banners, ui-symbol removal in-progress. commit4e2a01ad85Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jun 28 16:21:05 2016 -0700 [Frontend] Refactoring glyphs to classes Fixes #1047 In-progress; .labeled added to .s-btn, removed .s-icon-btn commit521db3c3feAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jun 28 16:10:54 2016 -0700 [Frontend] Refactoring glyphs to classes Fixes #1047 In-progress; plot options, imagery buttons, cleanups in buttons.scss, edit-action buttons, .s-btn .no-label class added. commit8bb8db69e6Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jun 28 14:47:52 2016 -0700 [Frontend] Refactoring glyphs to classes Fixes #1047 In-progress; indicators, notifications, actions, tests commit53ed0bfb22Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Mon Jun 27 17:01:45 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In progress, really: view icons, timer/clock commit47dc7f2f6bAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Mon Jun 27 16:13:31 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In progress: grid items commit2bd34f71beAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Mon Jun 27 15:00:46 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 Context menus and associated actions, custom checkboxes, tree item being edited commitb561d4f60eAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Mon Jun 27 14:27:56 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In-progess: glyphs.scss now uses $vars to allow other scss to use a var instead of string literals; commit0cf4089620Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Mon Jun 27 14:13:59 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In-progess: tree-labels, unknown objects, object header commit46cae10905Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Mon Jun 27 11:41:06 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In-progess, menus and Create menu fixes commitfe3097707fMerge:7d69ae4652a50cAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Mon Jun 27 11:20:55 2016 -0700 Merge remote-tracking branch 'origin/master' into frontend-1047 commit7d69ae401bAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jun 23 15:59:56 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In-progress, converting types, mods to Create Menu template commit18d9f3d6b2Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jun 23 15:14:22 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 Very much In-progess: convert some controls; commite93a90a782Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jun 23 11:28:07 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 Very much In-progess, classes for all symbols added to glyphs.scss; .menu cleaned up; commitdc670b22a6Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Thu Jun 23 08:55:27 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 Very much In-progess, "icon-" selector, browse bar buttons commit8b29ccf3afAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Wed Jun 22 23:15:24 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 Very much In-progess, s-btn and s-btn-menu refactoring commitf574ffed16Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Wed Jun 22 14:37:34 2016 -0700 [Frontend] Refactoring glyphs to classes fixes #1047 In-progess, e900 > e904 commitbc62ee4565Author: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Wed Jun 22 13:28:15 2016 -0700 [Frontend] Complete revamp of unicodes fixes #1047 New font files; no re-mapping yet in the app. commit614f0c6e9fAuthor: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov> Date: Wed Jun 22 13:23:18 2016 -0700 [Frontend] Complete revamp of unicodes fixes #1047 Moved all glyphs into PUA area of font, and re-organized by category. commit47bd4031d5Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jun 21 18:39:48 2016 -0700 [Frontend] Renaming symbols font files Fixes #1047 - Modified sass to point to renamed font files; - Added new 12px symbols font files to sass; commit22a51d6bbbAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jun 21 18:22:33 2016 -0700 [Frontend] Updating Icomoon project files Fixes #1047 - Renamed main project file; - Added new 12px symbols project file; commit13ded2fd84Author: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jun 21 18:19:27 2016 -0700 [Frontend] Added new 12px symbols font files Fixes #1047 commitaef5660dfdAuthor: Charles Hacskaylo <charlesh88@gmail.com> Date: Tue Jun 21 18:16:56 2016 -0700 [Frontend] Renaming symbols font files Fixes #1047
This commit is contained in:
Victor Woeltjen
@@ -43,7 +43,7 @@
|
||||
color: $colorAboutLink;
|
||||
}
|
||||
.s-description,
|
||||
.s-btn {
|
||||
.s-button {
|
||||
line-height: 2em;
|
||||
}
|
||||
.l-licenses-software {
|
||||
|
||||
@@ -121,17 +121,16 @@
|
||||
.l-flex-row {
|
||||
@include flex-direction(row);
|
||||
&.flex-elem { @include flex(1 1 auto); }
|
||||
.flex-elem {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
> .flex-elem {
|
||||
min-width: 0;
|
||||
&.holder:not(:last-child) { margin-right: $interiorMargin; }
|
||||
}
|
||||
.flex-container { @include flex-direction(row); }
|
||||
}
|
||||
|
||||
.l-flex-col {
|
||||
@include flex-direction(column);
|
||||
.flex-elem {
|
||||
> .flex-elem {
|
||||
min-height: 0;
|
||||
&.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
font-size: 0.75rem;
|
||||
|
||||
&:hover {
|
||||
.l-autoflow-header .s-btn.change-column-width {
|
||||
.l-autoflow-header .s-button.change-column-width {
|
||||
@include trans-prop-nice-fade(50ms);
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -43,7 +43,7 @@
|
||||
.t-last-update {
|
||||
overflow: hidden;
|
||||
}
|
||||
.s-btn.change-column-width {
|
||||
.s-button.change-column-width {
|
||||
@include trans-prop-nice-fade(500ms);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -43,9 +43,10 @@ $ueColMargin: 1.5%;
|
||||
$ueAppLogoW: 80px;
|
||||
$ueEditToolBarH: 25px;
|
||||
$ueCollapsedPaneEdgeM: 22px;
|
||||
$uePaneMiniTabH: $ueTopBarH;
|
||||
$uePaneMiniTabW: 10px;
|
||||
$uePaneMiniTabCollapsedW: 11px;
|
||||
$uePaneMiniTabH: 22px;
|
||||
$uePaneMiniTabW: 8px;
|
||||
$uePaneMiniTabFontSize: 8px;
|
||||
$uePaneMiniTabCollapsedW: 18px;
|
||||
$ueEditLeftPaneW: 75%;
|
||||
$treeSearchInputBarH: 25px;
|
||||
$ueTimeControlH: (33px, 18px, 20px);
|
||||
@@ -73,7 +74,7 @@ $treeTypeIconHPx: 16px;
|
||||
$treeTypeIconW: 18px;
|
||||
$treeContextTriggerW: 20px;
|
||||
/*************** Tabular */
|
||||
$tabularHeaderH: 22px; //18px
|
||||
$tabularHeaderH: 22px;
|
||||
$tabularTdPadLR: $itemPadLR;
|
||||
$tabularTdPadTB: 3px;
|
||||
/*************** Imagery */
|
||||
@@ -107,7 +108,7 @@ $bubbleMaxW: 300px;
|
||||
/*************** Forms */
|
||||
$reqSymbolW: 15px;
|
||||
$reqSymbolM: $interiorMargin * 2;
|
||||
$reqSymbolFontSize: 0.7em;
|
||||
$reqSymbolFontSize: 0.75em;
|
||||
/*************** Wait Spinner Defaults */
|
||||
$waitSpinnerD: 32px;
|
||||
$waitSpinnerTreeD: 20px;
|
||||
@@ -136,8 +137,3 @@ $dirImgs: $dirCommonRes + 'images/';
|
||||
$controlFadeMs: 100ms;
|
||||
$browseToEditAnimMs: 400ms;
|
||||
$editBorderPulseMs: 500ms;
|
||||
|
||||
/************************** LIMITS */
|
||||
$glyphLimit: '\e603';
|
||||
$glyphLimitUpr: '\0000eb';
|
||||
$glyphLimitLwr: '\0000ee';
|
||||
|
||||
@@ -22,18 +22,34 @@
|
||||
/************************** FONTS */
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with /platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json
|
||||
* to generate font files
|
||||
*/
|
||||
font-family: 'symbolsfont';
|
||||
src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot');
|
||||
src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
|
||||
url($dirCommonRes + 'fonts/symbols/wtdsymbols.woff') format('woff'),
|
||||
url($dirCommonRes + 'fonts/symbols/wtdsymbols.ttf') format('truetype'),
|
||||
url($dirCommonRes + 'fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
|
||||
src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.eot');
|
||||
src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.eot?#iefix') format('embedded-opentype'),
|
||||
url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.woff') format('woff'),
|
||||
url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.ttf') format('truetype'),
|
||||
url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json
|
||||
* to generate font files
|
||||
*/
|
||||
font-family: 'symbolsfont 12px';
|
||||
src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.eot');
|
||||
src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.eot?#iefix') format('embedded-opentype'),
|
||||
url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.woff') format('woff'),
|
||||
url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.ttf') format('truetype'),
|
||||
url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
color: $colorA;
|
||||
|
||||
212
platform/commonUI/general/res/sass/_glyphs.scss
Normal file
212
platform/commonUI/general/res/sass/_glyphs.scss
Normal file
@@ -0,0 +1,212 @@
|
||||
@mixin glyph($unicode, $family: 'symbolsfont') {
|
||||
&:before {
|
||||
content: $unicode;
|
||||
font-family: $family;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** CHAR UNICODES */
|
||||
|
||||
$glyph-icon-alert-rect: '\e900';
|
||||
$glyph-icon-alert-triangle: '\e901';
|
||||
$glyph-icon-arrow-down: '\e902';
|
||||
$glyph-icon-arrow-left: '\e903';
|
||||
$glyph-icon-arrow-right: '\e904';
|
||||
$glyph-icon-arrow-double-up: '\e905';
|
||||
$glyph-icon-arrow-tall-up: '\e906';
|
||||
$glyph-icon-arrow-tall-down: '\e907';
|
||||
$glyph-icon-arrow-double-down: '\e908';
|
||||
$glyph-icon-arrow-up: '\e909';
|
||||
$glyph-icon-asterisk: '\e910';
|
||||
$glyph-icon-bell: '\e911';
|
||||
$glyph-icon-box: '\e912';
|
||||
$glyph-icon-box-with-arrow: '\e913';
|
||||
$glyph-icon-check: '\e914';
|
||||
$glyph-icon-connectivity: '\e915';
|
||||
$glyph-icon-database-in-brackets: '\e916';
|
||||
$glyph-icon-eye-open: '\e917';
|
||||
$glyph-icon-gear: '\e918';
|
||||
$glyph-icon-hourglass: '\e919';
|
||||
$glyph-icon-info: '\e920';
|
||||
$glyph-icon-link: '\e921';
|
||||
$glyph-icon-lock: '\e922';
|
||||
$glyph-icon-minus: '\e923';
|
||||
$glyph-icon-people: '\e924';
|
||||
$glyph-icon-person: '\e925';
|
||||
$glyph-icon-plus: '\e926';
|
||||
$glyph-icon-trash: '\e927';
|
||||
$glyph-icon-x: '\e928';
|
||||
$glyph-icon-brackets: '\e929';
|
||||
$glyph-icon-arrows-out: '\e1000';
|
||||
$glyph-icon-arrows-right-left: '\e1001';
|
||||
$glyph-icon-arrows-up-down: '\e1002';
|
||||
$glyph-icon-box-with-dashed-lines: '';
|
||||
$glyph-icon-bullet: '\e1004';
|
||||
$glyph-icon-calendar: '\e1005';
|
||||
$glyph-icon-chain-links: '\e1006';
|
||||
$glyph-icon-collapse-pane-left: '\e1007';
|
||||
$glyph-icon-collapse-pane-right: '\e1008';
|
||||
$glyph-icon-download: '\e1009';
|
||||
$glyph-icon-duplicate: '\e1010';
|
||||
$glyph-icon-folder-new: '\e1011';
|
||||
$glyph-icon-fullscreen-collapse: '\e1012';
|
||||
$glyph-icon-fullscreen-expand: '\e1013';
|
||||
$glyph-icon-layers: '\e1014';
|
||||
$glyph-icon-line-horz: '\e1015';
|
||||
$glyph-icon-magnify: '\e1016';
|
||||
$glyph-icon-magnify-in: '\e1017';
|
||||
$glyph-icon-magnify-out: '\e1018';
|
||||
$glyph-icon-menu-hamburger: '\e1019';
|
||||
$glyph-icon-move: '\e1020';
|
||||
$glyph-icon-new-window: '\e1021';
|
||||
$glyph-icon-paint-bucket: '\e1022';
|
||||
$glyph-icon-pause: '\e1023';
|
||||
$glyph-icon-pencil: '\e1024';
|
||||
$glyph-icon-play: '\e1025';
|
||||
$glyph-icon-plot-resource: '\e1026';
|
||||
$glyph-icon-pointer-left: '\e1027';
|
||||
$glyph-icon-pointer-right: '\e1028';
|
||||
$glyph-icon-refresh: '\e1029';
|
||||
$glyph-icon-save: '\e1030';
|
||||
$glyph-icon-sine: '\e1031';
|
||||
$glyph-icon-T: '\e1032';
|
||||
$glyph-icon-thumbs-strip: '\e1033';
|
||||
$glyph-icon-two-parts-both: '\e1034';
|
||||
$glyph-icon-two-parts-one-only: '\e1035';
|
||||
$glyph-icon-x-in-circle: '\e1036';
|
||||
$glyph-icon-activity: '\e1100';
|
||||
$glyph-icon-activity-mode: '\e1101';
|
||||
$glyph-icon-autoflow-tabular: '\e1102';
|
||||
$glyph-icon-clock: '\e1103';
|
||||
$glyph-icon-database: '\e1104';
|
||||
$glyph-icon-database-query: '\e1105';
|
||||
$glyph-icon-dataset: '\e1106';
|
||||
$glyph-icon-datatable: '\e1107';
|
||||
$glyph-icon-dictionary: '\e1108';
|
||||
$glyph-icon-folder: '\e1109';
|
||||
$glyph-icon-image: '\e1110';
|
||||
$glyph-icon-layout: '\e1111';
|
||||
$glyph-icon-object: '\e1112';
|
||||
$glyph-icon-object-unknown: '\e1113';
|
||||
$glyph-icon-packet: '\e1114';
|
||||
$glyph-icon-page: '\e1115';
|
||||
$glyph-icon-plot-overlay: '\e1116';
|
||||
$glyph-icon-plot-stacked: '\e1117';
|
||||
$glyph-icon-session: '\e1118';
|
||||
$glyph-icon-tabular: '\e1119';
|
||||
$glyph-icon-tabular-lad: '\e1120';
|
||||
$glyph-icon-tabular-lad-set: '\e1121';
|
||||
$glyph-icon-tabular-realtime: '\e1122';
|
||||
$glyph-icon-tabular-scrolling: '\e1123';
|
||||
$glyph-icon-telemetry: '\e1124';
|
||||
$glyph-icon-telemetry-panel: '\e1125';
|
||||
$glyph-icon-timeline: '\e1126';
|
||||
$glyph-icon-timer: '\e1127';
|
||||
$glyph-icon-topic: '\e1128';
|
||||
$glyph-icon-box-with-dashed-lines: '\e1129';
|
||||
|
||||
/************************** 16 PX CLASSES */
|
||||
|
||||
.icon-alert-rect { @include glyph($glyph-icon-alert-rect); }
|
||||
.icon-alert-triangle { @include glyph($glyph-icon-alert-triangle); }
|
||||
.icon-arrow-down { @include glyph($glyph-icon-arrow-down); }
|
||||
.icon-arrow-left { @include glyph($glyph-icon-arrow-left); }
|
||||
.icon-arrow-right { @include glyph($glyph-icon-arrow-right); }
|
||||
.icon-arrow-double-up { @include glyph($glyph-icon-arrow-double-up); }
|
||||
.icon-arrow-tall-up { @include glyph($glyph-icon-arrow-tall-up); }
|
||||
.icon-arrow-tall-down { @include glyph($glyph-icon-arrow-tall-down); }
|
||||
.icon-arrow-double-down { @include glyph($glyph-icon-arrow-double-down); }
|
||||
.icon-arrow-up { @include glyph($glyph-icon-arrow-up); }
|
||||
.icon-asterisk { @include glyph($glyph-icon-asterisk); }
|
||||
.icon-bell { @include glyph($glyph-icon-bell); }
|
||||
.icon-box { @include glyph($glyph-icon-box); }
|
||||
.icon-box-with-arrow { @include glyph($glyph-icon-box-with-arrow); }
|
||||
.icon-check { @include glyph($glyph-icon-check); }
|
||||
.icon-connectivity { @include glyph($glyph-icon-connectivity); }
|
||||
.icon-database-in-brackets { @include glyph($glyph-icon-database-in-brackets); }
|
||||
.icon-eye-open { @include glyph($glyph-icon-eye-open); }
|
||||
.icon-gear { @include glyph($glyph-icon-gear); }
|
||||
.icon-hourglass { @include glyph($glyph-icon-hourglass); }
|
||||
.icon-info { @include glyph($glyph-icon-info); }
|
||||
.icon-link { @include glyph($glyph-icon-link); }
|
||||
.icon-lock { @include glyph($glyph-icon-lock); }
|
||||
.icon-minus { @include glyph($glyph-icon-minus); }
|
||||
.icon-people { @include glyph($glyph-icon-people); }
|
||||
.icon-person { @include glyph($glyph-icon-person); }
|
||||
.icon-plus { @include glyph($glyph-icon-plus); }
|
||||
.icon-trash { @include glyph($glyph-icon-trash); }
|
||||
.icon-x { @include glyph($glyph-icon-x); }
|
||||
.icon-brackets { @include glyph($glyph-icon-brackets); }
|
||||
.icon-arrows-out { @include glyph($glyph-icon-arrows-out); }
|
||||
.icon-arrows-right-left { @include glyph($glyph-icon-arrows-right-left); }
|
||||
.icon-arrows-up-down { @include glyph($glyph-icon-arrows-up-down); }
|
||||
.icon-bullet { @include glyph($glyph-icon-bullet); }
|
||||
.icon-calendar { @include glyph($glyph-icon-calendar); }
|
||||
.icon-chain-links { @include glyph($glyph-icon-chain-links); }
|
||||
.icon-collapse-pane-left { @include glyph($glyph-icon-collapse-pane-left); }
|
||||
.icon-collapse-pane-right { @include glyph($glyph-icon-collapse-pane-right); }
|
||||
.icon-download { @include glyph($glyph-icon-download); }
|
||||
.icon-duplicate { @include glyph($glyph-icon-duplicate); }
|
||||
.icon-folder-new { @include glyph($glyph-icon-folder-new); }
|
||||
.icon-fullscreen-collapse { @include glyph($glyph-icon-fullscreen-collapse); }
|
||||
.icon-fullscreen-expand { @include glyph($glyph-icon-fullscreen-expand); }
|
||||
.icon-layers { @include glyph($glyph-icon-layers); }
|
||||
.icon-line-horz { @include glyph($glyph-icon-line-horz); }
|
||||
.icon-magnify { @include glyph($glyph-icon-magnify); }
|
||||
.icon-magnify-in { @include glyph($glyph-icon-magnify-in); }
|
||||
.icon-magnify-out { @include glyph($glyph-icon-magnify-out); }
|
||||
.icon-menu-hamburger { @include glyph($glyph-icon-menu-hamburger); }
|
||||
.icon-move { @include glyph($glyph-icon-move); }
|
||||
.icon-new-window { @include glyph($glyph-icon-new-window); }
|
||||
.icon-paint-bucket { @include glyph($glyph-icon-paint-bucket); }
|
||||
.icon-pause { @include glyph($glyph-icon-pause); }
|
||||
.icon-pencil { @include glyph($glyph-icon-pencil); }
|
||||
.icon-play { @include glyph($glyph-icon-play); }
|
||||
.icon-plot-resource { @include glyph($glyph-icon-plot-resource); }
|
||||
.icon-pointer-left { @include glyph($glyph-icon-pointer-left); }
|
||||
.icon-pointer-right { @include glyph($glyph-icon-pointer-right); }
|
||||
.icon-refresh { @include glyph($glyph-icon-refresh); }
|
||||
.icon-save { @include glyph($glyph-icon-save); }
|
||||
.icon-sine { @include glyph($glyph-icon-sine); }
|
||||
.icon-T { @include glyph($glyph-icon-T); }
|
||||
.icon-thumbs-strip { @include glyph($glyph-icon-thumbs-strip); }
|
||||
.icon-two-parts-both { @include glyph($glyph-icon-two-parts-both); }
|
||||
.icon-two-parts-one-only { @include glyph($glyph-icon-two-parts-one-only); }
|
||||
.icon-x-in-circle { @include glyph($glyph-icon-x-in-circle); }
|
||||
.icon-activity { @include glyph($glyph-icon-activity); }
|
||||
.icon-activity-mode { @include glyph($glyph-icon-activity-mode); }
|
||||
.icon-autoflow-tabular { @include glyph($glyph-icon-autoflow-tabular); }
|
||||
.icon-clock { @include glyph($glyph-icon-clock); }
|
||||
.icon-database { @include glyph($glyph-icon-database); }
|
||||
.icon-database-query { @include glyph($glyph-icon-database-query); }
|
||||
.icon-dataset { @include glyph($glyph-icon-dataset); }
|
||||
.icon-datatable { @include glyph($glyph-icon-datatable); }
|
||||
.icon-dictionary { @include glyph($glyph-icon-dictionary); }
|
||||
.icon-folder { @include glyph($glyph-icon-folder); }
|
||||
.icon-image { @include glyph($glyph-icon-image); }
|
||||
.icon-layout { @include glyph($glyph-icon-layout); }
|
||||
.icon-object { @include glyph($glyph-icon-object); }
|
||||
.icon-object-unknown { @include glyph($glyph-icon-object-unknown); }
|
||||
.icon-packet { @include glyph($glyph-icon-packet); }
|
||||
.icon-page { @include glyph($glyph-icon-page); }
|
||||
.icon-plot-overlay { @include glyph($glyph-icon-plot-overlay); }
|
||||
.icon-plot-stacked { @include glyph($glyph-icon-plot-stacked); }
|
||||
.icon-session { @include glyph($glyph-icon-session); }
|
||||
.icon-tabular { @include glyph($glyph-icon-tabular); }
|
||||
.icon-tabular-lad { @include glyph($glyph-icon-tabular-lad); }
|
||||
.icon-tabular-lad-set { @include glyph($glyph-icon-tabular-lad-set); }
|
||||
.icon-tabular-realtime { @include glyph($glyph-icon-tabular-realtime); }
|
||||
.icon-tabular-scrolling { @include glyph($glyph-icon-tabular-scrolling); }
|
||||
.icon-telemetry { @include glyph($glyph-icon-telemetry); }
|
||||
.icon-telemetry-panel { @include glyph($glyph-icon-telemetry-panel); }
|
||||
.icon-timeline { @include glyph($glyph-icon-timeline); }
|
||||
.icon-timer { @include glyph($glyph-icon-timer); }
|
||||
.icon-topic { @include glyph($glyph-icon-topic); }
|
||||
.icon-box-with-dashed-lines { @include glyph($glyph-icon-box-with-dashed-lines); }
|
||||
|
||||
/************************** 12 PX CLASSES */
|
||||
|
||||
.icon-eye-open-12px { @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
|
||||
.icon-collapse-pane-left-12px { @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
|
||||
.icon-collapse-pane-right-12px { @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
|
||||
.icon-folder-12px { @include glyph($glyph-icon-folder,'symbolsfont-12px'); }
|
||||
@@ -30,25 +30,17 @@
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
&.type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
}
|
||||
&.icon {
|
||||
color: $colorKey;
|
||||
font-size: inherit;
|
||||
&.alert {
|
||||
color: $colorAlert;
|
||||
&:hover {
|
||||
color: lighten($colorAlert, $ltGamma);
|
||||
}
|
||||
}
|
||||
&.major {
|
||||
font-size: 1.65em;
|
||||
}
|
||||
}
|
||||
&.icon-calendar:after {
|
||||
content: "\e605";
|
||||
}
|
||||
}
|
||||
|
||||
.ui-symbol.icon {
|
||||
color: $colorKey;
|
||||
font-size: inherit;
|
||||
&.alert {
|
||||
color: $colorAlert;
|
||||
&:hover {
|
||||
color: lighten($colorAlert, $ltGamma);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar .ui-symbol {
|
||||
@@ -60,39 +52,31 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.s-menu-btn .invoke-menu,
|
||||
.s-menu-button .invoke-menu,
|
||||
.icon.major .invoke-menu {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.menu .type-icon,
|
||||
.tree-item .type-icon,
|
||||
.super-menu.menu .type-icon {
|
||||
.super-menu.menu .menu-item-a:before {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.l-icon-alert {
|
||||
display: none !important;
|
||||
&:before {
|
||||
color: $colorAlert;
|
||||
content: "!";
|
||||
}
|
||||
}
|
||||
|
||||
.t-item-icon {
|
||||
// Used in grid-item.html, tree-item, inspector location
|
||||
@extend .ui-symbol;
|
||||
@extend .icon;
|
||||
line-height: normal; // This is Ok for the symbolsfont
|
||||
line-height: inherit;
|
||||
position: relative;
|
||||
&.l-icon-link {
|
||||
.t-item-icon-glyph {
|
||||
&:before {
|
||||
&:after {
|
||||
color: $colorIconLink;
|
||||
content: "\f4";
|
||||
content: $glyph-icon-link;
|
||||
height: auto; width: auto;
|
||||
position: absolute;
|
||||
left: 0; top: 0; right: 0; bottom: 10%;
|
||||
left: 0; top: 0; right: 0; bottom: 20%;
|
||||
@include transform-origin(bottom left);
|
||||
@include transform(scale(0.3));
|
||||
z-index: 2;
|
||||
|
||||
@@ -39,14 +39,6 @@
|
||||
.pane-header {
|
||||
color: pushBack($colorInspectorFg, 20%);
|
||||
font-size: 0.8rem;
|
||||
&:before {
|
||||
color: pushBack($colorInspectorFg, 10%);
|
||||
content: '\e615'; // e615 Crosshair symbol
|
||||
display: inline;
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMargin;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
@@ -115,7 +107,7 @@
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: $formTBPad $formLRPad;
|
||||
padding: floor($formTBPad * .75) $formLRPad;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -159,7 +151,7 @@
|
||||
}
|
||||
&:not(.last) .t-object-label .t-title-label:after {
|
||||
color: pushBack($colorInspectorFg, 15%);
|
||||
content: '\3e';
|
||||
content: '\e904';
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 8px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@mixin limitGlyph($iconColor, $glyph: $glyphLimit) {
|
||||
@mixin limitGlyph($iconColor, $glyph: $glyph-icon-alert-triangle) {
|
||||
&:before {
|
||||
color: $iconColor;
|
||||
content: $glyph;
|
||||
@@ -21,8 +21,8 @@ tr[class*="s-limit"] {
|
||||
&.s-limit-yellow td:first-child {
|
||||
@include limitGlyph($colorLimitYellowIc);
|
||||
}
|
||||
&.s-limit-upr td:first-child:before { content:$glyphLimitUpr; }
|
||||
&.s-limit-lwr td:first-child:before { content:$glyphLimitLwr; }
|
||||
&.s-limit-upr td:first-child:before { content: $glyph-icon-arrow-double-up; }
|
||||
&.s-limit-lwr td:first-child:before { content: $glyph-icon-arrow-double-down; }
|
||||
}
|
||||
|
||||
// Handle limit when applied directly to a non-tr element
|
||||
@@ -34,6 +34,6 @@ tr[class*="s-limit"] {
|
||||
&.s-limit-yellow {
|
||||
@include limitGlyph($colorLimitYellowIc);
|
||||
}
|
||||
&.s-limit-upr:before { content:$glyphLimitUpr; }
|
||||
&.s-limit-lwr:before { content:$glyphLimitLwr; }
|
||||
&.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
|
||||
&.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
|
||||
}
|
||||
@@ -21,6 +21,7 @@
|
||||
*****************************************************************************/
|
||||
@import "effects";
|
||||
@import "global";
|
||||
@import "glyphs";
|
||||
@import "archetypes";
|
||||
@import "about";
|
||||
@import "text";
|
||||
|
||||
@@ -294,10 +294,9 @@
|
||||
|
||||
@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
|
||||
// Space to either side of the handle
|
||||
@return ($splitterD - $splitterHandleD) * 0.5;
|
||||
@return ($splitterD - $splitterHandleD) / 2;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************** CONTROLS, FORM ELEMENTS */
|
||||
|
||||
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@@ -305,24 +304,34 @@
|
||||
border-radius: $controlCr;
|
||||
box-sizing: border-box;
|
||||
color: $fg;
|
||||
display: inline-block;
|
||||
//display: inline-block;
|
||||
}
|
||||
|
||||
@mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
|
||||
@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
|
||||
@include user-select(none);
|
||||
.icon {
|
||||
color: $fg;
|
||||
.icon,
|
||||
&:before {
|
||||
color: $ic;
|
||||
}
|
||||
@if $bgHovColor != none {
|
||||
@if $bgHov != none {
|
||||
&:not(.disabled):hover {
|
||||
background: $bgHovColor; // was just background, and background-image before that
|
||||
>.icon {
|
||||
color: lighten($ic, $ltGamma);
|
||||
background: $bgHov;
|
||||
color: $fgHov;
|
||||
>.icon,
|
||||
&:before {
|
||||
color: $icHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
|
||||
@include containerSubtle($bg, $fg);
|
||||
@include btnBase($bgHov: $bgHov, $fg: $fg, $fgHov: $fgHov, $ic: $ic, $icHov: $icHov);
|
||||
text-shadow: $shdwItemText;
|
||||
}
|
||||
|
||||
@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
|
||||
@include appearance(none);
|
||||
border-radius: $controlCr;
|
||||
@@ -344,7 +353,7 @@
|
||||
|
||||
@mixin contextArrow() {
|
||||
text-shadow: none;
|
||||
content: '\76';
|
||||
content: $glyph-icon-arrow-down;
|
||||
display: inline-block;
|
||||
font-family: 'symbolsfont';
|
||||
margin-left: $interiorMarginSm;
|
||||
|
||||
@@ -35,31 +35,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
mct-representation,
|
||||
.rep-object-label {
|
||||
&.s-status-pending {
|
||||
.t-object-label {
|
||||
.t-item-icon {
|
||||
&:before {
|
||||
@include spinner($waitSpinnerTreeBorderW, $colorLoadingFg);
|
||||
content: "";
|
||||
height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
|
||||
}
|
||||
.t-item-icon-glyph {
|
||||
display: none;
|
||||
}
|
||||
.s-status-pending {
|
||||
> .t-object-label {
|
||||
.t-item-icon {
|
||||
&:after {
|
||||
@include spinner($waitSpinnerTreeBorderW, $colorLoadingFg);
|
||||
content: "";
|
||||
height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
|
||||
}
|
||||
.t-title-label {
|
||||
font-style: italic;
|
||||
opacity: 0.6;
|
||||
.t-item-icon-glyph,
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.t-title-label {
|
||||
font-style: italic;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected mct-representation,
|
||||
.selected .rep-object-label {
|
||||
.s-status-pending .t-object-label .t-item-icon:before {
|
||||
.selected {
|
||||
.s-status-pending .t-object-label .t-item-icon:after {
|
||||
border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
|
||||
border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;
|
||||
}
|
||||
|
||||
@@ -22,21 +22,24 @@
|
||||
$baseRatio: 1.5;
|
||||
$pad: $interiorMargin * $baseRatio;
|
||||
|
||||
.s-btn,
|
||||
.s-icon-btn {
|
||||
.s-button,
|
||||
button {
|
||||
@include user-select(none);
|
||||
@include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
text-decoration: none;
|
||||
height: $btnStdH;
|
||||
line-height: $btnStdH;
|
||||
}
|
||||
|
||||
.s-btn {
|
||||
box-sizing: border-box;
|
||||
padding: 0 $pad;
|
||||
font-size: 0.7rem;
|
||||
vertical-align: top;
|
||||
@include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
|
||||
|
||||
&.labeled:before {
|
||||
// Icon when it's included
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&.lg {
|
||||
font-size: 1rem;
|
||||
@@ -50,58 +53,20 @@ $pad: $interiorMargin * $baseRatio;
|
||||
padding: 0 ($pad / $baseRatio) / 2;
|
||||
}
|
||||
|
||||
&.major,
|
||||
&.key-edit,
|
||||
&.key-properties {
|
||||
$bg: $colorBtnMajorBg;
|
||||
$hc: lighten($bg, 10%);
|
||||
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
|
||||
&.major {
|
||||
@include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
|
||||
}
|
||||
|
||||
&.t-save:before {
|
||||
content:'\e612';
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.t-save-as:before {
|
||||
content:'\e612';
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.t-cancel {
|
||||
.title-label { display: none; }
|
||||
&:before {
|
||||
content:'\78';
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
&.no-label {
|
||||
.label, .title-label { display: none; }
|
||||
}
|
||||
|
||||
&.pause-play {
|
||||
.icon:before {
|
||||
content: "\0000F1";
|
||||
}
|
||||
@extend .icon-pause;
|
||||
&.paused {
|
||||
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
|
||||
.icon {
|
||||
@include pulse($dur: 1000ms);
|
||||
:before {
|
||||
content: "\0000EF";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.show-thumbs {
|
||||
.icon:before {
|
||||
content: "\000039";
|
||||
}
|
||||
}
|
||||
|
||||
&.t-export {
|
||||
&:before {
|
||||
@extend .ui-symbol;
|
||||
@extend .icon;
|
||||
content: '\e623';
|
||||
@include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
|
||||
@extend .icon-play;
|
||||
&:before { @include pulse($dur: 1000ms); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -114,166 +79,59 @@ $pad: $interiorMargin * $baseRatio;
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon-btn {
|
||||
@extend .ui-symbol;
|
||||
// Color and styling additionally in _controls.scss
|
||||
}
|
||||
|
||||
body.desktop .mini-tab {
|
||||
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||
$iconH: $uePaneMiniTabH;
|
||||
$iconW: $uePaneMiniTabW;
|
||||
$iconInnerLR: 0;
|
||||
$arwD: 9px;
|
||||
$arwOffsetX: 0px;
|
||||
$arwAnimOffsetX: 2px + $iconInnerLR;
|
||||
$cBg: pullForward($colorBodyBg, 15%);
|
||||
$cFg: $cBg;
|
||||
|
||||
|
||||
border-radius: $basicCr;
|
||||
//@include boxShdw($shdwBtns);
|
||||
box-sizing: border-box;
|
||||
@include trans-prop-nice((color, background-color), 100ms);
|
||||
color: $cFg;
|
||||
cursor: pointer;
|
||||
font-family: symbolsfont;
|
||||
font-size: $arwD;
|
||||
display: block;
|
||||
position: absolute;
|
||||
line-height: $iconH;
|
||||
height: $iconH; width: $iconW;
|
||||
text-align: center;
|
||||
|
||||
&.collapsed {
|
||||
// State when the pane this element controls has been collapsed
|
||||
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
|
||||
&:before { opacity: 0; }
|
||||
&:after { opacity: 1; }
|
||||
&:hover {
|
||||
&:before { opacity: 1; }
|
||||
&:after { opacity: 0; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
@include trans-prop-nice((left, right, opacity), 250ms);
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Always the arrow icon
|
||||
width: $arwD;
|
||||
}
|
||||
&:after {
|
||||
// Always icon; content is set in _layout.scss
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.anchor-left {
|
||||
// |<
|
||||
text-align: right;
|
||||
&:before {
|
||||
content:'\3c'; // Collapse left icon e613
|
||||
right: $iconInnerLR;
|
||||
}
|
||||
&.collapsed {
|
||||
@include border-left-radius(0);
|
||||
text-align: left;
|
||||
&:before {
|
||||
content:'\3e';
|
||||
left: $iconInnerLR;
|
||||
}
|
||||
&:hover:before { left: $arwAnimOffsetX; }
|
||||
}
|
||||
}
|
||||
&.anchor-right {
|
||||
// >|
|
||||
text-align: left;
|
||||
&:before {
|
||||
content:'\3e'; // Collapse right icon e614
|
||||
left: $iconInnerLR;
|
||||
}
|
||||
&.collapsed {
|
||||
@include border-right-radius(0);
|
||||
&:before {
|
||||
text-align: right;
|
||||
content:'\3c';
|
||||
right: $iconInnerLR;
|
||||
}
|
||||
&:hover:before { right: $arwAnimOffsetX; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop .mini-tab-icon {
|
||||
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||
$d: $uePaneMiniTabW;
|
||||
color: pullForward($colorBodyBg, 15%);
|
||||
// Font glyphs set in _layout.scss
|
||||
background-color: $colorMiniTabBg;
|
||||
color: $colorMiniTabFg;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: $d;
|
||||
font-family: 'symbolsfont';
|
||||
font-size: $uePaneMiniTabFontSize;
|
||||
position: absolute;
|
||||
height: $d; width: $d;
|
||||
line-height: $d;
|
||||
height: $uePaneMiniTabH; width: $uePaneMiniTabW;
|
||||
line-height: $uePaneMiniTabH;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
|
||||
&.collapsed {
|
||||
$d: $uePaneMiniTabCollapsedW;
|
||||
width: $d; font-size: $d;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: inherit;
|
||||
}
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: '\78'; // X icon
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $colorKey;
|
||||
background-color: $colorMiniTabBgHov;
|
||||
color: $colorMiniTabFgHov;
|
||||
}
|
||||
}
|
||||
|
||||
.l-btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
// Structure: .btn-set > mct-representation class=first|last > .s-btn
|
||||
font-size: 0; // Remove space between s-btn elements due to white space in markup
|
||||
// Structure: .btn-set > mct-representation class=first|last > .s-button
|
||||
font-size: 0; // Remove space between s-button elements due to white space in markup
|
||||
|
||||
.s-btn {
|
||||
.s-button {
|
||||
border-radius: 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.first {
|
||||
.s-btn,
|
||||
&.s-btn {
|
||||
.s-button,
|
||||
&.s-button {
|
||||
@include border-left-radius($controlCr);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.last {
|
||||
.s-btn,
|
||||
&.s-btn {
|
||||
.s-button,
|
||||
&.s-button {
|
||||
@include border-right-radius($controlCr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paused {
|
||||
&:not(.s-btn) {
|
||||
&:not(.s-button) {
|
||||
border-color: $colorPausedBg !important;
|
||||
color: $colorPausedBg !important;
|
||||
}
|
||||
|
||||
@@ -40,13 +40,15 @@
|
||||
border: 1px solid transparent;
|
||||
color: $colorSelectedColor;
|
||||
display: block;
|
||||
font-family: 'symbolsfont';
|
||||
float: left;
|
||||
height: $d; width: $d;
|
||||
line-height: $d;
|
||||
line-height: $d * 0.9;
|
||||
margin: 0 ($m * 1px) ($m * 1px) 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
&:before {
|
||||
// Check mark for selected items
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.s-palette-item {
|
||||
|
||||
@@ -72,6 +72,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon-button {
|
||||
// Clickable icon elements that have hover
|
||||
@extend .ui-symbol;
|
||||
color: $colorClickIcon;
|
||||
&:hover {
|
||||
color: $colorClickIconHov;
|
||||
}
|
||||
}
|
||||
|
||||
.s-toggle-icon {
|
||||
// Has default (in-active) and .active states
|
||||
@extend .s-icon-button;
|
||||
color: $colorToggleIcon;
|
||||
&:hover { color: rgba($colorToggleIconHov, 0.5); }
|
||||
&.active { color: $colorToggleIconActive; }
|
||||
}
|
||||
|
||||
.l-composite-control {
|
||||
vertical-align: middle;
|
||||
&:not(.l-inline) {
|
||||
@@ -166,10 +183,10 @@ label.radio.custom {
|
||||
}
|
||||
}
|
||||
|
||||
label.checkbox.custom input:checked ~ em:before { content: "\32"; }
|
||||
label.radio.custom input:checked ~ em:before { content: "\e619"; }
|
||||
label.checkbox.custom input:checked ~ em:before { content: $glyph-icon-check; }
|
||||
label.radio.custom input:checked ~ em:before { content: $glyph-icon-bullet; }
|
||||
|
||||
.s-menu-btn label.checkbox.custom {
|
||||
.s-menu-button label.checkbox.custom {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@@ -218,10 +235,12 @@ input[type="search"] {
|
||||
|
||||
/******************************************************** SELECTS */
|
||||
.select {
|
||||
@include btnSubtle($colorSelectBg);
|
||||
@include btnSubtle($bg: $colorSelectBg);
|
||||
@extend .icon-arrow-down; // Context arrow
|
||||
@if $shdwBtns != none {
|
||||
margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
|
||||
}
|
||||
display: inline-block;
|
||||
padding: 0 $interiorMargin;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -239,10 +258,11 @@ input[type="search"] {
|
||||
margin: $interiorMargin 0; // Firefox
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
@include contextArrow();
|
||||
&:before {
|
||||
//@include contextArrow();
|
||||
pointer-events: none;
|
||||
color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: $interiorMargin; top: 0;
|
||||
}
|
||||
@@ -439,17 +459,13 @@ input[type="search"] {
|
||||
width: $pagerW;
|
||||
@extend .ui-symbol;
|
||||
&.prev {
|
||||
@extend .icon-arrow-left;
|
||||
right: auto;
|
||||
&:before {
|
||||
content: "\3c";
|
||||
}
|
||||
}
|
||||
&.next {
|
||||
@extend .icon-arrow-right;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
&:before {
|
||||
content: "\3e";
|
||||
}
|
||||
}
|
||||
}
|
||||
.val {
|
||||
@@ -539,12 +555,11 @@ textarea {
|
||||
}
|
||||
|
||||
/******************************************************** MISC */
|
||||
.context-available,
|
||||
.s-icon-btn {
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
.context-available {
|
||||
@extend .icon-arrow-down;
|
||||
color: $colorKey;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
color: $colorKeyHov;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -20,34 +20,41 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/******************************************************** MENU BUTTONS */
|
||||
.s-menu-btn {
|
||||
.s-menu-button {
|
||||
// Formerly .btn-menu
|
||||
@extend .s-btn;
|
||||
@extend .s-button;
|
||||
span.l-click-area {
|
||||
// In markup, this element should not enclose anything.
|
||||
@extend .abs;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
font-size: 16px; //120%;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
// Used in color menu buttons in toolbar
|
||||
$d: 10px;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba($colorBtnFg, 0.2);
|
||||
height: $d; width: $d;
|
||||
vertical-align: middle;
|
||||
margin-left: $interiorMarginSm;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
// Adds the downward facing 'context available / invoke menu' arrow element
|
||||
@include contextArrow();
|
||||
color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
|
||||
}
|
||||
|
||||
&.create-btn {
|
||||
&:before {
|
||||
content:'\2b';
|
||||
display: inline;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
&.create-button {
|
||||
@extend .icon-plus;
|
||||
.title-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -56,9 +63,6 @@
|
||||
.menu {
|
||||
left: 0;
|
||||
text-align: left;
|
||||
.ui-symbol.icon {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,6 +81,7 @@
|
||||
}
|
||||
|
||||
.menu {
|
||||
// TODO: reduce size of icons
|
||||
@extend .s-menu;
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -86,7 +91,8 @@
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
||||
color: pullForward($colorMenuBg, 60%);
|
||||
color: $colorMenuFg;
|
||||
//color: pullForward($colorMenuBg, 60%);
|
||||
line-height: $menuLineH;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
||||
position: relative;
|
||||
@@ -97,33 +103,37 @@
|
||||
&:hover {
|
||||
background: $colorMenuHovBg;
|
||||
color: $colorMenuHovFg;
|
||||
.icon {
|
||||
color: $colorMenuHovIc;
|
||||
}
|
||||
}
|
||||
.type-icon {
|
||||
left: $interiorMargin * 2;
|
||||
&:before {
|
||||
color: $colorMenuHovIc;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
@extend .ui-symbol;
|
||||
@extend .type-icon;
|
||||
@extend .icon;
|
||||
display: inline-block;
|
||||
left: $interiorMargin * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu,
|
||||
.icon-menu,
|
||||
.context-menu,
|
||||
.super-menu,
|
||||
.s-menu-btn .menu {
|
||||
.s-menu-button .menu {
|
||||
pointer-events: auto;
|
||||
ul li {
|
||||
a {
|
||||
color: $colorMenuFg;
|
||||
a.menu-item-a {
|
||||
color: $colorMenuFg;
|
||||
display: block;
|
||||
}
|
||||
.icon {
|
||||
color: $colorMenuIc;
|
||||
}
|
||||
.type-icon {
|
||||
left: $interiorMargin;
|
||||
}
|
||||
&:before,
|
||||
a.menu-item-a:before {
|
||||
color: $colorMenuIc;
|
||||
left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -148,7 +158,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.type-icon {
|
||||
&:before {
|
||||
// Type icon
|
||||
left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,6 +62,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.subdued {
|
||||
.status-indicator {
|
||||
color: pullForward($colorStatusBarBg, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
.status-block-holder {
|
||||
// Applied to mct-include element
|
||||
// Contains status.block elements
|
||||
@@ -122,7 +128,7 @@
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
}
|
||||
.s-btn {
|
||||
.s-button {
|
||||
background: $colorStatusBtnBg;
|
||||
padding: 0 $interiorMargin;
|
||||
height: auto;
|
||||
@@ -233,7 +239,7 @@
|
||||
@mixin messageBlock($iconW: 32px) {
|
||||
.type-icon.message-type {
|
||||
@include txtShdw($shdwStatusIc);
|
||||
&:before { content:"\e608"; }
|
||||
@extend .icon-bell;
|
||||
color: $colorStatusDefault;
|
||||
font-size: $iconW;
|
||||
padding: 1px;
|
||||
@@ -241,15 +247,15 @@
|
||||
}
|
||||
|
||||
.message-severity-info .type-icon.message-type {
|
||||
&:before { content:"\e608"; }
|
||||
@extend .icon-info;
|
||||
color: $colorStatusInfo;
|
||||
}
|
||||
.message-severity-alert .type-icon.message-type {
|
||||
&:before { content:"\e610"; }
|
||||
@extend .icon-bell;
|
||||
color: $colorStatusAlert;
|
||||
}
|
||||
.message-severity-error .type-icon.message-type {
|
||||
&:before { content:"\21"; }
|
||||
@extend .icon-alert-rect;
|
||||
color: $colorStatusError;
|
||||
}
|
||||
}
|
||||
@@ -272,12 +278,10 @@
|
||||
@include flex-direction(row);
|
||||
@include align-items(stretch);
|
||||
.type-icon.message-type {
|
||||
//@include test(red);
|
||||
@include flex(0 1 auto);
|
||||
position: relative;
|
||||
}
|
||||
.message-contents {
|
||||
//@include test(blue);
|
||||
@include flex(1 1 auto);
|
||||
margin-left: $overlayMargin;
|
||||
position: relative;
|
||||
|
||||
@@ -8,6 +8,15 @@
|
||||
}
|
||||
|
||||
&.l-timer {
|
||||
.l-value:before,
|
||||
.control {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.l-value:before {
|
||||
// Direction +/- element
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
.control {
|
||||
@include trans-prop-nice((width, opacity), $transTime);
|
||||
line-height: inherit;
|
||||
@@ -25,8 +34,5 @@
|
||||
.value {
|
||||
color: pullForward($colorBodyFg, 50%);
|
||||
font-weight: 400;
|
||||
.direction {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
.btns-add-remove {
|
||||
// background: rgba(#ff0000, 0.3);;
|
||||
margin-top: 150px;
|
||||
.s-btn {
|
||||
.s-button {
|
||||
display: block;
|
||||
//font-size: 1.5em;
|
||||
margin-bottom: $interiorMargin;
|
||||
|
||||
@@ -136,18 +136,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.no-validate {
|
||||
.form .form-row >.label {
|
||||
padding-right: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hint,
|
||||
.s-hint {
|
||||
font-size: 0.9em;
|
||||
.req {
|
||||
color: $colorFormRequired;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.l-result {
|
||||
|
||||
@@ -85,6 +85,7 @@
|
||||
.l-filter {
|
||||
$iconEdgeM: 4px;
|
||||
$iconD: $formInputH - ($iconEdgeM * 2);
|
||||
@extend .icon-magnify;
|
||||
// Adds a magnifying glass before, holds an input and a clear button
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@@ -106,7 +107,6 @@
|
||||
|
||||
&:before {
|
||||
// Magnify glass icon
|
||||
content:'\4d';
|
||||
left: $interiorMargin;
|
||||
@include trans-prop-nice(color, 250ms);
|
||||
pointer-events: none;
|
||||
@@ -144,11 +144,4 @@
|
||||
&:hover:before {
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
// 'x' in circle icon
|
||||
&:before {
|
||||
content: '\e607';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,43 +19,44 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.validates {
|
||||
> .label {
|
||||
padding-right: $reqSymbolM; // Keep room for validation element
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
font-family: symbolsfont;
|
||||
font-size: $reqSymbolFontSize;
|
||||
height: 100%;
|
||||
line-height: 200%;
|
||||
mct-form.validates {
|
||||
.form-row.validates {
|
||||
> .label {
|
||||
padding-right: $reqSymbolM; // Keep room for validation element
|
||||
&:before {
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
font-size: $reqSymbolFontSize;
|
||||
height: 100%;
|
||||
line-height: 200%;
|
||||
|
||||
}
|
||||
}
|
||||
&.invalid,
|
||||
&.invalid.req {
|
||||
> .label {
|
||||
@extend .icon-x;
|
||||
&:before {
|
||||
color: $colorFormInvalid;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.valid,
|
||||
&.valid.req {
|
||||
> .label {
|
||||
@extend .icon-check;
|
||||
&:before {
|
||||
color: $colorFormValid;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.req {
|
||||
> .label {
|
||||
@extend .icon-asterisk;
|
||||
&:before {
|
||||
color: $colorFormRequired;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.invalid,
|
||||
&.invalid.req {
|
||||
> .label::after {
|
||||
color: $colorFormInvalid;
|
||||
content: "x";
|
||||
}
|
||||
}
|
||||
&.valid,
|
||||
&.valid.req {
|
||||
> .label::after {
|
||||
color: $colorFormValid;
|
||||
content: "2";
|
||||
}
|
||||
}
|
||||
&.req {
|
||||
> .label::after {
|
||||
color: $colorFormRequired;
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
}
|
||||
.req {
|
||||
font-size: $reqSymbolFontSize;
|
||||
}
|
||||
span.req {
|
||||
color: $colorFormRequired;
|
||||
}
|
||||
@@ -26,7 +26,6 @@
|
||||
// Main width is used to provide a good click area, and is always transparent
|
||||
// :after will be a positioned and colored element that is the handle
|
||||
|
||||
//@include test(red);
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
@@ -37,6 +36,7 @@
|
||||
@include absPosDefault(0);
|
||||
background: $colorSplitterBg;
|
||||
display: block;
|
||||
z-index: 4;
|
||||
|
||||
@if $splitterEndCr != 'none' {
|
||||
border-radius: $splitterEndCr;
|
||||
@@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
$inset: splitterHandleInset($splitterD,$splitterHandleD);
|
||||
$inset: splitterHandleInset($splitterD, $splitterHandleD);
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
|
||||
@@ -102,17 +102,16 @@
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&:not(.flush-right) {
|
||||
width: $splitterD;
|
||||
&:after {
|
||||
left: $inset; right: $inset;
|
||||
}
|
||||
width: $splitterD;
|
||||
&:after {
|
||||
left: $inset; right: $inset;
|
||||
//width: $splitterHandleD;
|
||||
}
|
||||
&.flush-right {
|
||||
width: ceil($splitterD / 2);
|
||||
&:after {
|
||||
background-color: transparent;
|
||||
left: auto; right: 0; width: $splitterHandleD;
|
||||
width: $splitterHandleD;
|
||||
left: auto; right: 0;
|
||||
}
|
||||
&.edge-shdw {
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
|
||||
@@ -120,4 +119,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.splitter-sm {
|
||||
$inset: splitterHandleInset($splitterDSm, $splitterHandleD);
|
||||
.horizontal >.splitter {
|
||||
height: $splitterDSm;
|
||||
&:after { top: $inset; bottom: $inset; }
|
||||
}
|
||||
.vertical >.splitter {
|
||||
width: $splitterDSm;
|
||||
&:after { left: $inset; right: $inset; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
$iconMargin: 40px;
|
||||
$iconD: ($d - ($iconMargin * 2)) * 0.85;
|
||||
$transTime: 200ms;
|
||||
@include btnSubtle($colorItemBg, $colorItemBgHov, $colorItemFg, $colorItemIc);
|
||||
@include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
@@ -91,7 +91,7 @@
|
||||
font-size: $iconD * 0.95;
|
||||
&.l-icon-link {
|
||||
.t-item-icon-glyph {
|
||||
&:before {
|
||||
&:after {
|
||||
@include transform(scale(0.25));
|
||||
}
|
||||
}
|
||||
@@ -121,7 +121,7 @@
|
||||
&.selected {
|
||||
$cfg: lighten($colorItemBgSelected, 35%);
|
||||
$cfgh: lighten($cfg, 30%);
|
||||
@include btnSubtle($colorItemBgSelected);
|
||||
@include btnSubtle($bg: $colorItemBgSelected);
|
||||
color: $cfg;
|
||||
.item-type, .top-bar .icon:not(.alert) { color: $cfg }
|
||||
.item-main .item-open { color: $cfg }
|
||||
|
||||
@@ -86,12 +86,12 @@ table {
|
||||
color: $colorIconLink;
|
||||
font-family: symbolsfont;
|
||||
font-size: 8px;
|
||||
content: "\ed";
|
||||
content: "\e906";
|
||||
display: inline-block;
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
&.sort.desc:after {
|
||||
content: "\ec";
|
||||
content: "\e907";
|
||||
}
|
||||
}
|
||||
&.sortable {
|
||||
@@ -119,19 +119,12 @@ table {
|
||||
}
|
||||
}
|
||||
&.filterable {
|
||||
thead, .thead {
|
||||
tr.s-filters, .tr.s-filters {
|
||||
th, .th {
|
||||
//border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody, .tbody {
|
||||
top: $tabularHeaderH * 2;
|
||||
}
|
||||
input[type="text"] {
|
||||
box-sizing: border-box;
|
||||
width: 100%; //50px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -182,7 +175,7 @@ table {
|
||||
.tabular-holder {
|
||||
&.t-exportable {
|
||||
$btnExportH: $btnFrameH;
|
||||
.s-btn.t-export {
|
||||
.s-button.t-export {
|
||||
@include trans-prop-nice(opacity, $dur: 50ms);
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -191,7 +184,7 @@ table {
|
||||
top: 0;
|
||||
}
|
||||
&:hover {
|
||||
.s-btn.t-export {
|
||||
.s-button.t-export {
|
||||
@include trans-prop-nice(opacity, 150ms, 100ms);
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -202,5 +195,4 @@ table {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -37,7 +37,7 @@ body.mobile {
|
||||
}
|
||||
}
|
||||
|
||||
.create-btn-holder {
|
||||
.create-button-holder {
|
||||
// Hide the create button by default in mobile;
|
||||
// This can be overridden by the examples/mobile bundle
|
||||
display: none;
|
||||
@@ -88,10 +88,7 @@ body.mobile {
|
||||
position: absolute;
|
||||
top: $bodyMargin + 2;
|
||||
left: $bodyMargin;
|
||||
&:after {
|
||||
content:'m' !important;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
@extend .icon-menu-hamburger;
|
||||
}
|
||||
|
||||
.object-browse-bar {
|
||||
|
||||
@@ -32,28 +32,37 @@ body.touch {
|
||||
.search-result-item {
|
||||
height: $mobileTreeItemH !important;
|
||||
line-height: $mobileTreeItemH !important;
|
||||
margin-bottom: 0px !important;
|
||||
.view-control {
|
||||
font-size: 1.2em;
|
||||
margin-right: 0;
|
||||
order: 2;
|
||||
width: $mobileTreeItemH;
|
||||
font-size: 1em;
|
||||
margin-right: $interiorMargin;
|
||||
width: ceil($mobileTreeItemH * 0.75);
|
||||
&.has-children {
|
||||
&:before {
|
||||
content: "\7d";
|
||||
content: $glyph-icon-arrow-down;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%) rotate(270deg));
|
||||
@include transform(translateX(-50%) rotate(-90deg));
|
||||
}
|
||||
&.expanded:before {
|
||||
@include transform(translateX(-50%) rotate(90deg));
|
||||
@include transform(translateX(-50%) rotate(0deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-object-label {
|
||||
line-height: inherit;
|
||||
.t-item-icon.l-icon-link .t-item-icon-glyph:before {
|
||||
.t-item-icon.l-icon-link .t-item-icon-glyph:after {
|
||||
bottom: 20%; // Shift up due to height of mobile menu items
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pane.treeview {
|
||||
.tree-item,
|
||||
.search-result-item {
|
||||
@include containerSubtle($bg: $colorMobilePaneLeftTreeItemBg, $gradRatio: 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.selector-list .tree-item {
|
||||
@include containerBase($bg: $colorMobileSelectListTreeItemBg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
background: $colorOvrBlocker;
|
||||
z-index: 100;
|
||||
}
|
||||
.clk-icon.close {
|
||||
.close {
|
||||
font-size: 0.8rem;
|
||||
position: absolute;
|
||||
top: $interiorMarginLg;
|
||||
@@ -87,7 +87,7 @@
|
||||
|
||||
.bottom-bar {
|
||||
text-align: right;
|
||||
.s-btn {
|
||||
.s-button {
|
||||
$bg: $colorOvrBtnBg;
|
||||
&:not(.major) {
|
||||
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
|
||||
|
||||
@@ -23,17 +23,9 @@
|
||||
.clear-icon,
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
font-family: symbolsfont;
|
||||
@include trans-prop-nice((opacity, color), 150ms);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
// 'x' in circle icon
|
||||
&:before {
|
||||
content: '\e607';
|
||||
}
|
||||
}
|
||||
|
||||
.holder-search {
|
||||
$iconWidth: 20px;
|
||||
|
||||
@@ -41,6 +33,7 @@
|
||||
$textInputHeight: 19px; // This is equal to the default value, 19px
|
||||
$iconEdgeM: 4px;
|
||||
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
|
||||
@extend .icon-magnify;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
|
||||
@@ -50,16 +43,17 @@
|
||||
}
|
||||
|
||||
&:before,
|
||||
.clear-icon,
|
||||
.clear-input,
|
||||
.menu-icon {
|
||||
// :before is magnify glass icon
|
||||
box-sizing: border-box;
|
||||
color: $colorInputIcon;
|
||||
height: $iconD;
|
||||
width: $iconD;
|
||||
line-height: $iconD;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: $iconEdgeM;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: $iconEdgeM;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@@ -76,8 +70,6 @@
|
||||
|
||||
&:before {
|
||||
// Magnify glass icon
|
||||
content:'\4d';
|
||||
font-family: symbolsfont;
|
||||
left: $interiorMarginSm;
|
||||
@include trans-prop-nice(color, 250ms);
|
||||
pointer-events: none;
|
||||
@@ -89,7 +81,8 @@
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
.clear-input {
|
||||
// Hiding for now with addition of Cancel button
|
||||
right: $iconD + $interiorMargin;
|
||||
|
||||
// Icon is visible only when there is text input
|
||||
@@ -107,12 +100,10 @@
|
||||
|
||||
.menu-icon {
|
||||
// 'v' invoke menu icon
|
||||
&:before { content: '\76'; }
|
||||
font-size: 0.8em;
|
||||
padding-right: $iconEdgeM;
|
||||
right: $iconEdgeM;
|
||||
text-align: right;
|
||||
|
||||
&:hover {
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
@@ -126,20 +117,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.results-msg {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.active-filter-display {
|
||||
$s: 0.7em;
|
||||
$p: $interiorMargin;
|
||||
box-sizing: border-box;
|
||||
line-height: 130%;
|
||||
padding-left: $s * 2.25;
|
||||
//padding-left: $s * 2.25;
|
||||
font-size: $s;
|
||||
|
||||
.clear-filters-icon {
|
||||
.clear-filters {
|
||||
color: $colorInputIcon;
|
||||
opacity: 1;
|
||||
font-size: 0.8em;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
font-size: 0.9em;
|
||||
margin-right: $interiorMarginSm;
|
||||
//position: absolute;
|
||||
//left: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,52 +21,57 @@
|
||||
*****************************************************************************/
|
||||
|
||||
ul.tree {
|
||||
@include menuUlReset();
|
||||
@include user-select(none);
|
||||
li {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
ul.tree {
|
||||
margin-left: $treeVCW + $interiorMargin;
|
||||
}
|
||||
@include menuUlReset();
|
||||
@include user-select(none);
|
||||
li {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
ul.tree {
|
||||
margin-left: $treeVCW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-item,
|
||||
.search-result-item {
|
||||
@extend .l-flex-row;
|
||||
box-sizing: border-box;
|
||||
border-radius: $basicCr;
|
||||
@include transition(background-color, 0.25s);
|
||||
font-size: 0.8rem;
|
||||
height: $menuLineH;
|
||||
line-height: $menuLineH;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
box-sizing: border-box;
|
||||
border-radius: $basicCr;
|
||||
@include transition(background-color, 0.25s);
|
||||
font-size: 0.8rem;
|
||||
height: $menuLineH;
|
||||
line-height: $menuLineH;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
padding: 0 $interiorMarginSm;
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
.view-control {
|
||||
color: $colorItemTreeVC;
|
||||
.flex-elem {
|
||||
height: inherit !important;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
|
||||
.view-control {
|
||||
color: $colorItemTreeVC;
|
||||
font-size: 0.75em;
|
||||
margin-right: $interiorMargin;
|
||||
margin-right: $interiorMargin;
|
||||
height: 100%;
|
||||
line-height: inherit;
|
||||
width: $treeVCW;
|
||||
width: $treeVCW;
|
||||
&.has-children {
|
||||
&:before {
|
||||
position: absolute;
|
||||
@include trans-prop-nice(transform, 100ms);
|
||||
content: "\3e";
|
||||
content: "\e904";
|
||||
@include transform-origin(center);
|
||||
}
|
||||
&.expanded:before {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.t-object-label {
|
||||
line-height: $menuLineH;
|
||||
.t-object-label {
|
||||
line-height: $menuLineH;
|
||||
.t-item-icon {
|
||||
@include txtShdwSubtle($shdwItemTreeIcon);
|
||||
font-size: $treeTypeIconH;
|
||||
@@ -76,34 +81,34 @@ ul.tree {
|
||||
.t-title-label {
|
||||
@include ellipsize();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $colorItemTreeSelectedBg;
|
||||
color: $colorItemTreeSelectedFg;
|
||||
.view-control {
|
||||
color: $colorItemTreeSelectedVC;
|
||||
}
|
||||
.t-object-label .t-item-icon {
|
||||
color: $colorItemTreeSelectedFg;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
background: $colorItemTreeSelectedBg !important;
|
||||
color: $colorItemTreeSelectedFg !important;
|
||||
.view-control {
|
||||
color: $colorItemTreeSelectedVC;
|
||||
}
|
||||
.t-object-label .t-item-icon {
|
||||
color: $colorItemTreeSelectedFg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.context-trigger {
|
||||
$h: 0.9rem;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
right: $interiorMarginSm;
|
||||
.invoke-menu {
|
||||
font-size: 0.75em;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
}
|
||||
}
|
||||
.context-trigger {
|
||||
$h: 0.9rem;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
right: $interiorMarginSm;
|
||||
.invoke-menu {
|
||||
font-size: 0.75em;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop {
|
||||
@@ -151,7 +156,7 @@ mct-representation {
|
||||
@extend .ui-symbol;
|
||||
@include pulse($dur: 1s, $opacity0: 0.25);
|
||||
color: $colorItemTreeEditingFg;
|
||||
content: '\70';
|
||||
content: $glyph-icon-pencil;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
.t-object-label {
|
||||
@@ -164,6 +169,16 @@ mct-representation {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
.view-control, + .tree-item-subtree { display: none; }
|
||||
.view-control, + .tree-item-subtree {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.t-title-label,
|
||||
.t-item-icon,
|
||||
&:before {
|
||||
color: rgba($colorItemTreeSelectedFg, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,8 +49,8 @@
|
||||
left: $myM;
|
||||
}
|
||||
&.frame-template {
|
||||
.s-btn,
|
||||
.s-menu-btn {
|
||||
.s-button,
|
||||
.s-menu-button {
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
padding: 0 $interiorMargin;
|
||||
@@ -60,7 +60,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.s-menu-btn:after {
|
||||
.s-menu-button:after {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
top: auto;
|
||||
height: $ueFooterH;
|
||||
line-height: $ueFooterH - ($interiorMargin * 2);
|
||||
background: $colorFooterBg;
|
||||
background: $colorStatusBarBg;
|
||||
color: lighten($colorBodyBg, 30%);
|
||||
font-size: .7rem;
|
||||
.status-holder {
|
||||
@@ -147,44 +147,40 @@
|
||||
}
|
||||
|
||||
body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
$d: $uePaneMiniTabH;
|
||||
$paneExpandedOffset: $splitterD + $uePaneMiniTabW;
|
||||
top: $bodyMargin;
|
||||
height: $d;
|
||||
line-height: $d;
|
||||
&:after {
|
||||
// Always the icon that shows when the pane is collapsed
|
||||
opacity: 0;
|
||||
$hi: splitterHandleInset($splitterD, $splitterHandleD);
|
||||
$paneExpandedOffset: $hi + $splitterHandleD + $uePaneMiniTabW;
|
||||
top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
|
||||
|
||||
&.toggle-tree.anchor-left.collapsed,
|
||||
&.toggle-inspect.anchor-right:not(.collapsed) {
|
||||
@extend .icon-arrow-right;
|
||||
border-bottom-right-radius: $controlCr;
|
||||
border-top-right-radius: $controlCr;
|
||||
}
|
||||
&.collapsed {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.toggle-tree.anchor-left:not(.collapsed),
|
||||
&.toggle-inspect.anchor-right.collapsed {
|
||||
@extend .icon-arrow-left;
|
||||
border-bottom-left-radius: $controlCr;
|
||||
border-top-left-radius: $controlCr;
|
||||
}
|
||||
|
||||
&.toggle-tree.anchor-left {
|
||||
left: 0;
|
||||
@include transform(translateX(-1 * $paneExpandedOffset));
|
||||
&:after {
|
||||
content: '\6d'; // Menu 'hamburger' icon
|
||||
}
|
||||
&.collapsed {
|
||||
left: 0;
|
||||
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
|
||||
}
|
||||
&:not(.collapsed):before {
|
||||
@include trans-prop-nice(opacity, 200ms, 200ms);
|
||||
@include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
|
||||
}
|
||||
}
|
||||
|
||||
&.toggle-inspect.anchor-right {
|
||||
right: $bodyMargin;
|
||||
&:after {
|
||||
content: '\e615'; // Eye icon
|
||||
right: 0;
|
||||
@include transform(translateX($paneExpandedOffset));
|
||||
&.flush-right {
|
||||
@include transform(translateX(($uePaneMiniTabW + ceil($splitterD / 2))));
|
||||
}
|
||||
&.collapsed {
|
||||
right: $interiorMargin;
|
||||
@include transform(translateX($ueCollapsedPaneEdgeM));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -196,11 +192,11 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
right: 0;
|
||||
bottom: $interiorMargin;
|
||||
left: $bodyMargin;
|
||||
.create-btn-holder {
|
||||
.create-button-holder {
|
||||
&.s-status-editing {
|
||||
display: none;
|
||||
& + .search-holder .search-bar {
|
||||
// .search-holder is adjacent sibling to .create-btn-holder
|
||||
// .search-holder is adjacent sibling to .create-button-holder
|
||||
// Add right margin when create button is hidden, to make room for the collapse pane 'x' button
|
||||
margin-right: $interiorMarginLg * 2;
|
||||
}
|
||||
@@ -220,7 +216,7 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
.holder-inspector {
|
||||
top: $bodyMargin;
|
||||
bottom: $interiorMargin;
|
||||
left: $bodyMargin;
|
||||
left: $bodyMargin + $interiorMargin;
|
||||
right: $bodyMargin;
|
||||
}
|
||||
.holder-elements {
|
||||
@@ -241,11 +237,11 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
@include trans-prop-nice-resize(0.25s);
|
||||
}
|
||||
|
||||
.object-browse-bar .s-btn,
|
||||
.top-bar .buttons-main .s-btn,
|
||||
.top-bar .s-menu-btn,
|
||||
.tool-bar .s-btn,
|
||||
.tool-bar .s-menu-btn {
|
||||
.object-browse-bar .s-button,
|
||||
.top-bar .buttons-main .s-button,
|
||||
.top-bar .s-menu-button,
|
||||
.tool-bar .s-button,
|
||||
.tool-bar .s-menu-button {
|
||||
$h: $btnToolbarH;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
|
||||
Reference in New Issue
Block a user