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

   1 /*
   2  * Common definition for theme
   3  * 'config.less' in each theme must include this file.
   4  */
   5
   6 @font_size_default: 22px;       // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS!
   7 @rem_base: (1rem/@font_size_default);
   8
   9 @em_base: 1em/@font_size_default;       // WARNING: Don't use em unit!  This value is to be removed.
  10 @px_base: 1px;
  11
  12 @unit_base: @rem_base;
  13
  14 @font_family: Helvetica, Arial, sans-serif;
  15
  16 /******************************
  17   z-index order collection
  18  ******************************/
  19 @z_base_maximum: 2147483647;
  20 @z_base_loader: 100;
  21 @z_base_header_footer: 1000;
  22 @z_base_smallpopup: @z_base_header_footer + 100;
  23 @z_base_popup: @z_base_smallpopup + 100;
  24 @z_base_tickernoti: @z_base_maximum - 100;
  25
  26
  27 /******************************
  28   Global LESS mixin collection
  29  ******************************/
  30
  31 // Mixin : background ************************
  32 .LESSbackground-img-with-gradient(@from: top, @startcolor: #3c3c3c, @endcolor: #111) {
  33         background-image: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor)); /* Saf4+, Chrome */
  34         background-image: -webkit-linear-gradient(@from, @startcolor, @endcolor);
  35         background-image:    -moz-linear-gradient(@from, @startcolor, @endcolor);
  36         background-image:     -ms-linear-gradient(@from, @startcolor, @endcolor);
  37         background-image:      -o-linear-gradient(@from, @startcolor, @endcolor);
  38         background-image:         linear-gradient(@from, @startcolor, @endcolor);
  39 }
  40
  41 .LESSbackground-with-gradient(@from: top, @startcolor: #3c3c3c, @endcolor: #5c5c5c) {
  42         background: @startcolor;
  43         background: -webkit-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
  44         background: -moz-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
  45         background: -ms-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
  46         background: -o-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
  47         background: linear-gradient(@from, @startcolor 0%, @endcolor 100%);
  48 }
  49
  50 .LESSbackground-size(@width, @height) {
  51         -ms-background-size: @width @height;
  52         -moz-background-size: @width @height;
  53         -o-background-size: @width @height;
  54         -webkit-background-size: @width @height;
  55         background-size: @width @height;
  56 }
  57
  58 // Mixin : border ***************************
  59 .LESSborder-image(@url:url, @width:width, @height:height, @repeat:repeat) {
  60         -moz-border-image:  url(@url) @width @height @repeat;
  61         -webkit-border-image: url(@url) @width @height @repeat;
  62         -o-border-image: url(@url) @width @height @repeat;
  63         -ms-border-image: url(@url) @width @height @repeat;
  64         border-image: url(@url) @width @height @repeat;
  65 }
  66 .LESSborder-radius-topleft(@radius) {
  67         -moz-border-radius-topleft:             @radius;
  68         -webkit-border-top-left-radius:         @radius;
  69         border-top-left-radius:                         @radius;
  70 }
  71 .LESSborder-radius-topright(@radius) {
  72         -moz-border-radius-topright:            @radius;
  73         -webkit-border-top-right-radius:        @radius;
  74         border-top-right-radius:                        @radius;
  75 }
  76 .LESSborder-radius-bottomleft(@radius) {
  77         -moz-border-radius-bottomleft:          @radius;
  78         -webkit-border-bottom-left-radius:      @radius;
  79         border-bottom-left-radius:                      @radius;
  80 }
  81 .LESSborder-radius-bottomright(@radius) {
  82         -moz-border-radius-bottomright:                 @radius;
  83         -webkit-border-bottom-right-radius:     @radius;
  84         border-bottom-right-radius:                     @radius;
  85 }
  86 .LESSborder-radius-all(@radius) {
  87         -o-border-radius:       @radius;
  88         -ms-border-radius:      @radius;
  89         -moz-border-radius:     @radius;
  90         -webkit-border-radius:  @radius;
  91         border-radius:          @radius;
  92 }
  93
  94 // Mixin : box ***************************
  95 .LESSbox-shadow(@hshadow, @vshadow, @blur, @color) {
  96         -o-box-shadow: @hshadow @vshadow @blur @color;
  97         -ms-box-shadow: @hshadow @vshadow @blur @color;
  98         -moz-box-shadow: @hshadow @vshadow @blur @color;
  99         -webkit-box-shadow: @hshadow @vshadow @blur @color;
 100         box-shadow: @hshadow @vshadow @blur @color;
 101 }
 102
 103 .LESSbox-shadow-line( @value ) {
 104         -o-box-shadow: @value;
 105         -ms-box-shadow: @value;
 106         -moz-box-shadow: @value;
 107         -webkit-box-shadow: @value;
 108         box-shadow: @value;
 109 }
 110
 111 .LESSbox-boxsizing( @value ) {
 112         -o-box-sizing: @value;
 113         -ms-box-sizing: @value;
 114         -moz-box-sizing: @value;
 115         -webkit-box-sizing: @value;
 116         box-sizing: @value;
 117 }
 118
 119 .LESSdisplaybox() {
 120         display:-moz-box;
 121         display:-webkit-box;
 122         display:box;
 123 }
 124 //position: vertical, horizental
 125 .LESSbox-orient(@position) {
 126         -ms-box-orient: @position;
 127         -moz-box-orient: @position;
 128         -o-box-orient: @position;
 129         -webkit-box-orient: @position;
 130         box-orient: @position;
 131 }
 132
 133 //position: start, center, end
 134 .LESSbox-pack(@position) {
 135         -ms-box-pack: @position;
 136         -moz-box-pack: @position;
 137         -o-box-pack: @position;
 138         -webkit-box-pack: @position;
 139         box-pack: @position;
 140 }
 141
 142 //position: start, center, end
 143 .LESSbox-align(@position) {
 144         -ms-box-align: @position;
 145         -moz-box-align: @position;
 146         -o-box-align: @position;
 147         -webkit-box-align: @position;
 148         box-align: @position;
 149 }
 150
 151 // Mixin : Utility ************************************
 152 //CAUTION!!! - you MUST call this function inside of your winset structure.
 153 //DO NOT CALL GLOBALLY!!
 154 .LESSclear-btn-basic-setting() {
 155         .ui-btn-corner-all {
 156                 .LESSborder-radius-all(0);
 157         }
 158         .ui-btn-inner {
 159                 border-top: 0;
 160         }
 161         .ui-btn-up-s {
 162                 border: 0;
 163                 background: transparent;
 164                 font-weight: normal;
 165         }
 166         .ui-btn-hover-s {
 167                 border: 0;
 168                 background: transparent;
 169                 font-weight: normal;
 170         }
 171         .ui-btn-down-s {
 172                 border: 0;
 173                 background: transparent;
 174                 font-weight: normal;
 175         }
 176 }
 177
 178 // Mixin : transform
 179 .LESStransform(@method) {
 180     transform: @method;
 181     -ms-transform: @method;
 182     -moz-transform: @method;
 183     -webkit-transform: @method;
 184     -o-transform: @method;
 185 }
 186
 187 // Mixin : text ellipsis
 188 .LESStext-ellipsis() {
 189         white-space: nowrap;
 190         text-overflow: ellipsis;
 191         -o-text-overflow: ellipsis;
 192         overflow: hidden !important;
 193 }
 194
 195 .LESStext-no-ellipsis() {
 196         white-space: normal;
 197         overflow: visible !important;
 198 }