git.r.bdr.sh - rbdr/dotfiles/blob - atom/packages/aesthetic-ui/styles/lists.less

   1 @import "ui-variables";
   2 @import "ui-mixins";
   3 @import "octicon-mixins";
   4
   5 .list-group, .list-tree {
   6   li:not(.list-nested-item),
   7   li.list-nested-item > .list-item {
   8     .text(normal);
   9   }
  10
  11   .generate-list-item-text-color(@class) {
  12     li:not(.list-nested-item).text-@{class},
  13     li.list-nested-item.text-@{class} > .list-item {
  14       .text(@class);
  15     }
  16   }
  17   .generate-list-item-text-color(subtle);
  18   .generate-list-item-text-color(info);
  19   .generate-list-item-text-color(success);
  20   .generate-list-item-text-color(warning);
  21   .generate-list-item-text-color(error);
  22   .generate-list-item-text-color(selected);
  23
  24   .generate-list-item-status-color(@color, @status) {
  25     li:not(.list-nested-item).status-@{status},
  26     li.list-nested-item.status-@{status} > .list-item {
  27       color: @color;
  28     }
  29
  30     li:not(.list-nested-item).selected.status-@{status},
  31     li.list-nested-item.selected.status-@{status} > .list-item {
  32       color: darken(@color, 7%);
  33     }
  34   }
  35   .generate-list-item-status-color(@text-color-subtle, ignored);
  36   .generate-list-item-status-color(@text-color-added, added);
  37   .generate-list-item-status-color(@text-color-renamed, renamed);
  38   .generate-list-item-status-color(@text-color-modified, modified);
  39   .generate-list-item-status-color(@text-color-removed, removed);
  40
  41   li:not(.list-nested-item).selected,
  42   li.list-nested-item.selected > .list-item {
  43     .text(selected);
  44   }
  45 }
  46
  47 .select-list ol.list-group,
  48 &.select-list ol.list-group {
  49   li.two-lines {
  50     .secondary-line { color: @text-color-subtle; }
  51     &.selected .secondary-line {
  52       color: lighten(@text-color-subtle, 10%);
  53       text-shadow: none;
  54     }
  55   }
  56
  57   // We want to highlight the background of the list items because we dont
  58   // know their size.
  59   li.selected {
  60     background-color: @background-color-selected;
  61     &:before{ display: none; }
  62   }
  63
  64   &.mark-active{
  65     @active-icon-size: 14px;
  66
  67     // pad in front of the text where the icon would be We'll pad the non-
  68     // active items with a 'fake' icon so other classes can pad the item
  69     // without worrying about the icon padding.
  70     li:before {
  71       content: '';
  72       background-color: transparent;
  73       position: static;
  74       display: inline-block;
  75       left: auto; right: auto;
  76       height: @active-icon-size;
  77       width: @active-icon-size;
  78     }
  79     > li:not(.active):before {
  80       margin-right: @component-icon-padding;
  81     }
  82     li.active {
  83       .octicon(check, @active-icon-size);
  84       &:before {
  85         margin-right: @component-icon-padding;
  86         color: @text-color-success;
  87       }
  88     }
  89   }
  90 }
  91
  92 .select-list.popover-list,
  93 autocomplete-suggestion-list.select-list.popover-list.popover-list {
  94   background-color: white;
  95   padding: 2px;
  96   .ui-raised-shadow;
  97
  98   atom-text-editor {
  99     margin-bottom: @component-padding/2;
 100   }
 101
 102   .list-group li {
 103     padding-left: @component-padding/2;
 104   }
 105 }
 106
 107 autocomplete-suggestion-list.select-list.popover-list .suggestion-description-more-link {
 108   color: blue;
 109   text-decoration: underline;
 110 }
 111
 112 .ui-sortable {
 113   li {
 114     line-height: 2.5;
 115   }
 116
 117   // For sortable lists in the settings view
 118   li.ui-sortable-placeholder {
 119     visibility: visible !important;
 120     background-color: darken(@pane-item-background-color, 10%);
 121   }
 122 }
 123
 124 li.ui-draggable-dragging, li.ui-sortable-helper {
 125   line-height: @component-line-height;
 126   height: @component-line-height;
 127   border: 0;
 128   border-radius: 0;
 129   list-style: none;
 130   padding: 0 @component-padding;
 131   background: @background-color-highlight;
 132   box-shadow: 0 0 1px @base-border-color;
 133 }