feat: update typography and button focus states (#49)

* feat: updated type sizes * fix: update to button focus rings
openedx · May 1, 2019 · cd7841f · cd7841f
1 parent ae06020
commit cd7841f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git a/scss/edx/_variables.scss b/scss/edx/_variables.scss
@@ -330,9 +330,9 @@ $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
 $headings-margin-bottom:      $spacer / 2 !default;
-$headings-font-family:        $font-family-serif !default;
+$headings-font-family:        $font-family-sans-serif !default;
 $headings-font-weight:        $font-weight-bold !default;
-$headings-line-height:        1.2 !default;
+$headings-line-height:        1.25 !default;
 $headings-color:              inherit !default;
 
 $display1-size:               6rem !default;
@@ -349,7 +349,7 @@ $display-line-height:         $headings-line-height !default;
 $lead-font-size:              ($font-size-base * 1.25) !default;
 $lead-font-weight:            $font-weight-base !default;
 
-$small-font-size:             80% !default;
+$small-font-size:             87.5% !default;
 
 $text-muted:                  $gray-600 !default;
 

diff --git a/scss/edx/overrides/_buttons.scss b/scss/edx/overrides/_buttons.scss
@@ -31,9 +31,18 @@
     &.active {
       &.focus,
       &:focus {
+        position: relative;
+        &:before {
+          content: '';
+          position: absolute;
+          top: -6px;
+          left: -6px;
+          bottom: -6px;
+          right: -6px;
+          border:solid 2px rgba(35,65, 159, .75);
+          border-radius: 40rem;
+        }
         box-shadow: none;
-        outline: 1px dotted;
-        outline: 5px auto -webkit-focus-ring-color;
       }
     }
   }
@@ -65,9 +74,18 @@
       color: darken($value, 10%);
       background: desaturate(blend-transparent($value, white, 0.065), 5%);
     }
-    &:focus,
-    &.focus {
-      border-color: transparent;
+    &:not(:disabled):not(.disabled),
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    &:active,
+    &.active {
+      &:focus,
+      &.focus {
+        border-color: transparent;
+        &:before {
+          border:solid 2px rgba(white, .75);
+        }
+      }
     }
   }
 }
diff --git a/scss/edx/overrides/_typography.scss b/scss/edx/overrides/_typography.scss
@@ -6,26 +6,36 @@ body {
 .display-1,
 .display-2,
 .display-3,
-.display-4,
+.display-4 {
+  font-family: $font-family-serif;
+  font-weight: $font-weight-bold;
+  line-height: 1.111111111111111; // 80px
+ }
+
 h1,
 .h1 {
-  letter-spacing: -0.025em;
+  font-family: $font-family-serif;
+  font-weight: $font-weight-bold;
 }
 
 h2,
-.h2 {
-  font-weight: $font-weight-normal;
-  letter-spacing: -0.0125em;
-}
-
 h3,
 h4,
+.h2,
+.h3,
+.h4, {
+  font-weight: $font-weight-semi-bold;
+}
+
 h5,
 h6,
-.h3,
-.h4,
 .h5,
 .h6 {
-  font-family: $font-family-sans-serif;
+  font-weight: $font-weight-bold;
 }
 
+
+small,
+.small {
+  line-height: 1.428571428571429; // 20px
+}