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