from local Andi

pages/app/sanksi/proses.js

@@ -42,7 +42,7 @@ class ProsesSanksi extends Component {
 		const { query, token } = this.props;
 		const { id } = query;
 		const pelaporan = await getOneLaporan(token, id);
-		const {data:listSanksi} = await getPelanggaranSanksi(token)
+		const { data: listSanksi } = await getPelanggaranSanksi(token)
 		this.setState({ pelaporan, listSanksi });
 	};
 
@@ -111,7 +111,7 @@ class ProsesSanksi extends Component {
 						<CardBody>
 							<Row>
 								<Col xs="4">
-									<Nav pills vertical={true}>
+									<Nav pills vertical={true} className="cursor-pointer">
 										<NavItem style={stepNavitemStyle}>
 											<NavLink
 												tag="div"

styles/app/common/bootstrap-reset.scss

@@ -13,7 +13,9 @@
 
 a {
     outline: none !important;
+
     &.text-muted {
+
         &:hover,
         &:focus {
             color: darken($text-muted, 10%);
@@ -34,9 +36,11 @@ hr {
     padding: 0.1875rem 0.4375rem;
     font-size: 0.75rem;
     border-radius: 0.625rem;
+
     &.badge-warning {
         color: #fff !important;
     }
+
     &.badge-secondary {
         background-color: $gray-dark;
         color: #fff;
@@ -45,16 +49,20 @@ hr {
 
 .list-group {
     line-height: 1.3;
+
     .list-group-item {
         padding: 10px;
         color: #555;
+
         &.active {
             color: #fff;
+
             .badge {
                 background-color: #fff;
                 color: $primary;
             }
         }
+
         .card>& {
             border: 0;
         }
@@ -74,22 +82,27 @@ hr {
 .card {
     border-color: transparent;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+
     .card-header {
         border-bottom: 0;
         padding: 0.625rem 0.9375rem;
         background-color: transparent;
+
         .card-title {
             margin-bottom: 0;
             font-size: 1rem;
         }
+
         a {
             text-decoration: none !important;
         }
     }
 }
+
 .card-body {
     padding: 20px; //15px
 }
+
 .card-footer {
     padding: 0.625rem 0.9375rem;
 }
@@ -111,9 +124,12 @@ hr {
 .jumbotron {
     border: 1px solid $gray;
     background-color: #fff;
+
     @include media-breakpoint-up(md) {
-        padding: $jumbotron-padding ($jumbotron-padding/2);
-    }
+        padding: $jumbotron-padding (
+            $jumbotron-padding/2
+        );
+}
 }
 
 .nav-tabs>.nav-item>.nav-link {
@@ -124,8 +140,10 @@ hr {
     border: 1px solid $gray;
     border-radius: 0;
     padding: 10px 20px;
+
     &.active {
         background-color: $nav-tabs-link-active-bg;
+
         &,
         &:hover,
         &:focus {
@@ -140,10 +158,12 @@ hr {
     border-style: solid;
     border-width: 0 1px 1px 1px;
     border-color: $gray;
+
     .nav-pills+& {
         border: 0;
         padding: 0;
     }
+
     .p-0 & {
         padding: 0 !important
     }
@@ -156,14 +176,17 @@ hr {
     -webkit-appearance: none;
     outline: none !important; // padding: 0.375rem 1rem;
     @include transition(all .1s);
+
     &.btn-link {
         box-shadow: none;
         border: 0;
     }
+
     .input-group & {
         font-size: 14px;
         border-color: $input-border-color;
     }
+
     .input-group .form-control-sm+.input-group-btn & {
         font-size: 0.8125rem;
         padding: 0.3125rem 0.625rem;
@@ -178,8 +201,11 @@ hr {
     &.btn-warning {
         color: #fff;
     }
+
     &.btn-outline-warning:not(:disabled) {
-        &:hover, &:active {
+
+        &:hover,
+        &:active {
             color: #fff;
         }
     }
@@ -189,9 +215,12 @@ hr {
     background-color: $btn-secondary-bg;
     border-color: $btn-secondary-border;
     color: $btn-secondary-color;
+
     &:hover {
         background-color: #f5f5f5;
-    } // active state override
+    }
+
+    // active state override
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active,
     .show>&.dropdown-toggle {
@@ -201,23 +230,28 @@ hr {
 }
 
 .btn-outline-secondary {
-    border-color: $btn-secondary-border !important;
+    border-color: $btn-secondary-border  !important;
     color: $btn-secondary-color;
+
     &:hover {
         color: $btn-secondary-color;
         background-color: #f5f5f5 !important;
     }
+
     &:focus {
         box-shadow: 0 0 0 0.2rem rgba($btn-secondary-border, 0.5);
     }
 }
 
-span.btn { -webkit-appearance: none !important; }
+span.btn {
+    -webkit-appearance: none !important;
+}
 
 // FORMS
 .form-control {
     box-shadow: 0 0 0 #000 !important;
     font-size: 0.875rem; //14px
+
     &:focus {
         border-color: $input-focus-border-color;
     }
@@ -237,6 +271,7 @@ select.form-control-sm {
 .custom-control-label::after {
     top: 0.19rem;
 }
+
 .custom-control-label::before {
     border: 1px solid $gray;
 }
@@ -245,10 +280,12 @@ fieldset {
     padding-bottom: 20px;
     border-bottom: 1px dashed #eee;
     margin-bottom: 20px;
+
     &.last-child,
     &:last-child {
         border-bottom: 0;
     }
+
     .form-group {
         margin-bottom: 0;
     }
@@ -259,6 +296,7 @@ fieldset {
 }
 
 @include media-breakpoint-down(sm) {
+
     // Remove Input Shadows on iPad
     input[type="text"],
     input[type="email"],
@@ -278,7 +316,9 @@ fieldset {
     // Bottom align for column headings
     >thead>tr>th {
         border-bottom-width: 0;
-    } // Account for multiple tbody instances
+    }
+
+    // Account for multiple tbody instances
     >tbody+tbody {
         border-bottom-width: 1px;
     }
@@ -290,6 +330,7 @@ fieldset {
 
 .table-bordered {
     >thead>tr {
+
         >th,
         >td {
             border-bottom-width: 1px;
@@ -303,6 +344,7 @@ fieldset {
     border-radius: $border-radius-sm;
     border: 1px solid $progress-bg;
     background-color: #fff;
+
     .progress-bar {
         @include box-shadow(0 0 0 #000);
     }
@@ -315,6 +357,7 @@ fieldset {
     border-color: #eee;
     border-bottom: 2px solid $gray-light;
     border-radius: $border-radius-sm;
+
     .popover-title {
         border: 0;
     }
@@ -337,6 +380,7 @@ fieldset {
     padding: 0.3125rem 0;
     box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
     border-color: $dropdown-border-color;
+
     .dropdown-item {
         line-height: 1.52857143;
         padding: 0.1875rem 1.25rem;
@@ -349,6 +393,7 @@ fieldset {
 
 .navbar-top .navbar-nav>.active>a {
     color: #999;
+
     &:hover,
     &:focus {
         color: #d1d2d3;
@@ -358,6 +403,7 @@ fieldset {
 
 .navbar-default .navbar-nav .open .dropdown-menu>li>a {
     color: #666;
+
     &:hover,
     &:focus {
         color: #222;
@@ -369,11 +415,15 @@ fieldset {
     .carousel-indicators {
         bottom: 0;
     }
+
     .carousel-control {
+
         &.left,
         &.right {
             background-image: none;
-        } // Add support for font awesome
+        }
+
+        // Add support for font awesome
         em {
             position: absolute;
             top: 50%;
@@ -410,20 +460,39 @@ $value in $theme-colors {
 
 .badge-red {
     color: #fff;
-    background-color: #FD4233; }
-    a.badge-info:hover, a.badge-info:focus {
-      color: #fff;
-      background-color: #FD4233; }
-    a.badge-info:focus, a.badge-info.focus {
-      outline: 0;
-      box-shadow: 0 0 0 0.2rem #FD4233; }
-
-      .badge-green {
-        color: #fff;
-        background-color: #1EA457; }
-        a.badge-info:hover, a.badge-info:focus {
-          color: #fff;
-          background-color: #1EA457; }
-        a.badge-info:focus, a.badge-info.focus {
-          outline: 0;
-          box-shadow: 0 0 0 0.2rem #1EA457; }
+    background-color: #FD4233;
+}
+
+a.badge-info:hover,
+a.badge-info:focus {
+    color: #fff;
+    background-color: #FD4233;
+}
+
+a.badge-info:focus,
+a.badge-info.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem #FD4233;
+}
+
+.badge-green {
+    color: #fff;
+    background-color: #1EA457;
+}
+
+a.badge-info:hover,
+a.badge-info:focus {
+    color: #fff;
+    background-color: #1EA457;
+}
+
+a.badge-info:focus,
+a.badge-info.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem #1EA457;
+}
+
+
+.cursor-pointer {
+    cursor: pointer;
+}