quasar 2.1.0

package/src/css/core/touch.sass

@@ -0,0 +1,9 @@
+.q-touch
+  user-select: none
+  user-drag: none
+  -khtml-user-drag: none
+  -webkit-user-drag: none
+.q-touch-x
+  touch-action: pan-x
+.q-touch-y
+  touch-action: pan-y

package/src/css/core/transitions.sass

@@ -0,0 +1,153 @@
+// default easing is easeOutCubic
+
+\:root
+  --q-transition-duration: .3s
+  --q-transition-easing: cubic-bezier(0.215,0.61,0.355,1)
+
+.q-transition
+  &--slide-right,
+  &--slide-left,
+  &--slide-up,
+  &--slide-down,
+  &--jump-right,
+  &--jump-left,
+  &--jump-up,
+  &--jump-down,
+  &--fade,
+  &--scale,
+  &--rotate,
+  &--flip
+    &-leave-active
+      position: absolute
+
+  &--slide-right,
+  &--slide-left,
+  &--slide-up,
+  &--slide-down
+    &-enter-active,
+    &-leave-active
+      transition: transform var(--q-transition-duration) var(--q-transition-easing)
+
+  &--slide-right
+    &-enter-from
+      transform: translate3d(-100%, 0, 0)
+    &-leave-to
+      transform: translate3d(100%, 0, 0)
+
+  &--slide-left
+    &-enter-from
+      transform: translate3d(100%, 0, 0)
+    &-leave-to
+      transform: translate3d(-100%, 0, 0)
+
+  &--slide-up
+    &-enter-from
+      transform: translate3d(0, 100%, 0)
+    &-leave-to
+      transform: translate3d(0, -100%, 0)
+
+  &--slide-down
+    &-enter-from
+      transform: translate3d(0, -100%, 0)
+    &-leave-to
+      transform: translate3d(0, 100%, 0)
+
+  &--jump-right,
+  &--jump-left,
+  &--jump-up,
+  &--jump-down
+    &-enter-active,
+    &-leave-active
+      transition: opacity var(--q-transition-duration), transform var(--q-transition-duration)
+    &-enter-from,
+    &-leave-to
+      opacity: 0
+
+  &--jump-right
+    &-enter-from
+      transform: translate3d(-15px, 0, 0)
+    &-leave-to
+      transform: translate3d(15px, 0, 0)
+
+  &--jump-left
+    &-enter-from
+      transform: translate3d(15px, 0, 0)
+    &-leave-to
+      transform: translateX(-15px)
+
+  &--jump-up
+    &-enter-from
+      transform: translate3d(0, 15px, 0)
+    &-leave-to
+      transform: translate3d(0, -15px, 0)
+
+  &--jump-down
+    &-enter-from
+      transform: translate3d(0, -15px, 0)
+    &-leave-to
+      transform: translate3d(0, 15px, 0)
+
+
+  &--fade
+    &-enter-active,
+    &-leave-active
+      transition: opacity var(--q-transition-duration) ease-out
+    &-enter-from,
+    &-leave-to
+      opacity: 0
+
+
+  &--scale
+    &-enter-active,
+    &-leave-active
+      transition: opacity var(--q-transition-duration), transform var(--q-transition-duration) var(--q-transition-easing)
+    &-enter-from,
+    &-leave-to
+      opacity: 0
+      transform: scale3d(0, 0, 1)
+
+  &--rotate
+    &-enter-active,
+    &-leave-active
+      transition: opacity var(--q-transition-duration), transform var(--q-transition-duration) var(--q-transition-easing)
+      transform-style: preserve-3d
+    &-enter-from,
+    &-leave-to
+      opacity: 0
+      transform: scale3d(0, 0, 1) rotate3d(0, 0, 1, 90deg)
+
+  &--flip-right,
+  &--flip-left,
+  &--flip-up,
+  &--flip-down
+    &-enter-active,
+    &-leave-active
+      transition: transform var(--q-transition-duration)
+      backface-visibility: hidden
+    &-enter-to,
+    &-leave-from
+      transform: perspective(400px) rotate3d(1, 1, 0, 0deg)
+
+  &--flip-right
+    &-enter-from
+      transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
+    &-leave-to
+      transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
+
+  &--flip-left
+    &-enter-from
+      transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
+    &-leave-to
+      transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
+
+  &--flip-up
+    &-enter-from
+      transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
+    &-leave-to
+      transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
+
+  &--flip-down
+    &-enter-from
+      transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
+    &-leave-to
+      transform: perspective(400px) rotate3d(1, 0, 0, -180deg)

