ckeditor-accordion.css in CKEditor Accordion 8
/*
Accordion tabs that have not been created using Javascript
*/
/* clearfix */
.ckeditor-accordion-container > dl:before,
.ckeditor-accordion-container > dl:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.ckeditor-accordion-container > dl:after {
clear: both;
}
/* CKEditor accordion */
.ckeditor-accordion-container > dl,
.ckeditor-accordion-container > dl dt,
.ckeditor-accordion-container > dl dd {
box-sizing: border-box;
}
.ckeditor-accordion-container > dl {
position: relative;
border: 1px solid #0091ea;
}
/* label / tab */
.ckeditor-accordion-container > dl dt {
position: relative;
}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle {
display: inline-block;
position: absolute;
padding: 0 10px;
width: 30px;
height: 30px;
z-index: 1;
top: calc(50% - 1px);
left: 11px;
box-sizing: border-box;
}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before,
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after {
background: #fff;
-webkit-transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
content: "";
display: block;
height: 2px;
position: absolute;
width: 10px;
z-index: -1;
left: 0;
top: 0;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
will-change: transform;
}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before {
left: 13px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after {
right: 13px;
left: auto;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:before {
transform: rotate(45deg);
}
.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:after {
transform: rotate(-45deg);
}
.ckeditor-accordion-container > dl dt > a {
display: block;
padding: 10px 15px 10px 50px;
background-color: #00b0ff;
color: #fff;
cursor: pointer;
-webkit-transition: background-color 300ms;
transition: background-color 300ms;
border-bottom: 1px solid #00a4ec;
}
.ckeditor-accordion-container > dl dt > a:hover {
background-color: #00a5ef;
}
.ckeditor-accordion-container > dl dt.active > a {
background-color: #0091ea;
}
.ckeditor-accordion-container > dl dt:last-of-type > a {
border-bottom: 0;
}
/* contents */
.ckeditor-accordion-container > dl dd {
display: none;
padding: 0 15px;
margin: 0;
will-change: height;
}
File
css/ckeditor-accordion.css
View source
- /*
- Accordion tabs that have not been created using Javascript
- */
-
- /* clearfix */
- .ckeditor-accordion-container > dl:before,
- .ckeditor-accordion-container > dl:after {
- content: " "; /* 1 */
- display: table; /* 2 */
- }
- .ckeditor-accordion-container > dl:after {
- clear: both;
- }
-
- /* CKEditor accordion */
- .ckeditor-accordion-container > dl,
- .ckeditor-accordion-container > dl dt,
- .ckeditor-accordion-container > dl dd {
- box-sizing: border-box;
- }
- .ckeditor-accordion-container > dl {
- position: relative;
- border: 1px solid #0091ea;
- }
-
- /* label / tab */
- .ckeditor-accordion-container > dl dt {
- position: relative;
- }
-
- .ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle {
- display: inline-block;
- position: absolute;
- padding: 0 10px;
- width: 30px;
- height: 30px;
- z-index: 1;
- top: calc(50% - 1px);
- left: 11px;
- box-sizing: border-box;
- }
- .ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before,
- .ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after {
- background: #fff;
- -webkit-transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
- transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
- content: "";
- display: block;
- height: 2px;
- position: absolute;
- width: 10px;
- z-index: -1;
- left: 0;
- top: 0;
- -webkit-transform: rotate(-180deg);
- transform: rotate(-180deg);
- will-change: transform;
- }
- .ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before {
- left: 13px;
- -webkit-transform: rotate(135deg);
- transform: rotate(135deg);
- }
- .ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after {
- right: 13px;
- left: auto;
- -webkit-transform: rotate(-135deg);
- transform: rotate(-135deg);
- }
- .ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:before {
- transform: rotate(45deg);
- }
- .ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:after {
- transform: rotate(-45deg);
- }
-
-
- .ckeditor-accordion-container > dl dt > a {
- display: block;
- padding: 10px 15px 10px 50px;
- background-color: #00b0ff;
- color: #fff;
- cursor: pointer;
- -webkit-transition: background-color 300ms;
- transition: background-color 300ms;
- border-bottom: 1px solid #00a4ec;
- }
-
- .ckeditor-accordion-container > dl dt > a:hover {
- background-color: #00a5ef;
- }
- .ckeditor-accordion-container > dl dt.active > a {
- background-color: #0091ea;
- }
-
- .ckeditor-accordion-container > dl dt:last-of-type > a {
- border-bottom: 0;
- }
-
- /* contents */
- .ckeditor-accordion-container > dl dd {
- display: none;
- padding: 0 15px;
- margin: 0;
- will-change: height;
- }