CSS   24

dropbutton css

Guest on 5th August 2022 06:49:51 AM

  1. .ctools-dropbutton-processed {
  2.   padding-right: 18px;
  3.   position: relative;
  4.   background-color: inherit;
  5. }
  6.  
  7. .ctools-dropbutton-processed.open {
  8.   z-index: 200;
  9. }
  10.  
  11. .ctools-dropbutton-processed .ctools-content li,
  12. .ctools-dropbutton-processed .ctools-content a {
  13.   display: block;
  14. }
  15.  
  16. .ctools-dropbutton-processed .ctools-link {
  17.   bottom: 0;
  18.   display: block;
  19.   height: auto;
  20.   position: absolute;
  21.   right: 0;
  22.   text-indent: -9999px; /* LTR */
  23.   top: 0;
  24.   width: 17px;
  25. }
  26.  
  27. .ctools-dropbutton-processed .ctools-link a {
  28.   overflow: hidden;
  29. }
  30.  
  31. .ctools-dropbutton-processed .ctools-content ul {
  32.   margin: 0;
  33.   overflow: hidden;
  34. }
  35.  
  36. .ctools-dropbutton-processed.open li + li {
  37.   padding-top: 4px;
  38. }
  39.  
  40. /**
  41.  * This creates the dropbutton arrow and inherits the link color
  42.  */
  43. .ctools-twisty {
  44.   border-bottom-color: transparent;
  45.   border-left-color: transparent;
  46.   border-right-color: transparent;
  47.   border-style: solid;
  48.   border-width: 4px 4px 0;
  49.   line-height: 0;
  50.   right: 6px;
  51.   position: absolute;
  52.   top: 0.75em;
  53. }
  54.  
  55. .ctools-dropbutton-processed.open .ctools-twisty {
  56.   border-bottom: 4px solid;
  57.   border-left-color: transparent;
  58.   border-right-color: transparent;
  59.   border-top-color: transparent;
  60.   top: 0.5em;
  61. }
  62.  
  63. .ctools-no-js .ctools-twisty {
  64.   display: none;
  65. }

Raw Paste


Login or Register to edit or fork this paste. It's free.