From 9ebe29ba9459b5832d433efe44f83f72b9faa8aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Mon, 25 Sep 2023 11:26:22 +0200
Subject: [PATCH] added blue/info widgets

---
 src/bundle/Resources/public/scss/_inputs.scss | 25 +-----------------
 src/bundle/Resources/public/scss/_tabs.scss   | 10 ++++---
 .../Resources/public/scss/mixins/_inputs.scss | 26 +++++++++++++++++++
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
index 229b971db2..d4b10e38bd 100644
--- a/src/bundle/Resources/public/scss/_inputs.scss
+++ b/src/bundle/Resources/public/scss/_inputs.scss
@@ -23,21 +23,7 @@
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
     border: calculateRem(1px) solid $ibexa-color-dark-300;
 
-    &:hover {
-        border-color: $ibexa-color-primary;
-    }
-
-    &:focus,
-    &.ibexa-input--text.form-control:focus,
-    &.ibexa-input--date.form-control:focus {
-        border-color: $ibexa-color-primary;
-        box-shadow: 0 0 calculateRem(3px) 0 rgba($ibexa-color-primary, 0.75);
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        border-color: $ibexa-color-dark-200;
-    }
+    @include ibexa-input-hover-and-focus($ibexa-color-primary);
 
     &--text,
     &--textarea,
@@ -49,15 +35,6 @@
         border-radius: $ibexa-border-radius;
         position: relative;
 
-        &:focus,
-        &.form-control:focus {
-            color: $ibexa-color-dark;
-        }
-
-        &:hover:not(:disabled) {
-            border-color: $ibexa-color-primary;
-        }
-
         &:active:not(:disabled) {
             border-color: $ibexa-color-dark;
         }
diff --git a/src/bundle/Resources/public/scss/_tabs.scss b/src/bundle/Resources/public/scss/_tabs.scss
index 59b9e77459..6c5ad6e017 100644
--- a/src/bundle/Resources/public/scss/_tabs.scss
+++ b/src/bundle/Resources/public/scss/_tabs.scss
@@ -12,7 +12,6 @@
 
             &__tab {
                 height: calculateRem(40px);
-                padding: calculateRem(10px) calculateRem(24px);
                 border-radius: $ibexa-border-radius;
                 border: 0;
                 flex-basis: 100%;
@@ -55,13 +54,18 @@
             &__link {
                 text-overflow: ellipsis;
                 overflow: hidden;
-                display: inline-block;
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
                 line-height: calculateRem(20px);
+                border-radius: $ibexa-border-radius;
+                width: 100%;
+                height: 100%;
 
                 &.nav-link,
                 &.nav-link.active {
                     margin: 0;
-                    padding: 0;
+                    padding: 0 calculateRem(24px);
                     border: 0;
                 }
             }
diff --git a/src/bundle/Resources/public/scss/mixins/_inputs.scss b/src/bundle/Resources/public/scss/mixins/_inputs.scss
index c0a5b31322..b8f8c295c8 100644
--- a/src/bundle/Resources/public/scss/mixins/_inputs.scss
+++ b/src/bundle/Resources/public/scss/mixins/_inputs.scss
@@ -41,3 +41,29 @@
     flex-basis: 100%;
     margin: 0 0 calculateRem(10px) calculateRem(2px);
 }
+
+@mixin ibexa-input-hover-and-focus($color) {
+    &:hover {
+        border-color: $color;
+    }
+
+    &:focus,
+    &.ibexa-input--text.form-control:focus,
+    &.ibexa-input--date.form-control:focus {
+        border-color: $color;
+        box-shadow: 0 0 calculateRem(3px) 0 rgba($color, 0.75);
+    }
+
+    &--text,
+    &--textarea,
+    &--date {
+        &:focus,
+        &.form-control:focus {
+            color: $ibexa-color-dark;
+        }
+
+        &:hover:not(:disabled) {
+            border-color: $color;
+        }
+    }
+}