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

   1 /*
   2  * Common definition for theme
   3  */
   4
   5 @font_size_default: 36px;       // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS!
   6 @rem_base: (1rem/@font_size_default);
   7
   8 @em_base: 1em/@font_size_default;       // WARNING: Don't use em unit!  This value is to be removed.
   9 @px_base: 1px;
  10
  11 @unit_base: @rem_base;
  12
  13 @font_family: Helvetica, Arial, sans-serif;
  14
  15 /******************************
  16   z-index order collection
  17  ******************************/
  18 @z_base_maximum: 2147483647;
  19 @z_base_loader: 100;
  20 @z_base_header_footer: 1000;
  21 @z_base_smallpopup: @z_base_header_footer + 100;
  22 @z_base_popup: @z_base_smallpopup + 100;
  23 @z_base_tickernoti: @z_base_maximum - 100;
  24
  25
  26 /******************************
  27   Global LESS mixin collection
  28  ******************************/
  29
  30 // Mixin : background ************************
  31 .LESSbackground-img-with-gradient(@from: top, @startcolor: #3c3c3c, @endcolor: #111) {
  32         background-image: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor)); /* Saf4+, Chrome */
  33         background-image: -webkit-linear-gradient(@from, @startcolor, @endcolor);
  34         background-image:    -moz-linear-gradient(@from, @startcolor, @endcolor);
  35         background-image:     -ms-linear-gradient(@from, @startcolor, @endcolor);
  36         background-image:      -o-linear-gradient(@from, @startcolor, @endcolor);
  37         background-image:         linear-gradient(@from, @startcolor, @endcolor);
  38 }
  39 .LESSbackground-size(@width, @height) {
  40         -moz-background-size: @width @height;
  41         -o-background-size: @width @height;
  42         -webkit-background-size: @width @height;
  43         background-size: @width @height;
  44 }
  45
  46 // Mixin : border ***************************
  47 .LESSborder-image(@url:url, @width:width, @height:height, @repeat:repeat) {
  48     -moz-border-image:  url(@url) @width @height @repeat;
  49     -webkit-border-image: url(@url) @width @height @repeat;
  50     -o-border-image: url(@url) @width @height @repeat;
  51     border-image: url(@url) @width @height @repeat;
  52 }
  53 .LESSborder-radius-topleft(@radius) {
  54         -moz-border-radius-topleft:             @radius;
  55         -webkit-border-top-left-radius:         @radius;
  56         border-top-left-radius:                         @radius;
  57 }
  58 .LESSborder-radius-topright(@radius) {
  59         -moz-border-radius-topright:            @radius;
  60         -webkit-border-top-right-radius:        @radius;
  61         border-top-right-radius:                        @radius;
  62 }
  63 .LESSborder-radius-bottomleft(@radius) {
  64         -moz-border-radius-bottomleft:          @radius;
  65         -webkit-border-bottom-left-radius:      @radius;
  66         border-bottom-left-radius:                      @radius;
  67 }
  68 .LESSborder-radius-bottomright(@radius) {
  69         -moz-border-radius-bottomright:                 @radius;
  70         -webkit-border-bottom-right-radius:     @radius;
  71         border-bottom-right-radius:                     @radius;
  72 }
  73 .LESSborder-radius-all(@radius) {
  74         -moz-border-radius:             @radius;
  75         -webkit-border-radius:  @radius;
  76         bordert-radius:                         @radius;
  77 }
  78
  79 // Mixin : box ***************************
  80 .LESSbox-shadow(@hshadow, @vshadow, @blur, @color) {
  81         -moz-box-shadow: @hshadow @vshadow @blur @color;
  82         -webkit-box-shadow: @hshadow @vshadow @blur @color;
  83         box-shadow: @hshadow @vshadow @blur @color;
  84 }
  85 .LESSdisplaybox() {
  86         display:-moz-box;
  87         display:-webkit-box;
  88         display:box;
  89 }
  90 //position: vertical, horizental
  91 .LESSbox-orient(@position) {
  92         -moz-box-orient: @position;
  93         -webkit-box-orient: @position;
  94         box-orient: @position;
  95 }
  96
  97 //position: start, center, end
  98 .LESSbox-pack(@position) {
  99         -moz-box-pack: @position;
 100         -webkit-box-pack: @position;
 101         box-pack: @position;
 102 }
 103
 104 //position: start, center, end
 105 .LESSbox-align(@position) {
 106         -moz-box-align: @position;
 107         -webkit-box-align: @position;
 108         box-align: @position;
 109 }
 110
 111 // Mixin : Utility ************************************
 112 //CAUTION!!! - you MUST call this function inside of your winset structure.
 113 //DO NOT CALL GLOBALLY!!
 114 .LESSclear-btn-basic-setting() {
 115         .ui-btn-corner-all {
 116                 .LESSborder-radius-all(0);
 117         }
 118         .ui-btn-inner {
 119                 border-top: 0;
 120         }
 121         .ui-btn-up-s {
 122                 border: 0;
 123                 background: transparent;
 124                 font-weight: normal;
 125         }
 126         .ui-btn-hover-s {
 127                 border: 0;
 128                 background: transparent;
 129                 font-weight: normal;
 130         }
 131         .ui-btn-down-s {
 132                 border: 0;
 133                 background: transparent;
 134                 font-weight: normal;
 135         }
 136 }
 137
 138 // Mixin : transform
 139 .LESStransform(@method) {
 140     transform: @method;
 141     -ms-transform: @method;
 142     -moz-transform: @method;
 143     -webkit-transform: @method;
 144     -o-transform: @method;
 145 }