[SDESK-6779] and [SDESK-6786] (#4176)

superdesk · Feb 1, 2023 · 2e03758 · 2e03758
1 parent 5c9a2ac
commit 2e03758
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 51 deletions.
diff --git a/styles/sass/forms.scss b/styles/sass/forms.scss
@@ -1001,6 +1001,7 @@ input, textarea, .dropdown__toggle {
         padding: 0 0.8rem;
         height: 32px;
         font-size: 1.4rem;
+        color: var(--color-text);
         &:hover {
             border-color: var(--color-input-border-hover) !important;
             background-color: var(--color-input-bg--hover) !important;
@@ -1010,20 +1011,6 @@ input, textarea, .dropdown__toggle {
             border-color: var(--sd-colour-interactive) !important;
             background-color: var(--sd-colour-interactive--alpha-20) !important;
         }
-
-        // /* alt is line input for dark background */
-        // &.line-input--alt {
-        //     color: $white;
-        //     border-bottom: 1px solid rgba(255,255,255,0.2)!important;
-        //     &:hover {
-        //         border-color: rgba(255,255,255,0.5) !important;
-        //     }
-        //     &:focus {
-        //         box-shadow: 0 1px 0 0 rgba(255,255,255,0.7) !important;
-        //         border-color: rgba(255,255,255,0.7) !important;
-        //         background-color: transparent !important;
-        //     }
-        // }
     }
 }
 textarea {
@@ -1035,9 +1022,25 @@ textarea {
 .dropdown__toggle {
     &.line-input {
         position: relative;
-        padding: 0 15px 0 0 !important;
+        padding: 0 1.6rem 0 0.8rem !important;
         line-height: 24px;
-        text-align: left;
+        text-align: start;
+        display: flex;
+        align-items: center;
+
+        .dropdown__caret {
+            margin-inline-start: auto;
+            margin-block-start: 0;
+        }
+    }
+}
+
+.sd-terms--boxed {
+    .dropdown {
+        width: 100%;
+        .dropdown__menu {
+            width: 100%;
+        }
     }
 }
 
@@ -1093,10 +1096,10 @@ textarea {
             transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
             padding: 0 1.6rem 0 0.8rem !important;
             height: 3.2rem;
-            border-radius: 2px 2px 0 0;
-            font-size: $baseFontSize;
+            border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0 !important;
+            font-size: 1.4rem;
+            color: var(--color-text);
             &:hover {
-
                 border-color: var(--color-input-border-hover);
                 background-color: var(--color-input-bg--hover);
             }

diff --git a/styles/sass/sf-additional.scss b/styles/sass/sf-additional.scss
@@ -199,8 +199,7 @@
     flex-grow: 0;
     .search-handler {
         min-width: 48px;
-        //height: $nav-height;
-        padding: 10px 10px 10px 14px;
+        padding: 8px 10px 8px 14px;
         background: none;
         display: flex;
         white-space: nowrap;
@@ -570,25 +569,26 @@
         width: 100%;
         transition: border linear 0.2s, box-shadow linear 0.2s, background-color linear 0.2s;
         border: none;
-        border-radius: 2px;
-        background-color: rgba(0, 0, 0, 0.05);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-        font-size: 1.3rem;
-        color: inherit;
+        border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
+        background-color: var(--color-input-bg);
+        border-bottom: 1px solid var(--color-input-border);
+        font-size: 1.4rem;
         padding-left: 1rem;
+        color: var(--color-text);
         &:hover {
-            border-bottom-color: rgba(0, 0, 0, 0.3);
-            background-color: rgba(0, 0, 0, 0.1);
+            border-bottom-color: var(--color-input-border-hover);
+            background-color: var(--color-input-bg--hover);
         }
         &:focus {
-            box-shadow: 0 1px 0 0 $sd-blue;
-            border-color: $sd-blue;
+            box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
+            background-color: var(--sd-colour-interactive--alpha-20);
         }
     }
 
     .item-list {
         width: 100%;
-        color: $sd-text;
+        color: var(--color-text);
     }
 
     .pills-list {
@@ -610,25 +610,6 @@
     }
 }
 
-[class^="--dark-ui"],
-[class*="--dark-ui"] {
-    [sd-timezone] {
-        .input-term input {
-            background-color: rgba(255, 255, 255, 0.05);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            &:hover {
-                border-bottom-color: rgba(255, 255, 255, 0.4);
-                background-color: rgba(255, 255, 255, 0.1);
-            }
-            &:focus {
-                box-shadow: 0 1px 0 0 $sd-blue;
-                border-color: $sd-blue;
-            }
-        }
-    }
-}
-
-
 // Datepicker - wrapper for angular ui datepicker
 // ---------------------------------------------
 .datepicker-input, .timepicker-input {
@@ -2363,4 +2344,14 @@ sd-multi-image-edit {
         justify-content: flex-end;
         gap: var(--gap--small);
     }
-}
+}
+
+.modal.modal--tabs .modal__body-footer {
+    display: flex;
+}
+
+.modal--fullscreen {
+    .modal__header {
+        border-radius: 0 !important;
+    }
+}