mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-22 07:54:11 -05:00
Remove the awesome-bootstrap-checkbox plugin and replace it with a custom checkbox, and clean up a bunch of dashboard-related styles
This commit is contained in:
Kevin MacMartin
parent
4e026b1dc6
commit
92c193813e
6 changed files with 168 additions and 72 deletions
|
|
@ -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",
|
||||
|
|
|
|||
131
resources/assets/sass/dashboard.scss
vendored
131
resources/assets/sass/dashboard.scss
vendored
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Login</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}">
|
||||
{!! csrf_field() !!}
|
||||
|
|
@ -40,20 +41,21 @@
|
|||
|
||||
<div class="form-group">
|
||||
<div class="col-md-6 col-md-offset-4">
|
||||
<div class="checkbox">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" class="styled" id="remember" name="remember" />
|
||||
<label>Remember Me</label>
|
||||
</div>
|
||||
<span></span>
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-md-6 col-md-offset-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<button type="submit" class="btn btn-primary vertical-margin">
|
||||
Login
|
||||
</button>
|
||||
|
||||
<a class="btn btn-link" href="{{ url('/password/reset') }}">Forgot Your Password?</a>
|
||||
<a class="btn btn-link vertical-margin" href="{{ url('/password/reset') }}">Forgot Your Password?</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Reset Password</div>
|
||||
|
||||
<div class="panel-body">
|
||||
@if (session('status'))
|
||||
<div class="alert alert-success">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@extends('templates.dashboard')
|
||||
|
||||
@section('page-content')
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="panel panel-default">
|
||||
|
|
@ -66,5 +66,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Register</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
|
||||
{!! csrf_field() !!}
|
||||
|
|
|
|||
Loading…
Reference in a new issue