fix: update inputs and tables

techfromsage · Apr 22, 2021 · 8faf620 · 8faf620
1 parent fc73410
commit 8faf620
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 55 deletions.
diff --git a/docs/assets/css/talis.css b/docs/assets/css/talis.css
diff --git a/docs/assets/css/talis.css.map b/docs/assets/css/talis.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -12,12 +12,12 @@
   <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
       <div class="container-fluid">
-        <a class="navbar-brand" href="#">Navbar</a>
+        <a class="navbar-brand" href="#">Talis</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">Home</a>
             </li>
@@ -43,7 +43,7 @@
       </div>
     </nav>
 
-    <main class="col-md-8 py-5 px-3 mx-auto">
+    <main class="col-md-12 py-5 px-3 mx-auto">
 
       <header class="page-header">
         <h1>Primary task
@@ -105,16 +105,16 @@ <h6>h6, .zeta</h6>
             </ul>
             <form>
               <div class="mb-3">
-                <label for="exampleInputEmail1">Email address</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" assigned="true">
+                <label class="form-label" for="exampleInputEmail">Email address</label>
+                <input type="email" class="form-control" id="exampleInputEmail" placeholder="Email" assigned="true">
               </div>
 
               <div class="mb-3">
-                <label for="text">A textarea</label>
+                <label class="form-label" for="text">A textarea</label>
                 <textarea id="text" class="form-control" rows="3">I'm a textarea</textarea>
               </div>
 
-              <label class="sr-only" for="searchInput">Search</label>
+              <label class="form-label" for="searchInput">Search</label>
               <div class="input-group mb-3">
                   <input class="form-control" id="searchInput" type="search" placeholder="Search the library catalogue">
                   <button class="btn btn-outline-primary" type="button">
@@ -126,8 +126,8 @@ <h6>h6, .zeta</h6>
             </form>
 
             <div class="mb-3">
-              <label for="select-num">Choose a number:</label>
-              <select class="form-control" id="select-num">
+              <label class="form-label" for="select-num">Choose a number:</label>
+              <select class="form-select" id="select-num">
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
@@ -137,7 +137,7 @@ <h6>h6, .zeta</h6>
             </div>
 
             <div class="mb-3">
-              <label for="custom-select">Custom select:</label>
+              <label class="form-label" for="custom-select">Custom select:</label>
               <select class="form-select" id="custom-select">
                 <option>1</option>
                 <option>2</option>
@@ -263,7 +263,7 @@ <h3>XS</h3>
       <section class="row">
         <div class="col-xs-12">
           <h2>Tables</h2>
-          <table class="table table-striped align-middle">
+          <table class="table table-striped">
             <thead>
               <tr>
                 <th>#</th>
@@ -388,31 +388,29 @@ <h2>Tables</h2>
           <h2>Forms</h2>
           <form>
             <div class="form-group">
-              <label for="exampleInputEmail1">Email address</label>
-              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
+              <label class="form-label" for="exampleInputEmailAgain">Email address</label>
+              <input type="email" class="form-control" id="exampleInputEmailAgain" placeholder="Email">
             </div>
             <div class="form-group">
-              <label for="exampleInputPassword1">Password</label>
+              <label class="form-label" for="exampleInputPassword1">Password</label>
               <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
             </div>
             <div class="form-group">
-              <label for="exampleInputPassword1">Password</label>
+              <label class="form-label" for="exampleInputPassword1">Password</label>
               <input type="password" class="form-control" id="exampleInputPassword2" disabled placeholder="I'm disabled">
             </div>
             <div class="form-group">
-              <label class="sr-only" for="searchInput">Search</label>
+              <label class="form-label" for="searchInput">Search</label>
               <div class="input-group">
                 <input class="form-control" id="searchInput" type="search" placeholder="Search the library catalogue">
-                <span class="input-group-btn">
-                  <button class="btn btn-default" type="button">
-                    <i class="fa fa-fw fa-search"></i>
-                    <span class="sr-only">Search</span>
-                  </button>
-                </span>
+                <button class="btn btn-default" type="button">
+                  <i class="fa fa-fw fa-search"></i>
+                  <span class="sr-only">Search</span>
+                </button>
               </div>
             </div>
             <div class="form-group">
-              <label for="select-num-again">Choose a number:</label>
+              <label class="form-label" for="select-num-again">Choose a number:</label>
               <select class="form-control" id="select-num-again">
                 <option>1</option>
                 <option>2</option>
@@ -422,7 +420,7 @@ <h2>Forms</h2>
               </select>
             </div>
             <div class="form-group">
-              <label for="custom-select-again">Custom select:</label>
+              <label class="form-label" for="custom-select-again">Custom select:</label>
               <select class="custom-select" id="custom-select-again">
                 <option>1</option>
                 <option>2</option>
@@ -431,43 +429,36 @@ <h2>Forms</h2>
                 <option>5</option>
               </select>
             </div>
+
             <div class="form-group">
