aleph1.co.uk Git - yaffs-website/blob - web/core/themes/bartik/css/components/dropbutton.component.css

   1 /**
   2  * @file
   3  * Visual styles for Bartik's dropbutton component.
   4  */
   5
   6 .js .dropbutton-widget {
   7   border: 1px solid;
   8   border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d2d2d2;
   9   background-color: #fff;
  10   background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
  11   background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8);
  12   color: #3a3a3a;
  13   cursor: pointer;
  14   text-align: center;
  15   margin: 0.125em 0;
  16   border-radius: 1em;
  17   overflow: hidden;
  18 }
  19 .js .dropbutton-widget:hover {
  20   border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d2d2d2;
  21 }
  22 .js .dropbutton-widget .button {
  23   border: none;
  24   margin: 0;
  25   padding: 0.32em 1em;
  26   background: transparent none;
  27 }
  28 .js .dropbutton-multiple .dropbutton-widget,
  29 .js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
  30   padding: 0;
  31 }
  32 .js .dropbutton-multiple .dropbutton-widget .dropbutton {
  33   padding-right: 2em; /* LTR */
  34   position: relative;
  35 }
  36 .js[dir="rtl"] .dropbutton-multiple .dropbutton-widget .dropbutton {
  37   padding-right: 0;
  38   padding-left: 2em;
  39 }
  40 .js .dropbutton-multiple .dropbutton-widget .dropbutton-action a {
  41   margin-right: 0; /* LTR */
  42 }
  43 [dir="rtl"].js .dropbutton-multiple .dropbutton-widget .dropbutton-action a {
  44   margin-left: 0;
  45 }
  46 .js .dropbutton .secondary-action {
  47   border-top-color: #ccc;
  48 }
  49 .js .dropbutton-toggle button {
  50   background-color: #e8e8e8;
  51   background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2);
  52   background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2);
  53 }
  54 .js .dropbutton-toggle .dropbutton-arrow:hover {
  55   background: #ccc;
  56 }
  57 .js .dropbutton a {
  58   color: #3a3a3a;
  59   border-bottom: 0 none;
  60 }
  61 .js .dropbutton .dropbutton-action:hover,
  62 .js .dropbutton a:hover {
  63   background: #dedede;
  64   border-bottom: 0 none;
  65 }