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 @import 'mediawiki.mixins';
   8
   9 .mw-widget-titleWidget-menu {
  10         .mw-widget-titleOptionWidget {
  11                 line-height: normal;
  12
  13                 &-description {
  14                         color: #72777d;
  15                 }
  16         }
  17
  18         &-withImages {
  19                 .mw-widget-titleOptionWidget {
  20                         .box-sizing( border-box );
  21                         min-height: 3.75em;
  22                         padding-left: 4.75em;
  23                         padding-top: 0.5em;
  24                         padding-bottom: 0.5em;
  25
  26                         &:not( :last-child ) {
  27                                 margin-bottom: 2px;
  28                         }
  29
  30                         > .oo-ui-labelElement-label {
  31                                 line-height: 2.8em;
  32                         }
  33
  34                         &.oo-ui-iconElement {
  35                                 > .oo-ui-iconElement-icon {
  36                                         display: block;
  37                                         width: 3.75em;
  38                                         height: 3.75em;
  39                                         left: 0;
  40
  41                                         &:not( .mw-widget-titleOptionWidget-hasImage ) {
  42                                                 background-color: #c8ccd1;
  43                                                 opacity: 0.4;
  44                                         }
  45
  46                                         &.mw-widget-titleOptionWidget-hasImage {
  47                                                 border: 0;
  48                                                 background-size: cover;
  49                                                 opacity: 0.7;
  50                                         }
  51                                 }
  52                         }
  53
  54                         &.oo-ui-optionWidget-highlighted,
  55                         &.oo-ui-optionWidget-selected {
  56                                 &.oo-ui-iconElement > .mw-widget-titleOptionWidget-hasImage {
  57                                         opacity: 1;
  58                                 }
  59                         }
  60                 }
  61         }
  62
  63         &-withDescriptions {
  64                 .mw-widget-titleOptionWidget {
  65                         > .oo-ui-labelElement-label {
  66                                 line-height: 1.5em;
  67                         }
  68
  69                         &-description {
  70                                 display: block;
  71                                 white-space: nowrap;
  72                                 text-overflow: ellipsis;
  73                                 overflow: hidden;
  74                         }
  75                 }
  76         }
  77
  78         /* TODO: Should be able to use :not( &-withDescriptions ) but LESS version is buggy (T204816) */
  79         &:not( .mw-widget-titleWidget-menu-withDescriptions ) {
  80                 .mw-widget-titleOptionWidget-description {
  81                         display: none;
  82                 }
  83         }
  84 }
  85
  86 /* Icons */
  87
  88 .oo-ui-icon-page-disambiguation {
  89         /* @embed */
  90         background-image: url( images/page-disambiguation-ltr.svg );
  91 }
  92
  93 .oo-ui-icon-page-existing {
  94         /* @embed */
  95         background-image: url( images/page-existing-ltr.svg );
  96 }
  97
  98 .oo-ui-icon-page-not-found {
  99         /* @embed */
 100         background-image: url( images/page-not-found-ltr.svg );
 101 }
 102
 103 .oo-ui-icon-page-not-found:lang( he ) {
 104         /* @embed */
 105         background-image: url( images/page-not-found-he-yi.svg );
 106 }
 107
 108 .oo-ui-icon-page-redirect {
 109         /* @embed */
 110         background-image: url( images/page-redirect-ltr.svg );
 111 }