mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
feat(components): add support for css variables (#13895)
* wip * wip * wip * wip * CSS variable cleanup added css variable example * reverted example * wip * name fixes for tabbar and item * wip - alpha support * wip - all the things * wip * wip * PR cleanup * cleanup to ion-color * switched to double quotes * PR cleanup Added TODO for color-mod comments * reverted ios variable for transition. * style cleanup added -ion prefix to all css variables updated default.css to mirror SASS values cleanup/update to oceanic css * removed 'dark' theme files cleanup from scss-lint report
This commit is contained in:
Ross Gerbasi
committed by
Brandy Carney
Brandy Carney
parent
ded672294f
commit
f41bb39ce3
@ -20,9 +20,11 @@
|
||||
/* Fix of Webkit flickering */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.swiper-container-no-flexbox .swiper-slide {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.swiper-container-vertical > .swiper-wrapper {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
@ -30,6 +32,7 @@
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -49,6 +52,7 @@
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.swiper-container-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
-webkit-transform: translate3d(0px, 0, 0);
|
||||
@ -57,6 +61,7 @@
|
||||
-ms-transform: translate3d(0px, 0, 0);
|
||||
transform: translate3d(0px, 0, 0);
|
||||
}
|
||||
|
||||
.swiper-container-multirow > .swiper-wrapper {
|
||||
-webkit-box-lines: multiple;
|
||||
-moz-box-lines: multiple;
|
||||
@ -64,6 +69,7 @@
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.swiper-container-free-mode > .swiper-wrapper {
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
@ -72,6 +78,7 @@
|
||||
transition-timing-function: ease-out;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
@ -80,11 +87,13 @@
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Auto Height */
|
||||
.swiper-container-autoheight,
|
||||
.swiper-container-autoheight .swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.swiper-container-autoheight .swiper-wrapper {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
@ -96,6 +105,7 @@
|
||||
-ms-transition-property: -ms-transform;
|
||||
transition-property: transform, height;
|
||||
}
|
||||
|
||||
/* a11y */
|
||||
.swiper-container .swiper-notification {
|
||||
position: absolute;
|
||||
@ -105,15 +115,18 @@
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
/* IE10 Windows Phone 8 Fixes */
|
||||
.swiper-wp8-horizontal {
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.swiper-wp8-vertical {
|
||||
-ms-touch-action: pan-x;
|
||||
touch-action: pan-x;
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
@ -130,40 +143,48 @@
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.swiper-button-prev.swiper-button-disabled,
|
||||
.swiper-button-next.swiper-button-disabled {
|
||||
opacity: 0.35;
|
||||
opacity: .35;
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-container-rtl .swiper-button-next {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
||||
left: 10px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.swiper-button-prev.swiper-button-black,
|
||||
.swiper-container-rtl .swiper-button-next.swiper-button-black {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.swiper-button-prev.swiper-button-white,
|
||||
.swiper-container-rtl .swiper-button-next.swiper-button-white {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-container-rtl .swiper-button-prev {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.swiper-button-next.swiper-button-black,
|
||||
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.swiper-button-next.swiper-button-white,
|
||||
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
/* Pagination Styles */
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
@ -178,9 +199,11 @@
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.swiper-pagination.swiper-pagination-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Common Styles */
|
||||
.swiper-pagination-fraction,
|
||||
.swiper-pagination-custom,
|
||||
@ -189,15 +212,16 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Bullets */
|
||||
.swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
button.swiper-pagination-bullet {
|
||||
border: none;
|
||||
margin: 0;
|
||||
@ -208,22 +232,27 @@ button.swiper-pagination-bullet {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.swiper-pagination-white .swiper-pagination-bullet {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #007aff;
|
||||
}
|
||||
|
||||
.swiper-pagination-white .swiper-pagination-bullet-active {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.swiper-pagination-black .swiper-pagination-bullet-active {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.swiper-container-vertical > .swiper-pagination-bullets {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
@ -233,20 +262,22 @@ button.swiper-pagination-bullet {
|
||||
-ms-transform: translate3d(0px, -50%, 0);
|
||||
transform: translate3d(0px, -50%, 0);
|
||||
}
|
||||
|
||||
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.swiper-pagination-progress {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
background: #007aff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -262,6 +293,7 @@ button.swiper-pagination-bullet {
|
||||
-o-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
-webkit-transform-origin: right top;
|
||||
-moz-transform-origin: right top;
|
||||
@ -269,27 +301,33 @@ button.swiper-pagination-bullet {
|
||||
-o-transform-origin: right top;
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
.swiper-container-horizontal > .swiper-pagination-progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.swiper-container-vertical > .swiper-pagination-progress {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.swiper-pagination-progress.swiper-pagination-white {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* 3D Container */
|
||||
.swiper-container-3d {
|
||||
-webkit-perspective: 1200px;
|
||||
@ -297,11 +335,12 @@ button.swiper-pagination-bullet {
|
||||
-o-perspective: 1200px;
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-wrapper,
|
||||
.swiper-container-3d .swiper-slide,
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
.swiper-container-3d .swiper-slide-shadow-top, ¡
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-container-3d .swiper-cube-shadow {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
@ -309,6 +348,7 @@ button.swiper-pagination-bullet {
|
||||
-ms-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
@ -321,65 +361,72 @@ button.swiper-pagination-bullet {
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-left {
|
||||
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-right {
|
||||
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-top {
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
|
||||
/* Coverflow */
|
||||
.swiper-container-coverflow .swiper-wrapper,
|
||||
.swiper-container-flip .swiper-wrapper {
|
||||
/* Windows 8 IE 10 fix */
|
||||
-ms-perspective: 1200px;
|
||||
}
|
||||
|
||||
/* Cube + Flip */
|
||||
.swiper-container-cube,
|
||||
.swiper-container-flip {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide,
|
||||
.swiper-container-flip .swiper-slide {
|
||||
pointer-events: none;
|
||||
@ -389,16 +436,19 @@ button.swiper-pagination-bullet {
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide .swiper-slide,
|
||||
.swiper-container-flip .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-flip .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
|
||||
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide-shadow-top,
|
||||
.swiper-container-flip .swiper-slide-shadow-top,
|
||||
.swiper-container-cube .swiper-slide-shadow-bottom,
|
||||
@ -413,6 +463,7 @@ button.swiper-pagination-bullet {
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Cube */
|
||||
.swiper-container-cube .swiper-slide {
|
||||
visibility: hidden;
|
||||
@ -423,12 +474,14 @@ button.swiper-pagination-bullet {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-container-cube.swiper-container-rtl .swiper-slide {
|
||||
-webkit-transform-origin: 100% 0;
|
||||
-moz-transform-origin: 100% 0;
|
||||
-ms-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-next,
|
||||
.swiper-container-cube .swiper-slide-prev,
|
||||
@ -436,6 +489,7 @@ button.swiper-pagination-bullet {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-cube-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -443,11 +497,12 @@ button.swiper-pagination-bullet {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.6;
|
||||
opacity: .6;
|
||||
-webkit-filter: blur(50px);
|
||||
filter: blur(50px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Fade */
|
||||
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
@ -456,6 +511,7 @@ button.swiper-pagination-bullet {
|
||||
-o-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.swiper-container-fade .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-transition-property: opacity;
|
||||
@ -463,13 +519,16 @@ button.swiper-pagination-bullet {
|
||||
-o-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.swiper-container-fade .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swiper-container-fade .swiper-slide-active,
|
||||
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.swiper-zoom-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -490,6 +549,7 @@ button.swiper-pagination-bullet {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-zoom-container > img,
|
||||
.swiper-zoom-container > svg,
|
||||
.swiper-zoom-container > canvas {
|
||||
@ -497,13 +557,14 @@ button.swiper-pagination-bullet {
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.swiper-scrollbar {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
-ms-touch-action: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.swiper-container-horizontal > .swiper-scrollbar {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
@ -512,6 +573,7 @@ button.swiper-pagination-bullet {
|
||||
height: 5px;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.swiper-container-vertical > .swiper-scrollbar {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
@ -520,18 +582,20 @@ button.swiper-pagination-bullet {
|
||||
width: 5px;
|
||||
height: 98%;
|
||||
}
|
||||
|
||||
.swiper-scrollbar-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.swiper-scrollbar-cursor-drag {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
/* Preloader */
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
@ -549,6 +613,7 @@ button.swiper-pagination-bullet {
|
||||
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader:after {
|
||||
display: block;
|
||||
content: "";
|
||||
@ -560,14 +625,17 @@ button.swiper-pagination-bullet {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader-white:after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
@-webkit-keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
26
packages/core/src/components/slides/slides.ios.scss
Normal file
26
packages/core/src/components/slides/slides.ios.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@import "./slides-vendor";
|
||||
@import "./slides.ios.vars";
|
||||
|
||||
.slides-ios .swiper-pagination-bullet {
|
||||
background-color: $slides-ios-bullet-background-color;
|
||||
}
|
||||
|
||||
.slides-ios .swiper-pagination-bullet-active {
|
||||
background-color: $slides-ios-bullet-background-color-active;
|
||||
}
|
||||
|
||||
.slides-ios .swiper-pagination-progress {
|
||||
background-color: $slides-ios-progress-background-color;
|
||||
}
|
||||
|
||||
.slides-ios .swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
background-color: $slides-ios-progress-bar-background-color;
|
||||
}
|
||||
|
||||
.slides-ios .swiper-scrollbar {
|
||||
background-color: $slides-ios-scroll-bar-background-color;
|
||||
}
|
||||
|
||||
.slides-ios .swiper-scrollbar-drag {
|
||||
background-color: $slides-ios-scroll-bar-drag-background-color;
|
||||
}
|
||||
19
packages/core/src/components/slides/slides.ios.vars.scss
Normal file
19
packages/core/src/components/slides/slides.ios.vars.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
/// @prop - Slides Bullet Background color
|
||||
$slides-ios-bullet-background-color: text-ios-color-step-200 !default;
|
||||
|
||||
/// @prop - Slides Bullet Background color when Active
|
||||
$slides-ios-bullet-background-color-active: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Slides Progress indicator Background color
|
||||
$slides-ios-progress-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
|
||||
|
||||
/// @prop - Slides Progress indicator bar Background color
|
||||
$slides-ios-progress-bar-background-color: ion-color($colors-ios, primary, shade, ios) !default;
|
||||
|
||||
/// @prop - Slides Scroll bar Background color
|
||||
$slides-ios-scroll-bar-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
|
||||
|
||||
/// @prop - Slides Scroll bar drag handle Background color
|
||||
$slides-ios-scroll-bar-drag-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-medium) !default;
|
||||
26
packages/core/src/components/slides/slides.md.scss
Normal file
26
packages/core/src/components/slides/slides.md.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@import "./slides-vendor";
|
||||
@import "./slides.md.vars";
|
||||
|
||||
.slides-md .swiper-pagination-bullet {
|
||||
background-color: $slides-md-bullet-background-color;
|
||||
}
|
||||
|
||||
.slides-md .swiper-pagination-bullet-active {
|
||||
background-color: $slides-md-bullet-background-color-active;
|
||||
}
|
||||
|
||||
.slides-md .swiper-pagination-progress {
|
||||
background-color: $slides-md-progress-background-color;
|
||||
}
|
||||
|
||||
.slides-md .swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
background-color: $slides-md-progress-bar-background-color;
|
||||
}
|
||||
|
||||
.slides-md .swiper-scrollbar {
|
||||
background-color: $slides-md-scroll-bar-background-color;
|
||||
}
|
||||
|
||||
.slides-md .swiper-scrollbar-drag {
|
||||
background-color: $slides-md-scroll-bar-drag-background-color;
|
||||
}
|
||||
19
packages/core/src/components/slides/slides.md.vars.scss
Normal file
19
packages/core/src/components/slides/slides.md.vars.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
/// @prop - Slides Bullet Background color
|
||||
$slides-md-bullet-background-color: $text-md-color-step-200 !default;
|
||||
|
||||
/// @prop - Slides Bullet Background color when Active
|
||||
$slides-md-bullet-background-color-active: ion-color($colors-md, primary, base, md) !default;
|
||||
|
||||
/// @prop - Slides Progress indicator Background color
|
||||
$slides-md-progress-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default;
|
||||
|
||||
/// @prop - Slides Progress indicator bar Background color
|
||||
$slides-md-progress-bar-background-color: ion-color($colors-md, primary, shade, md) !default;
|
||||
|
||||
/// @prop - Slides Scroll bar Background color
|
||||
$slides-md-scroll-bar-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default;
|
||||
|
||||
/// @prop - Slides Scroll bar drag handle Background color
|
||||
$slides-md-scroll-bar-drag-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-medium) !default;
|
||||
@ -1,5 +1,5 @@
|
||||
@import "./slides.vars";
|
||||
@import "./slides-import";
|
||||
@import "./slides-vendor";
|
||||
|
||||
// Slides
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
|
||||
import { Swiper } from './vendor/swiper.js';
|
||||
import { debounce } from '../../utils/helpers';
|
||||
@Component({
|
||||
tag: 'ion-slides',
|
||||
styleUrl: 'slides.scss',
|
||||
styleUrls: {
|
||||
ios: 'slides.ios.scss',
|
||||
md: 'slides.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'slides'
|
||||
},
|
||||
assetsDir: 'vendor'
|
||||
})
|
||||
export class Slides {
|
||||
@ -263,19 +268,8 @@ export class Slides {
|
||||
* child slides.
|
||||
*/
|
||||
@Method()
|
||||
update(debounce = 300) {
|
||||
update() {
|
||||
this.swiper.update();
|
||||
// if (this.init) {
|
||||
// window.clearTimeout(this.tmr);
|
||||
// this.tmr = window.setTimeout(() => {
|
||||
// this.swiper.update();
|
||||
//
|
||||
// // Don't allow pager to show with > 10 slides
|
||||
// if (this.length() > 10) {
|
||||
// this.options.paginationType = undefined;
|
||||
// }
|
||||
// }, debounce);
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
@ -409,5 +403,3 @@ export class Slides {
|
||||
this.enableKeyboardControl(false);
|
||||
}
|
||||
}
|
||||
|
||||
let slidesId = -1;
|
||||
|
||||
@ -7,13 +7,18 @@
|
||||
|
||||
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<style>
|
||||
ion-slide {
|
||||
height: 200px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<ion-content id="content">
|
||||
<ion-slides style="background: black" id="slides">
|
||||
<ion-slides style="background: black" id="slides" pager>
|
||||
<ion-slide style="background: red; color: white;">
|
||||
<h1>Slide 1</h1>
|
||||
</ion-slide>
|
||||
|
||||
Reference in New Issue
Block a user