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
   8 .mw-widget-titleWidget-menu {
   9         .mw-widget-titleOptionWidget {
  10                 line-height: normal;
  11
  12                 &-description {
  13                         color: #888;
  14                 }
  15         }
  16
  17         &-withImages {
  18                 .mw-widget-titleOptionWidget {
  19                         -webkit-box-sizing: border-box;
  20                         -moz-box-sizing: border-box;
  21                         box-sizing: border-box;
  22                         min-height: 3.75em;
  23                         padding-left: 4.75em;
  24
  25                         &:not( :last-child ) {
  26                                 margin-bottom: 2px;
  27                         }
  28
  29                         > .oo-ui-labelElement-label {
  30                                 line-height: 2.8em;
  31                         }
  32
  33                         &.oo-ui-iconElement {
  34                                 > .oo-ui-iconElement-icon {
  35                                         display: block;
  36                                         width: 3.75em;
  37                                         height: 3.75em;
  38                                         left: 0;
  39                                         &:not( .mw-widget-titleOptionWidget-hasImage ) {
  40                                                 background-color: #ccc;
  41                                                 opacity: 0.4;
  42                                         }
  43                                         &.mw-widget-titleOptionWidget-hasImage {
  44                                                 border: 0;
  45                                                 background-size: cover;
  46                                                 opacity: 0.7;
  47                                         }
  48                                 }
  49                         }
  50
  51                         &.oo-ui-optionWidget-highlighted,
  52                         &.oo-ui-optionWidget-selected {
  53                                 &.oo-ui-iconElement > .mw-widget-titleOptionWidget-hasImage {
  54                                         opacity: 1;
  55                                 }
  56                         }
  57                 }
  58         }
  59
  60         &-withDescriptions {
  61                 .mw-widget-titleOptionWidget {
  62                         > .oo-ui-labelElement-label {
  63                                 line-height: 1.5em;
  64                         }
  65
  66                         &-description {
  67                                 display: block;
  68                                 white-space: nowrap;
  69                                 text-overflow: ellipsis;
  70                                 overflow: hidden;
  71                         }
  72                 }
  73         }
  74
  75         &:not( &-withDescriptions ) {
  76                 .mw-widget-titleOptionWidget-description {
  77                         display: none;
  78                 }
  79         }
  80 }