Merge pull request #250 from MITLibraries/use-101

USE-101: Style tweaks to SuggestionPanel and refactor of SuggestionPanel variables

Author: djanelle-mit

app/assets/stylesheets/partials/_effects.scss

@@ -4,16 +4,26 @@
 
 // ANIMATION
 
-@mixin text-decoration-animation( $speed ) {
-    transition: text-decoration #{$speed} ease;
+@mixin text-decoration-animation {
+    transition: text-decoration 150ms ease;
     text-decoration: none; // Included as fallback if text-decoration-color isn't supported
     text-decoration: underline transparent;
 }
 
+@mixin hover-transition {
+    transition: all .25s ease-in-out 0s;
+}
+
 // OUTLINE
 
-@mixin set-focus-outline() {
+@mixin set-focus-outline-dark() {
     *:focus-visible {
         outline: 2px solid $color-focus-dark;
     }
 }
+
+@mixin set-focus-outline() {
+    *:focus-visible {
+        outline: 2px solid $color-focus;
+    }
+}

app/assets/stylesheets/partials/_header.scss

@@ -1,5 +1,5 @@
 .institute-bar, .libraries-header {
-    @include set-focus-outline();
+    @include set-focus-outline-dark();
 }
 
 .institute-bar {
@@ -23,7 +23,7 @@
             color: $color-gray-300;
             font-size: 1.5rem;
             padding-top: 2px;
-            @include text-decoration-animation(150ms);
+            @include text-decoration-animation;
 
             &:hover {
                 text-decoration: underline;
@@ -61,7 +61,7 @@
     .platform-name {
         color: $color-white;
         font-size: 2.4rem;        
-        @include text-decoration-animation(150ms);
+        @include text-decoration-animation;
 
         &:hover {
             text-decoration: underline;
@@ -80,7 +80,7 @@
             color: $color-white;
             font-size: 1.8rem;
             font-weight: $fw-medium;
-            @include text-decoration-animation(150ms);
+            @include text-decoration-animation;
 
             &:hover {
                 text-decoration: underline;

app/assets/stylesheets/partials/_layouts.scss

@@ -39,7 +39,7 @@
 // FOOTER STYLES
 
 .wrap-outer-footer, .wrap-outer-footer-institute {
-  @include set-focus-outline();
+  @include set-focus-outline-dark();
 }
 
 

app/assets/stylesheets/partials/_suggestion-panel.scss

@@ -1,30 +1,9 @@
-/* Color Variables */
+#hint {padding-top: 24px;} //Temporary spacing above panel until we can revisit entire page layout
 
-// Core
-$blue-500: #0000FF;
-
-$purple-700: #990099;
-
-$white: #fff;
-$gray-100: #F2F2F2;
-$black: #111;
-
-@mixin focus-outline {
-    &:focus {
-        outline: 3px solid $blue-500;
-    }    
-}
-
-@mixin hover-transition {
-    transition: all .25s ease-in-out 0s;
-}
-
-// Semantic
-$color-suggestion-border: $purple-700;
-$color-suggestion-accent-text: $purple-700;
-
-/* Suggestion Panel */
 .mitlib-suggestion-panel {
+
+    @include set-focus-outline;
+    
     border: 4px solid $color-suggestion-border;
 
     display: flex;
@@ -35,24 +14,26 @@ $color-suggestion-accent-text: $purple-700;
 
     .panel-type {
         color: $color-suggestion-accent-text;
-        font-size: 14px;
+        font-size: 1.4rem;
         font-weight: 600;
         margin-bottom: 8px;
     }
 
     h3 {
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 1.25;
+        font-size: 2rem;
         margin-bottom: 8px;
     }
 
     p {
-        font-size: 16px;
+        font-size: 1.6rem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
     ul.metadata {
-        font-size: 14px;
+        font-size: 1.4rem;
         list-style: none inside;
         padding-left: 0;
         margin-bottom: 20px;
@@ -69,25 +50,23 @@ $color-suggestion-accent-text: $purple-700;
         top: 0;
         right: 0;
 
-        background-color: $white;
+        background-color: $color-white;
         border: none;
-        color: $black;
+        color: $color-text-primary;
         cursor: pointer;
         font-weight: 600;
 
 	    @include hover-transition;
 
-        @include focus-outline;
-
         &:hover {
-            background-color: $gray-100;
+            background-color: $color-gray-100;
         }
     }
 }
 
 /* Button styles to be extracted into button component */
 .button.secondary {
-    border: 1px solid $black;
+    border: 1px solid $color-black;
     border-radius: 0;
     display: inline-block;
     padding: 6px 12px;
@@ -97,10 +76,8 @@ $color-suggestion-accent-text: $purple-700;
 
     @include hover-transition;
 
-    @include focus-outline;
-
     &:hover {
-        color: $white;
-        background-color: $black;
+        color: $color-white;
+        background-color: $color-black;
     }
 }

app/assets/stylesheets/partials/_variables.scss

@@ -2,7 +2,10 @@
 // #COLOR
 // ----------------------------
 
+
+
 // GRAY
+$color-gray-100: #F2F2F2;
 $color-gray-200: #e6e6e6;
 $color-gray-300: #ccc;
 $color-gray-400: #b3b3b3;
@@ -20,18 +23,33 @@ $color-red-600: #e50000;
 $color-cyan-500: #00C8FF;
 $color-cyan-700: #00A0CC;
 
+// BLUE
+$color-blue-500: #0000FF;
+
+// PURPLE
+$color-purple-700: #990099;
+
+
+// ---------------
 // SEMANTIC COLORS
+
 $color-black: #000;
 $color-white: #fff;
 
+// TEXT
 $color-text-primary: $color-gray-950;
 $color-text-secondary: $color-gray-700;
 $color-text-placeholder: $color-gray-500;
 $color-text-disabled: $color-gray-400;
 
+// FOCUS
 $color-focus: $color-cyan-700;
 $color-focus-dark: $color-cyan-500;
 
+// SUGGESTION
+$color-suggestion-border: $color-purple-700;
+$color-suggestion-accent-text: $color-purple-700;
+
 // ----------------------------
 // #TYPOGRAPHY
 // ----------------------------