package/src/css/core/typography.sass

@@ -0,0 +1,70 @@
+body
+  min-width: 100px
+  min-height: 100%
+  font-family: $typography-font-family
+  -ms-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  font-smoothing: antialiased
+  line-height: $body-line-height
+  font-size: $body-font-size
+
+@each $heading, $value in $h-tags
+  #{$heading}
+    font-size: map-get($value, "size")
+    font-weight: map-get($value, "weight")
+    line-height: map-get($value, "line-height")
+    letter-spacing: map-get($value, "letter-spacing")
+
+p
+  margin: 0 0 map-get(map-get($spaces, "md"), "y")
+
+.text-
+  @each $heading, $value in $headings
+    &#{$heading}
+      font-size: map-get($value, "size")
+      font-weight: map-get($value, "weight")
+      line-height: map-get($value, "line-height")
+      letter-spacing: map-get($value, "letter-spacing")
+
+  &uppercase
+    text-transform: uppercase
+  &lowercase
+    text-transform: lowercase
+  &capitalize
+    text-transform: capitalize
+
+  &center
+    text-align: center
+  &left
+    text-align: left
+  &right
+    text-align: right
+  &justify
+    text-align: justify
+    hyphens: auto
+
+  &italic
+    font-style: italic
+  &bold
+    font-weight: bold
+
+  &no-wrap
+    white-space: nowrap
+
+  &strike
+    text-decoration: line-through
+
+  @each $weight, $value in $text-weights
+    &weight-#{$weight}
+      font-weight: $value
+
+small
+  font-size: 80%
+big
+  font-size: 170%
+sub
+  bottom: -.25em
+sup
+  top: -.5em

package/src/css/core/visibility.sass

