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

fix merge with tailwindcss

Browse Source
This commit is contained in:
Romulus21
2020-04-27 22:39:32 +02:00
parent 28dc709748 8ce0f34cd6
commit af9f42d29e
27 changed files with 512 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/App.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex">
<div class="flex bg-orange-200 h-screen overflow-y-hidden">
<Nav />
<div v-if="authUser" class="w-100">
<div v-if="authUser" class="w-full overflow-y-auto">
<TopBar />
<main>
<router-view :key="$route.fullPath" class="main"></router-view>
<router-view :key="$route.fullPath"></router-view>
</main>
</div>
</div>

4
resources/js/components/Avatar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex justify-center items-center rounded-full bg-orange-600 hover:bg-orange-800">
<img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
<span v-else class="avatar" v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
<span v-else class="text-2xl font-bold" v-bind:class="'text-' + size">{{ alt[0] }}</span>
</div>
</template>

8
resources/js/components/InputField.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="relative mt-1" :classes="classes">
<label :for="name" class="pb-1">{{ label }}</label>
<input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
<p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
<div class="relative mb-2">
<label :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
<input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()" class="w-full rounded p-2">
<p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
</div>
</template>

2
resources/js/components/Loader.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-if="loading" class="flex-center">
<div v-if="loading" class="flex items-center">
<svg-vue icon="loader" class="loader"/>
</div>
</template>

38
resources/js/components/Nav.vue
View File

@@ -1,22 +1,24 @@
<template>
<nav v-bind:class="{ small: !toggleNav }">
<router-link to="/" class="site-logo-main" v-bind:class="{ small: !toggleNav }">
<svg-vue icon="logo" />
</router-link>
<hr>
<router-link to="/memos" class="nav-item">
<svg-vue icon="memos" />
<span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
</router-link>
<router-link to="/to-do-lists" class="nav-item">
<svg-vue icon="list" />
<span v-bind:class="{ navhidden: !toggleNav }">To Do Lists</span>
</router-link>
<router-link to="/jeux" class="nav-item">
<svg-vue icon="games" />
<span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
</router-link>
<div @click="toggleNavBar" class="nav-toggle mt-5">
<nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-orange-400 flex flex-col justify-between">
<div class="">
<router-link to="/" class="logo" v-bind:class="{ small: !toggleNav }">
<svg-vue icon="logo" />
</router-link>
<hr>
<router-link to="/memos" class="nav-item p-2">
<svg-vue icon="memos" />
<span>Memos</span>
</router-link>
<router-link to="/to-do-lists" class="nav-item">
<svg-vue icon="list" />
<span>To Do Lists</span>
</router-link>
<router-link to="/jeux" class="nav-item p-2">
<svg-vue icon="games" />
<span>Jeux</span>
</router-link>
</div>
<div @click="toggleNavBar" class="nav-toggle flex ml-2">
<svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
</div>
</nav>

6
resources/js/components/TextAreaField.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="relative mt-1">
<div class="relative mb-2">
<label v-if="label" :for="name" class="pb-1">{{ label }}</label>
<textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
<p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
<textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="w-full h-64 rounded p-2">{{ data }}</textarea>
<p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
</div>
</template>

14
resources/js/components/TopBar.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="flex-between flex-middle py-1 px-2 topbar">
<router-link v-if="authUser" :to="'/profile'" class="flex-middle avatar-box">
<Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
{{ authUser.data.attributes.name }}
<div class="top-bar flex justify-between bg-orange-300">
<router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
<Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
<span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
</router-link>
<form v-if="authUser && search" class="search-box">
<form v-if="authUser && search" class="m-2">
<input type="search" name="search" placeholder="Search">
<button type="submit" value="S">
<svg-vue icon="search" />
</button>
</form>
<router-link to="/dashboard" v-if="authUser" class="mr-1">
<svg-vue icon="params" />
<router-link to="/dashboard" v-if="authUser" class="text-orange-600 hover:text-orange-800">
<svg-vue icon="params" class="w-10 m-2 fill-current" />
</router-link>
<router-link v-else to="/login">
Se connecter

