www.aleph1.co.uk Git - yaffs-website/blob - web/core/misc/dropbutton/dropbutton.css

   1
   2 /**
   3  * @file
   4  * Base styles for dropbuttons.
   5  */
   6
   7 /**
   8  * When a dropbutton has only one option, it is simply a button.
   9  */
  10 .dropbutton-wrapper,
  11 .dropbutton-wrapper div {
  12   box-sizing: border-box;
  13 }
  14 .js .dropbutton-wrapper,
  15 .js .dropbutton-widget {
  16   display: block;
  17   position: relative;
  18 }
  19
  20 @media screen and (max-width:600px) {
  21   .js .dropbutton-wrapper {
  22     width: 100%;
  23   }
  24 }
  25
  26 /* Splitbuttons */
  27 @media screen and (min-width:600px) {
  28   .form-actions .dropbutton-wrapper {
  29     float: left; /* LTR */
  30   }
  31   [dir="rtl"] .form-actions .dropbutton-wrapper {
  32     float: right;
  33   }
  34 }
  35 .js .form-actions .dropbutton-widget {
  36   position: static;
  37 }
  38 .js td .dropbutton-widget {
  39   position: absolute;
  40 }
  41 .js td .dropbutton-wrapper {
  42   min-height: 2em;
  43 }
  44 .js td .dropbutton-multiple {
  45   padding-right: 10em; /* LTR */
  46   margin-right: 2em; /* LTR */
  47   max-width: 100%;
  48 }
  49 [dir="rtl"].js td .dropbutton-multiple {
  50   padding-right: 0;
  51   margin-right: 0;
  52   padding-left: 10em;
  53   margin-left: 2em;
  54 }
  55 .js td .dropbutton-multiple .dropbutton-action a,
  56 .js td .dropbutton-multiple .dropbutton-action input,
  57 .js td .dropbutton-multiple .dropbutton-action button {
  58   width: auto;
  59 }
  60
  61 /* UL styles are over-scoped in core, so this selector needs weight parity. */
  62 .js .dropbutton-widget .dropbutton {
  63   list-style-image: none;
  64   list-style-type: none;
  65   margin: 0;
  66   overflow: hidden;
  67   padding: 0;
  68 }
  69 .js .dropbutton li,
  70 .js .dropbutton a {
  71   display: block;
  72   outline: none;
  73 }
  74
  75 .js .dropbutton li:hover,
  76 .js .dropbutton li:focus,
  77 .js .dropbutton a:hover,
  78 .js .dropbutton a:focus {
  79   outline: initial;
  80 }
  81
  82 /**
  83  * The dropbutton styling.
  84  *
  85  * A dropbutton is a widget that displays a list of action links as a button
  86  * with a primary action. Secondary actions are hidden behind a click on a
  87  * twisty arrow.
  88  *
  89  * The arrow is created using border on a zero-width, zero-height span.
  90  * The arrow inherits the link color, but can be overridden with border colors.
  91  */
  92 .js .dropbutton-multiple .dropbutton-widget {
  93   padding-right: 2em; /* LTR */
  94 }
  95 .js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
  96   padding-left: 2em;
  97   padding-right: 0;
  98 }
  99 .dropbutton-multiple.open,
 100 .dropbutton-multiple.open .dropbutton-widget {
 101   max-width: none;
 102 }
 103 .dropbutton-multiple.open {
 104   z-index: 100;
 105 }
 106 .dropbutton-multiple .dropbutton .secondary-action {
 107   display: none;
 108 }
 109 .dropbutton-multiple.open .dropbutton .secondary-action {
 110   display: block;
 111 }
 112 .dropbutton-toggle {
 113   bottom: 0;
 114   display: block;
 115   position: absolute;
 116   right: 0; /* LTR */
 117   text-indent: 110%;
 118   top: 0;
 119   white-space: nowrap;
 120   width: 2em;
 121 }
 122 [dir="rtl"] .dropbutton-toggle {
 123   left: 0;
 124   right: auto;
 125 }
 126 .dropbutton-toggle button {
 127   background: none;
 128   border: 0;
 129   cursor: pointer;
 130   display: block;
 131   height: 100%;
 132   margin: 0;
 133   padding: 0;
 134   width: 100%;
 135 }
 136 .dropbutton-toggle button:hover,
 137 .dropbutton-toggle button:focus {
 138   outline: initial;
 139 }
 140 .dropbutton-arrow {
 141   border-bottom-color: transparent;
 142   border-left-color: transparent;
 143   border-right-color: transparent;
 144   border-style: solid;
 145   border-width: 0.3333em 0.3333em 0;
 146   display: block;
 147   height: 0;
 148   line-height: 0;
 149   position: absolute;
 150   right: 40%; /* 0.6667em; */ /* LTR */
 151   top: 50%;
 152   margin-top: -0.1666em;
 153   width: 0;
 154   overflow: hidden;
 155 }
 156 [dir="rtl"] .dropbutton-arrow {
 157   left: 0.6667em;
 158   right: auto;
 159 }
 160 .dropbutton-multiple.open .dropbutton-arrow {
 161   border-bottom: 0.3333em solid;
 162   border-top-color: transparent;
 163   top: 0.6667em;
 164 }