22

✏️ Editing: ff_accordion.css

:root{--ff-accordion-border-color:#ddd;--ff-accordion-header-bg:#f7f7f7;--ff-accordion-header-hover-bg:#f0f0f0;--ff-accordion-title-color:#444;--ff-accordion-description-color:#666;--ff-accordion-icon-color:#555;--ff-accordion-content-border:#eee;--ff-accordion-content-bg:#fff;--ff-accordion-border-radius:7px;--ff-accordion-transition-speed:0.2s;--ff-accordion-margin-bottom:20px}.ff-accordion-container{border:1px solid var(--ff-accordion-border-color);border-radius:var(--ff-accordion-border-radius);margin-bottom:var(--ff-accordion-margin-bottom);overflow:hidden}.ff-accordion-container .ff-accordion-header{align-items:flex-start;background-color:var(--ff-accordion-header-bg);cursor:pointer;display:flex;flex-direction:column;padding:12px 15px;position:relative;transition:background-color var(--ff-accordion-transition-speed)}.ff-accordion-container .ff-accordion-header.ff-accordion-header-open,.ff-accordion-container .ff-accordion-header:hover{background-color:var(--ff-accordion-header-hover-bg)}.ff-accordion-container .ff-accordion-header .ff-accordion-title{color:var(--ff-accordion-title-color);font-size:16px;font-weight:600;margin:0 0 5px;width:calc(100% - 30px)}.ff-accordion-container .ff-accordion-header .ff-accordion-title .ff-accordion-error-indicator{background-color:#dc3545;border-radius:50%;color:#fff;display:inline-block;font-size:12px;font-weight:700;height:20px;line-height:20px;margin-left:8px;text-align:center;vertical-align:middle;width:20px}.ff-accordion-container .ff-accordion-header .ff-accordion-description{color:var(--ff-accordion-description-color);font-size:14px;line-height:1.5;margin-bottom:8px;width:calc(100% - 30px)}.ff-accordion-container .ff-accordion-header .ff-accordion-toggle{display:inline-block;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.ff-accordion-container .ff-accordion-header:focus{outline:0}.ff-accordion-container .ff-accordion-icon{display:inline-block;height:12px;position:relative;width:12px}.ff-accordion-container .ff-accordion-icon:after,.ff-accordion-container .ff-accordion-icon:before{background-color:var(--ff-accordion-icon-color);content:"";position:absolute;transition:transform .25s ease-out}.ff-accordion-container .ff-accordion-icon:before{height:100%;left:50%;margin-left:-1px;top:0;width:2px}.ff-accordion-container .ff-accordion-icon:after{height:2px;left:0;margin-top:-1px;top:50%;width:100%}.ff-accordion-container .ff-accordion-icon.ff-accordion-icon-open:before{transform:rotate(90deg)}.ff-accordion-container .ff-accordion-content{background-color:var(--ff-accordion-content-bg);border-top:1px solid var(--ff-accordion-content-border);padding:15px}.ff-accordion-container .ff-accordion-content>:first-child{margin-top:0}.ff-accordion-container .ff-accordion-content>:last-child{margin-bottom:0}.ff-accordion-container.ff-accordion-type-start+.ff-accordion-container.ff-accordion-type-close{border-top:none;border-top-left-radius:0;border-top-right-radius:0;margin-bottom:var(--ff-accordion-margin-bottom);margin-top:0}.ff-accordion-container.ff-accordion-type-close{border-top:none;border-top-left-radius:0;border-top-right-radius:0;margin-top:0}.ff-accordion-container.ff-accordion-connected:not(.ff-accordion-mode-tabs):not(.ff-accordion-connected-close){border-radius:0;margin-bottom:0}.ff-accordion-container.ff-accordion-connected:not(.ff-accordion-mode-tabs):not(.ff-accordion-container-hidden)+.ff-accordion-container.ff-accordion-connected{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.ff-accordion-container.ff-accordion-connected:not(.ff-accordion-mode-tabs):last-of-type{margin-bottom:var(--ff-accordion-margin-bottom)}.ff-accordion-container.ff-accordion-connected:not(.ff-accordion-mode-tabs).ff-accordion-connected-start{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--ff-accordion-border-radius);border-top-right-radius:var(--ff-accordion-border-radius)}.ff-accordion-container.ff-accordion-connected+.ff-accordion-container:not(.ff-accordion-connected),.ff-accordion-container:not(.ff-accordion-connected)+.ff-accordion-container.ff-accordion-connected{margin-top:var(--ff-accordion-margin-bottom)}.ff-accordion-container.ff-accordion-connected:first-of-type,.ff-accordion-container:not(.ff-accordion-connected)+.ff-accordion-container.ff-accordion-connected{border-top-left-radius:var(--ff-accordion-border-radius);border-top-right-radius:var(--ff-accordion-border-radius)}.ff-accordion-container.ff-accordion-connected+.ff-accordion-container:not(.ff-accordion-connected),.ff-accordion-container.ff-accordion-connected:last-of-type{border-bottom-left-radius:var(--ff-accordion-border-radius);border-bottom-right-radius:var(--ff-accordion-border-radius)}.ff-accordion-container.ff-accordion-type-close+.ff-accordion-container.ff-accordion-connected{margin-top:var(--ff-accordion-margin-bottom)}.ff-el-group .ff-accordion-container{width:100%}@media screen and (max-width:768px){.ff-accordion-container .ff-accordion-header{padding:10px 12px}.ff-accordion-container .ff-accordion-header .ff-accordion-title{font-size:15px}.ff-accordion-container .ff-accordion-header .ff-accordion-description{font-size:13px}.ff-accordion-container .ff-accordion-content{padding:12px}}.fluentform-step .ff-accordion-container:last-child,.fluentform-step .ff-accordion-container:last-of-type{margin-bottom:0}.rtl .ff-accordion-container .ff-accordion-header .ff-accordion-description,.rtl .ff-accordion-container .ff-accordion-header .ff-accordion-title{width:calc(100% - 30px)}.rtl .ff-accordion-container .ff-accordion-header .ff-accordion-toggle{left:15px;right:auto}@media print{.ff-accordion-container{border:1px solid #ddd!important;margin-bottom:15px!important;page-break-inside:avoid}.ff-accordion-container .ff-accordion-content{display:block!important;height:auto!important;visibility:visible!important}.ff-accordion-container .ff-accordion-toggle{display:none}}.ff-tab-header{background-color:var(--ff-accordion-header-bg);border:1px solid var(--ff-accordion-border-color);border-radius:var(--ff-accordion-border-radius);cursor:pointer;display:block;padding:12px 20px;position:relative;transition:background-color var(--ff-accordion-transition-speed);width:-moz-fit-content;width:fit-content;z-index:1}.ff-tab-header.ff-tab-header-active,.ff-tab-header:hover{background-color:var(--ff-accordion-header-hover-bg)}.ff-tab-header.ff-tab-header-border-none{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:-1px}.ff-tab-header .ff-tab-title{color:var(--ff-accordion-title-color);font-size:16px;font-weight:600;margin:0;white-space:nowrap}.ff-tab-header .ff-tab-error-indicator{background-color:#dc3545;border-radius:50%;color:#fff;display:inline-block;font-size:12px;font-weight:700;height:20px;line-height:20px;margin-left:8px;position:absolute;right:8px;text-align:center;top:8px;vertical-align:middle;width:20px}.ff-tab-header:focus{outline:0}.ff-tab-header-group{display:flex;flex-wrap:wrap;gap:10px}.ff-accordion-mode-tabs{border:none}.ff-accordion-mode-tabs.ff-accordion-connected{border-radius:0}.ff-accordion-mode-tabs .ff-accordion-content,.ff-accordion-mode-tabs .ff-accordion-header,.ff-accordion-mode-tabs .ff-accordion-icon,.ff-accordion-mode-tabs .ff-accordion-toggle{display:none!important}.ff-tab-content{background-color:var(--ff-accordion-content-bg);border:1px solid var(--ff-accordion-border-color);border-radius:var(--ff-accordion-border-radius);border-top-left-radius:0;padding:20px}.ff-tab-content .ff-tab-description{color:var(--ff-accordion-description-color);font-size:14px;margin-bottom:15px}.ff-tab-content+.ff-accordion-type-start{margin-top:20px}.ff-tab-content:last-of-type{margin-bottom:var(--ff-accordion-margin-bottom)}@media screen and (max-width:768px){.ff-tab-header{margin-right:3px;padding:10px 15px}.ff-tab-header .ff-tab-title{font-size:14px}.ff-tab-content{padding:15px}.ff-tab-content .ff-tab-description{font-size:13px}}.rtl .ff-accordion-mode-tabs .ff-tab-header{margin-left:5px;margin-right:0}@media print{.ff-tab-header{display:none}.ff-tab-content{border:1px solid #ddd!important;margin-bottom:15px!important}}

MR SKB