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

   1 @import "ui-variables";
   2 @import "ui-mixins";
   3
   4 .tree-view {
   5         font-size: @font-size;
   6         background: @tree-view-background-color;
   7         .ui-inset-shadow;
   8         position: relative;
   9         padding-bottom: 108px;
  10
  11         // Let the selector war commence!!
  12         .list-item.list-item.list-item.list-item {
  13                 line-height: 20px;
  14         }
  15
  16         box-shadow: none;
  17         --webkit-font-smoothing: none;
  18
  19         &:after {
  20                 pointer-events: none;
  21                 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAC0CAMAAAD8WnOYAAAAq1BMVEX////O7//39/eYz//08/OZz9DAwMCAgIDNzP8AAAAlgIDO//5hz9HPz8/r6+tg0P/g4eGYmutjmtLX19eZz+2Yz9rb8vzX6/ak0//n8/hjmf/J6/360QBe0xuMz/eWx/634f1yz9v1LAA5mP98zv99sNzi7PG5z/xksNTO4fat1eObu+PG0tug0NiKz9iFsf7t+/2l1u3C4MSLw/KKw9MlAP9ov/IhgAGW//8yrco8AAAQQklEQVR42uyXy2rEMBAEe4q6CfL/nxs2CSSHgL2XRS22B2NsdGlqXkr4E/l9//P/OnJxOk98v1WpE8Cdkn79LjjBBqHdQhLeJPbQGeORUJ9PyAEoDiEh9R3qFBKxvc0S+j2I3BgWbp1y5IaFzetGD5gU5ICrOZN+FiLtIIL0+1Cw20LCQmTvFnolFdorG10Riy0kou11HdYPC/MK8UTcl1/qBhHlO/ZeUy9MjCxstpCMHkBCB1f3nHAU7SchYjMKRxlWN4lxRMXUysHHw2onoWgxidFxMli8yH6M6lC9jY+PWN018Um92aw4EsNA2KWugKFpYzAkh9297EJgr/P+DzeUJdJ9GOgZhoGWleSWQ/GpJP82aZjDviLiWid9UwMMhXa/+GblCYmpg4VZD+bRQoOtc2mU8nJFAyMsb5VFQ1jbVmPObCpojeCssmTWFV4DQIWGWHxGhnn87J7Hl0jMIKSASWdQL2OTflKBks8ZEAhCMsQi56lRQ5eA5v2Oa8qdDxxMQTLnWQU6QA/n4M6w79SWs3/9RHXqYIRUZPSFSKAro/a+bUx2UwLdJQSLQiZkgeo9WyqMriLdyTaEYnd3nLkkq1HoHmzCIRoRmVIKGiKB5hpgyRRIxBYs2iuf9M3liuDQQbFg7PQnY+EaGl4sSEhFKhYYgSKahXuCTPVCCRXj6GyFeyLRjdkpYSAa94TRjOoVifo26i5DCugZFRyS3Jf4ezZ+f2r8OR//Tsb3+gRQ0RG2iJ69hi8sBY2KKaN7oVXoYyQTzT0w4DJCyL7Gi3tQluDVkfvanR3m9gJlRhZhSPDsCAuqSLiWaHjNUBAsrFx/P00CKvZ06pQnfI0XnkhAouKGDQNvU8fTW7ZCxlBWJXgmUoeDqJFRT8Ti6O7TwBTbBliwzT4RDkfbN2+Ma44iiyEMN/gYHQpnsTqLBAUKy1gGVKGcxGNfqNqh4V3t0PeD6qQfHKeBivB2eOLCEkrZ5InbdMQIED007Cyu/mrb69KGJVA8Hh2RT7DD5OPSV+LrDZtXqLF0J/Hcs8nEwlHwwu0CMe+ojuT/rwfuLVRw9ZwyyNYX3jZ4b+5amJI5giCb5eIaBETu8JDKAVUoDwFFzZf8/1+W7pk5Vh4RqiLCLrt3p1+ltu3pmdnHkVITaCLvexgUEBAGi2obAC569cO5RDjQwJ1Q1h3RhHFh2r7s1Q9h4o3RQvi4JxdPTrkQAF2yoPViT3Y5BxjeMd5JvQUGGBRk0e10O69govta7dZ+u3wm1D+1wcVUZAFddDudpyqQYPzRpOCjLnKax7wp/BPAhJdcdkphP9GkyES1W7VSq1zw+y7AoJGibZq476A93XefOk+drqSzFrorl6sJ8a5B8/FQLnx0qImnGjpnbtamSBeazQKBRgn1ThS2Ez5sSVO4UCQslznPCzJ6ytumFcRx62I6a4NHFWnXKOxLez/bFMHmaxK0iaCc5dUa5KFm5/pRGLwvbzUKUS7QltC1gUMxtBVHAxVa0LGjKRkX+OVqdbEmNCd89AxCndeaJoJR2WSELFwaEPIQfHBBhOHc3HnLpWx2pG6p3Mm7TCpcYjX4mAsmBqNc9nDGRTfmUNTGxaTn1IQPwflbwgAQXtibg+Lor74ulbMXakJr4MfiN3uiqHEv9er3r8rV1XXl3MUzXtMv2QzPi8Btxk0mDmG4BBCSO/lQNz6cPhONnZj92lquCOLsuuCITdnURAI+5ANCZJX8qnKACIA4+0qI83VUm9klAarwisl2j44Cce7vsBMEIQmGA77KqNAV5nuCuN5f8CsFcXZPC3Mq9aD5RyKqoM/1RCEg/thb1iDOnksFr5EuAIvhICu477mBmwYF0fwSxNnjNzB4b0ygZcZFcHlvOrh1WQSxaUufQZx9TYrmJFFCr9PyaQEeQu5cBLERLzZAVKtn3sSAAfl24t84eLTZIFV/mw+mErujJjYCxhYTMTU8i10xMngflIjED/K5d+O8NxtMvesh6BmI678+lestEOV6ztlMKgnmj9Su0mk2xd105nr8qTGxZUvbIGp2rvlsXgqqVm0HXpJ53vOD1XQ2cBa7BcS2Le2Yk5ZzeSkGu+CgCTSB0cvcynH8FruPAWFv8qA7ExcJqfABnwR4IPBe8D3owlvsPgaEzfvON+PzpCKBNYlNiW/NIGiL3fuZ2I4TG5uU50BBHsSSBI3PfZ6CAFsD+S8mtiJ23KQ8ExnEQCZIB/p0ClVAIWsujgEBDHGT8hxscOTEoTCSeToThSQaOIyJrZxjG0QjbhifZ0eJJJSfIJdxxrugudTimCxWt8YqgsPqzxqWR4kwoIg09WMfPdUxIPYeLvrJ4u+8kME+3pETUcWxIMyiqptcaDk9oIhAygYOV7rYq/2lBHH2w0Vx3FKz1OdJj3blB+l0pUxU/qMYCCh963CRpeU/xoVPWp9wPPvUz30GM8p66RTZ7PzwQgF4+v1643BR5ae3YhJDEISJcQYE8uB8PkAm6A+CIAaxKFPFdj77E7mU39CE9A49M8GQYWZxdaAIBvOykYsfPk8bfVKQa0bn6qRDna96118WYiCU3cNFdp4W19O/e6o8fBK3ZBvr/upgUW1vHy6y87RoPzHh0+HXDUGKWwMglyOW7dWodg8XgQnaFdvJQXCCbeYkYkYXZJ4UEs2cDhUFsXO46IB1fDcTnIiiF6OaW85UruEcDWL3cBFxaDs9DnGnBqMOJvIeMyYJ1zqb+PPPv/eM28oaRHm4KM5SBcUP8eG8VFu9XPTyOZwrkIg0yMTff++AiL4pgtA3DTVqo7H/zINwc7L/LZJvo3qiYBv3sHqZ+sECfJCLo83JleeaRREoWzzY5ZRM1EsdDPJBOvYzP07z8cKTiINljUE3lszTxsgtzJz4m7+DmpMLslOXD2Z5lmN2N0gGfnwYA21LMKzPBJt3klKjMsjJqd+OdnU7c+ZoU7M01+CX5WNm4RVsyH3VQMQ1MPC/4eKhYDkNUjU+pGk92XqtQyEVQeakPk8zW/84DgMTcRKpJX5t13rkkZPKydZryQSICJbHpp4Y+HQcBtWDnPh6AxUUhlGhsbs8UaEZ1cnWa0UNlon3fcFEHK33nxgq2xjq8G52nsJcFJsFb3KAj96e7nQtfVOwfLyfZGmR9YFicZSmiUH8QiAKtPimHgmRWtW4YTyc6O3i0PbrPLbA3TPuximc6+FCDGTQYsxaGPGNQ9ODk4yQdyeK3kQgGB76hX8Ux4TPkRHi2taqXN2iza0jG8RgOCIfmzkV6jciMQz8NBP/+JJmBR5WV8eUa1tya3uB4do7XspurKi6T8AFx0EegKHFtY7Hor/0gxSe83Ax8LZGdQsYMV7U0Kyv7pyuVSTsv6eIJYGEJhj4BQhDv+y/z97zwWKc9byfz3KMcu791PtxgoTEU8c6mS21FOSBhOz5roDG/tO1rNp90wrgjW+Bhbv+TZoOX5YfxbJYQd9U+TwfrPwCueA0ybPATITjZVxUBIYBwMqzOSxtQAAOQ7P/dO3a3X6LXQmCJphoLV8+Ro/vw9FH8ZwWefo8yMYY/jwdgIiZTP/SeWrzwMRqUHOqo5NcXp2UAfjydG3MbL+FCQLwN62bfvryOHqERQFLkRWrfh857TQFG7M0LDjiLI6+JVoSDohKubDI3T7idC0b6/doPAEPQAAMw2IJDJPRMP21eEnTPlQxmw0WTsjIZaxjBvRoSeU16HEj5l4auQ+erjUM3+Wlmndkwd/0E//w/jEa9icefOTD58Kv8twvMPZeulplGj/GHPVNxBDQnDGiUVsRHD5di6JW9R3zjBsqm7r271nx+AgMQ8S85ctsNMC04q1HHWeDdJXrbpiYTkvJKHVNLG/ittqlKupfnq5lobeVeXhcuf3/muhPijvaUv8xn4CHYf4uuy0+iINdpDL+Z3SihkSv9jH/ZG8wHDhdy8Z9JXle1//HBViARaF7LobQ9MtwBCZGwPD+nC88/Gov96tV7jOgyPppU0bd2ogRuNiyp1MC6ntP1yoLuCu/i53P35NM0ZrYikl6NxoCQ6tAsGgNPdjorzg++CbugQ1xv/TgjAmKXUv/RF3Qgqhu8LDvdC0x8Io7mf0ZG7Uyev+vM+hU9R2C9sfLO5iAplE/mjcvk/4QY/7ALBU2JXJo4ZLSuyY+KtuhZ8HwcS9SJiW7p2vl7695ITsCMn9r2vg/NtUUHh6Wo+UImvhF//qQNVs36SR99IvxMvUL20LKSQWVwDxLTMqCnKoBtWaD33O61hA0FMVvnY787V8NBpjgo+GJVBxDCf9Fi8p+WPoJIh3U7e9GE6/sDP3z6D2DEDSwpZxq9JsEFNmw/RhCCDJq+bid07UKIGa33S60/hrXCze1Eb3V8Uy0RBWIEH3TBxPCh6Q1HCH/6Be6bQFDeiEM38S/aSYb+zG2+hxM2sHvnK4lEG3UecPy8o5g6JAOg7K7A34YzW+iiSYabal5AxQa+4hm+JL44j3N+oxy2MzjuN+boAWfpghiYz+mHcnw26dr3RqCdd1XBzooiwoQ7A7fIBx79BnOtVV8tCajSUE8GD8bfpo9MOoVz31PHkbpsx8WRZEYRmJQDmIf3xLbPl2rQN4AwBxup0Or6tYIhV73VcJIxGPdwT0/YyKRMWPIoyEwtKhxyUKQmUMlH5BBot4UNsbuIfqmzf0YNNR4QsdwsdS1RUYcXgrtum40qsprjUwQBbrjl3Bj7oTan9CzMu41geqBnEwQv99pVzLxQwVC1cwdsJCHzf0YY+HzCR1RSVs8FslgY39733BP3Ua10+uACBJSve9WlBB2kQlC2qjsdpiwLLa4Se/SX5NmBkYymtKv7CEdPt+kS9+H/RBBQgS4Zyeibm/tx9hMI57QMX4kgpMW5YBQOsDBd3SrXbEskfWrq6xHfvzWRmRCNMD45u+KUtfIZX9NPLjRsXtTfKkHNsca92O442TZoKFLOHa7r6P6mNnC2+I9YwdK4G17zkghlN/IjDBR3cbDbtdd8UnHZ330r9SH4NGZH+7wU0GDZ0365M8d/+qKwAc7oUN8hGG/N0+VCA6Vxn2n0eg6Y0KGXKtJDKyaUYkUtkIIIez1ToKAffSvtCG2iC0iTSTSGQ8cqMp744SOAPDSl6zU/ym1Xac2gMHBpqruiV9O0UP0Y74OUO5V6FAotagPASGXqI+oCUWw6V+TBxk17vB74wc9uQARFunaNrP2tvIRPyIRjFtoCCQsiDbYRSoaTw3Km96WfSkPixmaklDZUd5xcWGPJtDUfmhH9sweWDaetSWswRjQpjzEDxE6b1yULXiGCo1/4dZ0HpmgKMAHobCjKtb6QN0vetOEjr+ZfPavRGYMbTyDISQp+LA4IBFAbhsAqRBctDIjoy0wLPEQOijuxhM0DXl3beTKg5VS3hRG5UtvpZJNBIAEgwPXZM0EYFi1+NdCpYp4LwiMi7I6ieD/lOZEbSsTjQZ7poWAgtJRUkQTFg3da2SiNK+oc5oQqTDV7r9SI/asmhDtBhsrFzt2SpCqbyGSj7ow8eZC20kFBKLAFwnQz0rfwJMzFoyVOHJVxn4q/gVf6kAb8wu8wwAAAABJRU5ErkJggg==');
  22                 background-position: bottom left;
  23                 background-repeat: no-repeat;
  24                 width: 100%;
  25                 height: 200px;
  26                 position: fixed;
  27                 bottom: 0;
  28                 z-index: -4;
  29                 left: 0;
  30                 content: '';
  31                 image-rendering: pixelated;
  32         }
  33
  34         .selected::before {
  35                 width: 0;
  36                 height: 0;
  37                 margin-left: 2px;
  38                 margin-right: 2px;
  39         }
  40
  41         .directory.selected > .header > .name {
  42                 position: relative;
  43                 color: white;
  44                 &:after {
  45                         content: '';
  46                         width: calc(100% ~"-" 15px);
  47                         height: 120%;
  48                         position: absolute;
  49                         left: 18px;
  50                         z-index: -2;
  51                         border: 1px dotted gray;
  52                         top: -1px;
  53                         background-color: navy;
  54                 }
  55         }
  56         .file.selected > span {
  57                 position: relative;
  58                 color: white;
  59                 &:after {
  60                         content: '';
  61                         width: calc(100% ~"-" 15px);
  62                         height: 120%;
  63                         position: absolute;
  64                         left: 18px;
  65                         z-index: -2;
  66                         border: 1px dotted gray;
  67                         top: -1px;
  68                         background-color: navy;
  69                 }
  70         }
  71 }
  72
  73 .tree-view-resizer {
  74         .tree-view-resize-handle {
  75                 width: 8px;
  76                 background: #D3D0C7;
  77                 border-left: 1px solid gray;
  78         }
  79 }
  80
  81 .focusable-panel {
  82         opacity: 1;
  83
  84         &:focus {
  85                 .selected::before {
  86                         background: @background-color-selected;
  87                         color: white;
  88                 }
  89         }
  90 }
  91
  92 .directory.entry {
  93         &.expanded {
  94                 .header {
  95                         &::before {
  96                                 // Plus sign.
  97                                 content: '';
  98                                 left: 1px;
  99                                 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+/v78AAABCS8n0AAAAFElEQVQI12MIDXVgQIZeK1D4IHkAbMQGB9awVs4AAAAASUVORK5CYII=');
 100                                 background-position: center center;
 101                                 background-repeat: no-repeat;
 102                                 height: 9px !important;
 103                                 width: 12px !important;
 104                                 image-rendering: pixelated;
 105                                 z-index: 1;
 106                         }
 107                         .icon-file-directory::before {
 108                                 // Directory icon.
 109                                 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAZ0lEQVR4AZWPhw0AMQgD2fXX8kyM9B3p0ouVjg+IXZsCkCwdEwAHvHUAYsoGNRl9gIHcDzObAowApPl4rADd9P6v4XvWPuDpAWD8Byo8Q4rUJYAPN10BwJRugHCnwGwAhGwugA1tAzeXZSkYJ9mbPwAAAABJRU5ErkJggg==');
 110                                 content: '';
 111                                 image-rendering: pixelated;
 112                                 z-index: 1;
 113                                 transform: translateY(1px);
 114                         }
 115                 }
 116         }
 117         &.collapsed {
 118                 .header {
 119                         &::before {
 120                                 // Minus sign.
 121                                 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+/v78AAABCS8n0AAAAGElEQVQI12MIDXVgAMMGCPZagWADIUgeAJDECAeFz1XEAAAAAElFTkSuQmCC') !important;
 122                                 background-position: center center;
 123                                 background-repeat: no-repeat;
 124                                 content: '' !important;
 125                                 height: 9px !important;
 126                                 width: 12px !important;
 127                                 image-rendering: pixelated;
 128                         }
 129                         .icon-file-directory::before {
 130                                 // Directory icon.
 131                                 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAYElEQVR4AZ2NxxWAMAzF2DVreSatkxvpPRTDf8KnCB3u44ogcoyEPQnhhbXWORISeHDi/8Ds1FqnC87xhoBJzS7IEygF+lUXUBb4UUBZYL+XAg+vNwGMhiLET7cu6PdH8BLwRqwGgozlAAAAAElFTkSuQmCC');
 132                                 content: '';
 133                                 image-rendering: pixelated;
 134                                 transform: translateY(1px);
 135                         }
 136                 }
 137         }
 138 }
 139
 140 /* filetypes */
 141
 142 .icon-file-text::before {
 143         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAT0lEQVR42mNggIKGhob/xGAGXAAkSQgcOHAAtyHEGgACWA0hxgCgMnRMmgHILsFpAL4AJMqAURfQ0AVEG0CxCygyACRBLMYwAEs6JwYzAAB9sXFvgXLcRQAAAABJRU5ErkJggg==');
 144         background-position: center center;
 145         content: '';
 146         height: 16px;
 147         width: 16px;
 148         image-rendering: pixelated;
 149 }
 150
 151 .icon-file-media::before {
 152         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAj0lEQVR42o2SARIAIQRFO7qjdbN2FRIRO3/ameXtRw0ARkUtCvz4it57DKkCMDTkfxmARwWw8rcGyQEAGtndJ2oWsRNdbFvABPs3DXDFFsDJ+hHArTh0YAA0PC6OAeKAZsDrY7BqMXcw24UFksmfM8od6LBbeDq4rbIMsCs8Lk8FULnSVwBPvCIHyGwnkvgAtFsewSfEAL4AAAAASUVORK5CYII=');
 153         background-position: center center;
 154         content: '';
 155         height: 16px;
 156         width: 16px;
 157         image-rendering: pixelated;
 158 }
 159
 160 .icon-file-binary::before {
 161         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVR42r2SSw7AIAhEOTpH42ZU/CJB1IUlnQSJeQ4FQETeCaKQC1EQUQw5AUgsITtAumJ1B9BO/gGcTEVNh11AwrpqLpQbH3DV0hJQX8ipuKp1KWk3gQMFAJxhuo13LTDkr9SA+wFKPgHk0DT+AXfbAhg52knMq2qBkdzFcnY/1AerkX9hkHz/KAAAAABJRU5ErkJggg==');
 162         background-position: center center;
 163         content: '';
 164         height: 16px;
 165         width: 16px;
 166         image-rendering: pixelated;
 167 }
 168
 169 .icon-book::before {
 170         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAARElEQVR42mNgQID/RNJYwX8QaGhowEtjNQRZklgaqwHEgAMHDtDYAKgkunMHyAXorhl1Ab1cQLYBIAliMa5c+Z8EjAIAc/wzNSUthNwAAAAASUVORK5CYII=');
 171         background-position: center center;
 172         content: '';
 173         height: 16px;
 174         margin-left: 2px;
 175         margin-right: 3px !important; // This counteracts the default 5px right margin
 176         width: 16px;
 177         image-rendering: pixelated;
 178 }
 179
 180 .icon-repo::before {
 181         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAsklEQVR4AZ2R1wGDMAwFtRKrsIJX4lMrsMpbyblEQlF6eS643IkUm99kXbUk+VmQ23SmQzDXtQ/f9633My3zYYStEbihGbTkVTdrTw86gFw9o9VrL8MpmkKntyO9Np8EHyeFokNgrtpFA9Bx6iiiEKgcNAmaGYx0QSVcOCIWRbPogrpASqjPA/aVkHR/g7m6UOsQimZe2v9QxH06Te//dDqS1+fuNMwhDM/u2p4Frrr9kRMAOsBw6rbrYwAAAABJRU5ErkJggg==');
 182         background-position: center center;
 183         content: '';
 184         height: 16px;
 185         width: 16px;
 186         image-rendering: pixelated;
 187 }
 188
 189 /* lines */
 190
 191 ol.entries {
 192         position: relative !important;
 193 }
 194
 195 ol.entries > li {
 196         &::after {
 197                 width: 0;
 198                 top: -11px;
 199                 left: 24px;
 200                 bottom: 12px;
 201                 position: absolute;
 202                 border-left: 1px dotted gray;
 203                 content: '';
 204                 display: block;
 205         }
 206         &.file::after {
 207                 left: 7px;
 208         }
 209         &:last-child::after {
 210                 bottom: auto;
 211                 height: 19px;
 212         }
 213 }
 214
 215 .icon::before {
 216         top: 4px;
 217 }
 218
 219 .entry {
 220         position: relative;
 221 }
 222
 223 .entry.file::before {
 224         &.selected {
 225                 background: none;
 226         }
 227         position: absolute;
 228         background: none !important;
 229         border-bottom: 1px dotted gray;
 230         width: 11px;
 231         height: 0;
 232         top: 9px;
 233         left: 7px;
 234 }
 235
 236 .entry.directory::before {
 237         position: absolute;
 238         background: none !important;
 239         border-bottom: 1px dotted gray;
 240         width: 11px;
 241         height: 0;
 242         top: 10px;
 243         left: 22px;
 244 }