madosel
Version:
The most and fast advanced responsive html front-end framework.
60 lines (59 loc) • 2.12 kB
CSS
@charset "UTF-8";
/*!
* Madosel Accordion 1.0.0-alpha12
* Copyright 2020-2021 Kenan Gündoğan
* https://www.madosel.com
* Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE
* Released under the MIT License
*/
.accordion-container {
position: relative;
width: 100%;
}
.accordion-container .accordion-item {
overflow: hidden;
min-height: 70px;
margin-bottom: 10px;
border: dashed 1px #dedede;
border-radius: 5px;
}
.accordion-container .accordion-item.show {
background-color: #fef8e1;
}
.accordion-container .accordion-item.show .head i {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.04 9.26'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='path1245-9'%3E%3Cpath d='M180.41,9.26H4.63A4.63,4.63,0,0,1,4.63,0H180.41a4.63,4.63,0,0,1,0,9.26Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/50%;
}
.accordion-container .accordion-item.show .body {
display: block;
}
.accordion-container .accordion-item .head {
display: flex;
align-items: center;
border-radius: 5px;
padding: 20px;
cursor: pointer;
}
.accordion-container .accordion-item .head i {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.04 185.04'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M180.41,87.89H97.15V4.63a4.63,4.63,0,0,0-9.26,0V87.89H4.63a4.63,4.63,0,0,0,0,9.26H87.89v83.26a4.63,4.63,0,0,0,9.26,0V97.15h83.26a4.63,4.63,0,0,0,0-9.26Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/50%;
width: 30px;
height: 30px;
flex: 0 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin-right: 10px;
background-color: #fff;
}
.accordion-container .accordion-item .body {
display: none;
overflow: hidden;
height: 0;
}
.accordion-container .accordion-item .body .wrapper {
position: relative;
overflow: hidden;
padding: 0 20px 20px 60px;
border-radius: 5px;
}
/*# sourceMappingURL=madosel-accordion.css.map*/