8
resources/js/views/DashBoard.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="m-2">
<div class="flex-between">
<h1 class="mb-3">Administration</h1>
<a href="#" @click.prevent="logout" class="btn btn-icon">
<div class="p-4">
<div class="flex justify-between">
<h1 class="page-title">Administration</h1>
<a href="#" @click.prevent="logout" class="btn">
<svg-vue icon="logout" /> Déconnexion
</a>
</div>

8
resources/js/views/Games/GameIndex.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="p-2">
<h1>Liste des jeux</h1>
<div class="container-cards-list mt-2">
<HangmanIndex link="/jeux/pendu" class="card" />
<div class="p-4">
<h1 class="page-title">Liste des jeux</h1>
<div class="flex flex-wrap mt-4">
<HangmanIndex link="/jeux/pendu" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 card" />
</div>
</div>
</template>

6
resources/js/views/Games/HangMan/Hangman.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="p-2 game-container">
<h1 class="text-center">Pendu</h1>
<p class="text-center">Trouve le mot du pendu - Saisi les lettres</p>
<div class="flex-center dic-select">
<h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
<p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
<div class="flex justify-center dic-select">
<div v-for="(dic, key) in dictionary">
<a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
</div>

10
resources/js/views/Memo/MemoCreate.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="memo-edit p-2">
<div class="flex-between mb-1">
<div class="p-4">
<div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">< Back</router-link>
<button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
<button @click="$router.back()" class="btn-alert">Cancel</button>
</div>
<form @submit.prevent="submitForm">
<InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
<TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
<div class="flex-end mt-1">
<div class="flex justify-end mt-2">
<button class="btn-primary">Add New Memo</button>
</div>
</form>

10
resources/js/views/Memo/MemoEdit.vue
View File

@@ -12,15 +12,15 @@
:model="form.type"
classes="cover"
:alt="form.name"/>
<div class="flex-between ml-2 mt-1 absolute t-0">
<router-link :to="'/memos/' + this.$route.params.id" class="btn-secondary">< Back</router-link>
</div>
</div>
<div class="p-2">
<div class="p-4">
<div class="flex justify-between mb-4">
<router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
</div>
<form @submit.prevent="submitForm">
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
<div class="flex-end mt-1">
<div class="flex justify-end mt-2">
<button class="btn-primary">Save</button>
</div>

20
resources/js/views/Memo/MemoIndex.vue
View File

@@ -1,20 +1,24 @@
<template>
<div class="p-2">
<div class="flex-between flex-center mb-1">
<div class="p-4">
<div class="flex justify-between flex-center mb-4">
<a href="#" class="btn" @click="$router.back()">< Back</a>
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
</div>
<Loader v-if="loading" />
<div v-else class="container-cards-list">
<div v-else class="flex flex-wrap -m-2">
<div v-if="memos.lenght === 0">
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
</div>
<router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="card">
<div>
<img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="cover">
<h1 class="p-1">{{ memo.data.name }}</h1>
<router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
<div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
<img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
<div class="px-6 py-4">
<h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
</div>
<div class="flex justify-end py-2">
<span class="inline-block bg-orange-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
</div>
</div>
<div class="memo-date p-1">{{ memo.data.last_updated }}</div>
</router-link>
</div>
</div>

17
resources/js/views/Memo/MemoShow.vue
View File

