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 .LESSborder-radius-allimportant(@radius) {
  94         -o-border-radius:       @radius ! important;
  95         -ms-border-radius:      @radius ! important;
  96         -moz-border-radius:     @radius ! important;
  97         -webkit-border-radius:  @radius ! important;
  98         border-radius:          @radius ! important;
  99 }
 100 // Mixin : box ***************************
 101 .LESSbox-shadow(@hshadow, @vshadow, @blur, @color) {
 102         -o-box-shadow: @hshadow @vshadow @blur @color;
 103         -ms-box-shadow: @hshadow @vshadow @blur @color;
 104         -moz-box-shadow: @hshadow @vshadow @blur @color;
 105         -webkit-box-shadow: @hshadow @vshadow @blur @color;
 106         box-shadow: @hshadow @vshadow @blur @color;
 107 }
 108
 109 .LESSbox-shadow-line( @value ) {
 110         -o-box-shadow: @value;
 111         -ms-box-shadow: @value;
 112         -moz-box-shadow: @value;
 113         -webkit-box-shadow: @value;
 114         box-shadow: @value;
 115 }
 116
 117 .LESSbox-boxsizing( @value ) {
 118         -o-box-sizing: @value;
 119         -ms-box-sizing: @value;
 120         -moz-box-sizing: @value;
 121         -webkit-box-sizing: @value;
 122         box-sizing: @value;
 123 }
 124
 125 .LESSdisplaybox() {
 126         display:-moz-box;
 127         display:-webkit-box;
 128         display:box;
 129 }
 130 //position: vertical, horizental
 131 .LESSbox-orient(@position) {
 132         -ms-box-orient: @position;
 133         -moz-box-orient: @position;
 134         -o-box-orient: @position;
 135         -webkit-box-orient: @position;
 136         box-orient: @position;
 137 }
 138
 139 //position: start, center, end
 140 .LESSbox-pack(@position) {
 141         -ms-box-pack: @position;
 142         -moz-box-pack: @position;
 143         -o-box-pack: @position;
 144         -webkit-box-pack: @position;
 145         box-pack: @position;
 146 }
 147
 148 //position: start, center, end
 149 .LESSbox-align(@position) {
 150         -ms-box-align: @position;
 151         -moz-box-align: @position;
 152         -o-box-align: @position;
 153         -webkit-box-align: @position;
 154         box-align: @position;
 155 }
 156
 157 // Mixin : Utility ************************************
 158 //CAUTION!!! - you MUST call this function inside of your winset structure.
 159 //DO NOT CALL GLOBALLY!!
 160 .LESSclear-btn-basic-setting() {
 161         .ui-btn-corner-all {
 162                 .LESSborder-radius-all(0);
 163         }
 164         .ui-btn-inner {
 165                 border-top: 0;
 166         }
 167         .ui-btn-up-s {
 168                 border: 0;
 169                 background: transparent;
 170                 font-weight: normal;
 171         }
 172         .ui-btn-hover-s {
 173                 border: 0;
 174                 background: transparent;
 175                 font-weight: normal;
 176         }
 177         .ui-btn-down-s {
 178                 border: 0;
 179                 background: transparent;
 180                 font-weight: normal;
 181         }
 182 }
 183
 184 // Mixin : transform
 185 .LESStransform(@method) {
 186     transform: @method;
 187     -ms-transform: @method;
 188     -moz-transform: @method;
 189     -webkit-transform: @method;
 190     -o-transform: @method;
 191 }
 192
 193 // Mixin : text ellipsis
 194 .LESStext-ellipsis() {
 195         white-space: nowrap;
 196         text-overflow: ellipsis;
 197         -o-text-overflow: ellipsis;
 198         overflow: hidden !important;
 199 }
 200
 201 .LESStext-no-ellipsis() {
 202         white-space: normal;
 203         overflow: visible !important;
 204 }