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: 36px;       // 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 .LESSdisplaybox() {
 103         display:-moz-box;
 104         display:-webkit-box;
 105         display:box;
 106 }
 107 //position: vertical, horizental
 108 .LESSbox-orient(@position) {
 109         -ms-box-orient: @position;
 110         -moz-box-orient: @position;
 111         -o-box-orient: @position;
 112         -webkit-box-orient: @position;
 113         box-orient: @position;
 114 }
 115
 116 //position: start, center, end
 117 .LESSbox-pack(@position) {
 118         -ms-box-pack: @position;
 119         -moz-box-pack: @position;
 120         -o-box-pack: @position;
 121         -webkit-box-pack: @position;
 122         box-pack: @position;
 123 }
 124
 125 //position: start, center, end
 126 .LESSbox-align(@position) {
 127         -ms-box-align: @position;
 128         -moz-box-align: @position;
 129         -o-box-align: @position;
 130         -webkit-box-align: @position;
 131         box-align: @position;
 132 }
 133
 134 // Mixin : Utility ************************************
 135 //CAUTION!!! - you MUST call this function inside of your winset structure.
 136 //DO NOT CALL GLOBALLY!!
 137 .LESSclear-btn-basic-setting() {
 138         .ui-btn-corner-all {
 139                 .LESSborder-radius-all(0);
 140         }
 141         .ui-btn-inner {
 142                 border-top: 0;
 143         }
 144         .ui-btn-up-s {
 145                 border: 0;
 146                 background: transparent;
 147                 font-weight: normal;
 148         }
 149         .ui-btn-hover-s {
 150                 border: 0;
 151                 background: transparent;
 152                 font-weight: normal;
 153         }
 154         .ui-btn-down-s {
 155                 border: 0;
 156                 background: transparent;
 157                 font-weight: normal;
 158         }
 159 }
 160
 161 // Mixin : transform
 162 .LESStransform(@method) {
 163     transform: @method;
 164     -ms-transform: @method;
 165     -moz-transform: @method;
 166     -webkit-transform: @method;
 167     -o-transform: @method;
 168 }
 169
 170 // Mixin : text ellipsis
 171 .LESStext-ellipsis() {
 172         white-space: nowrap;
 173         text-overflow: ellipsis;
 174         -o-text-overflow: ellipsis;
 175         overflow: hidden !important;
 176 }
 177
 178 .LESStext-no-ellipsis() {
 179         white-space: normal;
 180         overflow: visible !important;
 181 }