@@ -4,8 +4,8 @@
<div v-else>
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal">
<p class="m-1 text-center">Are you sure you want to delete this record ?</p>
<div class="flex-center m-1 mt-2">
<p class="m-2 text-center">Are you sure you want to delete this record ?</p>
<div class="flex justify-center mx-2 my-4">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-alert" @click="destroy"> Delete</button>
</div>
@@ -16,23 +16,22 @@
class="cover"
:src="memo.attributes.cover_image.data.attributes.path"
/>
<div class="flex-col flex-between absolute memo-cover">
<div class="flex-between px-2 py-1">
<div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
<div class="flex items-center justify-between p-4">
<router-link to="/memos/" class="btn-secondary">< Back</router-link>
<div class="flex-middle">
<router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
</div>
</div>
<h1 class="memo-title flex-center">{{ memo.name }}</h1>
<h1 class="flex justify-center text-white text-3xl px-4 font-bold text-shadow">{{ memo.name }}</h1>
</div>
</div>
<!-- <TagBox :memo="memo" />-->
<div class="p-2">
<div class="p-4">
<p class="memo-style pt-1" v-html="memoMarkdown"></p>
<div class="memo-change">@last update : {{ memo.last_updated }}</div>
<p class="pt-2" v-html="memoMarkdown"></p>
<div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
</div>
</div>
</div>

8
resources/js/views/User/ProfileUser.vue
View File

@@ -9,9 +9,9 @@
:author="authUser"
:id="authUser.data.user_id"
:model="authUser.data.type"
classes="cover"
classes=""
:alt="authUser.data.attributes.name"/>
<div class="absolute b-0">
<div class="absolute w-64 bottom-0">
<UploadableImage
:image-width=750
:image-height=750
@@ -20,9 +20,9 @@
:author="authUser"
:id="authUser.data.user_id"
:model="authUser.data.type"
classes="profile absolute"
classes="absolute w-64 h-64 -bottom-12 left-8 rounded-full"
:alt="authUser.data.attributes.name"/>
<h1 class="profile-title">{{ authUser.data.attributes.name }}</h1>
<h1 class="relative z-10 text-white text-shadow text-3xl left-80 bottom-0">{{ authUser.data.attributes.name }}</h1>
</div>
</div>
</div>

10
resources/js/views/User/UserAdmin.vue
View File

@@ -1,10 +1,10 @@
<template>
<div v-if="authUser">
<div class="flex mb-4">
<div class="flex m-4">
<div class="avatar mr-2">
<Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
<Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
</div>
<div class="flex-col flex-center">
<div class="flex flex-col justify-center ml-2">
<div><strong>{{ authUser.data.attributes.name }}</strong></div>
<div><strong>{{ authUser.data.attributes.email }}</strong></div>
</div>
@@ -18,10 +18,10 @@
<transition name="fade">
<form @submit.prevent="addMember" v-if="userAddToggle" class="box-toggle-content" >
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
<div class="flex mb-1">
<div class="flex mb-2">
<InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
<div class="flex-middle mt-4">
<div class="flex items-end mb-2">
<button class="btn-primary">Ajouter</button>
</div>
</div>

52
resources/sass/app.scss vendored
View File

@@ -1,30 +1,36 @@
@import "setup/reset";
@import "setup/colors";
@import "setup/fonts";
@import "setup/positions";
@import "setup/containers";
@import "setup/effects";
@tailwind base;
@tailwind components;
//@import "setup/reset";
//@import "setup/colors";
//@import "setup/fonts";
//@import "setup/positions";
//@import "setup/containers";
//@import "setup/effects";
//
@import "components/transitions";
@import "components/btn";
@import "components/elements";
@import "components/loader";
@import "components/events";
@import "components/main";
//@import "components/loader";
//@import "components/main";
@import "components/nav";
@import "components/topbar";
@import "components/modal";
@import "components/images";
@import "components/avatar";
@import "components/alert_box";
@import "components/search_box";
@import "components/owfont-regular";
@import "pages/auth";
@import "pages/users";
@import "pages/memos";
@import "pages/meteo";
@import "pages/games";
//@import "components/topbar";
//@import "components/modal";
//@import "components/images";
//@import "components/avatar";
//@import "components/alert_box";
//@import "components/search_box";
//@import "components/owfont-regular";
//
//@import "pages/auth";
//@import "pages/users";
//@import "pages/memos";
//@import "pages/meteo";
//@import "pages/games";
//
@import "pages/games/hangman";
@tailwind utilities;

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

