lixin-web
Version:
vue and bootstrap
309 lines (289 loc) • 6.4 kB
CSS
@charset "UTF-8";
:root{
/* Transition
-------------------------- */
/* Colors
-------------------------- */
/* Link
-------------------------- */
/* Border
-------------------------- */
/* Box-shadow
-------------------------- */
/* Fill
-------------------------- */
/* Font
-------------------------- */
/* Size
-------------------------- */
/* z-index
-------------------------- */
/* Disable base
-------------------------- */
/* Icon
-------------------------- */
/* Checkbox
-------------------------- */
/* Radio
-------------------------- */
/* Select
-------------------------- */
/* Alert
-------------------------- */
/* Message Box
-------------------------- */
/* Message
-------------------------- */
/* Notification
-------------------------- */
/* Input
-------------------------- */
/* Cascader
-------------------------- */
/* Group
-------------------------- */
/* Tab
-------------------------- */
/* Button
-------------------------- */
/* cascader
-------------------------- */
/* Switch
-------------------------- */
/* Dialog
-------------------------- */
/* Table
-------------------------- */
/* Pagination
-------------------------- */
/* Popover
-------------------------- */
/* Tooltip
-------------------------- */
/* Tag
-------------------------- */
/* Dropdown
-------------------------- */
/* Badge
-------------------------- */
/* Card
--------------------------*/
/* Slider
--------------------------*/
/* Steps
--------------------------*/
/* Menu
--------------------------*/
/* Rate
--------------------------*/
/* DatePicker
--------------------------*/
/* Loading
--------------------------*/
/* Scrollbar
--------------------------*/
/* Carousel
--------------------------*/
/* Collapse
--------------------------*/
/* Transfer
--------------------------*/
}
.el-carousel{
overflow-x: hidden;
position: relative;
}
.el-carousel__container{
position: relative;
height: 300px;
}
.el-carousel__arrow{
border: none;
outline: none;
padding: 0;
margin: 0;
width: 36px;
height: 36px;
cursor: pointer;
transition: .3s;
border-radius: 50%;
background-color: rgba(31, 45, 61, 0.11);
color: #fff;
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-50%);
text-align: center;
font-size: 12px;
}
.el-carousel__arrow:hover{
background-color: rgba(31, 45, 61, 0.23);
}
.el-carousel__arrow i{
cursor: pointer;
}
.el-carousel__arrow--left{
left: 16px;
}
.el-carousel__arrow--right{
right: 16px;
}
.el-carousel__indicators{
position: absolute;
list-style: none;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 0;
z-index: 2;
}
.el-carousel__indicators--outside{
bottom: 60px;
text-align: center;
position: static;
transform: none;
}
.el-carousel__indicators--outside .el-carousel__indicator:hover button {
opacity: 0.64;
}
.el-carousel__indicators--outside button {
background-color: rgb(131, 148, 165);
opacity: 0.24;
}
.el-carousel__indicators--labels{
left: 0;
right: 0;
transform: none;
text-align: center;
}
.el-carousel__indicators--labels .el-carousel__button {
width: auto;
height: auto;
padding: 2px 18px;
font-size: 12px;
}
.el-carousel__indicators--labels .el-carousel__indicator {
padding: 6px 4px;
}
.el-carousel__indicator{
display: inline-block;
background-color: transparent;
padding: 24px 8px;
cursor: pointer;
}
.el-carousel__indicator:hover button{
opacity: 0.72;
}
.el-carousel__indicator.is-active button{
opacity: 1;
}
.el-carousel__button{
display: block;
opacity: 0.48;
width: 12px;
height: 12px;
background-color: #fff;
border: none;
outline: none;
padding: 0;
margin: 0;
cursor: pointer;
transition: .3s;
}
.carousel-arrow-left-enter, .carousel-arrow-left-leave-active {
transform: translateY(-50%) translateX(-10px);
opacity: 0;
}
.carousel-arrow-right-enter, .carousel-arrow-right-leave-active {
transform: translateY(-50%) translateX(10px);
opacity: 0;
}
:root{
/* Transition
-------------------------- */
/* Colors
-------------------------- */
/* Link
-------------------------- */
/* Border
-------------------------- */
/* Box-shadow
-------------------------- */
/* Fill
-------------------------- */
/* Font
-------------------------- */
/* Size
-------------------------- */
/* z-index
-------------------------- */
/* Disable base
-------------------------- */
/* Icon
-------------------------- */
/* Checkbox
-------------------------- */
/* Radio
-------------------------- */
/* Select
-------------------------- */
/* Alert
-------------------------- */
/* Message Box
-------------------------- */
/* Message
-------------------------- */
/* Notification
-------------------------- */
/* Input
-------------------------- */
/* Cascader
-------------------------- */
/* Group
-------------------------- */
/* Tab
-------------------------- */
/* Button
-------------------------- */
/* cascader
-------------------------- */
/* Switch
-------------------------- */
/* Dialog
-------------------------- */
/* Table
-------------------------- */
/* Pagination
-------------------------- */
/* Popover
-------------------------- */
/* Tooltip
-------------------------- */
/* Tag
-------------------------- */
/* Dropdown
-------------------------- */
/* Badge
-------------------------- */
/* Card
--------------------------*/
/* Slider
--------------------------*/
/* Steps
--------------------------*/
/* Steps
--------------------------*/
/* Rate
--------------------------*/
/* DatePicker
--------------------------*/
/* Loading
--------------------------*/
/* Scrollbar
--------------------------*/
/* Carousel
--------------------------*/
/* Collapse
--------------------------*/
}