src/themes/tizen/common/jquery.mobile.collapsible.less

   1 /*
   2  * jQuery Mobile Collapsible CSS
   3  * for Tizen Web UI
   4  */
   5
   6 @import "config.less";
   7
   8 .ui-collapsible-inset {
   9         margin: .5em 0;
  10         .ui-collapsible-heading {
  11                 margin: 0;
  12                 .ui-btn {
  13                         border-right-width: 1px;
  14                         border-left-width: 1px;
  15                 }
  16         }
  17 }
  18 .ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
  19         border-top-width: 0;
  20 }
  21 .ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
  22         border-top-width: 1px;
  23 }
  24 .ui-collapsible-heading {
  25         font-size: @list-font-size-main;
  26         display: block;
  27         margin: 0 -15px;
  28         padding: 0;
  29         position: relative;
  30         .ui-btn {
  31                 text-align: left;
  32                 margin: 0;
  33                 border-left-width: 0;
  34                 border-right-width: 0;
  35         }
  36         .ui-btn-text {
  37                 color: @color_text;
  38         }
  39
  40         .ui-btn-inner,
  41         .ui-btn-icon-left .ui-btn-inner {
  42                 padding-left: 40px;
  43         }
  44         .ui-btn-icon-right .ui-btn-inner {
  45                 padding-left: 12px; padding-right: 40px;
  46         }
  47         .ui-btn-icon-top .ui-btn-inner,
  48         .ui-btn-icon-bottom .ui-btn-inner { padding-right: 40px; text-align: center; }
  49
  50         // Icons' animation
  51         .ui-btn-inner > .ui-icon-arrow-d {
  52                 -webkit-transition: all 0.33s ease;
  53                 -moz-transition: all 0.33s ease;
  54                 -ms-transition: all 0.33s ease;
  55                 -o-transition: all 0.33s ease;
  56                 transition: all 0.33s ease;
  57
  58                 -webkit-transform: rotate(180deg);
  59                 -moz-transform: rotate(180deg);
  60                 -ms-transform: rotate(180deg);
  61                 -o-transform: rotate(180deg);
  62                 transform: rotate(180deg);
  63         }
  64         .ui-btn-inner > .ui-icon-arrow-u {
  65                 background-image: url(images/controls/button/00_button_expand_closed.png);
  66                 -webkit-transition: all 0.33s ease;
  67                 -moz-transition: all 0.33s ease;
  68                 -ms-transition: all 0.33s ease;
  69                 -o-transition: all 0.33s ease;
  70                 transition: all 0.33s ease;
  71
  72                 -webkit-transform: rotate(0deg);
  73                 -moz-transform: rotate(0deg);
  74                 -ms-transform: rotate(0deg);
  75                 -o-transform: rotate(0deg);
  76                 transform: rotate(0deg);
  77         }
  78
  79         .ui-btn span.ui-btn {
  80                 position: absolute;
  81                 left: 6px; top: 50%;
  82                 margin: -12px 0 0 0;
  83                 width: 20px;
  84                 height: 20px;
  85                 padding: 1px 0px 1px 2px;
  86                 text-indent: -9999px;
  87
  88                 .ui-btn-inner {
  89                         padding: 10px 0;
  90                 }
  91                 .ui-icon {
  92                         left: 0; margin-top: -10px;
  93                 }
  94         }
  95 }
  96 .ui-collapsible-heading-status {
  97         position: absolute;
  98         top: -9999px;
  99         left:0px;
 100         }
 101
 102 .ui-collapsible-content {
 103         display: block;
 104         margin: 0 -15px;
 105         padding: 0px 15px;
 106         border-left-width: 0;
 107         border-right-width: 0;
 108         border-top: none;      /* Overrides ui-body-* */
 109         background-image: none; /* Overrides ui-body-* */
 110
 111         visibility: visible;
 112         overflow: auto;
 113         -webkit-transition: all 0.5s ease;
 114         -moz-transition: all 0.5s ease;
 115         -ms-transition: all 0.5s ease;
 116         -o-transition: all 0.5s ease;
 117         transition: all 0.5s ease;
 118 }
 119 .ui-collapsible-inset .ui-collapsible-content {
 120         margin: 0;
 121         border-right-width: 1px;
 122         border-left-width: 1px;
 123 }
 124 .ui-collapsible-content-collapsed {
 125         overflow: hidden;
 126         max-height: 0px !important;
 127         visibility: hidden;
 128 }
 129 .ui-collapsible-set {
 130         margin: .5em 0;
 131         .ui-collapsible {
 132                 margin: -1px 0 0;
 133                 &:first-child {
 134                         margin-top: 0;
 135                 }
 136         }
 137 }
 138