src/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss

   1 /**
   2  * @class Global_CSS
   3  */
   4
   5 // Background property support for vendor prefixing within values.
   6 @mixin background($background-1,
   7 $background-2: false,
   8 $background-3: false,
   9 $background-4: false,
  10 $background-5: false,
  11 $background-6: false,
  12 $background-7: false,
  13 $background-8: false,
  14 $background-9: false,
  15 $background-10: false) {
  16         $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, $background-6, $background-7, $background-8, $background-9, $background-10);
  17         $mult-bgs: -compass-list-size($backgrounds) > 1;
  18         $add-pie-bg: prefixed(-pie,   $backgrounds) or $mult-bgs;
  19         @if $experimental-support-for-svg          and prefixed(-svg,    $backgrounds) {
  20                 background: -svg($backgrounds);
  21         }
  22         @if $support-for-original-webkit-gradients and prefixed(-owg,    $backgrounds) {
  23                 background: -owg($backgrounds);
  24         }
  25         @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {
  26                 background: -webkit($backgrounds);
  27         }
  28         @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {
  29                 background: -moz($backgrounds);
  30         }
  31         @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {
  32                 background: -o($backgrounds);
  33         }
  34         // BEGIN PATCH
  35         // IE10 Supports linear-gradient but with a new syntax, Compass has deprecated -ms prefix support too soon
  36         // this patch brings -ms prefix support back to gradients. This should be removed when compass is updated with
  37         // proper support
  38         background: -ms-#{$backgrounds};
  39         // END PATCH
  40         @if $experimental-support-for-pie          and $add-pie-bg                     {
  41                 -pie-background: -pie($backgrounds);
  42         }
  43         background: $backgrounds;
  44 }
  45
  46 @mixin background-image($image-1,
  47 $image-2: false,
  48 $image-3: false,
  49 $image-4: false,
  50 $image-5: false,
  51 $image-6: false,
  52 $image-7: false,
  53 $image-8: false,
  54 $image-9: false,
  55 $image-10: false) {
  56         $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
  57         $add-pie-bg: prefixed(-pie,   $images) or -compass-list-size($images) > 1;
  58
  59         @if $experimental-support-for-svg          and prefixed(-svg,    $images) {
  60                 background-image: -svg($images);
  61                 background-size: 100%;
  62         }
  63         @if $support-for-original-webkit-gradients and prefixed(-owg,    $images) {
  64                 background-image: -owg($images);
  65         }
  66         @if $experimental-support-for-webkit       and prefixed(-webkit, $images) {
  67                 background-image: -webkit($images);
  68         }
  69         @if $experimental-support-for-mozilla      and prefixed(-moz,    $images) {
  70                 background-image: -moz($images);
  71         }
  72         @if $experimental-support-for-opera        and prefixed(-o,      $images) {
  73                 background-image: -o($images);
  74         }
  75
  76         // BEGIN PATCH
  77         // IE10 Supports linear-gradient but with a new syntax, Compass has deprecated -ms prefix support too soon
  78         // this patch brings -ms prefix support back to gradients. This should be removed when compass is updated with
  79         // proper support
  80         background-image: -ms-#{$images};
  81         // END PATCH
  82
  83         @if $experimental-support-for-pie          and $add-pie-bg                {
  84                 @warn "PIE does not support background-image. Use @include background(#{$images}) instead."
  85         }
  86 }
  87
  88 /**
  89  * Adds basic styles to :before or :after pseudo-elements.
  90  *
  91  *     .my-element:after {
  92  *       @include insertion(50px, 50px);
  93  *     }
  94  *
  95  * @param {measurement} $width Height of pseudo-element.
  96  * @param {measurement} $height Height of pseudo-element.
  97  * @param {measurement} $top Top positioning of pseudo-element.
  98  * @param {measurement} $left Left positioning of pseudo-element.
  99  *
 100  */
 101 @mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) {
 102     content: '';
 103     position: absolute;
 104     width: $width;
 105     height: $height;
 106     top: $top;
 107     left: $left;
 108 }
 109
 110 /**
 111  * Makes the element text overflow to use ellipsis.
 112  */
 113 @mixin ellipsis {
 114     white-space: nowrap;
 115     overflow: hidden;
 116     text-overflow: ellipsis;
 117 }
 118
 119 @mixin absolute-position($top: 0, $right: 0, $bottom: 0, $left: 0) {
 120     position: absolute;
 121     top: $top;
 122     right: $right;
 123     bottom: $bottom;
 124     left: $left;
 125 }
 126
 127 @mixin absolute-fit {
 128     width: auto;
 129     height: auto;
 130     @include absolute-position;
 131 }
 132
 133 @mixin st-box($important: no) {
 134     @if $important == important {
 135         display: flex !important;
 136         display: -webkit-box !important;
 137         display: -ms-flexbox !important;
 138     } @else {
 139         display: flex;
 140         display: -webkit-box;
 141         display: -ms-flexbox;
 142     }
 143 }
 144
 145 @mixin st-box-align($align: stretch) {
 146     -webkit-box-align: $align;
 147     -ms-flex-align: $align;
 148     @if $align == start {
 149         align-items: flex-start;
 150     }
 151     @else if $align == end {
 152         align-items: flex-end;
 153     }
 154     @else {
 155         align-items: $align;
 156     }
 157 }
 158
 159 @mixin st-box-orient($orient: horizontal, $important: no) {
 160     @if $important == important {
 161         -webkit-box-orient: $orient !important;
 162         @if $orient == horizontal {
 163             -ms-flex-direction: row !important;
 164             flex-direction: row !important;
 165         } @else {
 166             -ms-flex-direction: column !important;
 167             flex-direction: column !important;
 168         }
 169     } @else {
 170         -webkit-box-orient: $orient;
 171         @if $orient == horizontal {
 172             -ms-flex-direction: row;
 173             flex-direction: row;
 174         } @else {
 175             -ms-flex-direction: column;
 176             flex-direction: column;
 177         }
 178     }
 179 }
 180
 181 @mixin st-box-pack($pack: start, $important: no) {
 182     @if $important == important {
 183         -webkit-box-pack: $pack !important;
 184         -ms-flex-pack: $pack !important;
 185         @if $pack == start {
 186             justify-content: flex-start !important;
 187         }
 188         @else if $pack == end {
 189             justify-content: flex-end !important;
 190         }
 191         @else if $pack == justify {
 192             justify-content: space-between !important;
 193         }
 194         @else {
 195             justify-content: $pack !important;
 196         }
 197     } @else {
 198         -webkit-box-pack: $pack;
 199         -ms-flex-pack: $pack;
 200         @if $pack == start {
 201             justify-content: flex-start;
 202         }
 203         @else if $pack == end {
 204             justify-content: flex-end;
 205         }
 206         @else if $pack == justify {
 207             justify-content: space-between;
 208         }
 209         @else if $pack == center {
 210             justify-content: center;
 211         }
 212         @else {
 213             justify-content: $pack;
 214         }
 215     }
 216 }
 217
 218 @mixin st-box-flex($flex: 1, $preferredSize: auto, $important: no) {
 219     @if $important == important {
 220         -webkit-box-flex: $flex !important;
 221         -ms-flex: $flex 0 $preferredSize !important;
 222         flex: $flex 0 $preferredSize !important;
 223     } @else {
 224         -webkit-box-flex: $flex;
 225         -ms-flex: $flex 0 $preferredSize;
 226         flex: $flex 0 $preferredSize;
 227     }
 228 }
 229
 230 @mixin st-box-shadow($shadow: none) {
 231     -webkit-box-shadow: $shadow;
 232     box-shadow: $shadow;
 233 }
 234
 235 @mixin st-box-direction($direction: normal, $orientation: row) {
 236     -webkit-box-direction: $direction;
 237     @if $direction == reverse {
 238         @if $orientation == row {
 239             -ms-flex-direction: row-reverse;
 240             flex-direction: row-reverse;
 241         } @else {
 242             -ms-flex-direction: column-reverse;
 243             flex-direction: column-reverse;
 244         }
 245     } @else {
 246         @if $orientation == row {
 247             -ms-flex-direction: row;
 248             flex-direction: row;
 249         } @else {
 250             -ms-flex-direction: column;
 251             flex-direction: column;
 252         }
 253     }
 254 }
 255
 256 @mixin st-loading-spinner($spinner-size: 50px, $color: #ccc, $bar-width: 5px, $bar-height: 15px) {
 257     .x-loading-spinner {
 258         font-size: 250%;
 259         height: $spinner-size;
 260         width: $spinner-size;
 261         position: relative;
 262
 263         -webkit-transform-origin: $spinner-size/2 $spinner-size/2;
 264         transform-origin: $spinner-size/2 $spinner-size/2;
 265
 266         /* Shared Properties for all the bars */
 267         & > span,
 268         & > span:before,
 269         & > span:after {
 270             display: block;
 271             position: absolute;
 272             width: $bar-width;
 273             height: $bar-height;
 274             top: 0;
 275             -webkit-transform-origin: $bar-width/2 $spinner-size/2;
 276             transform-origin: $bar-width/2 $spinner-size/2;
 277             content: " ";
 278         }
 279
 280         & > span {
 281             left:         50%;
 282             margin-left:  -0.05em;
 283
 284             &.x-loading-top           { background-color: rgba($color, 0.99); }
 285             &.x-loading-top::after    { background-color: rgba($color, 0.90); }
 286             &.x-loading-left::before  { background-color: rgba($color, 0.80); }
 287             &.x-loading-left          { background-color: rgba($color, 0.70); }
 288             &.x-loading-left::after   { background-color: rgba($color, 0.60); }
 289             &.x-loading-bottom::before{ background-color: rgba($color, 0.50); }
 290             &.x-loading-bottom        { background-color: rgba($color, 0.40); }
 291             &.x-loading-bottom::after { background-color: rgba($color, 0.35); }
 292             &.x-loading-right::before { background-color: rgba($color, 0.30); }
 293             &.x-loading-right         { background-color: rgba($color, 0.25); }
 294             &.x-loading-right::after  { background-color: rgba($color, 0.20); }
 295             &.x-loading-top::before   { background-color: rgba($color, 0.15); }
 296         }
 297     }
 298
 299     /* Rotate each of the 4 Spans */
 300     .x-loading-spinner > span.x-loading-top {    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);   -ms-transform: rotate(0deg); }
 301     .x-loading-spinner > span.x-loading-right {  -webkit-transform: rotate(90deg);   -moz-transform: rotate(90deg);  -ms-transform: rotate(90deg); }
 302     .x-loading-spinner > span.x-loading-bottom { -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); }
 303     .x-loading-spinner > span.x-loading-left {   -webkit-transform: rotate(270deg);  -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); }
 304
 305     /* These are the two lines that surround each of the 4 Span lines */
 306     .x-loading-spinner > span::before {-webkit-transform: rotate(30deg);   -moz-transform: rotate(30deg);  -ms-transform: rotate(30deg); }
 307     .x-loading-spinner > span::after { -webkit-transform: rotate(-30deg);  -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); }
 308
 309     /* Set Animation */
 310     .x-loading-spinner {
 311         -webkit-animation-name: x-loading-spinner-rotate;
 312         -webkit-animation-duration: .5s;
 313         -webkit-animation-iteration-count: infinite;
 314         -webkit-animation-timing-function: linear;
 315
 316         animation-name: x-loading-spinner-rotate;
 317         animation-duration: .5s;
 318         animation-timing-function: linear;
 319         animation-iteration-count: infinite;
 320     }
 321 }
 322
 323 /**
 324  * Includes an icon to be used on Button or Tab components. The $name is the name of the icon, or the character
 325  * of the font being used.
 326  *
 327  *     @include icon('attachment');
 328  *
 329  * @param {string} $name The name of the icon to be included. This is then usable as the iconCls in your app.
 330  * @param {string} $character The character
 331  * @param {string} $font-family The `font-family` used for this icon. Defaults to the `Pictos` font.
 332  */
 333 @mixin icon($name, $character: null, $font-family: 'Pictos') {
 334     $raw_character: icon-character-for-name($name);
 335
 336     @if $character == null and $raw_character == null {
 337         @debug "#icon: icon with name '#{$name}' not found.";
 338     }
 339
 340     @if $character != null or $raw_character != null {
 341         .x-tab .x-button-icon.#{$name},
 342         .x-button .x-button-icon.#{$name} {
 343             &:before {
 344                 @include absolute-position;
 345                 text-align: center;
 346
 347                 @if $font-family != null {
 348                     font-family: $font-family;
 349                 }
 350
 351                 @if $character != null {
 352                     content: "#{$character}";
 353                 } @elseif $raw_character != null {
 354                     content: "#{$raw_character}";
 355                 }
 356             }
 357         }
 358     }
 359 }
 360
 361 @mixin inline-icon($name, $font-family: 'Pictos') {
 362   $character: icon-character-for-name($name);
 363
 364   &:before {
 365       @include absolute-position;
 366       text-align: center;
 367       font-family: $font-family;
 368
 369       @if $character {
 370           content: "#{$character}";
 371       } @else {
 372           content: "#{$name}";
 373       }
 374   }
 375 }
 376
 377 @mixin pictos-iconmask($name) {
 378     @warn "pictos-iconmask is deprecated in 2.2. Please use '@include icon($name);' instead.";
 379     @include icon($name);
 380 }
 381
 382 @mixin icon-font($name, $font-files, $eot: false) {
 383     @include font-face($name, $font-files, $eot);
 384
 385     .x-tab .x-button-icon,
 386     .x-button .x-button-icon {
 387         &:before {
 388             font-family: $name;
 389         }
 390     }
 391 }
 392
 393 @function icon-character-for-name($name) {
 394     // http://pictos.cc/font/
 395
 396     // Row 1
 397     @if ($name == "anchor") { @return "a"; }
 398     @else if ($name == "box") { @return "b"; }
 399     @else if ($name == "upload") { @return "c"; }
 400     @else if ($name == "forbidden") { @return "d"; }
 401     @else if ($name == "lightning") { @return "e"; }
 402     @else if ($name == "rss") { @return "f"; }
 403     @else if ($name == "team") { @return "g"; }
 404     @else if ($name == "help") { @return "h"; }
 405     @else if ($name == "info") { @return "i"; }
 406     @else if ($name == "attachment") { @return "j"; }
 407     @else if ($name == "heart") { @return "k"; }
 408     @else if ($name == "list") { @return "l"; }
 409     @else if ($name == "music") { @return "m"; }
 410     @else if ($name == "table") { @return "n"; }
 411     @else if ($name == "folder") { @return "o"; }
 412     @else if ($name == "pencil") { @return "p"; }
 413     @else if ($name == "chat2") { @return "q"; }
 414     @else if ($name == "retweet") { @return "r"; }
 415     @else if ($name == "search") { @return "s"; }
 416     @else if ($name == "time") { @return "t"; }
 417     @else if ($name == "switch") { @return "u"; }
 418     @else if ($name == "camera") { @return "v"; }
 419     @else if ($name == "chat") { @return "w"; }
 420     @else if ($name == "settings2") { @return "x"; }
 421     @else if ($name == "settings") { @return "y"; }
 422     @else if ($name == "tags") { @return "z"; }
 423
 424     // Row 2
 425     @else if ($name == "attachment2") { @return "A"; }
 426     @else if ($name == "bird") { @return "B"; }
 427     @else if ($name == "cloud") { @return "C"; }
 428     @else if ($name == "delete_black1") { @return "D"; }
 429     @else if ($name == "eye") { @return "E"; }
 430     @else if ($name == "file") { @return "F"; }
 431     @else if ($name == "browser") { @return "G"; }
 432     @else if ($name == "home") { @return "H"; }
 433     @else if ($name == "inbox") { @return "I"; }
 434     @else if ($name == "network") { @return "J"; }
 435     @else if ($name == "key") { @return "K"; }
 436     @else if ($name == "radio") { @return "L"; }
 437     @else if ($name == "mail") { @return "M"; }
 438     @else if ($name == "news") { @return "N"; }
 439     @else if ($name == "case") { @return "O"; }
 440     @else if ($name == "photos") { @return "P"; }
 441     @else if ($name == "power") { @return "Q"; }
 442     @else if ($name == "action") { @return "R"; }
 443     @else if ($name == "favorites") { @return "S"; }
 444     @else if ($name == "plane") { @return "T"; }
 445     @else if ($name == "user") { @return "U"; }
 446     @else if ($name == "video") { @return "V"; }
 447     @else if ($name == "compose") { @return "W"; }
 448     @else if ($name == "truck") { @return "X"; }
 449     @else if ($name == "chart2") { @return "Y"; }
 450     @else if ($name == "chart") { @return "Z"; }
 451
 452     // Row 3
 453     @else if ($name == "expand") { @return "`"; }
 454     @else if ($name == "refresh") { @return "1"; }
 455     @else if ($name == "check") { @return "2"; }
 456     @else if ($name == "check2") { @return "3"; }
 457     @else if ($name == "play") { @return "4"; }
 458     @else if ($name == "pause") { @return "5"; }
 459     @else if ($name == "stop") { @return "6"; }
 460     @else if ($name == "forward") { @return "7"; }
 461     @else if ($name == "rewind") { @return "8"; }
 462     @else if ($name == "play2") { @return "9"; }
 463     @else if ($name == "refresh2") { @return "0"; }
 464     @else if ($name == "minus") { @return "-"; }
 465     @else if ($name == "battery") { @return "="; }
 466     @else if ($name == "left") { @return "["; }
 467     @else if ($name == "right") { @return "]"; }
 468     @else if ($name == "calendar") { @return "\005C"; }
 469     @else if ($name == "shuffle") { @return ";"; }
 470     @else if ($name == "wireless") { @return "'"; }
 471     @else if ($name == "speedometer") { @return ","; }
 472     @else if ($name == "more") { @return "."; }
 473     @else if ($name == "print") { @return "/"; }
 474
 475
 476     // Row 4
 477     @else if ($name == "download") { @return "~"; }
 478     @else if ($name == "warning_black") { @return "!"; }
 479     @else if ($name == "locate") { @return "@"; }
 480     @else if ($name == "trash") { @return "#"; }
 481     @else if ($name == "cart") { @return "$"; }
 482     @else if ($name == "bank") { @return "%"; }
 483     @else if ($name == "flag") { @return "^"; }
 484     @else if ($name == "add") { @return "&"; }
 485     @else if ($name == "delete") { @return "*"; }
 486     @else if ($name == "lock") { @return "("; }
 487     @else if ($name == "unlock") { @return ")"; }
 488     @else if ($name == "minus2") { @return "_"; }
 489     @else if ($name == "add2") { @return "+"; }
 490     @else if ($name == "up") { @return "{"; }
 491     @else if ($name == "down") { @return "}"; }
 492     @else if ($name == "screens") { @return "|"; }
 493     @else if ($name == "bell") { @return ":"; }
 494     @else if ($name == "quote") { @return "\""; }
 495     @else if ($name == "volume_mute") { @return "<"; }
 496     @else if ($name == "volume") { @return ">"; }
 497     @else if ($name == "question") { @return "?"; }
 498
 499     // Backwards compat; icons that are not in the font
 500     @else if ($name == "arrow_left") { @return "["; }
 501     @else if ($name == "arrow_right") { @return "]"; }
 502     @else if ($name == "arrow_up") { @return "{"; }
 503     @else if ($name == "arrow_down") { @return "}"; }
 504     @else if ($name == "organize") { @return "I"; }
 505     @else if ($name == "bookmarks") { @return "I"; }
 506     @else if ($name == "loop2") { @return "r"; }
 507     @else if ($name == "star") { @return "S"; }
 508     @else if ($name == "maps") { @return "@"; }
 509     @else if ($name == "reply") { @return "R"; }
 510
 511     @else {
 512         @return null;
 513     }
 514 }
 515
 516 $include-pictos-font: true !default;