­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .cx-vui-component.cx-vui-component--check-group { padding: 0; display: block; .cx-vui-checkgroup { max-width: 780px; column-width: 250px; font-size: 15px; line-height: 23px; .cx-vui-checkbox-wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; .cx-vui-checkbox__label { text-overflow: ellipsis; } } } } .cbw-pluigns, .cbw-select-plugins, .cbw-install-plugins { flex: 1 1 100%; display: flex; flex-direction: column; .cbw-block { flex: 1 1 auto; justify-content: flex-start; } } .cbw-plugins-group { padding: 35px 40px 35px 40px; position: relative; border: 1px solid $color__border-in-panel; margin: 0 0 20px; background: #fff; &:first-child { margin-top: 28px; } &__heading { font-size: 15px; line-height: 23px; position: relative; cursor: pointer; &:before { content: ""; position: absolute; @include start(0); top: 4px; width: 14px; height: 14px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuMzI5MTEgLTUuODA5NzRlLTA4TDcgNkwxLjMyOTExIDEyTC02LjE0NjkxZS0wOCAxMC41OTM4TDQuMzQxNzcgNkwtNi4xNDY5MmUtMDggMS40MDYyNUwxLjMyOTExIC01LjgwOTc0ZS0wOFoiIGZpbGw9IiM3QjdFODEiLz48L3N2Zz4=); background-repeat: no-repeat; background-position: center center; @include rtl_inverse(); } &--active { &:before { transform: rotate( 90deg ); } } &-desc { padding: 6px 0 0 0; font-size: 15px; line-height: 140%; } &-title { font-weight: 500; font-size: 18px; line-height: 140%; color: $color__heading; @include padding( 0, 0, 0, 20px ); } } &__body { padding: 15px 0 0 0; } } .cbw-plugin { border: 1px solid $color__border-in-panel; border-radius: 4px; margin: 0 0 10px; background: #fff; &--expanded { background: $color__bg-canvas; border-color: $color__bg-canvas; } &--success { color: $color__success; } &--error { color: $color__error; } &__heading { padding: 12px 15px; position: relative; display: flex; align-items: center; cursor: pointer; &-icon { font-size: 0; line-height: 0; @include margin(-1px, 10px, 0, 0); .spin-icon { animation: spin 1200ms infinite linear; } } &-label { font-weight: 500; font-size: 15px; line-height: 23px; color: $color__heading; display: flex; justify-content: space-between; align-items: center; flex: 1 1 auto; .cbw-plugin--success & { color: $color__success; } .cbw-plugin--error & { color: $color__error; } .cbw-plugin--expanded & { svg { transform: scale( 1, -1 ); } } } } &__log { font-size: 15px; line-height: 23px; @include padding(5px, 30px, 22px, 41px); overflow: hidden; text-overflow: ellipsis; ul { li { overflow: hidden; text-overflow: ellipsis; } } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } } .cx-vui-panel { &.plugins-page:not(.install-step) { background-image: url( '../img/plugins-cover.png' ); } }