/* 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 > .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 > .ckeditor-accordion-toggle:before, .ckeditor-accordion-container > dl dt > .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 > .ckeditor-accordion-toggle:before { left: 13px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .ckeditor-accordion-container > dl dt > .ckeditor-accordion-toggle:after { right: 13px; left: auto; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .ckeditor-accordion-container > dl dt.active > .ckeditor-accordion-toggle:before { transform: rotate(45deg); } .ckeditor-accordion-container > dl dt.active > .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; }