diff --git a/vue/src/assets/styles/index.scss b/vue/src/assets/styles/index.scss index cedd425..eb36973 100644 --- a/vue/src/assets/styles/index.scss +++ b/vue/src/assets/styles/index.scss @@ -116,6 +116,7 @@ a:hover { font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; color: #337ab7; + user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/vue/src/components/Skeleton/QSkeleton.sass b/vue/src/components/Skeleton/QSkeleton.sass index 662f6f3..3bde846 100644 --- a/vue/src/components/Skeleton/QSkeleton.sass +++ b/vue/src/components/Skeleton/QSkeleton.sass @@ -1,137 +1,110 @@ .q-skeleton - background: rgba(0, 0, 0, .12) - border-radius: 4px - - /* - maintain size even with border - for types that have height specified - */ - box-sizing: border-box - - &:before - content: '\00a0' - - &--type - &-text - transform: scale(1, .5) - - &-circle, - &-QAvatar - height: 48px - width: 48px - border-radius: 50% - - &-QBtn - width: 90px - height: 36px - &-QBadge - width: 70px - height: 16px - &-QChip - width: 90px - height: 28px - border-radius: 16px - &-QToolbar - height: 50px - &-QCheckbox, - &-QRadio - width: 40px - height: 40px - border-radius: 50% - &-QToggle - width: 56px - height: 40px - border-radius: 7px - &-QSlider, - &-QRange - height: 40px - &-QInput - height: 56px - - &--bordered - border: 1px solid rgba(0,0,0,.05) - - &--square - border-radius: 0 - - &--anim-fade - animation: q-skeleton--fade 1.5s linear .5s infinite - - &--anim-pulse - animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite - &--anim-pulse-x - animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite - &--anim-pulse-y - animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite - - &--anim-wave, - &--anim-blink, - &--anim-pop - position: relative - overflow: hidden - z-index: 1 - &:after - content: '' - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - z-index: 0 - - &--anim-blink:after - background: rgba(255,255,255,.7) - animation: q-skeleton--fade 1.5s linear .5s infinite - &--anim-wave:after - background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent) - animation: q-skeleton--wave 1.5s linear .5s infinite - - &--dark - background: rgba(255, 255, 255, 0.05) - - &.q-skeleton--bordered - border: 1px solid rgba(255,255,255,.25) - - &.q-skeleton--anim-wave:after - background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent) - - &.q-skeleton--anim-blink:after - background: rgba(255,255,255,.2) + background: rgba(0, 0, 0, .12) + border-radius: 4px + + /* + maintain size even with border + for types that have height specified + */ + box-sizing: border-box + + &:before + content: '\00a0' + + &--type + &-circle + height: 48px + width: 48px + border-radius: 50% + + &--bordered + border: 1px solid rgba(0, 0, 0, .05) + + &--square + border-radius: 0 + + &--anim-fade + animation: q-skeleton--fade 1.5s linear .5s infinite + + &--anim-pulse + animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite + + &--anim-pulse-x + animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite + + &--anim-pulse-y + animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite + + &--anim-wave, + &--anim-blink, + &--anim-pop + position: relative + overflow: hidden + z-index: 1 + + &:after + content: '' + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + z-index: 0 + + &--anim-blink:after + background: rgba(255, 255, 255, .7) + animation: q-skeleton--fade 1.5s linear .5s infinite + + &--anim-wave:after + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent) + animation: q-skeleton--wave 1.5s linear .5s infinite + + &--dark + background: rgba(255, 255, 255, 0.05) + + &.q-skeleton--bordered + border: 1px solid rgba(255, 255, 255, .25) + + &.q-skeleton--anim-wave:after + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent) + + &.q-skeleton--anim-blink:after + background: rgba(255, 255, 255, .2) @keyframes q-skeleton--fade - 0% - opacity: 1 - 50% - opacity: .4 - 100% - opacity: 1 + 0% + opacity: 1 + 50% + opacity: .4 + 100% + opacity: 1 @keyframes q-skeleton--pulse - 0% - transform: scale(1) - 50% - transform: scale(.85) - 100% - transform: scale(1) + 0% + transform: scale(1) + 50% + transform: scale(.85) + 100% + transform: scale(1) @keyframes q-skeleton--pulse-x - 0% - transform: scaleX(1) - 50% - transform: scaleX(.75) - 100% - transform: scaleX(1) + 0% + transform: scaleX(1) + 50% + transform: scaleX(.75) + 100% + transform: scaleX(1) @keyframes q-skeleton--pulse-y - 0% - transform: scaleY(1) - 50% - transform: scaleY(.75) - 100% - transform: scaleY(1) + 0% + transform: scaleY(1) + 50% + transform: scaleY(.75) + 100% + transform: scaleY(1) @keyframes q-skeleton--wave - 0% - transform: translateX(-100%) - 100% - transform: translateX(100%) + 0% + transform: translateX(-100%) + 100% + transform: translateX(100%) diff --git a/vue/src/components/Skeleton/constant.js b/vue/src/components/Skeleton/constant.js index f4ed2ac..e0c7ad1 100644 --- a/vue/src/components/Skeleton/constant.js +++ b/vue/src/components/Skeleton/constant.js @@ -1,9 +1,5 @@ export const skeletonTypes = [ - 'text', 'rect', 'circle', - 'QBtn', 'QBadge', 'QChip', 'QToolbar', - 'QCheckbox', 'QRadio', 'QToggle', - 'QSlider', 'QRange', 'QInput', - 'QAvatar' + 'text', 'circle' ] export const skeletonAnimations = [ 'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none' diff --git a/vue/src/components/Skeleton/index.vue b/vue/src/components/Skeleton/index.vue index f0ba183..6357e58 100644 --- a/vue/src/components/Skeleton/index.vue +++ b/vue/src/components/Skeleton/index.vue @@ -9,7 +9,7 @@ type: { type: String, validator: v => skeletonTypes.includes(v), - default: 'rect' + default: 'text' }, animation: { type: String, diff --git a/vue/src/views/example/components/ripple.vue b/vue/src/views/example/components/ripple.vue index 4487ade..897cebb 100644 --- a/vue/src/views/example/components/ripple.vue +++ b/vue/src/views/example/components/ripple.vue @@ -1,6 +1,6 @@