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

add bg-primary classes

Browse Source
This commit is contained in:
Romulus21
2020-05-08 11:36:02 +02:00
parent a90b00d9bd
commit 8fd6608bda
33 changed files with 57 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,77 +1,10 @@
// 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 {
@apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md cursor-pointer;
@apply border bg-primary-400 text-white py-2 px-4 shadow-sm rounded-md cursor-pointer;
&:hover {
@apply text-white bg-orange-600 transition-all duration-300;
@apply text-white bg-primary-600 transition-all duration-300;
}
svg {
@@ -81,19 +14,19 @@
.btn-primary {
@extend .btn;
@apply bg-orange-600;
@apply bg-primary-600;
&:hover {
@apply bg-orange-800;
@apply bg-primary-800;
}
}
.btn-secondary {
@extend .btn;
@apply bg-orange-600;
@apply bg-primary-600;
&:hover {
@apply bg-orange-800;
@apply bg-primary-800;
}
}

39
resources/sass/components/_elements.scss vendored
View File

@@ -20,15 +20,38 @@
max-height: 16rem;
}
@for $i from 1 through 9 {
.bg-primary-#{$i}00 {
@apply bg-green-#{$i}00;
}
.hover:bg-primary-#{$i}00 {
@apply bg-green-#{$i}00;
}
.bg-secondary-#{$i}00 {
@apply bg-blue-#{$i}00;
}
.text-primary-#{$i}00 {
@apply text-gray-#{$i}00;
}
.hover:text-primary-#{$i}00 {
@apply text-gray-#{$i}00;
}
}
.page-title {
@apply text-3xl font-bold text-orange-900;
@apply text-3xl font-bold text-primary-900;
}
a {
@apply text-orange-700;
@apply text-primary-700;
&:hover {
@apply text-orange-900;
@apply text-primary-900;
}
}
@@ -50,10 +73,10 @@ a {
@apply shadow;
&-header {
@apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
@apply flex justify-between items-center px-4 py-2 rounded bg-primary-400 font-bold cursor-pointer;
svg {
@apply w-8 text-orange-600 fill-current;
@apply w-8 text-primary-600 fill-current;
}
}
@@ -73,7 +96,7 @@ a {
}
.card {
@apply bg-orange-300 rounded;
@apply bg-primary-300 rounded;
svg {
@apply max-w-full max-h-64 m-auto fill-current;
@@ -84,10 +107,10 @@ a {
}
&:hover {
@apply bg-orange-500;
@apply bg-primary-500;
h2 {
@apply text-orange-700;
@apply text-primary-700;
}
}
}

21
resources/sass/components/alert_box.scss vendored
View File

@@ -1,21 +0,0 @@
.alert-box {
border: 1px solid $medium;
color: $medium;
font-weight: bold;
border-radius: 3px;
}
.alert-success {
@extend .alert-box;
border-color: $success;
background-color: $success;
color: $white;
}
.alert-error {
@extend .alert-box;
border-color: $error;
background-color: $error;
color: $white;
}

35
resources/sass/components/avatar.scss vendored
View File

@@ -1,35 +0,0 @@
.avatar {
display: flex;
justify-content: center;
align-items: center;
background-color: $dark;
border-radius: 50%;
color: $light;
font-weight: bold;
text-decoration: none;
&-small {
$size: 3rem;
width: $size;
height: $size;
font-size: $size *2/3;
}
&-medium {
$size: 5rem;
width: $size;
height: $size;
font-size: $size *2/3;
}
&-large {
$size: 8rem;
width: $size;
height: $size;
font-size: $size *2/3;
}
}
.avatar-box {
text-decoration: none;
}

7
resources/sass/components/events.scss vendored
View File

@@ -1,7 +0,0 @@
.text-alert {
color: $error;
}
.error-field {
border-color: $error;
}

14
resources/sass/components/images.scss vendored
View File

@@ -1,14 +0,0 @@
.cover {
width: 100%;
//height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.profile {
width: 20rem;
height: 20rem;
border-radius: 50%;
left: 3rem;
bottom: -3rem;
}

5
resources/sass/components/loader.scss vendored
View File

@@ -1,5 +0,0 @@
.loader {
margin-top: 25vh;
stroke: $dark;
width: 10rem;
}

10
resources/sass/components/main.scss vendored
View File

@@ -1,10 +0,0 @@
body {
overflow: hidden;
height: 100vh;
}
main {
overflow: auto;
width: 100%;
height: calc(100vh - 4.5rem);
}

25
resources/sass/components/modal.scss vendored
View File

@@ -1,25 +0,0 @@
$modal-duration: 1s;
.modal-container {
@apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
}
.modal {
@apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
animation-name: modalopen;
animation-duration: $modal-duration;
}
@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

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

@@ -1,117 +1,14 @@
//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 {
@apply w-48;
transition: width 0.3s;
svg {
@apply fill-current text-orange-600 w-12 p-2;
@apply fill-current text-primary-600 w-12 p-2;
transition: color 0.3s;
&:hover {
@apply text-orange-800;
@apply text-primary-800;
}
}
@@ -133,16 +30,16 @@ nav {
transition: width 0.3s;
&:hover {
@apply text-orange-800;
@apply text-primary-800;
}
}
&:hover {
@apply bg-orange-500;
@apply bg-primary-500;
span,
svg {
@apply text-orange-800;
@apply text-primary-800;
}
}
}

14
resources/sass/components/search_box.scss vendored
View File

@@ -1,14 +0,0 @@
.search-box {
display: flex;
align-items: center;
button {
background: none;
border: none;
cursor: pointer;
}
svg {
width: 2.4rem;
}
}

16
resources/sass/components/topbar.scss vendored
View File

@@ -1,16 +0,0 @@
.topbar {
background-color: $medium;
width: initial;
box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
svg {
width: 3rem;
fill: $light;
transition: fill 0.2s;
&:hover {
fill: $dark;
transition: fill 0.2s;
}
}
}