diff --git a/AJAX_Full_Project_GULP/css/style.css b/AJAX_Full_Project_GULP/css/style.css index 6adc408d5ca7f895f229ccc2508d6a666efa0598..ec66184619e7fa6a39514bd2bb88f0d51357a8b0 100644 --- a/AJAX_Full_Project_GULP/css/style.css +++ b/AJAX_Full_Project_GULP/css/style.css @@ -527,7 +527,8 @@ mark, dl.row > dd + dt { clear: left; } -.img-fluid { +.img-fluid, .carousel-inner > .carousel-item > img, +.carousel-inner > .carousel-item > a > img { max-width: 100%; height: auto; } @@ -4273,6 +4274,163 @@ button.close { content: ""; border-width: 10px; } +.carousel { + position: relative; } + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } + .carousel-inner > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; } + .carousel-inner > .carousel-item > img, + .carousel-inner > .carousel-item > a > img { + line-height: 1; } + @media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .carousel-item { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; } + .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { + left: 0; + transform: translate3d(100%, 0, 0); } + .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); } + .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { + left: 0; + transform: translate3d(0, 0, 0); } } + .carousel-inner > .active, + .carousel-inner > .next, + .carousel-inner > .prev { + display: block; } + .carousel-inner > .active { + left: 0; } + .carousel-inner > .next, + .carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; } + .carousel-inner > .next { + left: 100%; } + .carousel-inner > .prev { + left: -100%; } + .carousel-inner > .next.left, + .carousel-inner > .prev.right { + left: 0; } + .carousel-inner > .active.left { + left: -100%; } + .carousel-inner > .active.right { + left: 100%; } + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + opacity: 0.5; } + .carousel-control.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } + .carousel-control.right { + right: 0; + left: auto; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } + .carousel-control:focus, .carousel-control:hover { + color: #fff; + text-decoration: none; + outline: 0; + opacity: .9; } + .carousel-control .icon-prev, + .carousel-control .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } + .carousel-control .icon-prev { + left: 50%; + margin-left: -10px; } + .carousel-control .icon-next { + right: 50%; + margin-right: -10px; } + .carousel-control .icon-prev::before { + content: "\2039"; } + .carousel-control .icon-next::before { + content: "\203a"; } + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; } + .carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: transparent; + border: 1px solid #fff; + border-radius: 10px; } + .carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; } + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } + .carousel-caption .btn { + text-shadow: none; } + +@media (min-width: 576px) { + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } + .carousel-control .icon-prev { + margin-left: -15px; } + .carousel-control .icon-next { + margin-right: -15px; } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; } + .carousel-indicators { + bottom: 20px; } } + .align-baseline { vertical-align: baseline !important; } diff --git a/AJAX_Full_Project_GULP/scss/style.scss b/AJAX_Full_Project_GULP/scss/style.scss index 12259a958ade18f8f283760f82f26f5bd5be612e..36e0ffae0394ddff169b94792d3c2b6a41c2b1c3 100644 --- a/AJAX_Full_Project_GULP/scss/style.scss +++ b/AJAX_Full_Project_GULP/scss/style.scss @@ -61,7 +61,7 @@ @import "bootstrap_src/modal"; @import "bootstrap_src/tooltip"; @import "bootstrap_src/popover"; -//@import "carousel"; +@import "bootstrap_src/carousel"; // Utility classes @import "bootstrap_src/utilities"; diff --git a/AJAX_Starter_GULP/css/style.css b/AJAX_Starter_GULP/css/style.css index 6adc408d5ca7f895f229ccc2508d6a666efa0598..ec66184619e7fa6a39514bd2bb88f0d51357a8b0 100644 --- a/AJAX_Starter_GULP/css/style.css +++ b/AJAX_Starter_GULP/css/style.css @@ -527,7 +527,8 @@ mark, dl.row > dd + dt { clear: left; } -.img-fluid { +.img-fluid, .carousel-inner > .carousel-item > img, +.carousel-inner > .carousel-item > a > img { max-width: 100%; height: auto; } @@ -4273,6 +4274,163 @@ button.close { content: ""; border-width: 10px; } +.carousel { + position: relative; } + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } + .carousel-inner > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; } + .carousel-inner > .carousel-item > img, + .carousel-inner > .carousel-item > a > img { + line-height: 1; } + @media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .carousel-item { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; } + .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { + left: 0; + transform: translate3d(100%, 0, 0); } + .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); } + .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { + left: 0; + transform: translate3d(0, 0, 0); } } + .carousel-inner > .active, + .carousel-inner > .next, + .carousel-inner > .prev { + display: block; } + .carousel-inner > .active { + left: 0; } + .carousel-inner > .next, + .carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; } + .carousel-inner > .next { + left: 100%; } + .carousel-inner > .prev { + left: -100%; } + .carousel-inner > .next.left, + .carousel-inner > .prev.right { + left: 0; } + .carousel-inner > .active.left { + left: -100%; } + .carousel-inner > .active.right { + left: 100%; } + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + opacity: 0.5; } + .carousel-control.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } + .carousel-control.right { + right: 0; + left: auto; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } + .carousel-control:focus, .carousel-control:hover { + color: #fff; + text-decoration: none; + outline: 0; + opacity: .9; } + .carousel-control .icon-prev, + .carousel-control .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } + .carousel-control .icon-prev { + left: 50%; + margin-left: -10px; } + .carousel-control .icon-next { + right: 50%; + margin-right: -10px; } + .carousel-control .icon-prev::before { + content: "\2039"; } + .carousel-control .icon-next::before { + content: "\203a"; } + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; } + .carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: transparent; + border: 1px solid #fff; + border-radius: 10px; } + .carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; } + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } + .carousel-caption .btn { + text-shadow: none; } + +@media (min-width: 576px) { + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } + .carousel-control .icon-prev { + margin-left: -15px; } + .carousel-control .icon-next { + margin-right: -15px; } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; } + .carousel-indicators { + bottom: 20px; } } + .align-baseline { vertical-align: baseline !important; } diff --git a/AJAX_Starter_GULP/scss/style.scss b/AJAX_Starter_GULP/scss/style.scss index 12259a958ade18f8f283760f82f26f5bd5be612e..36e0ffae0394ddff169b94792d3c2b6a41c2b1c3 100644 --- a/AJAX_Starter_GULP/scss/style.scss +++ b/AJAX_Starter_GULP/scss/style.scss @@ -61,7 +61,7 @@ @import "bootstrap_src/modal"; @import "bootstrap_src/tooltip"; @import "bootstrap_src/popover"; -//@import "carousel"; +@import "bootstrap_src/carousel"; // Utility classes @import "bootstrap_src/utilities"; diff --git a/Angular2_CLI_Full_Project/src/assets/css/style.css b/Angular2_CLI_Full_Project/src/assets/css/style.css index 6adc408d5ca7f895f229ccc2508d6a666efa0598..ec66184619e7fa6a39514bd2bb88f0d51357a8b0 100644 --- a/Angular2_CLI_Full_Project/src/assets/css/style.css +++ b/Angular2_CLI_Full_Project/src/assets/css/style.css @@ -527,7 +527,8 @@ mark, dl.row > dd + dt { clear: left; } -.img-fluid { +.img-fluid, .carousel-inner > .carousel-item > img, +.carousel-inner > .carousel-item > a > img { max-width: 100%; height: auto; } @@ -4273,6 +4274,163 @@ button.close { content: ""; border-width: 10px; } +.carousel { + position: relative; } + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } + .carousel-inner > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; } + .carousel-inner > .carousel-item > img, + .carousel-inner > .carousel-item > a > img { + line-height: 1; } + @media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .carousel-item { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; } + .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { + left: 0; + transform: translate3d(100%, 0, 0); } + .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); } + .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { + left: 0; + transform: translate3d(0, 0, 0); } } + .carousel-inner > .active, + .carousel-inner > .next, + .carousel-inner > .prev { + display: block; } + .carousel-inner > .active { + left: 0; } + .carousel-inner > .next, + .carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; } + .carousel-inner > .next { + left: 100%; } + .carousel-inner > .prev { + left: -100%; } + .carousel-inner > .next.left, + .carousel-inner > .prev.right { + left: 0; } + .carousel-inner > .active.left { + left: -100%; } + .carousel-inner > .active.right { + left: 100%; } + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + opacity: 0.5; } + .carousel-control.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } + .carousel-control.right { + right: 0; + left: auto; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } + .carousel-control:focus, .carousel-control:hover { + color: #fff; + text-decoration: none; + outline: 0; + opacity: .9; } + .carousel-control .icon-prev, + .carousel-control .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } + .carousel-control .icon-prev { + left: 50%; + margin-left: -10px; } + .carousel-control .icon-next { + right: 50%; + margin-right: -10px; } + .carousel-control .icon-prev::before { + content: "\2039"; } + .carousel-control .icon-next::before { + content: "\203a"; } + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; } + .carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: transparent; + border: 1px solid #fff; + border-radius: 10px; } + .carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; } + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } + .carousel-caption .btn { + text-shadow: none; } + +@media (min-width: 576px) { + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } + .carousel-control .icon-prev { + margin-left: -15px; } + .carousel-control .icon-next { + margin-right: -15px; } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; } + .carousel-indicators { + bottom: 20px; } } + .align-baseline { vertical-align: baseline !important; } diff --git a/Angular2_CLI_Full_Project/src/scss/style.scss b/Angular2_CLI_Full_Project/src/scss/style.scss index 12259a958ade18f8f283760f82f26f5bd5be612e..36e0ffae0394ddff169b94792d3c2b6a41c2b1c3 100644 --- a/Angular2_CLI_Full_Project/src/scss/style.scss +++ b/Angular2_CLI_Full_Project/src/scss/style.scss @@ -61,7 +61,7 @@ @import "bootstrap_src/modal"; @import "bootstrap_src/tooltip"; @import "bootstrap_src/popover"; -//@import "carousel"; +@import "bootstrap_src/carousel"; // Utility classes @import "bootstrap_src/utilities"; diff --git a/Angular2_CLI_Starter/src/assets/css/style.css b/Angular2_CLI_Starter/src/assets/css/style.css index 6adc408d5ca7f895f229ccc2508d6a666efa0598..ec66184619e7fa6a39514bd2bb88f0d51357a8b0 100644 --- a/Angular2_CLI_Starter/src/assets/css/style.css +++ b/Angular2_CLI_Starter/src/assets/css/style.css @@ -527,7 +527,8 @@ mark, dl.row > dd + dt { clear: left; } -.img-fluid { +.img-fluid, .carousel-inner > .carousel-item > img, +.carousel-inner > .carousel-item > a > img { max-width: 100%; height: auto; } @@ -4273,6 +4274,163 @@ button.close { content: ""; border-width: 10px; } +.carousel { + position: relative; } + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } + .carousel-inner > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; } + .carousel-inner > .carousel-item > img, + .carousel-inner > .carousel-item > a > img { + line-height: 1; } + @media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .carousel-item { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; } + .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { + left: 0; + transform: translate3d(100%, 0, 0); } + .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); } + .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { + left: 0; + transform: translate3d(0, 0, 0); } } + .carousel-inner > .active, + .carousel-inner > .next, + .carousel-inner > .prev { + display: block; } + .carousel-inner > .active { + left: 0; } + .carousel-inner > .next, + .carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; } + .carousel-inner > .next { + left: 100%; } + .carousel-inner > .prev { + left: -100%; } + .carousel-inner > .next.left, + .carousel-inner > .prev.right { + left: 0; } + .carousel-inner > .active.left { + left: -100%; } + .carousel-inner > .active.right { + left: 100%; } + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + opacity: 0.5; } + .carousel-control.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } + .carousel-control.right { + right: 0; + left: auto; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } + .carousel-control:focus, .carousel-control:hover { + color: #fff; + text-decoration: none; + outline: 0; + opacity: .9; } + .carousel-control .icon-prev, + .carousel-control .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } + .carousel-control .icon-prev { + left: 50%; + margin-left: -10px; } + .carousel-control .icon-next { + right: 50%; + margin-right: -10px; } + .carousel-control .icon-prev::before { + content: "\2039"; } + .carousel-control .icon-next::before { + content: "\203a"; } + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; } + .carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: transparent; + border: 1px solid #fff; + border-radius: 10px; } + .carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; } + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } + .carousel-caption .btn { + text-shadow: none; } + +@media (min-width: 576px) { + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } + .carousel-control .icon-prev { + margin-left: -15px; } + .carousel-control .icon-next { + margin-right: -15px; } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; } + .carousel-indicators { + bottom: 20px; } } + .align-baseline { vertical-align: baseline !important; } diff --git a/Angular2_CLI_Starter/src/scss/style.scss b/Angular2_CLI_Starter/src/scss/style.scss index 12259a958ade18f8f283760f82f26f5bd5be612e..36e0ffae0394ddff169b94792d3c2b6a41c2b1c3 100644 --- a/Angular2_CLI_Starter/src/scss/style.scss +++ b/Angular2_CLI_Starter/src/scss/style.scss @@ -61,7 +61,7 @@ @import "bootstrap_src/modal"; @import "bootstrap_src/tooltip"; @import "bootstrap_src/popover"; -//@import "carousel"; +@import "bootstrap_src/carousel"; // Utility classes @import "bootstrap_src/utilities"; diff --git a/Angular_Full_Project_GULP/css/style.css b/Angular_Full_Project_GULP/css/style.css index 6adc408d5ca7f895f229ccc2508d6a666efa0598..ec66184619e7fa6a39514bd2bb88f0d51357a8b0 100644 --- a/Angular_Full_Project_GULP/css/style.css +++ b/Angular_Full_Project_GULP/css/style.css @@ -527,7 +527,8 @@ mark, dl.row > dd + dt { clear: left; } -.img-fluid { +.img-fluid, .carousel-inner > .carousel-item > img, +.carousel-inner > .carousel-item > a > img { max-width: 100%; height: auto; } @@ -4273,6 +4274,163 @@ button.close { content: ""; border-width: 10px; } +.carousel { + position: relative; } + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } + .carousel-inner > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; } + .carousel-inner > .carousel-item > img, + .carousel-inner > .carousel-item > a > img { + line-height: 1; } + @media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .carousel-item { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; } + .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { + left: 0; + transform: translate3d(100%, 0, 0); } + .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); } + .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { + left: 0; + transform: translate3d(0, 0, 0); } } + .carousel-inner > .active, + .carousel-inner > .next, + .carousel-inner > .prev { + display: block; } + .carousel-inner > .active { + left: 0; } + .carousel-inner > .next, + .carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; } + .carousel-inner > .next { + left: 100%; } + .carousel-inner > .prev { + left: -100%; } + .carousel-inner > .next.left, + .carousel-inner > .prev.right { + left: 0; } + .carousel-inner > .active.left { + left: -100%; } + .carousel-inner > .active.right { + left: 100%; } + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + opacity: 0.5; } + .carousel-control.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } + .carousel-control.right { + right: 0; + left: auto; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } + .carousel-control:focus, .carousel-control:hover { + color: #fff; + text-decoration: none; + outline: 0; + opacity: .9; } + .carousel-control .icon-prev, + .carousel-control .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } + .carousel-control .icon-prev { + left: 50%; + margin-left: -10px; } + .carousel-control .icon-next { + right: 50%; + margin-right: -10px; } + .carousel-control .icon-prev::before { + content: "\2039"; } + .carousel-control .icon-next::before { + content: "\203a"; } + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; } + .carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: transparent; + border: 1px solid #fff; + border-radius: 10px; } + .carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; } + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } + .carousel-caption .btn { + text-shadow: none; } + +@media (min-width: 576px) { + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } + .carousel-control .icon-prev { + margin-left: -15px; } + .carousel-control .icon-next { + margin-right: -15px; } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; } + .carousel-indicators { + bottom: 20px; } } + .align-baseline { vertical-align: baseline !important; } diff --git a/Angular_Full_Project_GULP/scss/style.scss b/Angular_Full_Project_GULP/scss/style.scss index 12259a958ade18f8f283760f82f26f5bd5be612e..36e0ffae0394ddff169b94792d3c2b6a41c2b1c3 100644 --- a/Angular_Full_Project_GULP/scss/style.scss +++ b/Angular_Full_Project_GULP/scss/style.scss @@ -61,7 +61,7 @@ @import "bootstrap_src/modal"; @import "bootstrap_src/tooltip"; @import "bootstrap_src/popover"; -//@import "carousel"; +@import "bootstrap_src/carousel"; // Utility classes @import "bootstrap_src/utilities"; diff --git a/Angular_Starter_GULP/css/style.css b/Angular_Starter_GULP/css/style.css index 6adc408d5ca7f895f229ccc2508d6a666efa0598..ec66184619e7fa6a39514bd2bb88f0d51357a8b0 100644 --- a/Angular_Starter_GULP/css/style.css +++ b/Angular_Starter_GULP/css/style.css @@ -527,7 +527,8 @@ mark, dl.row > dd + dt { clear: left; } -.img-fluid { +.img-fluid, .carousel-inner > .carousel-item > img, +.carousel-inner > .carousel-item > a > img { max-width: 100%; height: auto; } @@ -4273,6 +4274,163 @@ button.close { content: ""; border-width: 10px; } +.carousel { + position: relative; } + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } + .carousel-inner > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; } + .carousel-inner > .carousel-item > img, + .carousel-inner > .carousel-item > a > img { + line-height: 1; } + @media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .carousel-item { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; } + .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { + left: 0; + transform: translate3d(100%, 0, 0); } + .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); } + .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { + left: 0; + transform: translate3d(0, 0, 0); } } + .carousel-inner > .active, + .carousel-inner > .next, + .carousel-inner > .prev { + display: block; } + .carousel-inner > .active { + left: 0; } + .carousel-inner > .next, + .carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; } + .carousel-inner > .next { + left: 100%; } + .carousel-inner > .prev { + left: -100%; } + .carousel-inner > .next.left, + .carousel-inner > .prev.right { + left: 0; } + .carousel-inner > .active.left { + left: -100%; } + .carousel-inner > .active.right { + left: 100%; } + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + opacity: 0.5; } + .carousel-control.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } + .carousel-control.right { + right: 0; + left: auto; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } + .carousel-control:focus, .carousel-control:hover { + color: #fff; + text-decoration: none; + outline: 0; + opacity: .9; } + .carousel-control .icon-prev, + .carousel-control .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } + .carousel-control .icon-prev { + left: 50%; + margin-left: -10px; } + .carousel-control .icon-next { + right: 50%; + margin-right: -10px; } + .carousel-control .icon-prev::before { + content: "\2039"; } + .carousel-control .icon-next::before { + content: "\203a"; } + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; } + .carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: transparent; + border: 1px solid #fff; + border-radius: 10px; } + .carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; } + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } + .carousel-caption .btn { + text-shadow: none; } + +@media (min-width: 576px) { + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } + .carousel-control .icon-prev { + margin-left: -15px; } + .carousel-control .icon-next { + margin-right: -15px; } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; } + .carousel-indicators { + bottom: 20px; } } + .align-baseline { vertical-align: baseline !important; } diff --git a/Angular_Starter_GULP/scss/style.scss b/Angular_Starter_GULP/scss/style.scss index 12259a958ade18f8f283760f82f26f5bd5be612e..36e0ffae0394ddff169b94792d3c2b6a41c2b1c3 100644 --- a/Angular_Starter_GULP/scss/style.scss +++ b/Angular_Starter_GULP/scss/style.scss @@ -61,7 +61,7 @@ @import "bootstrap_src/modal"; @import "bootstrap_src/tooltip"; @import "bootstrap_src/popover"; -//@import "carousel"; +@import "bootstrap_src/carousel"; // Utility classes @import "bootstrap_src/utilities"; diff --git a/Static_Full_Project_GULP/css/style.css b/Static_Full_Project_GULP/css/style.css index 6adc408d5ca7f895f229ccc2508d6a666efa0598..ec66184619e7fa6a39514bd2bb88f0d51357a8b0 100644 --- a/Static_Full_Project_GULP/css/style.css +++ b/Static_Full_Project_GULP/css/style.css @@ -527,7 +527,8 @@ mark, dl.row > dd + dt { clear: left; } -.img-fluid { +.img-fluid, .carousel-inner > .carousel-item > img, +.carousel-inner > .carousel-item > a > img { max-width: 100%; height: auto; } @@ -4273,6 +4274,163 @@ button.close { content: ""; border-width: 10px; } +.carousel { + position: relative; } + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } + .carousel-inner > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; } + .carousel-inner > .carousel-item > img, + .carousel-inner > .carousel-item > a > img { + line-height: 1; } + @media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .carousel-item { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; } + .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { + left: 0; + transform: translate3d(100%, 0, 0); } + .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); } + .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { + left: 0; + transform: translate3d(0, 0, 0); } } + .carousel-inner > .active, + .carousel-inner > .next, + .carousel-inner > .prev { + display: block; } + .carousel-inner > .active { + left: 0; } + .carousel-inner > .next, + .carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; } + .carousel-inner > .next { + left: 100%; } + .carousel-inner > .prev { + left: -100%; } + .carousel-inner > .next.left, + .carousel-inner > .prev.right { + left: 0; } + .carousel-inner > .active.left { + left: -100%; } + .carousel-inner > .active.right { + left: 100%; } + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + opacity: 0.5; } + .carousel-control.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } + .carousel-control.right { + right: 0; + left: auto; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } + .carousel-control:focus, .carousel-control:hover { + color: #fff; + text-decoration: none; + outline: 0; + opacity: .9; } + .carousel-control .icon-prev, + .carousel-control .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } + .carousel-control .icon-prev { + left: 50%; + margin-left: -10px; } + .carousel-control .icon-next { + right: 50%; + margin-right: -10px; } + .carousel-control .icon-prev::before { + content: "\2039"; } + .carousel-control .icon-next::before { + content: "\203a"; } + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; } + .carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: transparent; + border: 1px solid #fff; + border-radius: 10px; } + .carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; } + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } + .carousel-caption .btn { + text-shadow: none; } + +@media (min-width: 576px) { + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } + .carousel-control .icon-prev { + margin-left: -15px; } + .carousel-control .icon-next { + margin-right: -15px; } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; } + .carousel-indicators { + bottom: 20px; } } + .align-baseline { vertical-align: baseline !important; } diff --git a/Static_Full_Project_GULP/scss/style.scss b/Static_Full_Project_GULP/scss/style.scss index 12259a958ade18f8f283760f82f26f5bd5be612e..36e0ffae0394ddff169b94792d3c2b6a41c2b1c3 100644 --- a/Static_Full_Project_GULP/scss/style.scss +++ b/Static_Full_Project_GULP/scss/style.scss @@ -61,7 +61,7 @@ @import "bootstrap_src/modal"; @import "bootstrap_src/tooltip"; @import "bootstrap_src/popover"; -//@import "carousel"; +@import "bootstrap_src/carousel"; // Utility classes @import "bootstrap_src/utilities"; diff --git a/Static_Starter_GULP/css/style.css b/Static_Starter_GULP/css/style.css index 6adc408d5ca7f895f229ccc2508d6a666efa0598..ec66184619e7fa6a39514bd2bb88f0d51357a8b0 100644 --- a/Static_Starter_GULP/css/style.css +++ b/Static_Starter_GULP/css/style.css @@ -527,7 +527,8 @@ mark, dl.row > dd + dt { clear: left; } -.img-fluid { +.img-fluid, .carousel-inner > .carousel-item > img, +.carousel-inner > .carousel-item > a > img { max-width: 100%; height: auto; } @@ -4273,6 +4274,163 @@ button.close { content: ""; border-width: 10px; } +.carousel { + position: relative; } + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } + .carousel-inner > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; } + .carousel-inner > .carousel-item > img, + .carousel-inner > .carousel-item > a > img { + line-height: 1; } + @media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .carousel-item { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; } + .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { + left: 0; + transform: translate3d(100%, 0, 0); } + .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); } + .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { + left: 0; + transform: translate3d(0, 0, 0); } } + .carousel-inner > .active, + .carousel-inner > .next, + .carousel-inner > .prev { + display: block; } + .carousel-inner > .active { + left: 0; } + .carousel-inner > .next, + .carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; } + .carousel-inner > .next { + left: 100%; } + .carousel-inner > .prev { + left: -100%; } + .carousel-inner > .next.left, + .carousel-inner > .prev.right { + left: 0; } + .carousel-inner > .active.left { + left: -100%; } + .carousel-inner > .active.right { + left: 100%; } + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + opacity: 0.5; } + .carousel-control.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } + .carousel-control.right { + right: 0; + left: auto; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } + .carousel-control:focus, .carousel-control:hover { + color: #fff; + text-decoration: none; + outline: 0; + opacity: .9; } + .carousel-control .icon-prev, + .carousel-control .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } + .carousel-control .icon-prev { + left: 50%; + margin-left: -10px; } + .carousel-control .icon-next { + right: 50%; + margin-right: -10px; } + .carousel-control .icon-prev::before { + content: "\2039"; } + .carousel-control .icon-next::before { + content: "\203a"; } + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; } + .carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: transparent; + border: 1px solid #fff; + border-radius: 10px; } + .carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; } + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } + .carousel-caption .btn { + text-shadow: none; } + +@media (min-width: 576px) { + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } + .carousel-control .icon-prev { + margin-left: -15px; } + .carousel-control .icon-next { + margin-right: -15px; } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; } + .carousel-indicators { + bottom: 20px; } } + .align-baseline { vertical-align: baseline !important; } diff --git a/Static_Starter_GULP/scss/style.scss b/Static_Starter_GULP/scss/style.scss index 12259a958ade18f8f283760f82f26f5bd5be612e..36e0ffae0394ddff169b94792d3c2b6a41c2b1c3 100644 --- a/Static_Starter_GULP/scss/style.scss +++ b/Static_Starter_GULP/scss/style.scss @@ -61,7 +61,7 @@ @import "bootstrap_src/modal"; @import "bootstrap_src/tooltip"; @import "bootstrap_src/popover"; -//@import "carousel"; +@import "bootstrap_src/carousel"; // Utility classes @import "bootstrap_src/utilities";