added blue/info widgets

ibexa · Oct 17, 2023 · 9ebe29b · 9ebe29b
1 parent 93ba0a2
commit 9ebe29b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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;
+        }
+    }
+}