diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index c1e5c8c5c92..5a16b2f3388 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -2,6 +2,15 @@ $mobile-breakpoint: 700px; +:root { + --space-1: 0.25rem; + --space-2: calc(0.25rem * 2); + --space-3: calc(0.25rem * 3); + --space-4: calc(0.25rem * 4); + --space-5: calc(0.25rem * 5); + --space-6: calc(0.25rem * 6); +} + // Common admin styles .admin-main-nav { @@ -74,13 +83,6 @@ $mobile-breakpoint: 700px; } .admin-contents { - --space-1: 0.25rem; - --space-2: calc(0.25rem * 2); - --space-3: calc(0.25rem * 3); - --space-4: calc(0.25rem * 4); - --space-5: calc(0.25rem * 5); - --space-6: calc(0.25rem * 6); - position: relative; .nav-stacked { @media screen and (max-width: 700px) { @@ -1086,6 +1088,7 @@ a.inline-editable-field { @import "common/admin/plugins"; @import "common/admin/site-settings"; @import "common/admin/admin_config_area"; +@import "common/admin/admin_table"; @import "common/admin/admin_reports"; @import "common/admin/admin_report"; @import "common/admin/admin_report_counters"; diff --git a/app/assets/stylesheets/common/admin/admin_table.scss b/app/assets/stylesheets/common/admin/admin_table.scss new file mode 100644 index 00000000000..223903049fb --- /dev/null +++ b/app/assets/stylesheets/common/admin/admin_table.scss @@ -0,0 +1,107 @@ +.d-admin-table { + box-shadow: none; + + @include breakpoint("mobile-extra-large") { + border-collapse: collapse; + margin-bottom: var(--space-3); + } + + thead { + @include breakpoint("mobile-extra-large") { + display: none; + } + } + + th { + color: var(--primary-high); + } + + .d-admin-row__content { + position: relative; + padding: var(--space-1) 0; + + @include breakpoint("mobile-extra-large") { + display: block; + margin-bottom: var(--space-3); + box-shadow: var(--shadow-card); + } + } + + td { + border-top: none; + + @include breakpoint("mobile-extra-large") { + display: block; + border-top: 1px solid var(--primary-very-low); + } + + &:first-child, + &:last-child { + @include breakpoint("mobile-extra-large") { + border-top: 0; + } + } + } +} + +.d-admin-row__overview { + &-name { + font-weight: 700; + max-width: 80%; + } + + &-author { + font-size: var(--font-down-2); + padding: 0 0 var(--space-1) 0; + } + + &-about { + .d-icon { + font-size: var(--font-down-3); + margin-bottom: 0.1em; + } + } +} + +td.d-admin-row__detail { + @include breakpoint("mobile-extra-large") { + display: flex; + justify-content: space-between; + border-top: 1px solid var(--primary-low); + } +} + +.d-admin-row__toggle { + .d-toggle-switch { + display: inline-block; + } +} + +.d-admin-row__control { + &-options { + text-align: right; + display: flex; + flex-direction: row; + gap: 0.5em; + justify-content: flex-end; + + .fk-d-menu__trigger { + font-size: var(--font-down-1); + } + } + + @include breakpoint("mobile-extra-large") { + position: absolute; + top: 0; + right: 0; + } +} + +.d-admin-row__mobile-label { + display: none; + + @include breakpoint("mobile-extra-large") { + display: inline-flex; + color: var(--secondary-medium); + } +}