@@ -0,0 +1,163 @@
+.no-margin
+  margin: 0 !important
+.no-padding
+  padding: 0 !important
+.no-border
+  border: 0 !important
+.no-border-radius
+  border-radius: 0 !important
+.no-box-shadow
+  box-shadow: none !important
+.no-outline
+  outline: 0 !important
+
+.ellipsis
+  text-overflow: ellipsis
+  white-space: nowrap
+  overflow: hidden
+
+  &-2-lines, &-3-lines
+    overflow: hidden
+    display: -webkit-box
+    -webkit-box-orient: vertical
+  &-2-lines
+    -webkit-line-clamp: 2
+  &-3-lines
+    -webkit-line-clamp: 3
+
+.readonly
+  cursor: default !important
+.disabled, [disabled]
+  &, * // @stylint ignore
+    outline: 0 !important
+    cursor: not-allowed !important
+.disabled, [disabled]
+  opacity: .6 !important
+
+.hidden
+  display: none !important
+.invisible
+  visibility: hidden !important
+.transparent
+  background: transparent !important
+
+.overflow-auto
+  overflow: auto !important
+.overflow-hidden
+  overflow: hidden !important
+.overflow-hidden-y
+  overflow-y: hidden !important
+
+.hide-scrollbar
+  scrollbar-width: none
+  -ms-overflow-style: none
+
+  &::-webkit-scrollbar
+    width: 0
+    height: 0
+    display: none
+
+.dimmed, .light-dimmed
+  &:after
+    content: ''
+    position: absolute
+    top: 0
+    right: 0 #{"/* rtl:ignore */"}
+    bottom: 0
+    left: 0 #{"/* rtl:ignore */"}
+.dimmed:after
+  background: $dimmed-background !important
+.light-dimmed:after
+  background: $light-dimmed-background !important
+
+.z-top
+  z-index: $z-top !important
+.z-max
+  z-index: $z-max !important
+
+$platforms: desktop, mobile, native-mobile, cordova, capacitor, electron, touch, within-iframe, platform-ios, platform-android
+@each $type in $platforms
+  body:not(.#{$type}) .#{$type}-only,
+  body.#{$type} .#{$type}-hide
+    display: none !important
+
+@media all and (orientation: portrait)
+  .orientation-landscape
+    display: none !important
+
+@media all and (orientation: landscape)
+  .orientation-portrait
+    display: none !important
+
+@media screen
+  .print-only
+    display: none !important
+@media print
+  .print-hide
+    display: none !important
+
+@media (max-width: $breakpoint-xs-max)
+  .xs-hide, .gt-xs, .sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
+    display: none !important
+@media (min-width: $breakpoint-sm-min) and (max-width: $breakpoint-sm-max)
+  .sm-hide, .xs, .lt-sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
+    display: none !important
+@media (min-width: $breakpoint-md-min) and (max-width: $breakpoint-md-max)
+  .md-hide, .xs, .lt-sm, .sm, .lt-md, .gt-md, .lg, .gt-lg, .xl
+    display: none !important
+@media (min-width: $breakpoint-lg-min) and (max-width: $breakpoint-lg-max)
+  .lg-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .gt-lg, .xl
+    display: none !important
+@media (min-width: $breakpoint-xl-min)
+  .xl-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .lg, .lt-xl
+    display: none !important
+
+.q-focus-helper, .q-focusable, .q-manual-focusable, .q-hoverable
+  outline: 0
+
+body.desktop
+  .q-focus-helper
+    position: absolute
+    top: 0
+    left: 0 #{"/* rtl:ignore */"}
+    width: 100%
+    height: 100%
+    pointer-events: none
+    border-radius: inherit
+    opacity: 0
+    transition: background-color .3s cubic-bezier(.25,.8,.5,1), opacity .4s cubic-bezier(.25,.8,.5,1)
+
+    &:before, &:after
+      content: ''
+      position: absolute
+      top: 0
+      left: 0 #{"/* rtl:ignore */"}
+      width: 100%
+      height: 100%
+      opacity: 0
+      border-radius: inherit
+      transition: background-color .3s cubic-bezier(.25,.8,.5,1), opacity .6s cubic-bezier(.25,.8,.5,1)
+
+    &:before
+      background: #000
+    &:after
+      background: #fff
+
+    &--rounded
+      border-radius: $generic-border-radius
+    &--round
+      border-radius: 50%
+
+  .q-focusable:focus, .q-manual-focusable--focused, .q-hoverable:hover
+    > .q-focus-helper
+      background: currentColor
+      opacity: .15
+      &:before
+        opacity: .1
+      &:after
+        opacity: .4
+
+  .q-focusable:focus, .q-manual-focusable--focused
+    > .q-focus-helper
+      opacity: .22
+

package/src/css/flex-addon.sass

@@ -0,0 +1,212 @@
+@import './helpers/string.sass'
+@import './helpers/math.sass'
+
+@import './variables.sass'
+
+@mixin fg($name, $size)
+  $noProcZero: $size == 0
+  $noProcNotZero: $size > 0
+
+  @media (min-width: $size)
+    #{str-fe('.flex<name>-', $name, $noProcNotZero)}
+      &block
+        display: block
+      &inline
+        display: inline-block
+
+    @each $space, $value in $spaces
+      .q-pa#{$name}-#{$space}
+        padding: map-get($value, "y") map-get($value, "x")
+      .q-pl#{$name}-#{$space}
+        padding-left: map-get($value, "x")
+      .q-pr#{$name}-#{$space}
+        padding-right: map-get($value, "x")
+      .q-pt#{$name}-#{$space}
+        padding-top: map-get($value, "y")
+      .q-pb#{$name}-#{$space}
+        padding-bottom: map-get($value, "y")
+      .q-px#{$name}-#{$space}
+        padding-left: map-get($value, "x")
+        padding-right: map-get($value, "x")
+      .q-py#{$name}-#{$space}
+        padding-top: map-get($value, "y")
+        padding-bottom: map-get($value, "y")
+
+      .q-ma#{$name}-#{$space}
+        margin: map-get($value, "y") map-get($value, "x")
+      .q-ml#{$name}-#{$space}
+        margin-left: map-get($value, "x")
+      .q-mr#{$name}-#{$space}
+        margin-right: map-get($value, "x")
+      .q-mt#{$name}-#{$space}
+        margin-top: map-get($value, "y")
+      .q-mb#{$name}-#{$space}
+        margin-bottom: map-get($value, "y")
+      .q-mx#{$name}-#{$space}
+        margin-left: map-get($value, "x")
+        margin-right: map-get($value, "x")
+      .q-my#{$name}-#{$space}
+        margin-top: map-get($value, "y")
+        margin-bottom: map-get($value, "y")
+
+    .q-ml#{$name}-auto
+      margin-left: auto
+    .q-mr#{$name}-auto
+      margin-right: auto
+    .q-mx#{$name}-auto
+      margin-left: auto
+      margin-right: auto
+
+    .row, .column, .flex
+      @if $noProcNotZero
+        #{str-fr('&.inline<name>', $name)}
+          display: inline-flex
+      #{str-fr('&<name>', $name)}
+        display: flex
+        flex-wrap: wrap
+        #{str-fe('&.inline<name>', $name, $noProcZero)}
+          display: inline-flex
+
+    .row
+      @if $noProcNotZero
+        #{str-fr('&.reverse<name>', $name)}
+          flex-direction: row-reverse
+      #{str-fr('&<name>', $name)}
+        flex-direction: row
+        #{str-fe('&.reverse<name>', $name, $noProcZero)}
+          flex-direction: row-reverse
+
+    .column
+      @if $noProcNotZero
+        #{str-fr('&.reverse<name>', $name)}
+          flex-direction: column-reverse
+      #{str-fr('&<name>', $name)}
+        flex-direction: column
+        #{str-fe('&.reverse<name>', $name, $noProcZero)}
+          flex-direction: column-reverse
+
+    #{str-fr('.wrap<name>', $name)}
+      flex-wrap: wrap
+    #{str-fr('.no-wrap<name>', $name)}
+      flex-wrap: nowrap
+    #{str-fr('.reverse-wrap<name>', $name)}
+      flex-wrap: wrap-reverse
+
+    #{str-fr('.order<name>-', $name)}
+      &first
+        order: -10000
+      &last
+        order: 10000
+      &none
+        order: 0
+
+    #{str-fr('.justify<name>-', $name)}
+      &start
+        justify-content: flex-start
+      &end
+        justify-content: flex-end
+      &center
+        justify-content: center
+      &between
+        justify-content: space-between
+      &around
+        justify-content: space-around
+      &evenly
+        justify-content: space-evenly
+
+    #{str-fr('.items<name>-', $name)}
+      &start
+        align-items: flex-start
+      &end
+        align-items: flex-end
+      &center
+        align-items: center
+      &baseline
+        align-items: baseline
+      &stretch
+        align-items: stretch
+
+    #{str-fr('.content<name>-', $name)}
+      &start
+        align-content: flex-start
+      &end
+        align-content: flex-end
+      &center
+        align-content: center
+      &between
+        align-content: space-between
+      &around
+        align-content: space-around
+
+    #{str-fr('.self<name>-', $name)}
+      &start
+        align-self: flex-start
+      &end
+        align-self: flex-end
+      &center
+        align-self: center
+      &baseline
+        align-self: baseline
+      &stretch
+        align-self: stretch
+
+    #{str-fr('.flex<name>-center', $name)}
+      @extend .items#{$name}-center
+      @extend .justify#{$name}-center
+
+    @each $gname, $gsize in $flex-gutter
+      #{str-fr('.q-gutter<name>', $name)}
+        &-x-#{$gname}
+          margin-left: -$gsize
+          > *
+            margin-left: $gsize
+        &-y-#{$gname}
+          margin-top: -$gsize
+          > *
+            margin-top: $gsize
+        &-#{$gname}
+          margin-left: -$gsize
+          margin-top: -$gsize
+          > *
+            margin-left: $gsize
+            margin-top: $gsize
+
+      #{str-fr('.q-col-gutter<name>', $name)}
+        &-x-#{$gname}
+          margin-left: -$gsize
+          > *
+            padding-left: $gsize
+        &-y-#{$gname}
+          margin-top: -$gsize
+          > *
+            padding-top: $gsize
+        &-#{$gname}
+          margin-left: -$gsize
+          margin-top: -$gsize
+          > *
+            padding-left: $gsize
+            padding-top: $gsize
+
+    @each $name2, $size2 in $sizes
+      @if $size >= $size2
+        $name2c: "-#{$name2}"
+        $noProcNotZero2: ($size2 > 0)
+
+        @for $i from 0 through $flex-cols
+          $ic: quote('' + $i)
+          $internal-size: toFixed(percentage($i / $flex-cols), 10000)
+
+          #{str-fr('.row<name>', $name)}
+            #{str-fe('> .col<name>-<i>', $name2c, $noProcNotZero2, $ic)}
+              height: auto
+              width: $internal-size
+            #{str-fe('> .offset<name>-<i>', $name2c, $noProcNotZero2, $ic)}
+              margin-left: $internal-size
+
+          #{str-fr('.column<name>', $name)}
+            #{str-fe('> .col<name>-<i>', $name2c, $noProcNotZero2, $ic)}
+              height: $internal-size
+              width: auto
+
+@each $name, $size in $sizes
+  @include fg("-" + $name, $size)