diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index 49497e04d..db55786ac 100644 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -93,6 +93,8 @@ .cms-menu-list { margin: $grid-y * 1.5 0 0 0; + list-style-type: none; + padding-left: 0; } a { @@ -106,7 +108,8 @@ position: relative !important; top:auto !important; left:auto !important; - box-shadow: inset #C1C7CC -1px 0 0 + box-shadow: inset #C1C7CC -1px 0 0; + min-height: calc(100% - 104px); } &.collapsed { @@ -169,14 +172,14 @@ } .cms-panel-toggle { - height: 52px; + height: 53px; a, a.toggle-expand { float: right; width: 50%; - padding-top: 16px; - padding-bottom: 16px; + padding-top: 13px; + padding-bottom: 13px; } } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 504d0d2c7..6b96373ce 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -172,8 +172,8 @@ body.cms { .cms-content-header.north { &.collapsed { .cms-content-header-info { - width: 40px; - text-align: right; + width: 60px; + text-align: center; padding-left: 8px; padding-right: 8px; } @@ -184,7 +184,7 @@ body.cms { } .cms-content-header-nav { - margin-left: 40px; + margin-left: 61px; } } } @@ -223,7 +223,7 @@ body.cms { .breadcrumbs-wrapper { float: left; padding-top: $grid-y - 1; - padding-left: $grid-x*1.5; + padding-left: $grid-x*2; } .cms-content-header-tabs { @@ -247,10 +247,6 @@ body.cms { padding-top: 0; overflow-x: hidden; } - - .cms-panel-toggle.south { - box-shadow: inset 0 1px 0 0 $color-light-separator; - } } } @@ -603,6 +599,35 @@ body.cms { } } +/** + * SilverStripe 4 tabs. + * Tab styles built on top of Bootstrap 4 tab functionality + */ + +.nav-tabs { + margin-bottom: 20px; + + .nav-item { + + } + + .nav-link { + margin-right: 4px; + color: $body-color-light; + + &:hover { + text-decoration: none; + background: transparent; + } + + &.active, + &.active:hover { + border-bottom: 2px solid $body-color; + color: $body-color; + } + } +} + /** * Primary styles which sit on top of screen, with different tab colors. * TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass() @@ -1316,14 +1341,14 @@ body.cms { .Actions { display: inline-block; + padding: 0; + margin-left: -4px; + min-height: auto; // Context specific rules for when batch actions are in the SiteTree panel. .cms-content-tools & { width: 16%; } - - padding: 0; - margin-left: -4px; } .action { @@ -1515,16 +1540,17 @@ form.member-profile-form { .cms-panel-toggle { &.south { - box-shadow: inset #C1C7CC -1px 1px 0; + box-shadow: inset $color-light-separator 0 1px 0; // #C1C7CC position: absolute; bottom: 0; width: 100%; + min-height: 53px; } a { display: block; text-align: right; - padding: $grid-y * 2 0; + padding: 13px 0; width: 100%; text-decoration: none; line-height: 20px; @@ -1538,7 +1564,7 @@ form.member-profile-form { } &.toggle-expand { - width: 40px; // will set the collapsed width + width: 60px; // will set the collapsed width display: none; } } @@ -1563,7 +1589,7 @@ form.member-profile-form { &#cms-content-tools-CMSPageEditController { .cms-panel-content-collapsed { - width: 40px; + width: 60px; display: none; // Avoids FOUC h2, h3 { @@ -1583,14 +1609,14 @@ form.member-profile-form { } .cms-panel-content-collapsed { - width: 40px; + width: 60px; display: none; // Avoids FOUC height: calc(100% - 52px); overflow: hidden; h2, h3 { border-bottom: 0; - margin-left: $grid-y; + margin-left: 18px; transform-origin: bottom right; transform: rotate(270deg); }