resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less

   1 /*!
   2  * MediaWiki Widgets - TitleWidget styles.
   3  *
   4  * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7 .mw-widget-titleWidget-menu {
   8         .mw-widget-titleOptionWidget {
   9                 line-height: normal;
  10
  11                 &-description {
  12                         color: #72777d;
  13                 }
  14         }
  15
  16         &-withImages {
  17                 .mw-widget-titleOptionWidget {
  18                         box-sizing: border-box;
  19                         min-height: 3.75em;
  20                         padding-left: 4.75em;
  21                         padding-top: 0.5em;
  22                         padding-bottom: 0.5em;
  23
  24                         &:not( :last-child ) {
  25                                 margin-bottom: 2px;
  26                         }
  27
  28                         > .oo-ui-labelElement-label {
  29                                 line-height: 2.8em;
  30                         }
  31
  32                         &.oo-ui-iconElement {
  33                                 > .oo-ui-iconElement-icon {
  34                                         display: block;
  35                                         width: 3.75em;
  36                                         height: 3.75em;
  37                                         left: 0;
  38
  39                                         &:not( .mw-widget-titleOptionWidget-hasImage ) {
  40                                                 background-size: 80%;
  41                                                 background-color: #c8ccd1;
  42                                                 opacity: 0.4;
  43                                         }
  44
  45                                         &.mw-widget-titleOptionWidget-hasImage {
  46                                                 border: 0;
  47                                                 background-size: cover;
  48                                                 opacity: 0.7;
  49                                         }
  50                                 }
  51                         }
  52
  53                         &.oo-ui-optionWidget-highlighted,
  54                         &.oo-ui-optionWidget-selected {
  55                                 &.oo-ui-iconElement > .mw-widget-titleOptionWidget-hasImage {
  56                                         opacity: 1;
  57                                 }
  58                         }
  59                 }
  60         }
  61
  62         &-withDescriptions {
  63                 .mw-widget-titleOptionWidget {
  64                         > .oo-ui-labelElement-label {
  65                                 line-height: 1.5em;
  66                         }
  67
  68                         &-description {
  69                                 display: block;
  70                                 white-space: nowrap;
  71                                 text-overflow: ellipsis;
  72                                 overflow: hidden;
  73                         }
  74                 }
  75         }
  76
  77         /* TODO: Should be able to use :not( &-withDescriptions ) but LESS version is buggy (T204816) */
  78         &:not( .mw-widget-titleWidget-menu-withDescriptions ) {
  79                 .mw-widget-titleOptionWidget-description {
  80                         display: none;
  81                 }
  82         }
  83 }