slick.arrows--down.css in Slick Carousel 8
File
css/components/slick.arrows--down.css
View source
- /**
- * @file
- */
-
- .slick--has-arrow-down > .slick__arrow {
- bottom: 20px;
- height: 62px;
- left: 50%;
- margin: 0 0 0 -90px;
- top: auto;
- width: 180px;
- }
-
- .slick-down {
- background: #ff6d2c;
- border: 0;
- border-radius: 50%;
- cursor: pointer;
- display: none;
- font-size: 0;
- height: 48px;
- left: 50%;
- margin-left: -24px;
- pointer-events: auto;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- width: 48px;
- }
-
- .slick-initialized ~ .slick__arrow .slick-down {
- display: block;
- }
-
- .slick-down:active,
- .slick-down:focus {
- box-shadow: none;
- outline: 0;
- }
-
- .slick-down::before,
- .slick-down::after {
- pointer-events: none;
- }
-
- /* Pure CSS arrow down, override by icon font accordingly */
- .slick-down:hover {
- background: #37465b;
- }
-
- .slick-down::before,
- .slick-down::after {
- border-right: 3px solid;
- color: #fff;
- content: '';
- display: block;
- height: 16px;
- margin-top: -6px;
- position: absolute;
- -ms-transform: rotate(135deg);
- -webkit-transform: rotate(135deg);
- transform: rotate(135deg);
- right: 28px;
- top: 50%;
- width: 0;
- }
-
- .slick-down::after {
- right: 18px;
- -ms-transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
-
- .slick-down:hover::before,
- .slick-down:hover::after {
- color: #fff;
- }
-
- @media (min-width: 64em) {
- .slick--has-arrow-down .slide--caption--bottom .slide__caption {
- padding-bottom: 80px;
- }
- }