-              <label for="exampleInputFile">File input</label>
+              <label class="form-label" for="exampleInputFile">File input</label>
               <input type="file" id="exampleInputFile">
               <p class="help-block">Example block-level help text here.</p>
             </div>
-            <div class="checkbox">
-              <label>
-                <input type="checkbox"> Check me out
-              </label>
-            </div>
 
-            <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input" id="customCheck1">
-              <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="checkbox">
+              <label class="form-check-label form-label" for="checkbox">Check me out</label>
             </div>
 
-            <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input o-custom-control__input--pink" id="customCheck2">
-              <label class="custom-control-label" for="customCheck2">Check this custom pink checkbox</label>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="checkbox-checked" checked>
+              <label class="form-check-label form-label" for="checkbox-checked">Check me out</label>
             </div>
 
-            <div class="custom-control custom-radio">
-              <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
-              <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
-            </div>
-            <div class="custom-control custom-radio">
-              <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
-              <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
-            </div>
-            <div class="custom-control custom-radio">
-              <input type="radio" id="customRadio3" name="customRadio" class="o-custom-control__input--pink custom-control-input">
-              <label class="custom-control-label" for="customRadio3">Or toggle this other custom radio</label>
+            <div class="form-check">
+              <input class="form-check-input" type="radio" id="radio">
+              <label class="form-check-label form-label" for="radio">Check me out</label>
             </div>
 
+            <div class="form-check">
+              <input class="form-check-input" type="radio" id="radio-checked" checked>
+              <label class="form-check-label form-label" for="radio-checked">Check me out</label>
+            </div>
 
             <div class="form-group">
-              <textarea class="form-control" rows="3"></textarea>
+              <label class="form-label" for="testarea"></label>
+              <textarea class="form-control" id="testarea" rows="3"></textarea>
             </div>
             <div class="form-group">
               <button type="submit" class="btn btn-default">Submit</button>
@@ -476,23 +467,22 @@ <h2>Forms</h2>
           <hr>
           <form class="form-horizontal">
             <div class="form-group">
-              <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
+              <label for="inputEmail3" class="form-label">Email</label>
               <div class="col-sm-10">
                 <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
               </div>
             </div>
             <div class="form-group">
-              <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
+              <label for="inputPassword3" class="form-label">Password</label>
               <div class="col-sm-10">
                 <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
               </div>
             </div>
             <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                 <div class="checkbox">
-                  <label>
-                    <input type="checkbox"> Remember me
-                  </label>
+                  <input type="checkbox" id="another-checkbox">
+                  <label class="form-check-label" for="another-checkbox">Remember me</label>
                 </div>
               </div>
             </div>

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -23,6 +23,10 @@
     box-shadow: 0 0 0 $btn-focus-width $accent;
   }
 
+  &:hover:focus {
+    background-color: $gray-200;
+  }
+
   &:active {
     &:focus {
       box-shadow: 0 0 0 $btn-focus-width $accent;

diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -0,0 +1,7 @@
+.form-group {
+  @extend .mb-3;
+}
+
+::placeholder {
+  font-style: italic;
+}
diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -0,0 +1,3 @@
+th {
+  color: $black;
+}
diff --git a/scss/talis.scss b/scss/talis.scss
@@ -104,6 +104,31 @@ $btn-link-color: $primary !default;
 $btn-link-hover-color: $accent !default;
 $btn-link-disabled-color: $gray-500 !default;
 
+$input-color:                           $black !default;
+$input-border-color:                    $gray-600 !default;
+$input-disabled-bg:                     $gray-100 !default;
+$input-disabled-border-color:           $gray-200 !default;
+
+$input-focus-border-color:              $primary !default;
+$input-focus-width:                     1px !default;
+$input-focus-box-shadow:                0 0 0 1px $primary !default;
+
+$input-placeholder-color:               $gray-700 !default;
+$input-plaintext-color:                 $black !default;
+
+$input-btn-focus-color:                 $primary !default;
+
+$form-label-color:                      $black !default;
+$form-label-margin-bottom:              0.3846153846em !default;
+
+$form-select-focus-border-color:        $input-focus-border-color !default;
+$form-select-focus-width:               $input-focus-width !default;
+$form-select-focus-box-shadow:          0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$navbar-dark-color:                     $white !default;
+$navbar-dark-hover-color:               $white !default;
+$navbar-dark-active-color:              $white !default;
+
 $pagination-border-color: $primary;
 $pagination-transition: none !default;
 $pagination-hover-border-color: $primary !default;
@@ -112,6 +137,11 @@ $pagination-disabled-color:         $gray-500;
 $pagination-disabled-bg:            $white;
 $pagination-disabled-border-color:  $primary;
 
+$table-striped-bg:            $gray-100;
+$table-cell-vertical-align:   middle;
+$table-border-color:          $gray-200;
+$table-group-separator-color: $gray-200;
+
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -156,5 +186,7 @@ $pagination-disabled-border-color:  $primary;
 
 @import 'alerts';
 @import 'buttons';
+@import 'forms';
 @import 'pager';
 @import 'pagination';
+@import 'tables';