Issue #3299793: Fix Drupal Coding Standards

modules/component_example/components/example_react_calc/example_react_calc.css

 .calc_wrapper {
-  height: 100vh;
   display: flex;
   flex-direction: column;
-  display: flex;
   align-items: center;
+  height: 100vh;
 }
 
 #example_react_calc {
-  background-color: white;
-  height: 200px;
   display: flex;
+  justify-content: center;
   width: 100%;
   max-width: 280px;
-  justify-content: center;
+  height: 200px;
   border: solid thin #ccc;
+  background-color: white;
 }
 
 #example_react_calc div {
@@ -21,40 +20,40 @@
 }
 
 #example_react_calc .calc {
+  position: relative;
+  z-index: 1;
   display: flex;
-  width: 100%;
-  max-width: 281px;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 0px;
-  position: relative;
-  z-index: 1;
-  background-color: #424654;
+  width: 100%;
+  max-width: 281px;
+  margin-bottom: 0;
   opacity: 0.97;
+  background-color: #424654;
 }
 
 #example_react_calc .filter {
+  position: relative;
+  z-index: 2;
   display: flex;
-  width: 100%;
-  max-width: 280px;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 0px;
+  width: 100%;
+  max-width: 280px;
+  margin-bottom: 0;
   background-color: white;
-  position: relative;
-  z-index: 2;
 }
 
 #example_react_calc button {
-  margin: 10px;
   min-width: 15%;
   max-width: 50px;
   height: 40px;
-  border-radius: 0px;
+  margin: 10px;
+  color: white;
   border: none;
+  border-radius: 0;
   background: none;
-  color: white;
-  font-family: roboto;
+  font-family: roboto, sans-serif;
   font-size: 20px;
 }
 
@@ -69,26 +68,26 @@
 #example_react_calc .pad {
   display: flex;
   flex-direction: column;
+  align-items: center;
   width: 100%;
   max-width: 330px;
-  align-items: center;
 }
 
 #example_react_calc .display {
-  text-align: right;
-  font-size: 18px;
-  font-family: Roboto;
   overflow: hidden;
   width: 100%;
   max-width: 250px;
+  text-align: right;
+  font-family: Roboto, sans-serif;
+  font-size: 18px;
 }
 
 #example_react_calc .result {
-  text-align: right;
-  font-size: 40px;
-  font-family: Roboto;
   display: flex;
   justify-content: flex-end;
+  text-align: right;
+  font-family: Roboto, sans-serif;
+  font-size: 40px;
 }
 
 #example_react_calc .dec {
@@ -97,46 +96,45 @@
 }
 
 #example_react_calc .return {
-  background-color: #f28a4f;
-  height: 60px;
+  z-index: 1;
   width: 100%;
   max-width: 280px;
-  margin: 0px;
-  z-index: 1;
-  font-size: 30px;
+  height: 60px;
+  margin: 0;
   border: solid thin #999;
+  background-color: #f28a4f;
+  font-size: 30px;
 }
 
 #example_react_calc .lastrow {
   display: flex;
   justify-content: flex-end;
-  margin-right: 50px;
   width: 100%;
+  margin-right: 50px;
 }
 
 #example_react_calc h1 {
-  font-family: roboto;
   color: white;
+  font-family: roboto, sans-serif;
 }
 
-
 #example_react_calc .footer {
   margin-top: 20px;
-  color: white;
-  font-family: roboto;
   text-align: center;
+  color: white;
+  font-family: roboto, sans-serif;
 }
 
 #example_react_calc .afterpad {
-  background-color: blue;
+  position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
   width: 100%;
   max-width: 330px;
-  background-color: #424654;
-  box-shadow: 4px 4px 10px -2px #000000;
   padding: 0 1rem;
+  background-color: blue;
+  background-color: #424654;
+  box-shadow: 4px 4px 10px -2px #000;
 }