quasar 2.1.8 → 2.2.2

package/dist/quasar.css

@@ -1240,8 +1240,11 @@ body.desktop .q-chip--clickable:focus {
 .q-color-picker--bordered {
   border: 1px solid rgba(0, 0, 0, 0.12);
 }
-.q-color-picker__header {
-  height: 68px;
+.q-color-picker__header-tabs {
+  height: 32px;
+}
+.q-color-picker__header-banner {
+  height: 36px;
 }
 .q-color-picker__header input {
   line-height: 24px;
@@ -2694,6 +2697,9 @@ body.q-ios-padding .q-dialog__inner > div {
 .q-inner-loading--dark {
   background: rgba(0, 0, 0, 0.4);
 }
+.q-inner-loading__label {
+  margin-top: 8px;
+}
 
 .q-textarea .q-field__control {
   min-height: 56px;
@@ -3366,6 +3372,13 @@ body.desktop .q-radio--dense:not(.disabled):focus .q-radio__inner:before, body.d
   color: #ffeb3b;
   vertical-align: middle;
 }
+.q-rating__icon-container {
+  height: 1em;
+  outline: 0;
+}
+.q-rating__icon-container + .q-rating__icon-container {
+  margin-left: 2px;
+}
 .q-rating__icon {
   color: currentColor;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
@@ -3382,18 +3395,12 @@ body.desktop .q-radio--dense:not(.disabled):focus .q-radio__inner:before, body.d
 .q-rating__icon--exselected {
   opacity: 0.7;
 }
-.q-rating__icon + .q-rating__icon {
-  margin-left: 2px;
-}
 .q-rating--no-dimming .q-rating__icon {
   opacity: 1;
 }
-.q-rating--editable .q-icon {
+.q-rating--editable .q-rating__icon-container {
   cursor: pointer;
 }
-.q-rating--non-editable span, .q-rating .q-icon {
-  outline: 0;
-}
 
 .q-responsive {
   position: relative;
@@ -3553,6 +3560,7 @@ body.platform-ios:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--f
 }
 
 .q-skeleton {
+  --q-skeleton-speed: 1500ms;
   background: rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   /* maintain size even with border
@@ -3613,16 +3621,16 @@ body.platform-ios:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--f
   border-radius: 0;
 }
 .q-skeleton--anim-fade {
-  animation: q-skeleton--fade 1.5s linear 0.5s infinite;
+  animation: q-skeleton--fade var(--q-skeleton-speed) linear 0.5s infinite;
 }
 .q-skeleton--anim-pulse {
-  animation: q-skeleton--pulse 1.5s ease-in-out 0.5s infinite;
+  animation: q-skeleton--pulse var(--q-skeleton-speed) ease-in-out 0.5s infinite;
 }
 .q-skeleton--anim-pulse-x {
-  animation: q-skeleton--pulse-x 1.5s ease-in-out 0.5s infinite;
+  animation: q-skeleton--pulse-x var(--q-skeleton-speed) ease-in-out 0.5s infinite;
 }
 .q-skeleton--anim-pulse-y {
-  animation: q-skeleton--pulse-y 1.5s ease-in-out 0.5s infinite;
+  animation: q-skeleton--pulse-y var(--q-skeleton-speed) ease-in-out 0.5s infinite;
 }
 .q-skeleton--anim-wave, .q-skeleton--anim-blink, .q-skeleton--anim-pop {
   position: relative;
@@ -3640,11 +3648,11 @@ body.platform-ios:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--f
 }
 .q-skeleton--anim-blink:after {
   background: rgba(255, 255, 255, 0.7);
-  animation: q-skeleton--fade 1.5s linear 0.5s infinite;
+  animation: q-skeleton--fade var(--q-skeleton-speed) linear 0.5s infinite;
 }
 .q-skeleton--anim-wave:after {
   background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
-  animation: q-skeleton--wave 1.5s linear 0.5s infinite;
+  animation: q-skeleton--wave var(--q-skeleton-speed) linear 0.5s infinite;
 }
 .q-skeleton--dark {
   background: rgba(255, 255, 255, 0.05);
@@ -10792,11 +10800,10 @@ img.responsive {
   touch-action: pan-y;
 }
 
-:root {
+.q-transition--slide-right-enter-active, .q-transition--slide-right-leave-active, .q-transition--slide-left-enter-active, .q-transition--slide-left-leave-active, .q-transition--slide-up-enter-active, .q-transition--slide-up-leave-active, .q-transition--slide-down-enter-active, .q-transition--slide-down-leave-active, .q-transition--jump-right-enter-active, .q-transition--jump-right-leave-active, .q-transition--jump-left-enter-active, .q-transition--jump-left-leave-active, .q-transition--jump-up-enter-active, .q-transition--jump-up-leave-active, .q-transition--jump-down-enter-active, .q-transition--jump-down-leave-active, .q-transition--fade-enter-active, .q-transition--fade-leave-active, .q-transition--scale-enter-active, .q-transition--scale-leave-active, .q-transition--rotate-enter-active, .q-transition--rotate-leave-active, .q-transition--flip-enter-active, .q-transition--flip-leave-active {
   --q-transition-duration: .3s;
   --q-transition-easing: cubic-bezier(0.215,0.61,0.355,1);
 }
-
 .q-transition--slide-right-leave-active, .q-transition--slide-left-leave-active, .q-transition--slide-up-leave-active, .q-transition--slide-down-leave-active, .q-transition--jump-right-leave-active, .q-transition--jump-left-leave-active, .q-transition--jump-up-leave-active, .q-transition--jump-down-leave-active, .q-transition--fade-leave-active, .q-transition--scale-leave-active, .q-transition--rotate-leave-active, .q-transition--flip-leave-active {
   position: absolute;
 }