From 92c193813e18e9e04b5f9678f32954c1622df54b Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Tue, 10 Apr 2018 00:09:20 -0400 Subject: [PATCH] Remove the awesome-bootstrap-checkbox plugin and replace it with a custom checkbox, and clean up a bunch of dashboard-related styles --- bower.json | 1 - resources/assets/sass/dashboard.scss | 131 +++++++++++++++--- resources/views/auth/login.blade.php | 12 +- .../views/auth/passwords/email.blade.php | 1 + .../views/auth/passwords/reset.blade.php | 94 ++++++------- resources/views/auth/register.blade.php | 1 + 6 files changed, 168 insertions(+), 72 deletions(-) diff --git a/bower.json b/bower.json index 5db148a..be70ff2 100644 --- a/bower.json +++ b/bower.json @@ -8,7 +8,6 @@ "license": "MIT", "dependencies": { "jquery": "~3.3.1", - "awesome-bootstrap-checkbox": "~0.3.7", "Sortable": "~1.6.0", "simplemde": "~1.11.2", "SpinKit": "~1.2.5", diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss index 7fbcf6e..e72d9f2 100644 --- a/resources/assets/sass/dashboard.scss +++ b/resources/assets/sass/dashboard.scss @@ -1,7 +1,6 @@ // Libraries @import "bootstrap-sass/assets/stylesheets/_bootstrap.scss"; @import "font-awesome/scss/font-awesome.scss"; -@import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss"; @import "pickadate/lib/themes/default"; @import "pickadate/lib/themes/default.date"; @import "simplemde/dist/simplemde.min"; @@ -16,6 +15,7 @@ $fa-font-path: "/fonts"; // Colours $c-text: #111; // text $c-text-light: #fff; // light text +$c-input-bg: #fff; // white $c-dashboard-dark: #3e6087; $c-dashboard-light: #f1f1f1; $c-dashboard-edit: #87823e; @@ -31,20 +31,31 @@ $c-dashboard-delete: #87483e; body { @include font-sans; - min-width: 320px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; } .navbar { + border: 0; background-color: $c-dashboard-dark; - .navbar-brand { + @media (max-width: $screen-xs-max) { + margin-bottom: 0px; + } + + &-header { + height: $navbar-height; + } + + &-brand { + overflow: hidden; + max-width: calc(100vw - 60px); font-weight: bold; + white-space: nowrap; @media (max-width: $screen-xs-max) { - font-size: 14px; + font-size: 12px; } } @@ -53,7 +64,9 @@ body { box-shadow: none; .dropdown { - .dropdown-toggle .caret { margin-left: 4px; } + .dropdown-toggle .caret { + margin-left: 4px; + } &.open .dropdown-toggle { background-color: darken($c-dashboard-dark, 5%); @@ -64,25 +77,36 @@ body { top: calc(100% - 1px); right: -1px; background-color: $c-dashboard-dark; - > li > a:hover, > li > a:focus { background-color: transparent; } + + > li > a:hover, > li > a:focus { + background-color: transparent; + } > li > a { - &, &:hover, &:focus { color: #fff; } + &, &:hover, &:focus { + color: #fff; + } } } } } .navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a { - &, &:hover, &:focus { color: $c-dashboard-light; } + &, &:hover, &:focus { + color: $c-dashboard-light; + } } .navbar-toggle { - position: relative; - bottom: 0px; - left: 10px; + position: absolute; + top: 6px; + right: 8px; + margin: 0px; border: 0; - &, &:hover, &:focus { background-color: transparent; } + + &, &:hover, &:focus { + background-color: transparent; + } .icon-bar { width: 27px; @@ -91,13 +115,15 @@ body { transition: background-color 100ms; } - &:hover .icon-bar { background-color: darken($c-dashboard-dark, 15%); } + &:hover .icon-bar { + background-color: darken($c-dashboard-dark, 15%); + } } } .panel-default { margin-top: 20px; - margin-bottom: 40px; + margin-bottom: 20px; .panel-body { background-color: lighten($c-dashboard-light, 1%); @@ -130,6 +156,7 @@ body { } > .panel-heading { + position: relative; border-top: 1px solid darken($c-dashboard-dark, 5%); border-right: 1px solid darken($c-dashboard-dark, 5%); border-left: 1px solid darken($c-dashboard-dark, 5%); @@ -138,11 +165,12 @@ body { font-weight: bold; .dashboard-heading { - float: right; + position: absolute; + top: 50%; + right: 8px; + transform: translateY(-50%); .btn { - position: relative; - bottom: 3px; min-width: 70px; height: 26px; padding-top: 1px; @@ -162,6 +190,61 @@ body { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px fade-out($c-dashboard-dark, 0.4); } +.panel-body .form-group .checkbox { + position: relative; + display: inline-block; + min-height: 0px; + padding-top: 0px; + padding-left: 22px; + user-select: none; + + span, input { + position: absolute; + top: 50%; + left: 0px; + transform: translateY(-50%); + display: block; + width: 16px; + height: 16px; + } + + span { + border: 1px solid lighten($c-text, 50%); + border-radius: 4px; + background-color: $c-input-bg; + pointer-events: none; + + &:after { + content: ""; + position: absolute; + top: 0px; + left: 0px; + transform: scale(0); + display: block; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1OTcuMzM5IiBoZWlnaHQ9IjQ0MS4wMzgiIHZpZXdCb3g9IjAgMCA1NjAuMDA1IDQxMy40NzMiPjxwYXRoIGQ9Ik0uNTQ2IDI0MS4xNXMzNC44NS00Mi4wNTMgNzQuMjE0LTU0LjcxYzEwLjY1OCA3Ljk5MyA3MS4wNzggMTI4LjczNSA4MS43MzYgMTI3LjQwMyAxMS45OS0xLjMzMiA5MC45NzItMTExLjM3IDI2MS43NzMtMzEzLjIzMSAwIDAgNDkuNDMgMjIuNDQgMTQwLjM3NyAyNy4xMjItMjM3LjgxIDE4Ni41MzctMzYwLjgyIDM2OC4zNzUtMzcxLjU5OCAzNzcuMTYtMzAuNjQzIDE0LjY1NS00Ni4zNSA2LjE3Ni01Ny4wMDgtLjQ4NkMxMDQuNzI3IDM4MS43NiAxLjg4IDI0Ni40OC41NDYgMjQxLjE1MXoiIGZpbGw9IiMwYTBhMGEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjMDAwIi8+PC9zdmc+Cg=="); + background-position: center center; + background-size: 75% auto; + background-repeat: no-repeat; + opacity: 0; + transition: transform 150ms, opacity 150ms; + } + } + + input { + margin: 0px; + padding: 0px; + opacity: 0; + cursor: pointer; + + &:checked + span:after { + transform: scale(1); + opacity: 1; + } + } +} + .btn { border-color: darken($c-dashboard-dark, 5%); background-color: $c-dashboard-dark; @@ -169,6 +252,11 @@ body { &:hover { background-color: darken($c-dashboard-dark, 5%); } &:focus { background-color: lighten($c-dashboard-dark, 5%); } + &.vertical-margin { + margin-top: 3px; + margin-bottom: 3px; + } + &.btn-warning { border-color: darken($c-dashboard-edit, 10%); background-color: $c-dashboard-edit; @@ -209,8 +297,13 @@ body { @media (max-width: $screen-md-max) { tr { - &.heading-row { display: none; } - &:not(:first-child) { border-top: 1px solid #ddd; } + &.heading-row { + display: none; + } + + &:not(:first-child) { + border-top: 1px solid #ddd; + } } > tbody > tr { diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 302011b..0dc0add 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -6,6 +6,7 @@
Login
+
{!! csrf_field() !!} @@ -40,20 +41,21 @@
-
+
+ + Remember Me +
- - Forgot Your Password? + Forgot Your Password?
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php index dc06385..0569748 100644 --- a/resources/views/auth/passwords/email.blade.php +++ b/resources/views/auth/passwords/email.blade.php @@ -6,6 +6,7 @@
Reset Password
+
@if (session('status'))
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php index 7e17148..3953ce4 100644 --- a/resources/views/auth/passwords/reset.blade.php +++ b/resources/views/auth/passwords/reset.blade.php @@ -1,70 +1,70 @@ @extends('templates.dashboard') @section('page-content') -
-
-
-
-
Reset Password
+
+
+
+
+
Reset Password
-
-
- {!! csrf_field() !!} +
+ + {!! csrf_field() !!} - + -
- +
+ -
- +
+ - @if ($errors->has('email')) - - {{ $errors->first('email') }} - - @endif + @if ($errors->has('email')) + + {{ $errors->first('email') }} + + @endif +
-
-
- +
+ -
- +
+ - @if ($errors->has('password')) - - {{ $errors->first('password') }} - - @endif + @if ($errors->has('password')) + + {{ $errors->first('password') }} + + @endif +
-
-
- -
- +
+ +
+ - @if ($errors->has('password_confirmation')) - - {{ $errors->first('password_confirmation') }} - - @endif + @if ($errors->has('password_confirmation')) + + {{ $errors->first('password_confirmation') }} + + @endif +
-
-
-
- +
+
+ +
-
- + +
-
@endsection diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index 020968a..92bc77f 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -6,6 +6,7 @@
Register
+
{!! csrf_field() !!}