@primer/css/dist/box.css

The CSS implementation of GitHub's Primer Design System

.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.btn-octicon:is(.Box--condensed .Box-btn-octicon){line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium)}.Box--spacious .Box-body,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious)}.btn-octicon:is(.Box--spacious .Box-btn-octicon){margin:calc(var(--stack-gap-spacious)*-1);padding:var(--stack-padding-spacious)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious)}.Box-header{background-color:var(--bgColor-muted);border-color:var(--borderColor-default);border-style:solid;border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium);border-width:var(--borderWidth-thin);margin:calc(var(--borderWidth-thin)*-1) calc(var(--borderWidth-thin)*-1) 0;padding:var(--stack-padding-normal)}.Box-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}.Box-body{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);padding:var(--stack-padding-normal)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium);border-bottom-right-radius:var(--borderRadius-medium);margin-bottom:calc(var(--borderWidth-thin)*-1)}.Box-row{border-top:var(--borderWidth-thin) solid var(--borderColor-muted);list-style-type:none;margin-top:calc(var(--borderWidth-thin)*-1);padding:var(--stack-padding-normal)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium);border-bottom-right-radius:var(--borderRadius-medium)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted)}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted)}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted)}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted)}@media(min-width: 768px){.Box-row-link{color:var(--fgColor-default)}.Box-row-link,.Box-row-link:hover{-webkit-text-decoration:none;text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent)}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium);border-top:var(--borderWidth-thin) solid var(--borderColor-default);margin-top:calc(var(--borderWidth-thin)*-1);padding:var(--stack-padding-normal)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted)}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted)}.Box--danger,:is(.Box--danger .Box-body):last-of-type,:is(.Box--danger .Box-row):first-of-type{border-color:var(--borderColor-danger-emphasis)}.Box-header--blue{background-color:var(--bgColor-accent-muted);border-color:var(--borderColor-accent-muted)}.Box-row--yellow{background-color:var(--bgColor-attention-muted)}.Box-row--blue{background-color:var(--bgColor-accent-muted)}.Box-row--gray{background-color:var(--bgColor-muted)}.Box-btn-octicon.btn-octicon{line-height:var(--text-title-lineHeight-large);margin:calc(var(--controlStack-small-gap-spacious)*-1);padding:var(--control-medium-paddingInline-spacious)}.Box--overlay{width:448px;margin-right:auto;margin-left:auto;background-color:var(--bgColor-default, var(--color-canvas-default));background-clip:padding-box;border-color:var(--borderColor-default, var(--color-border-default));box-shadow:0 0 18px rgba(0,0,0,.4)}.Box--overlay .Box-header{margin:0;border-width:0;border-bottom-width:1px;border-top-left-radius:6px;border-top-right-radius:6px}.Box-overlay--narrow{width:320px}.Box-overlay--wide{width:640px}.Box-body.scrollable-overlay{max-height:400px;overflow-y:scroll}.Box-body .help{padding-top:var(--base-size-8);margin:0;color:var(--fgColor-muted, var(--color-fg-muted));text-align:center}
/*# sourceMappingURL=box.css.map */