@@ -1,68 +1,107 @@
// 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 text-white 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;
}
svg {
@apply w-4 fill-current mr-2 inline;
}
}
.btn-primary {
@extend .btn;
background-color: $medium;
border-color: $medium;
color: $white;
@apply bg-orange-600;
&:visited,
&:focus {
color: $white;
&:hover {
@apply bg-orange-800;
}
}
.btn-secondary {
@extend .btn;
background-color: $mediumLight;
border-color: $mediumLight;
color: $dark;
@apply bg-orange-600;
&:hover {
@apply bg-orange-800;
}
}
.btn-alert {
@extend .btn;
background-color: $error;
border-color: $error;
color: $white;
@apply bg-red-600 text-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;
}
@apply bg-red-800;
}
}

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

@@ -1,42 +1,94 @@
// Elements
label {
display: block;
.text-shadow {
text-shadow: 1px 1px 2px #000;
}
textarea,
input {
width: 100%;
border: 1px solid $light;
background-color: $greyLight;
font-size: 1.6rem;
font-family: $fontMain;
padding: 0.5rem 1rem;
border-radius: 0.2rem;
&:focus {
background-color: $white;
border-color: $dark;
}
.left-8 {
left: 2rem;
}
input[type="checkbox"] {
width: unset;
.left-80 {
left: 20rem;
}
& + label {
display: inline;
}
.-bottom-12 {
bottom: -3rem;
}
.max-h-64 {
max-height: 16rem;
}
.page-title {
@apply text-3xl font-bold text-orange-900;
}
a {
color: $mediumDark;
@apply text-orange-700;
&:focus,
&:visited {
color: $dark;
&:hover {
@apply text-orange-900;
}
}
pre {
$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;
}
.box-toggle {
@apply shadow;
&-header {
@apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
svg {
@apply w-8 text-orange-600 fill-current;
}
}
svg {
transform: rotate(270deg);
transition: transform 0.3s;
&.open {
transform: rotate(90deg);
}
}
&-content {
padding: 0.5rem 1rem;
}
}
.card {
@apply bg-orange-300 rounded;
svg {
@apply max-w-full max-h-64 m-auto fill-current;
}
h2 {
@apply text-2xl text-center font-bold;
}
&:hover {
@apply bg-orange-500;
h2 {
@apply text-orange-700;
}
}
}

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

@@ -4,3 +4,13 @@
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

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

@@ -1,30 +1,25 @@
$modal-duration: 1s;
.modal-container {
background-color: rgba(0,0,0,0.6);
//display: none;
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
}
.modal {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
z-index: 20;
//overflow: hidden;
@apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
width: 400px;
animation-name: modalopen;
animation-duration: $modal-duration;
}
@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

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

19
resources/sass/pages/games/hangman.scss vendored
View File

@@ -17,14 +17,14 @@
.figure-container {
fill: transparent;
stroke: $mediumDark;
stroke: orange;
stroke-width: 4px;
stroke-linecap: round;
}
.figure-part {
display: none;
stroke: $dark;
stroke: #7b341e;
}
.wrong-letters-container {
@@ -47,13 +47,11 @@
}
.word {
display: flex;
align-self: center;
justify-self: center;
@apply flex justify-center items-center;
bottom: 1rem;
.letter {
border-bottom: 3px solid $medium;
border-bottom: 3px solid #c05621;
display: inline-flex;
font-size: 30px;
align-items: center;
@@ -69,16 +67,17 @@
width: calc(100% - 6rem);
.popup {
background-color: $medium;
background-color: #c05621;
border-radius: 5px;
color: $light;
color: #fbd38d;
min-height: 10rem;
padding: 20px;
text-align: center;
button {
cursor: pointer;
background-color: #fff;
color: $dark;
color: #7b341e;
border: 0;
margin-top: 20px;
padding: 12px 20px;
@@ -96,7 +95,7 @@
}
.notification-container {
background-color: $mediumLight;
background-color: #ed8936;
border-radius: 2px;
padding: 1rem;
text-align: center;