// Styles for admin/api table.web-hooks.grid { td.delivery-status { div { display: flex; align-items: center; } .d-icon { margin-right: 0.25em; } } td.payload-url { word-wrap: break-word; max-width: 55vw; } td.controls { display: flex; button { margin-left: 0.25em; } } @media screen and (min-width: 550px) { tbody { tr { grid-template-columns: 0.5fr repeat(2, 1fr) 0.5fr; } td.controls { text-align: right; } } } @include breakpoint(mobile-extra-large) { tbody { tr { grid-template-columns: 0.5fr 1fr; } } td.controls { grid-row: 2; } } } // Api keys table.api-keys { margin-bottom: 0.25em; .key-controls { text-align: right; } tr.revoked { color: var(--primary-medium); } @include breakpoint(tablet) { tr { grid-template-columns: 0.25fr 1fr 1fr; } td.key { grid-row: 1; grid-column-start: 1; grid-column-end: 1; max-width: 100%; } td.key-description { grid-row: 1; grid-column-start: 2; grid-column-end: -1; max-width: 100%; } td.key-user { grid-row: 2; grid-column-start: 1; } td.key-controls { grid-row: 2; grid-column-end: -1; grid-column-start: 2; text-align: right; .btn { margin-bottom: 0.25em; } } } } .admin-api-keys { h2 { margin-bottom: 10px; } .api-key-new { .form-element, .form-element-desc { &.input-area { width: 100%; .value-list, .select-kit, input[type="text"], input[type="text"].filter-input { width: 100%; margin: 0; } @include breakpoint(mobile-extra-large, min-width) { width: 75%; .value-list, .select-kit, input[type="text"] { width: 50%; } } } &.label-area { label { margin: 0.5em 1em 0 0; } @include breakpoint(mobile-extra-large, min-width) { width: 25%; } } } } .api-key-show { .form-element, .form-element-desc { &.input-area { width: 75%; @include breakpoint(mobile-medium) { width: 100%; } .value-list, .select-kit, input[type="text"] { width: 50%; margin: 0; } } &.label-area { width: 25%; label { margin-right: 1em; } } } } .api-key { padding: 10px; margin-bottom: 10px; .form-element, .form-element-desc { float: left; padding: 0.5em 0; &.input-area { input[type="checkbox"] { margin-top: 0.5em; } .ac-wrap { width: 50% !important; } } &.label-area { label { text-align: left; font-weight: bold; } } } .controls { float: right; text-align: left; width: 50%; } .scopes-title { margin-top: 20px; } } .scopes-table.grid { margin: 20px 0; tr { grid-template-columns: repeat(4, 1fr); input { margin-bottom: 2px; } @include breakpoint(mobile-large) { grid-template-columns: repeat(2, 1fr); grid-row-gap: 0.5em; &.scope-resource-name { grid-row-gap: 0; } } } .scope-resource-name { font-size: var(--font-up-1); } .scope-tooltip { font-size: var(--font-down-1); } .scope-name { font-weight: bold; font-size: var(--font-0); display: inline; } } } // Webhook .web-hook-container { .tip.good:empty { display: none; } input { max-width: calc(100% - 10px); } .select-kit, .select-kit.multi-select { width: 100%; max-width: 360px; } .event-selector { display: flex; flex-wrap: wrap; margin: 0.5em 0; .hook-event { margin-bottom: 0.5em; @include breakpoint(mobile-extra-large) { width: 100%; } } } > p { padding-bottom: 10px; border-bottom: var(--primary-low) 1px solid; } .filters { border-bottom: var(--primary-low) 1px solid; .filter { margin-bottom: 1em; } label .d-icon { margin-right: 0.25em; } } .instructions { margin-top: 5px; } .subscription-choice { margin-bottom: 10px; } } .web-hook-direction { a, button { margin-right: 10px; } } .web-hook-events { li { padding: 2px 0; } .col { display: inline-block; padding-top: 6px; vertical-align: top; overflow-y: auto; overflow-x: hidden; } .col.first { width: 90px; } .col.event-id { width: 90px; } .col.timestamp { width: 180px; } .col.completion { width: 250px; } .col.actions { width: 455px; padding-top: 0; a { text-decoration: underline; } } .col.heading.actions { padding: 4px 0; } .details { display: block; margin-top: 10px; } label { font-size: var(--font-0); } &.content-list { width: 100%; } } .web-hook-events-listing { margin-top: 15px; .alert { margin: 15px 0 0 0; } } .hook-event { display: inline-block; width: 40%; margin-left: 20px; label { display: inline-block; } p { margin: 0 0 5px 25px; } }