@knapsack/app
Version:
Build Design Systems on top of knapsack, by Basalt
1 lines • 5.68 kB
CSS
.ks-image-slice__dropzone{background-color:var(--c-active-highlight);border:var(--space-xxs) dashed var(--c-active);text-align:center;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--space-m)}.ks-image-slice__dropzone p{font-size:var(--font-size-l)}.ks-image-slice__no-images-msg{background-color:var(--c-shade);border:var(--space-xxs) dashed var(--c-frame);color:var(--c-text-subdued);text-align:center;padding:var(--space-xl) var(--space-m)}.ks-image-slice__no-images-msg__drag-active{opacity:0}.ks-image-slice__edit-warning{margin-bottom:var(--space-m)}.ks-image-slice__image__img-wrapper{position:relative;display:inline-block;vertical-align:middle}.ks-image-slice__image__img-wrapper--can-edit:after{background-color:var(--c-active-highlight);content:" ";position:absolute;top:0;right:0;bottom:0;left:0;min-height:var(--space-xxl);min-width:var(--space-xxxl);opacity:0}.ks-image-slice__image__img-wrapper--can-edit:hover .ks-image-slice__image__controls,.ks-image-slice__image__img-wrapper--can-edit:hover:after{opacity:1}.ks-image-slice__image img{max-width:100%}.ks-image-slice__image__controls{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;min-height:var(--space-xxl);min-width:var(--space-xxxl);opacity:0}.ks-image-slice__image__controls__handle{color:var(--c-active);cursor:-webkit-grab;cursor:grab;position:absolute;top:0;left:var(--space-xxxs)}.ks-image-slice__image__controls__delete-btn{position:absolute;top:0;right:var(--space-xxs)}.ks-image-slice__image__controls__open-external{position:absolute;bottom:0;right:var(--space-xxs);z-index:1}.ks-image-slice__image__controls__caption{background-color:var(--c-bg);position:absolute;right:0;bottom:0;left:0;padding:var(--space-xxxs) var(--space-xxs);opacity:.8}.markdown-slice .editor-toolbar:not(.fullscreen){background-color:var(--c-bg);border-color:var(--c-active);border-top-left-radius:var(--space-xxs);border-top-right-radius:var(--space-xxs);position:absolute;left:calc(var(--space-xxs)*-1);bottom:calc(100% + var(--space-xxs));z-index:2;display:none}.ks-custom-slice--edit-ui-visible .markdown-slice .editor-toolbar:not(.fullscreen){display:block}.markdown-slice .CodeMirror{padding:0;border:none}.markdown-slice .CodeMirror-line{padding-left:0;padding-right:0}.ks-figma-slice iframe{vertical-align:middle}.ks-figma-slice__empty-state{background-color:var(--c-shade);color:var(--c-text-subdued);padding:var(--space-m)}.ks-figma-slice__empty-state__note{font-style:italic;font-size:var(--font-size-s)}.pattern-template-slice__empty-state{background-color:var(--c-shade);color:var(--c-text-subdued);padding:var(--space-m)}.ks-custom-slice--dragging .ks-custom-slice__content-wrapper{position:relative}.ks-custom-slice--dragging .ks-custom-slice__content-wrapper:after{background-color:var(--c-active-highlight);content:" ";position:absolute;top:0;right:0;bottom:0;left:0}.ks-custom-slice--dragging .ks-custom-slice__content-wrapper>*{opacity:0}.ks-custom-slice__content-wrapper{max-width:var(--content-page-width);margin:0 auto var(--space-l);position:relative}.ks-custom-slice__controls{border:1px solid var(--c-active);position:absolute;top:calc(var(--space-xxs)*-1);right:calc(var(--space-xxs)*-1);left:calc(var(--space-xxs)*-1);bottom:calc(var(--space-xxs)*-1);opacity:0}.ks-custom-slice--edit-ui-visible .ks-custom-slice__controls{opacity:1}.ks-custom-slice__left-controls{width:var(--space-l);position:absolute;top:-1px;right:100%;z-index:4}.ks-custom-slice__left-controls,.ks-custom-slice__move-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ks-custom-slice__move-controls{border:1px solid var(--c-active);border-radius:var(--radius-m) 0 0 var(--radius-m);padding:var(--space-xxxs) 0}.ks-custom-slice__move-controls__handle{color:var(--c-active)}.ks-custom-slice__move-controls__handle:hover{cursor:-webkit-grab;cursor:grab}.ks-custom-slice--dragging .ks-custom-slice__move-controls__handle{cursor:-webkit-grabbing;cursor:grabbing}.ks-custom-slice__move-controls__move{line-height:1}.ks-custom-slice__add-btn{margin-top:var(--space-xxxs)}.ks-custom-slice__add-btn__select{width:calc(var(--space-xxxl)*2)}.ks-custom-slice__slice-actions{position:absolute;top:calc(var(--space-l)/2*-1);right:var(--space-m);z-index:4;white-space:nowrap}.ks-custom-slice__slice-actions>div{background-color:var(--c-bg);border:1px solid var(--c-active);border-radius:var(--radius-m);width:var(--space-l);height:var(--space-l);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ks-custom-slice__slice-actions>div+div{margin-left:var(--space-xs)}.ks-custom-slice__content{position:relative}.ks-custom-slice__missing{border:var(--space-xxs) solid var(--c-error);max-width:var(--content-page-width);margin:0 auto var(--space-l);padding:var(--space-xl) var(--space-l)}.ks-custom-slice__missing p{display:inline-block;vertical-align:middle}.ks-custom-slice-collection{padding:var(--space-l) var(--space-xl)}.ks-custom-slice-collection__item{position:relative}.ks-custom-slice-collection__scroll-anchor{position:absolute;top:calc(var(--space-xxl)*-1)}.ks-custom-slice-collection__add-slice{max-width:var(--content-page-width);margin:0 auto var(--space-xxxl)}