styles: remove material design import

phodal · Mar 24, 2020 · 41669fc · 41669fc
1 parent 6faa41b
commit 41669fc
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 6 deletions.
diff --git a/src/app/features/path/path.component.html b/src/app/features/path/path.component.html
@@ -3,17 +3,17 @@
     <h3>Path to Production</h3>
   </div>
 
-  <mat-toolbar>
-    <mat-toolbar-row>
+  <div>
+    <div>
       <span></span>
       <span class="spacer"></span>
       <div class="right">
-        <button color="primary" mat-raised-button (click)="addColumn()">Add</button>
+        <button class="button" (click)="addColumn()">Add</button>
         <span class="spacer">&nbsp;</span>
-        <button color="accent" mat-raised-button (click)="removeColumn()">Remove</button>
+        <button class="button" (click)="removeColumn()">Remove</button>
       </div>
-    </mat-toolbar-row>
-  </mat-toolbar>
+    </div>
+  </div>
 
   <div class="page">
     <div class="path">

diff --git a/src/app/features/path/path.component.scss b/src/app/features/path/path.component.scss
@@ -181,3 +181,76 @@
 #color-white {
   background-color: #fff;
 }
+
+
+.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
+  background-color: #384452;
+  border: 0.1rem solid #384452;
+  border-radius: .4rem;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.0rem;
+  font-weight: 700;
+  height: 2.5rem;
+  letter-spacing: .1rem;
+  line-height: 2.5rem;
+  padding: 0 1.0rem;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap
+}
+
+.button:focus, .button:hover, button:focus, button:hover, input[type='button']:focus, input[type='button']:hover, input[type='reset']:focus, input[type='reset']:hover, input[type='submit']:focus, input[type='submit']:hover {
+  background-color: #1abc9c;
+  border-color: #1abc9c;
+  color: #fff;
+  outline: 0
+}
+
+.button[disabled], button[disabled], input[type='button'][disabled], input[type='reset'][disabled], input[type='submit'][disabled] {
+  cursor: default;
+  opacity: .5
+}
+
+.button[disabled]:focus, .button[disabled]:hover, button[disabled]:focus, button[disabled]:hover, input[type='button'][disabled]:focus, input[type='button'][disabled]:hover, input[type='reset'][disabled]:focus, input[type='reset'][disabled]:hover, input[type='submit'][disabled]:focus, input[type='submit'][disabled]:hover {
+  background-color: #384452;
+  border-color: #384452
+}
+
+.button.button-outline, button.button-outline, input[type='button'].button-outline, input[type='reset'].button-outline, input[type='submit'].button-outline {
+  background-color: transparent;
+  color: #384452
+}
+
+.button.button-outline:focus, .button.button-outline:hover, button.button-outline:focus, button.button-outline:hover, input[type='button'].button-outline:focus, input[type='button'].button-outline:hover, input[type='reset'].button-outline:focus, input[type='reset'].button-outline:hover, input[type='submit'].button-outline:focus, input[type='submit'].button-outline:hover {
+  background-color: transparent;
+  border-color: #1abc9c;
+  color: #1abc9c
+}
+
+.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover, button.button-outline[disabled]:focus, button.button-outline[disabled]:hover, input[type='button'].button-outline[disabled]:focus, input[type='button'].button-outline[disabled]:hover, input[type='reset'].button-outline[disabled]:focus, input[type='reset'].button-outline[disabled]:hover, input[type='submit'].button-outline[disabled]:focus, input[type='submit'].button-outline[disabled]:hover {
+  border-color: inherit;
+  color: #384452
+}
+
+.button.button-clear, button.button-clear, input[type='button'].button-clear, input[type='reset'].button-clear, input[type='submit'].button-clear {
+  background-color: transparent;
+  border-color: transparent;
+  color: #384452
+}
+
+.button.button-clear:focus, .button.button-clear:hover, button.button-clear:focus, button.button-clear:hover, input[type='button'].button-clear:focus, input[type='button'].button-clear:hover, input[type='reset'].button-clear:focus, input[type='reset'].button-clear:hover, input[type='submit'].button-clear:focus, input[type='submit'].button-clear:hover {
+  background-color: transparent;
+  border-color: transparent;
+  color: #1abc9c
+}
+
+.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover, button.button-clear[disabled]:focus, button.button-clear[disabled]:hover, input[type='button'].button-clear[disabled]:focus, input[type='button'].button-clear[disabled]:hover, input[type='reset'].button-clear[disabled]:focus, input[type='reset'].button-clear[disabled]:hover, input[type='submit'].button-clear[disabled]:focus, input[type='submit'].button-clear[disabled]:hover {
+  color: #384452
+}
+
+.right {
+  float: right;
+}