12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- @import "ui-variables";
- @wedge: (360 / 16);
- .badge-variant(@char, @num) {
- .symbols-view-badge-variant-@{char} {
- background-color: spin(@background-color-info, @wedge * @num) !important;
- }
- }
- // Generate 16 different badge colors.
- //
- // We need colors that vary from one another, but they need to harmonize with
- // the user's chosen UI theme. So we'll just use `spin` to move around the
- // color wheel, starting with their UI theme's own badge background color, and
- // varying the hue while keeping the saturation and brightness constant.
- .badge-variant(e('0'), 0);
- .badge-variant(e('1'), 1);
- .badge-variant(e('2'), 2);
- .badge-variant(e('3'), 3);
- .badge-variant(e('4'), 4);
- .badge-variant(e('5'), 5);
- .badge-variant(e('6'), 6);
- .badge-variant(e('7'), 7);
- .badge-variant(e('8'), 8);
- .badge-variant(e('9'), 9);
- .badge-variant(e('a'), 10);
- .badge-variant(e('b'), 11);
- .badge-variant(e('c'), 12);
- .badge-variant(e('d'), 13);
- .badge-variant(e('e'), 14);
- .badge-variant(e('f'), 15);
- // Highlight matched text
- .symbols-view .list-group .character-match {
- color: @text-color-highlight;
- font-weight: bold;
- }
- atom-panel.modal .symbols-view {
- .primary-line {
- display: flex !important;
- flex-direction: row;
- align-items: center;
- &.icon::before {
- margin-left: 0;
- }
- .name {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: pre;
- margin-right: auto;
- }
- .badge-container {
- display: block;
- flex-grow: 0;
- display: flex;
- flex-direction: row;
- .badge:not(:last-child) {
- margin-right: 5px;
- }
- }
- .badge-symbol-tag {
- text-transform: capitalize;
- }
- }
- .secondary-line {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: baseline;
- max-width: 100%;
- .location {
- display: block;
- }
- .context {
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- flex-grow: 0;
- }
- }
- }
|