@knapsack/app
Version:
Build Design Systems on top of knapsack, by Basalt
1 lines • 4.48 kB
CSS
.ks-template{width:100%;position:relative}.ks-template__spinner{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.ks-template__iframe{width:1px;min-width:100%;overflow:auto;vertical-align:middle;border:none}.ks-template__iframe-wrapper,.ks-template__resizable{width:100%;max-width:100%;position:relative}.ks-template__resizable{border:1px solid var(--c-frame);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;resize:horizontal;overflow:hidden}.ks-template__resizable__size-reading{font-size:var(--font-size-s);color:var(--c-text-subdued);position:absolute;bottom:0;right:var(--space-m)}.ks-template-thumbnail{background-color:var(--c-bg);position:relative;overflow:hidden}.ks-template-thumbnail__overlay{position:absolute;top:0;bottom:0;left:0;right:0;z-index:5;cursor:pointer}.ks-template-thumbnail__template{position:absolute;top:50%;left:50%}.ks-template-thumbnail--empty{color:var(--c-text-subdued);font-size:var(--font-size-s);text-align:center;padding:var(--space-s)}.ks-pattern-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-right:calc(var(--space-m)*-1)}.ks-pattern-grid__item{margin-bottom:var(--space-m);margin-right:var(--space-m)}.pattern-table__item-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pattern-table__item-header__title{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis}.pattern-table__item-header__statuses{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pattern-table__item-header__statuses>div{margin-left:var(--space-xs)}.pattern-table__content{display:-webkit-box;display:-ms-flexbox;display:flex}.pattern-table__content>div:first-child{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-right:var(--space-l)}.pattern-table__content>div:last-child{-webkit-box-flex:2;-ms-flex:2;flex:2}.pattern-table__content__description{margin-bottom:var(--space-xs)}.pattern-table__content__thumbnail{border:1px solid var(--c-frame);border-radius:var(--space-xs);overflow:hidden;display:inline-block;vertical-align:top}.pattern-table__content__language-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;margin-right:var(--space-xs)}.pattern-table__content__language-icon svg{max-width:var(--space-l);max-height:var(--space-l)}.pattern-table__content__language-title{display:inline-block;vertical-align:middle;line-height:var(--space-l)}.ks-inline-edit__controls{line-height:1rem;vertical-align:middle;padding-left:var(--space-xs);display:none}.ks-inline-edit--visible .ks-inline-edit__text{vertical-align:middle}.ks-inline-edit--visible .ks-inline-edit__controls{display:inline-block}.ks-inline-edit--editing .ks-inline-edit__text{border-bottom:solid var(--space-xxxs) var(--c-active);outline:none}.ks-inline-edit--editing .ks-inline-edit__controls{display:inline-block}.ks-inline-edit--editing .ks-inline-edit__controls button+button{margin-left:var(--space-xxs)}.ks-inline-edit--no-wrap{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%}.ks-inline-edit--no-wrap .ks-inline-edit__text{-ms-flex-negative:1;flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ks-inline-edit--no-wrap .ks-inline-edit__controls{min-width:var(--space-l);white-space:nowrap}.ks-page-header{padding:var(--space-xl) var(--space-xl) var(--space-l);border-bottom:1px solid var(--c-frame)}.ks-page-header--flush{padding:0;border-bottom:none}.ks-page-header--constrained .ks-page-header__content-wrap{max-width:var(--content-page-width);margin:0 auto}.ks-page-header__section{color:var(--c-text-subdued);margin-bottom:var(--space-xs)}.ks-page-header__title{margin-top:0}.ks-page-header__description{margin-top:var(--space-xs);max-width:var(--content-page-width)}.pattern-list-page__toggles{position:absolute;top:var(--space-xl);right:var(--space-xl)}.pattern-list-page__content{padding:var(--space-xl)}