.viz-editor { height: 100%; } .viz-picker { } .viz-picker__search { flex-grow: 0; } .viz-picker__items { flex-grow: 1; display: flex; flex-wrap: wrap; } .viz-picker__item { background: $card-background; box-shadow: $card-shadow; border-radius: 3px; padding: $spacer; height: 60px; width: 157px; text-align: center; margin: 0 7px 7px 0; cursor: pointer; display: flex; flex-shrink: 0; border: 1px solid transparent; @include left-brand-border; &:hover { background: $card-background-hover; } &--selected { .viz-picker__item-name { color: $text-color; } } } .viz-picker__item-name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: $font-size-h5; display: flex; flex-direction: column; align-self: center; padding-left: $spacer; font-size: $font-size-md; color: $text-muted; } .viz-picker__item-img { height: 100%; } .panel-editor-container { display: flex; flex-direction: column; height: 100%; } .panel-editor-container__panel { height: 35%; } .panel-editor-container__editor { height: 65%; margin-top: $panel-margin*2; display: flex; flex-direction: row; } .panel-editor__content { flex-grow: 1; min-width: 0; height: 100%; padding: 0px 0 20px 20px; max-width: 1100px; } .panel-editor__aside { padding: 18px 0 0 20px; background: $panel-bg; display: flex; flex-direction: column; } .panel-editor__aside-header { color: $text-muted; font-size: $font-size-h3; padding-right: 50px; white-space: nowrap; margin-bottom: $spacer; i { font-size: 25px; position: relative; top: 1px; padding-right: 5px; } } .viz-picker__bar { display: flex; margin-bottom: $spacer; }