Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Tailwing & CssPurge

Browse Source
This commit is contained in:
Romulus21
2020-04-26 11:50:06 +02:00
parent fb9a1432c1
commit ca7177f676
11 changed files with 317 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
resources/sass/components/_btn.scss vendored
View File

@@ -1,68 +1,85 @@
// Button
//.btn {
// font-size: 1.6rem;
// border: 1px solid transparent;
// padding: 0.5rem 1rem;
// border-radius: 0.5rem;
// cursor: pointer;
// box-shadow: 1px 1px 2px $grey;
// text-decoration: none;
// transition: background-color 0.2s, color 0.2s;
//
// &:hover {
// transition: background-color 0.2s, color 0.2s;
// background-color: $mediumDark;
// color: $white;
// }
//}
//
//.btn-primary {
// @extend .btn;
// background-color: $medium;
// border-color: $medium;
// color: $white;
//
// &:visited,
// &:focus {
// color: $white;
// }
//}
//
//.btn-secondary {
// @extend .btn;
// background-color: $mediumLight;
// border-color: $mediumLight;
// color: $dark;
//}
//
//.btn-alert {
// @extend .btn;
// background-color: $error;
// border-color: $error;
// color: $white;
//
// &:hover {
// background-color: $dark;
// }
//}
//
//.btn-icon {
// @extend .btn;
// display: flex;
// align-items: center;
// height: 4rem;
//
// &:hover svg {
// fill: $white;
// }
//
// svg {
// height: 3rem;
// margin-right: 1rem;
//
// &:hover {
// fill: $white;
// }
// }
//}
.btn {
font-size: 1.6rem;
border: 1px solid transparent;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
box-shadow: 1px 1px 2px $grey;
text-decoration: none;
transition: background-color 0.2s, color 0.2s;
@apply border bg-orange-400 py-2 px-4 shadow-sm rounded-md;
&:hover {
transition: background-color 0.2s, color 0.2s;
background-color: $mediumDark;
color: $white;
@apply text-white bg-orange-600 transition-all duration-300;
}
}
.btn-primary {
@extend .btn;
background-color: $medium;
border-color: $medium;
color: $white;
&:visited,
&:focus {
color: $white;
}
}
.btn-secondary {
@extend .btn;
background-color: $mediumLight;
border-color: $mediumLight;
color: $dark;
}
.btn-alert {
@extend .btn;
background-color: $error;
border-color: $error;
color: $white;
@apply bg-orange-600;
&:hover {
background-color: $dark;
}
}
.btn-icon {
@extend .btn;
display: flex;
align-items: center;
height: 4rem;
&:hover svg {
fill: $white;
}
svg {
height: 3rem;
margin-right: 1rem;
&:hover {
fill: $white;
}
@apply bg-orange-800;
}
}

237
resources/sass/components/nav.scss vendored
View File

@@ -1,103 +1,178 @@
//nav {
// background-color: $mediumDark;
// height: 100vh;
// width: 15rem;
// flex-shrink: 0;
// display: flex;
// flex-direction: column;
// box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
// transition: width $transition-delay;
//
// &.small {
// width: 5.5rem;
// }
//
// hr {
// width: 90%;
// border-radius: 1px;
// border: 1px solid $dark;
// }
//
// .nav-item {
// display: flex;
// align-items: center;
// text-decoration: none;
// color: $light;
// padding-top: 1rem;
// padding-bottom: 1rem;
//
// span {
// overflow: hidden;
// }
//
// svg {
// margin: 0 1rem;
// width: 3rem;
// transition: fill 0.2s;
// fill: $light;
// }
//
// &:hover {
// color: $dark;
// background-color: $light;
// transition: color 0.2s, background-color 0.2s;
//
// svg {
// fill: $dark;
// transition: fill 0.2s;
// }
// }
//
// //&:visited {
// // color: $dark;
// //}
// }
//}
//
//.site-logo {
// width: 3rem;
// fill: $light;
// transition: fill 0.2s;
//
// &:hover {
// fill: $dark;
// transition: fill 0.2s;
// }
//}
//
//.navhidden {
// width: 0;
//}
//
//
//.site-logo-main {
// @extend .site-logo;
// display: block;
// margin: 1rem;
// width: 13rem;
// transition: width $transition-delay;
//
// svg {
//
// width: 100%;
// }
//
// &.small {
// //padding-bottom: 10rem;
// width: 3.5rem;
// }
//}
//
//.nav-toggle {
// @extend .site-logo;
// align-self: center;
//
// svg {
// transition: transform $transition-delay;
// }
//
// svg.small {
// transform: rotate(-180deg);
// }
//}
nav {
background-color: $mediumDark;
height: 100vh;
width: 15rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
transition: width $transition-delay;
@apply w-48;
transition: width 0.3s;
&.small {
width: 5.5rem;
svg {
@apply fill-current text-orange-600 w-12 p-2;
transition: color 0.3s;
&:hover {
@apply text-orange-800;
}
}
hr {
width: 90%;
border-radius: 1px;
border: 1px solid $dark;
.logo {
@apply block;
svg {
@apply w-40 m-2;
transition: width 0.3s, color 0.3s;
}
}
.nav-item {
display: flex;
align-items: center;
text-decoration: none;
color: $light;
padding-top: 1rem;
padding-bottom: 1rem;
@apply flex items-center;
span {
overflow: hidden;
}
@apply font-bold text-xl ml-2 overflow-hidden;
transition: width 0.3s;
svg {
margin: 0 1rem;
width: 3rem;
transition: fill 0.2s;
fill: $light;
}
&:hover {
color: $dark;
background-color: $light;
transition: color 0.2s, background-color 0.2s;
svg {
fill: $dark;
transition: fill 0.2s;
&:hover {
@apply text-orange-800;
}
}
//&:visited {
// color: $dark;
//}
&:hover {
@apply bg-orange-500;
span,
svg {
@apply text-orange-800;
}
}
}
.nav-toggle svg {
transition: transform 0.3s;
}
}
.site-logo {
width: 3rem;
fill: $light;
transition: fill 0.2s;
nav.small {
@apply w-16;
&:hover {
fill: $dark;
transition: fill 0.2s;
.logo {
@apply w-16 p-0;
svg {
@apply w-16 m-0;
}
}
.nav-item span {
@apply w-0;
}
.nav-toggle svg {
transform: rotate(-180deg);
}
}
.navhidden {
width: 0;
}
.site-logo-main {
@extend .site-logo;
display: block;
margin: 1rem;
width: 13rem;
transition: width $transition-delay;
svg {
width: 100%;
}
&.small {
//padding-bottom: 10rem;
width: 3.5rem;
}
}
.nav-toggle {
@extend .site-logo;
align-self: center;
svg {
transition: transform $transition-delay;
}
svg.small {
transform: rotate(-180deg);
}
.app {
//min-width: 100%;
width: initial;
}