mirror of
https://github.com/itflow-org/itflow
synced 2026-03-01 03:14:52 +00:00
First commit
This commit is contained in:
root
25
scss/_cards.scss
Normal file
25
scss/_cards.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
// Styling for custom cards
|
||||
// Custom class for the background icon in card blocks
|
||||
.card-body-icon {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: -1.25rem;
|
||||
right: -1rem;
|
||||
opacity: 0.4;
|
||||
|
||||
font-size: 5rem;
|
||||
@include rotate;
|
||||
}
|
||||
|
||||
// Override breakpoints for card columns to work well with sidebar layout
|
||||
.card-columns {
|
||||
@media (min-width: 576px) {
|
||||
column-count: 1;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
column-count: 2;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
27
scss/_footer.scss
Normal file
27
scss/_footer.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
footer.sticky-footer {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: calc(100% - #{$sidebar-collapsed-width});
|
||||
height: $sticky-footer-height;
|
||||
background-color: $gray-200;
|
||||
.copyright {
|
||||
line-height: 1;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
width: calc(100% - #{$sidebar-base-width});
|
||||
}
|
||||
}
|
||||
|
||||
body.sidebar-toggled {
|
||||
footer.sticky-footer {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
footer.sticky-footer {
|
||||
width: calc(100% - #{$sidebar-collapsed-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
44
scss/_global.scss
Normal file
44
scss/_global.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
// Global styling for this template
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
#content-wrapper {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: $sticky-footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll to top button
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
display: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
background: fade-out($gray-800, .5);
|
||||
line-height: 46px;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
&:hover {
|
||||
background: $gray-800;
|
||||
}
|
||||
i {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
69
scss/_login.scss
Normal file
69
scss/_login.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
:root {
|
||||
--input-padding-x: 0.75rem;
|
||||
--input-padding-y: 0.75rem;
|
||||
}
|
||||
|
||||
.card-login {
|
||||
max-width: 25rem;
|
||||
}
|
||||
|
||||
.card-register {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.form-label-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-label-group > input,
|
||||
.form-label-group > label {
|
||||
padding: var(--input-padding-y) var(--input-padding-x);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.form-label-group > label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
/* Override default `<label>` margin */
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.form-label-group input::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input:-ms-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::-ms-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) {
|
||||
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
|
||||
padding-bottom: calc(var(--input-padding-y) / 3);
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) ~ label {
|
||||
padding-top: calc(var(--input-padding-y) / 3);
|
||||
padding-bottom: calc(var(--input-padding-y) / 3);
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
33
scss/_mixins.scss
Normal file
33
scss/_mixins.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@mixin rotate {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
@mixin sidebar-icons {
|
||||
.nav-item {
|
||||
&:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
padding: 0.75rem 1rem;
|
||||
width: $sidebar-collapsed-width;
|
||||
span {
|
||||
font-size: 0.65rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute !important;
|
||||
transform: none !important;
|
||||
left: calc(#{$sidebar-collapsed-width} + 0.5rem) !important;
|
||||
margin: 0;
|
||||
&.dropup {
|
||||
bottom: 0;
|
||||
top: auto !important;
|
||||
}
|
||||
}
|
||||
&.dropdown .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
115
scss/_navbar.scss
Normal file
115
scss/_navbar.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
.navbar-nav {
|
||||
|
||||
.form-inline .input-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&.dropdown {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
float: right;
|
||||
vertical-align: 0;
|
||||
border: 0;
|
||||
font-weight: 900;
|
||||
content: '\f105';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
.dropdown-toggle::after {
|
||||
content: '\f107';
|
||||
}
|
||||
}
|
||||
&.no-arrow {
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
&:focus {
|
||||
// remove outline for Safari and Firefox
|
||||
outline: none;
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
margin-left: 0.75rem;
|
||||
top: 0.3rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
|
||||
.form-inline .input-group {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-collapsed-width !important;
|
||||
background-color: $gray-900;
|
||||
min-height: calc(100vh - #{$navbar-base-height});
|
||||
@include sidebar-icons;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: fade-out($white, 0.5);
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: fade-out($white, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.toggled {
|
||||
width: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
width: $sidebar-base-width !important;
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 1rem;
|
||||
width: $sidebar-base-width;
|
||||
span {
|
||||
font-size: 1rem;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: static !important;
|
||||
margin: 0 1rem;
|
||||
// Position fix for Firefox
|
||||
top: 0;
|
||||
}
|
||||
&.dropdown .dropdown-toggle::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.toggled {
|
||||
overflow: visible;
|
||||
width: $sidebar-collapsed-width !important;
|
||||
@include sidebar-icons;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
scss/_utilities.scss
Normal file
18
scss/_utilities.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// Additional Text Helper Class
|
||||
.smaller {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
// Helper class for the overflow property
|
||||
.o-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
// Helper classes for z-index
|
||||
.z-0 {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.z-1 {
|
||||
z-index: 1;
|
||||
}
|
||||
9
scss/_variables.scss
Normal file
9
scss/_variables.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
// Spacing Variables
|
||||
// Change below variable if the height of the navbar changes
|
||||
$navbar-base-height: 56px;
|
||||
// Change below variable to change the width of the sidenav
|
||||
$sidebar-base-width: 225px;
|
||||
// Change below variable to change the width of the sidenav when collapsed
|
||||
$sidebar-collapsed-width: 90px;
|
||||
// Change below variable to change the height of the sticky footer
|
||||
$sticky-footer-height: 80px;
|
||||
14
scss/sb-admin.scss
Normal file
14
scss/sb-admin.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
// Import Custom Variables
|
||||
@import "variables.scss";
|
||||
|
||||
// Import Bootstrap
|
||||
@import "../vendor/bootstrap/scss/bootstrap.scss";
|
||||
|
||||
// Import Custom SCSS
|
||||
@import "mixins.scss";
|
||||
@import "global.scss";
|
||||
@import "utilities.scss";
|
||||
@import "navbar.scss";
|
||||
@import "cards.scss";
|
||||
@import "login.scss";
|
||||
@import "footer.scss";
|
||||
Reference in New Issue
Block a user