ui code review and edited

app/assets/stylesheets/settings.scss

@@ -46,23 +46,27 @@ ul.dropdown-menu li a{
     width: 100%;
   }
 
- .footer-header {
- 	color : #ef404a;
- 	font-weight:bold;
- 	font-style:italic;
- 	margin-bottom:0px;
- }
+.footer-header {
+	color : #ef404a;
+	font-weight:bold;
+	font-style:italic;
+	margin-bottom:0px;
+}
 
- .menu-item-img {
+.menu-item-img {
  	margin: 10px;
  	text-align: center;
- }
+}
 
- .padding-10 {
+.padding-10 {
  	padding: 10px;
- }
+}
 
 /* Colors */
+.white {
+  color: #fff;
+}
+
 .purple {
   background-color:#7a62d3;
 }
@@ -79,7 +83,7 @@ ul.dropdown-menu li a{
   background-color: #009900;
 }
 
-.orange{
+.yellow {
   background-color: #FF8C00;
 }
 
@@ -87,4 +91,110 @@ ul.dropdown-menu li a{
   background-color: blue;
 }
 
-/* End Colors */
+/* End Colors */
+
+.pin_pad {
+  width: 33%;
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+  background: #54A5AF;
+  font-size: 20px;
+  color: white;
+}
+
+.bottom {
+  margin-bottom: 1px;
+}
+
+.left {
+  margin-left: 1px;
+}
+
+.card {
+  margin-top: 10px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  background-clip: padding-box;
+  transition: 0.3s ease;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.card-footer {
+  padding: 0;
+  background-color: #fff;
+  border-top: none;
+}
+
+.dashboard-nav {
+  cursor: pointer;
+  color: #7a62d3;
+  padding: 10px;
+  font-size: 24px;
+  font-weight: bold;
+  border-radius: 0 0 2px 2px;
+  background-clip: padding-box;
+  box-sizing: border-box;
+  transition: color 0.3s ease;
+  text-align: center;
+}
+
+.card:hover {
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.16), 0 10px 20px 0 rgba(0, 0, 0, 0.12);
+}
+
+#admin ul {
+  line-height: 25px;
+}
+
+.panel-body {
+  padding: 5px !important;
+}
+
+.panel-title .glyphicon {
+  float: right;
+}
+
+@media screen and (min-height: 800px){
+  .card .card-content {
+    padding: 30px !important;
+  }
+}
+
+@media screen and (min-height: 540px){
+  .card .card-content {
+    padding: 20px !important;
+  }
+}
+
+@media (min-width: 34em) {
+  .card-columns {
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    column-count: 2;
+  }
+}
+
+@media (min-width: 48em) {
+  .card-columns {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+  }
+}
+
+@media (min-width: 62em) {
+  .card-columns {
+    -webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+  }
+}
+
+@media (min-width: 75em) {
+  .card-columns {
+    -webkit-column-count: 5;
+    -moz-column-count: 5;
+    column-count: 5;
+  }
+}