CSS/SCSS
We import Google Font (Nunito), bootstrap library, and finally font-awesome icons.
Below app.scss live in resources->scss foler, replace with the following code
Run npm command npm install toastr --save to install toastr.
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";
.title{
margin-top: 10px;
margin-bottom: 10px;
}
#popup_notification{
padding:15px;
}
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
.form-check-label
{
margin-left: 15px;
margin-bottom: 20px;
}
#pageTitleContainer{
background-color: #1597bb;
padding-top: 15px;
padding-bottom: 10px;
margin-bottom: 10px;
}
#pageTitleContainer h1{
font-size: 1.2rem;
color: white;
}
#topMenu
{
background-color:#150e56;
}
#topMenu .nav-link-white{
color: white !important;
}
.title a, .title button{
margin-right: 10px;
width: 150px !important;
}
#search{
margin-bottom: 15px;
}
.fa{
font-size: 1.3rem;
}
.card{
margin-top: 15px;
}
#addCalender{
margin: 15px;
}
.permission{
padding-left: 25px;
padding-top: 20px;
}
.checkall_permission{
margin-left: 30px;
}
Replace webpack.mix file with the below code. When we run npm run dev, it compiles the CSS and put it on the public folder
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
