From 9c47276f184f8ce6d2c276782fbe8f26b19219e2 Mon Sep 17 00:00:00 2001 From: Allan Date: Thu, 10 Oct 2024 11:32:03 +0100 Subject: [PATCH 1/5] - OpBlock, reduce margin --- src/style/_layout.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/style/_layout.scss b/src/style/_layout.scss index b97083a2605..bf772aa88f0 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -198,8 +198,7 @@ .opblock { - margin: 0 0 15px 0; - + margin: 0 0 10px 0; border: 1px solid $opblock-border-color; border-radius: 4px; box-shadow: 0 0 3px rgba($opblock-box-shadow-color,.19); From 1ffff3c598a16afd4be93bc9856a0d9264cd2c7c Mon Sep 17 00:00:00 2001 From: Allan Date: Thu, 10 Oct 2024 11:32:47 +0100 Subject: [PATCH 2/5] - OpBlock, remove boxshadow, it feels outdated in 2024 --- src/style/_layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/style/_layout.scss b/src/style/_layout.scss index bf772aa88f0..337d26232ff 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -201,7 +201,6 @@ margin: 0 0 10px 0; border: 1px solid $opblock-border-color; border-radius: 4px; - box-shadow: 0 0 3px rgba($opblock-box-shadow-color,.19); .tab-header { From b0f2f935c241eb129d2deb85a1c4d686b1a54f84 Mon Sep 17 00:00:00 2001 From: Allan Date: Thu, 10 Oct 2024 11:46:39 +0100 Subject: [PATCH 3/5] - Styling - add "external docs" as pil style button - add border and border radius to opblock-tag-section --- src/style/_layout.scss | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/style/_layout.scss b/src/style/_layout.scss index 337d26232ff..4ad42704c3d 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -11,6 +11,8 @@ { display: flex; flex-direction: column; + border: 1px solid #bfbfbf; + border-radius: 6px; } .try-out.btn-group { @@ -122,6 +124,26 @@ .info__externaldocs { text-align: right; + + small + { + a + { + display: inline-block; + border-radius: 4px; + color: #7878bd; + padding: 5px 10px; + border: 2px solid #9c9cdf; + transition: all .2s; + + &:hover + { + color: #f1f1f1; + background: #9c9cdf; + text-decoration: underline; + } + } + } } } From 2aafb5cbcb37cf9b1fb84999ab599a0a856288f3 Mon Sep 17 00:00:00 2001 From: Allan Date: Thu, 10 Oct 2024 11:52:41 +0100 Subject: [PATCH 4/5] - Styling - Add new variable for heading background - Add overflow to op container - Add margin bottom 15px to op container --- src/style/_layout.scss | 10 ++++++++-- src/style/_variables.scss | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/style/_layout.scss b/src/style/_layout.scss index 4ad42704c3d..ecf7a4bb436 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -13,6 +13,12 @@ flex-direction: column; border: 1px solid #bfbfbf; border-radius: 6px; + overflow: hidden; + margin-bottom: 15px; +} + +.opblock-tag-section .no-margin { + padding: 10px; } .try-out.btn-group { @@ -34,12 +40,12 @@ cursor: pointer; transition: all .2s; - + background: rgba($opblock-tag-background-color, .9); border-bottom: 1px solid rgba($opblock-tag-border-bottom-color, .3); &:hover { - background: rgba($opblock-tag-background-color-hover,.02); + background: rgba($opblock-tag-background-color, 1); } } diff --git a/src/style/_variables.scss b/src/style/_variables.scss index 6e5b9b746f6..26b9a42c784 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -124,6 +124,7 @@ $opblock-border-color: $black !default; $opblock-box-shadow-color: $black !default; $opblock-tag-border-bottom-color: $bright-gray !default; +$opblock-tag-background-color: $white !default; $opblock-tag-background-color-hover: $black !default; $opblock-tab-header-tab-item-active-h4-span-after-background-color: $gray-400 !default; From ed8b5363abc5ce7497dfc9155b8468beec3025dd Mon Sep 17 00:00:00 2001 From: Allan Date: Thu, 10 Oct 2024 12:01:06 +0100 Subject: [PATCH 5/5] - Styling - Add new gray variable, for use with border colors - fix border being applied to OpBlock when not open - Remove bottom margin from opblock-tag, makes it look better when closed --- src/style/_layout.scss | 33 +++++++++++++++++++-------------- src/style/_variables.scss | 3 ++- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/style/_layout.scss b/src/style/_layout.scss index ecf7a4bb436..4764b10ded8 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -7,18 +7,25 @@ box-sizing: border-box; } -.opblock-tag-section -{ - display: flex; - flex-direction: column; - border: 1px solid #bfbfbf; - border-radius: 6px; - overflow: hidden; - margin-bottom: 15px; -} +.opblock-tag-section { + display: flex; + flex-direction: column; + border: 1px solid $opblock-border-color; + border-radius: 6px; + overflow: hidden; + margin-bottom: 15px; + + &.is-open + { + .opblock-tag + { + border-bottom: 1px solid $opblock-border-color; + } + } -.opblock-tag-section .no-margin { - padding: 10px; + .no-margin { + padding: 10px; + } } .try-out.btn-group { @@ -41,7 +48,6 @@ cursor: pointer; transition: all .2s; background: rgba($opblock-tag-background-color, .9); - border-bottom: 1px solid rgba($opblock-tag-border-bottom-color, .3); &:hover { @@ -77,7 +83,7 @@ { font-size: 24px; - margin: 0 0 5px 0; + margin: 0; @include text_headline(); @@ -227,7 +233,6 @@ .opblock { margin: 0 0 10px 0; - border: 1px solid $opblock-border-color; border-radius: 4px; .tab-header diff --git a/src/style/_variables.scss b/src/style/_variables.scss index 26b9a42c784..ff4d753980d 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -12,6 +12,7 @@ $gray-700: lighten($black, 31.25%) !default; // #505050 $gray-800: lighten($black, 25%) !default; // #404040 $gray-900: lighten($black, 18.75%) !default; // #303030 +$tuned-gray: #bfbfbf !default; $cod-gray: #1b1b1b !default; $agate-gray: #333333 !default; $bright-gray: #3b4151 !default; @@ -120,7 +121,7 @@ $info-title-small-pre-font-color: $white !default; // Layout -$opblock-border-color: $black !default; +$opblock-border-color: $tuned-gray !default; $opblock-box-shadow-color: $black !default; $opblock-tag-border-bottom-color: $bright-gray !default;