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;
}
}
}

24
resources/sass/pages/auth.scss vendored
View File

@@ -1,24 +0,0 @@
// Auth box
.auth {
max-width: 350px;
width: 100%;
background-color: $light;
margin: 3rem auto;
border-radius: 1rem;
box-shadow: 1px 1px 2px $grey;
.title-page {
font-size: 2.4rem;
font-weight: bold;
text-align: center;
color: $fontTitle;
}
}
.logo {
text-align: center;
font-size: 2.8rem;
color: $dark;
font-weight: bold;
}

5
resources/sass/pages/games.scss vendored
View File

@@ -1,5 +0,0 @@
.card {
}

11
resources/sass/pages/meteo.scss vendored
View File

@@ -1,11 +0,0 @@
.meteo {
width: 25rem;
&-date {
font-size: 1.2rem;
}
.owf {
color: $mediumDark;
}
}

8
resources/sass/pages/users.scss vendored
View File

@@ -1,8 +0,0 @@
.profile-title {
position: relative;
color: $white;
z-index: 2;
padding-bottom: 2rem;
left: 25rem;
text-shadow: 1px 1px 2px $dark;
}

25
resources/sass/setup/_colors.scss vendored
View File

@@ -1,25 +0,0 @@
// Colors
$white: #ffffff;
$black: #1a1a1a;
$grey: grey;
$greyLight: #eeeeee;
$dark: #1F2605;
$mediumDark: #1F6521;
$medium: #53900F;
$mediumLight: #A4A71E;
$light: #D6CE15;
$primary: $mediumDark;
$secondary: #000;
$interactive: #000;
$success: green;
$error: red;
$disabled: #000;
$font: $black;
$fontTitle: $dark;

81
resources/sass/setup/_containers.scss vendored
View File

@@ -1,81 +0,0 @@
.container-cards-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.card {
background-color: $light;
display: flex;
//padding: 1rem;
box-shadow: 1px 1px 2px $grey;
border-radius: 2px;
text-decoration: none;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
img,
svg {
max-height: 15rem;
}
}
.bg-b {
background-color: royalblue;
}
@media (max-width: 1200px) {
.container-cards-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 800px) {
.container-cards-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.container-cards-list {
grid-template-columns: repeat(1, 1fr);
}
}
.box-toggle {
box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
&-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: $light;
padding: 0.5rem 1rem;
border-radius: 0.2rem;
cursor: pointer;
svg {
width: 2rem;
}
}
svg {
transform: rotate(270deg);
transition: transform 0.3s;
&.open {
transform: rotate(90deg);
}
}
&-content {
padding: 0.5rem 1rem;
}
}

1
resources/sass/setup/_effects.scss vendored
View File

@@ -1 +0,0 @@
$transition-delay: 0.2s;

15
resources/sass/setup/_fonts.scss vendored
View File

@@ -1,15 +0,0 @@
// Fonts
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
$fontMain: 'Open Sans', sans-serif;
html {
font-size: 62.5%;
}
body {
font-family: $fontMain;
font-size: 1.6rem;
color: $font;
}

164
resources/sass/setup/_positions.scss vendored
View File

@@ -1,164 +0,0 @@
// Positions
$base: 1rem;
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.block {
display: block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-center {
display: flex;
justify-content: center;
}
.flex-middle {
display: flex;
align-items: center;
}
.flex-end {
display: flex;
justify-content: flex-end;
}
.flex-between {
display: flex;
justify-content: space-between;
}
.flex-shrink {
flex-shrink: 0;
}
.w-100{
width: 100%;
}
.h-100{
height: 100%;
}
.m-auto {
margin-left: auto;
margin-right: auto;
}
.p-auto {
padding-left: auto;
padding-right: auto;
}
@for $i from 0 through 5 {
.flex-#{$i} {
flex: $i;
}
.m-#{$i} {
margin: $i * $base;
}
.mx-#{$i} {
margin-left: $i * $base;
margin-right: $i * $base;
}
.my-#{$i} {
margin-top: $i * $base;
margin-bottom: $i * $base;
}
.mt-#{$i} {
margin-top: $i * $base;
}
.ml-#{$i} {
margin-left: $i * $base;
}
.mr-#{$i} {
margin-right: $i * $base;
}
.mb-#{$i} {
margin-bottom: $i * $base;
}
.p-#{$i} {
padding: $i * $base;
}
.px-#{$i} {
padding-left: $i * $base;
padding-right: $i * $base;
}
.py-#{$i} {
padding-top: $i * $base;
padding-bottom: $i * $base;
}
.pt-#{$i} {
padding-top: $i * $base;
}
.pl-#{$i} {
padding-left: $i * $base;
}
.pb-#{$i} {
padding-bottom: $i * $base;
}
}
.t-0 {
top: 0;
}
.l-0 {
left: 0;
}
.r-0 {
right: 0;
}
.b-0 {
bottom: 0;
}
.z-10 {
z-index: 10;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}

25
resources/sass/setup/_reset.scss vendored
View File

@@ -1,25 +0,0 @@
// Reset
body {
margin: 0;
}
* {
box-sizing: border-box;
}
@for $i from 1 through 6 {
h#{$i} {
margin: 0;
}
}
ul {
margin-top:0;
margin-bottom: 0;
padding-left: 0;
li {
list-style: none;
}
}