[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;
This commit is contained in:
Charles Hacskaylo 2016-06-27 14:27:56 -07:00
parent 0cf4089620
commit b561d4f60e
2 changed files with 188 additions and 94 deletions

View File

@ -5,96 +5,190 @@
} }
} }
.icon-alert-rect { @include glyph('\e900'); } $glyph-icon-alert-rect: '\e900';
.icon-alert-triangle { @include glyph('\e901'); } $glyph-icon-alert-triangle: '\e901';
.icon-arrow-down { @include glyph('\e902'); } $glyph-icon-arrow-down: '\e902';
.icon-arrow-left { @include glyph('\e903'); } $glyph-icon-arrow-left: '\e903';
.icon-arrow-right { @include glyph('\e904'); } $glyph-icon-arrow-right: '\e904';
.icon-arrow-double-up { @include glyph('\e905'); } $glyph-icon-arrow-double-up: '\e905';
.icon-arrow-tall-up { @include glyph('\e906'); } $glyph-icon-arrow-tall-up: '\e906';
.icon-arrow-tall-down { @include glyph('\e907'); } $glyph-icon-arrow-tall-down: '\e907';
.icon-arrow-double-down { @include glyph('\e908'); } $glyph-icon-arrow-double-down: '\e908';
.icon-arrow-up { @include glyph('\e909'); } $glyph-icon-arrow-up: '\e909';
.icon-asterisk { @include glyph('\e910'); } $glyph-icon-asterisk: '\e910';
.icon-bell { @include glyph('\e911'); } $glyph-icon-bell: '\e911';
.icon-box { @include glyph('\e912'); } $glyph-icon-box: '\e912';
.icon-box-with-arrow { @include glyph('\e913'); } $glyph-icon-box-with-arrow: '\e913';
.icon-check { @include glyph('\e914'); } $glyph-icon-check: '\e914';
.icon-connectivity { @include glyph('\e915'); } $glyph-icon-connectivity: '\e915';
.icon-database-in-brackets { @include glyph('\e916'); } $glyph-icon-database-in-brackets: '\e916';
.icon-eye-open { @include glyph('\e917'); } $glyph-icon-eye-open: '\e917';
.icon-gear { @include glyph('\e918'); } $glyph-icon-gear: '\e918';
.icon-hourglass { @include glyph('\e919'); } $glyph-icon-hourglass: '\e919';
.icon-info { @include glyph('\e920'); } $glyph-icon-info: '\e920';
.icon-link { @include glyph('\e921'); } $glyph-icon-link: '\e921';
.icon-lock { @include glyph('\e922'); } $glyph-icon-lock: '\e922';
.icon-minus { @include glyph('\e923'); } $glyph-icon-minus: '\e923';
.icon-people { @include glyph('\e924'); } $glyph-icon-people: '\e924';
.icon-person { @include glyph('\e925'); } $glyph-icon-person: '\e925';
.icon-plus { @include glyph('\e926'); } $glyph-icon-plus: '\e926';
.icon-trash { @include glyph('\e927'); } $glyph-icon-trash: '\e927';
.icon-x { @include glyph('\e928'); } $glyph-icon-x: '\e928';
.icon-arrows-out { @include glyph('\e1000'); } $glyph-icon-arrows-out: '\e1000';
.icon-arrows-right-left { @include glyph('\e1001'); } $glyph-icon-arrows-right-left: '\e1001';
.icon-arrows-up-down { @include glyph('\e1002'); } $glyph-icon-arrows-up-down: '\e1002';
.icon-box-with-dashed-lines { @include glyph('\e1003'); } $glyph-icon-box-with-dashed-lines: '\e1003';
.icon-bullet { @include glyph('\e1004'); } $glyph-icon-bullet: '\e1004';
.icon-calendar { @include glyph('\e1005'); } $glyph-icon-calendar: '\e1005';
.icon-chain-links { @include glyph('\e1006'); } $glyph-icon-chain-links: '\e1006';
.icon-collapse-pane-left { @include glyph('\e1007'); } $glyph-icon-collapse-pane-left: '\e1007';
.icon-collapse-pane-right { @include glyph('\e1008'); } $glyph-icon-collapse-pane-right: '\e1008';
.icon-download { @include glyph('\e1009'); } $glyph-icon-download: '\e1009';
.icon-duplicate { @include glyph('\e1010'); } $glyph-icon-duplicate: '\e1010';
.icon-folder-new { @include glyph('\e1011'); } $glyph-icon-folder-new: '\e1011';
.icon-fullscreen-collapse { @include glyph('\e1012'); } $glyph-icon-fullscreen-collapse: '\e1012';
.icon-fullscreen-expand { @include glyph('\e1013'); } $glyph-icon-fullscreen-expand: '\e1013';
.icon-layers { @include glyph('\e1014'); } $glyph-icon-layers: '\e1014';
.icon-line-horz { @include glyph('\e1015'); } $glyph-icon-line-horz: '\e1015';
.icon-magnify { @include glyph('\e1016'); } $glyph-icon-magnify: '\e1016';
.icon-magnify-in { @include glyph('\e1017'); } $glyph-icon-magnify-in: '\e1017';
.icon-magnify-out { @include glyph('\e1018'); } $glyph-icon-magnify-out: '\e1018';
.icon-menu-hamburger { @include glyph('\e1019'); } $glyph-icon-menu-hamburger: '\e1019';
.icon-move { @include glyph('\e1020'); } $glyph-icon-move: '\e1020';
.icon-new-window { @include glyph('\e1021'); } $glyph-icon-new-window: '\e1021';
.icon-paint-bucket { @include glyph('\e1022'); } $glyph-icon-paint-bucket: '\e1022';
.icon-pause { @include glyph('\e1023'); } $glyph-icon-pause: '\e1023';
.icon-pencil { @include glyph('\e1024'); } $glyph-icon-pencil: '\e1024';
.icon-play { @include glyph('\e1025'); } $glyph-icon-play: '\e1025';
.icon-plot-resource { @include glyph('\e1026'); } $glyph-icon-plot-resource: '\e1026';
.icon-pointer-left { @include glyph('\e1027'); } $glyph-icon-pointer-left: '\e1027';
.icon-pointer-right { @include glyph('\e1028'); } $glyph-icon-pointer-right: '\e1028';
.icon-refresh { @include glyph('\e1029'); } $glyph-icon-refresh: '\e1029';
.icon-save { @include glyph('\e1030'); } $glyph-icon-save: '\e1030';
.icon-sine { @include glyph('\e1031'); } $glyph-icon-sine: '\e1031';
.icon-T { @include glyph('\e1032'); } $glyph-icon-T: '\e1032';
.icon-thumbs-strip { @include glyph('\e1033'); } $glyph-icon-thumbs-strip: '\e1033';
.icon-two-parts-both { @include glyph('\e1034'); } $glyph-icon-two-parts-both: '\e1034';
.icon-two-parts-one-only { @include glyph('\e1035'); } $glyph-icon-two-parts-one-only: '\e1035';
.icon-x-in-circle { @include glyph('\e1036'); } $glyph-icon-x-in-circle: '\e1036';
.icon-activity { @include glyph('\e1100'); } $glyph-icon-activity: '\e1100';
.icon-activity-mode { @include glyph('\e1101'); } $glyph-icon-activity-mode: '\e1101';
.icon-autoflow-tabular { @include glyph('\e1102'); } $glyph-icon-autoflow-tabular: '\e1102';
.icon-clock { @include glyph('\e1103'); } $glyph-icon-clock: '\e1103';
.icon-database { @include glyph('\e1104'); } $glyph-icon-database: '\e1104';
.icon-database-query { @include glyph('\e1105'); } $glyph-icon-database-query: '\e1105';
.icon-dataset { @include glyph('\e1106'); } $glyph-icon-dataset: '\e1106';
.icon-datatable { @include glyph('\e1107'); } $glyph-icon-datatable: '\e1107';
.icon-dictionary { @include glyph('\e1108'); } $glyph-icon-dictionary: '\e1108';
.icon-folder { @include glyph('\e1109'); } $glyph-icon-folder: '\e1109';
.icon-image { @include glyph('\e1110'); } $glyph-icon-image: '\e1110';
.icon-layout { @include glyph('\e1111'); } $glyph-icon-layout: '\e1111';
.icon-object { @include glyph('\e1112'); } $glyph-icon-object: '\e1112';
.icon-object-unknown { @include glyph('\e1113'); } $glyph-icon-object-unknown: '\e1113';
.icon-packet { @include glyph('\e1114'); } $glyph-icon-packet: '\e1114';
.icon-page { @include glyph('\e1115'); } $glyph-icon-page: '\e1115';
.icon-session { @include glyph('\e1116'); } $glyph-icon-session: '\e1116';
.icon-tabular { @include glyph('\e1117'); } $glyph-icon-tabular: '\e1117';
.icon-tabular-lad { @include glyph('\e1118'); } $glyph-icon-tabular-lad: '\e1118';
.icon-tabular-lad-set { @include glyph('\e1119'); } $glyph-icon-tabular-lad-set: '\e1119';
.icon-tabular-realtime { @include glyph('\e1120'); } $glyph-icon-tabular-realtime: '\e1120';
.icon-tabular-scrolling { @include glyph('\e1121'); } $glyph-icon-tabular-scrolling: '\e1121';
.icon-telemetry { @include glyph('\e1122'); } $glyph-icon-telemetry: '\e1122';
.icon-telemetry-panel { @include glyph('\e1123'); } $glyph-icon-telemetry-panel: '\e1123';
.icon-timeline { @include glyph('\e1124'); } $glyph-icon-timeline: '\e1124';
.icon-timer { @include glyph('\e1125'); } $glyph-icon-timer: '\e1125';
.icon-topic { @include glyph('\e1126'); } $glyph-icon-topic: '\e1126';
.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-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-box-with-dashed-lines { @include glyph($glyph-icon-box-with-dashed-lines); }
.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-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); }

View File

@ -21,6 +21,7 @@
*****************************************************************************/ *****************************************************************************/
@import "effects"; @import "effects";
@import "global"; @import "global";
@import "glyphs";
@import "archetypes"; @import "archetypes";
@import "about"; @import "about";
@import "text"; @import "text";
@ -59,7 +60,6 @@
@import "overlay/overlay"; @import "overlay/overlay";
@import "mobile/overlay/overlay"; @import "mobile/overlay/overlay";
@import "tree/tree"; @import "tree/tree";
@import "glyphs";
@import "object-label"; @import "object-label";
@import "mobile/tree"; @import "mobile/tree";
@import "user-environ/frame"; @import "user-environ/frame";