+
+
+
+
+
+
+
+
+
+ Some Title
+
+
+
+
+ Some Title
+
+
diff --git a/webpack/page/home.js b/webpack/page/home.js
index 6061ad7..8134c6b 100644
--- a/webpack/page/home.js
+++ b/webpack/page/home.js
@@ -36,4 +36,4 @@ new Vue({
// popup test
-// popup.ask({title: 'Un exemple de popup', content: "Un
PopUp sauvage apparait !!
contenu HTML quelconque ...
une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'search' }, function(e){ console.log("Resultat Popup: "+!!e); });
\ No newline at end of file
+// popup.ask({title: 'Un exemple de popup', content: "Un
PopUp sauvage apparait !!
contenu HTML quelconque ...
une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'neutral' }, function(e){ console.log("Resultat Popup: "+!!e); });
\ No newline at end of file
diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss
index 3e272f3..e5f8582 100644
--- a/webpack/scss/constants.scss
+++ b/webpack/scss/constants.scss
@@ -1,15 +1,18 @@
// BACKGROUND COLOR
-$bg-color: #eee;
+$bg-color: darken(#f9f9f9, 2%);
+$bg-color: #f4f8f9;
+$primary-color: #545f75;
+$secondary-color: #b8c0c8;
/* COULEUR DES ERREURS */
$error-color: #cc5857;
/* FORMULAIRES */
-$form-valid-color: #27a560;
-$form-neutral-color: #2193e6;
-$form-search-color: #5630ed;
-$form-invalid-color: #d52918;
-$form-grey-color: #8d8d8d;
+$form-valid-color: #20d696;
+$form-neutral-color: #b8c0c8;
+$form-search-color: #e5c41d;
+$form-invalid-color: #ea4b35;
+$form-grey-color: lighten($secondary-color, 5%);
/* GESTION DES LONGUEURS */
@@ -22,9 +25,14 @@ $rd-form-search-color: '5630ed';
$rd-form-invalid-color: 'd52918';
// Menu
-$menu-bg: #303030;
-$menu-width: 3em;
-$menu-outer-width: #{$menu-width + 1em};
+$menu-bg: #fff;
+$menu-item-inactive: 'b9c4ce';
+$menu-item-width: 3em;
+$menu-width: #{$menu-item-width + 1em};
+
+// Header
+$header-bg: #fff;
+$header-height: 3em;
$c404-bubble-width: 40vh;
\ No newline at end of file
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 61885e0..ddc8948 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -5,11 +5,72 @@
display: block;
position: absolute;
- top: 0;
- left: $menu-outer-width;
- height: 100%;
- width: calc( 100% - #{$menu-outer-width} );
+ top: $header-height;
+ left: $menu-width;
+ min-height: calc( 100% - #{$header-height} );
+ width: calc( 100% - #{$menu-width} );
+ height: auto;
+
background-color: $bg-color;
+ overflow: hidden;
+ overflow-y: auto;
+
+ z-index: 100;
+
+}
+
+
+
+/* [1] List style
+---------------------------------*/
+#CONTAINER.list{
+ display: flex;
+
+ // flex properties
+ flex-direction: column;
+ justify-content: flex-start;
+
+
+ & > *:first-child{ margin-top: 1em; }
+ & > *:last-child{ margin-bottom: 3em; }
+
+ /* (1) List element */
+ & > section{
+
+ display: block;
+
+ margin: .3em 1em;
+ padding: .8em 1em;
+
+ border-radius: 5px / 5px;
+
+ background-color: #fff;
+
+ }
+
+ /* (2) List title */
+ & > h1{
+ display: inline-block;
+
+ margin: 0 1.2em;
+ margin-top: .8em;
+
+ font-size: inherit;
+ color: darken($secondary-color, 5%);
+
+ }
+
+ /* (3) List separator */
+ & > hr{
+ display: block;
+ position: relative;
+
+ margin: 1em 1.5em;
+
+ border: 0;
+ border-bottom: 2px solid darken($bg-color, 5%);
+ }
+
}
\ No newline at end of file
diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index d76c193..c8243f3 100644
--- a/webpack/scss/global.scss
+++ b/webpack/scss/global.scss
@@ -1,92 +1,34 @@
@import 'constants';
-/* [3] Formulaires
-=========================================================*/
-section > form, .form{
+/* (1) Champs de texte */
+input[type=text], .neutral > input[type=text],
+input[type=mail], .neutral > input[type=mail],
+input[type=password], .neutral > input[type=password],
+select, .neutral > select,
+input[type=text].neutral,
+input[type=mail].neutral,
+input[type=password].neutral,
+select.neutral{
+
display: inline-block;
- position: relative;
- left: 50%;
- margin: .3em 0;
- padding: 1em;
+ margin: 1em;
+ padding: .5em 1em;
border-radius: 3px;
- border-color: $form-invalid-color;
- box-shadow: 0 0 1px #b7b7b7;
+ border: 1px dashed $form-neutral-color;
background-color: #fff;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
+ color: $form-neutral-color;
- &#choose-cluster{
- left: 0;
- -webkit-transform: none;
- transform: none;
+ transition: border .2s ease-in-out,
+ color .2s ease-in-out;
+
+ &:focus, &:hover{
+ border-color: darken($form-neutral-color, 10%);
+ color: $primary-color;
}
- &.valid{
- border-color: $form-valid-color;
- }
-
- &.neutral{
- border-color: $form-neutral-color;
- }
-
- &.search{
- border-color: $form-neutral-color;
- }
-
- // Textes centres
- .edit_search_view,
- .remove_search_view{
- display: inline-block;
- width: 100%;
-
- text-align: center;
- color: #aaaaaa;
-
- span{
- color: #888888;
- }
- }
-
- span.error-msg{
- display: inline-block;
- color: #F03C3C;
- font-size: 0.7em;
- }
-
-}
-
-
-/* (1) Champs de texte */
-input[type=text],
-input[type=mail],
-input[type=password],
-select,
-.invalid > input[type=text],
-.invalid > input[type=mail],
-.invalid > input[type=password],
-.invalid > select,
-input.invalid[type=text],
-input.invalid[type=mail],
-input.invalid[type=password],
-select.invalid{
- display: inline-block;
- margin: 1em 0;
- padding: .7em 1em;
-
- border-radius: 3px;
- border: 1px solid #d7dde8;
-
- color: #2f3033;
-
- transition: border .4s ease-in-out;
-
- &:focus,
- &:hover{
- border-color: $form-invalid-color;
- }
}
@@ -110,25 +52,33 @@ input.valid[type=text],
input.valid[type=mail],
input.valid[type=password],
select.valid{
- &:focus,
- &:hover{
- border-color: $form-valid-color;
+
+ border-color: darken($form-valid-color, 0%);
+
+
+ &:focus, &:hover{
+ border-color: darken($form-valid-color, 10%);
}
+
}
// Champs neutres
-.neutral > input[type=text],
-.neutral > input[type=mail],
-.neutral > input[type=password],
-.neutral > select,
-input.neutral[type=text],
-input.neutral[type=mail],
-input.neutral[type=password],
-select.neutral{
- &:focus,
- &:hover{
- border-color: $form-neutral-color;
+.invalid > input[type=text],
+.invalid > input[type=mail],
+.invalid > input[type=password],
+.invalid > select,
+input.invalid[type=text],
+input.invalid[type=mail],
+input.invalid[type=password],
+select.invalid{
+
+ border-color: darken($form-invalid-color, 0%);
+
+
+ &:focus, &:hover{
+ border-color: darken($form-invalid-color, 10%);
}
+
}
// Champs neutres
@@ -139,104 +89,88 @@ select.neutral{
input.search[type=text],
input.search[type=mail],
input.search[type=password]{
- &:focus,
- &:hover{
- border-color: $form-search-color;
+
+ border-color: darken($form-search-color, 0%);
+
+
+ &:focus, &:hover{
+ border-color: darken($form-search-color, 10%);
}
+
}
/* (2) Boutons */
-button,
-button.invalid,
-.invalid > button{
+button, .neutral > button,
+input[type=button], .neutral > input[type=button],
+input[type=submit], .neutral > input[type=submit],
+button.neutral,
+input[type=button].neutral,
+input[type=submit].neutral{
+
display: inline-block;
position: relative;
- left: 50%;
- padding: .7em 1em;
+ padding: .5em 1em;
border-radius: 3px;
- border: 1px solid $form-invalid-color;
+ border: 1px dashed $form-neutral-color;
- background: $form-invalid-color center center no-repeat;
+ background: $bg-color center center no-repeat;
+ text-transform: uppercase;
- color: #fff;
+ color: $form-neutral-color;
cursor: pointer;
- transition: background .4s ease-in-out;
+ transition: color .2s ease-in-out,
+ border-color .2s ease-in-out,
+ background .2s ease-in-out;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
-
- &:hover,
- &:focus,
- &:disabled{
+ &:hover, &:focus{
+ color: darken($form-neutral-color, 10%);
+ border-color: $primary-color;
background-color: #fff;
- color: $form-invalid-color;
}
}
// Boutons grisés
-button.grey,
-.grey > button{
+button:disabled,
+button.grey, .grey > button,
+input[type=button].grey, .grey > input[type=button],
+input[type=submit].grey, .grey > input[type=submit]{
+
border-color: $form-grey-color;
- background-color: $form-grey-color;
-
- &:hover,
- &:focus,
- &:disabled{
- background-color: #fff;
- color: $form-grey-color;
- }
+ cursor: default;
}
// Boutons valides
-button.valid,
-.valid > button{
+button.valid, .valid > button,
+input[type=button].valid, .valid > input[type=button],
+input[type=submit].valid, .valid > input[type=submit]{
+
border-color: $form-valid-color;
- background-color: $form-valid-color;
-
- &:hover,
- &:focus,
- &:disabled{
- background-color: #fff;
- color: $form-valid-color;
- }
}
-// Boutons neutres
-button.neutral,
-.neutral > button{
- border-color: $form-neutral-color;
+// Boutons invalides
+button.invalid, .invalid > button,
+input[type=button].invalid, .invalid > input[type=button],
+input[type=submit].invalid, .invalid > input[type=submit]{
- background-color: $form-neutral-color;
+ border-color: $form-invalid-color;
- &:hover,
- &:focus,
- &:disabled{
- background-color: #fff;
- color: $form-neutral-color;
- }
}
// Boutons recherche
-button.search,
-.search > button{
+button.search, .search > button,
+input[type=button].search, .search > input[type=button],
+input[type=submit].search, .search > input[type=submit]{
+
border-color: $form-search-color;
- background-color: $form-search-color;
-
- &:hover,
- &:focus,
- &:disabled{
- background-color: #fff;
- color: $form-search-color;
- }
}
diff --git a/webpack/scss/header.scss b/webpack/scss/header.scss
index e69de29..892e2f0 100644
--- a/webpack/scss/header.scss
+++ b/webpack/scss/header.scss
@@ -0,0 +1,21 @@
+@import 'constants';
+
+#HEADER{
+
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: calc( #{$header-height} - 1px );
+
+ background-color: $header-bg;
+ border-bottom: 1px solid #e3e7eb;
+
+ // flex properties
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+
+ z-index: 150;
+}
\ No newline at end of file
diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss
index 11fae28..e9a3938 100644
--- a/webpack/scss/layout.scss
+++ b/webpack/scss/layout.scss
@@ -13,12 +13,8 @@ body{
width: 100%;
height: 100%;
- background: $bg-color;
-
font-size: 16px;
- font-family: 'Open Sans';
-
- color: #333;
+ font-family: 'Fira Sans';
}
@@ -32,11 +28,7 @@ body{
height: 100%;
background: $bg-color;
-
-
- &.login{
- background: #ddd;
- }
+ color: $primary-color;
}
@@ -80,109 +72,3 @@ body{
}
}
}
-
-
-
-/* [4] Popup background - window
-==========================================*/
-#POPUP{
- display: none;
- position: fixed;
- top: 50%;
- left: 50%;
- min-width: 50%;
- max-width: 50%;
- min-height: 30%;
- max-height: 50%;
-
- // flex properties
- flex-direction: column;
- justify-content: space-between;
-
- border-radius: 5px;
-
- background: #fff;
- color: #34495e;
-
- box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);
-
- -webkit-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
-
- z-index: 1000;
-
- &.active{
- display: flex;
- }
-
-
- & > .header{
- display: block;
- position: relative;
- width: calc( 100% - 2*1em );
-
- padding: 1em;
-
- border-radius: 5px 5px 0 0;
- border-bottom: 2px solid #ecf0f1;
-
- font-size: 1.1em;
- font-weight: bold;
- }
-
- & > .body{
- display: block;
- position: relative;
- width: calc( 100% - 2*1em );
-
- padding: 1em;
-
- b, strong{
- color: #5630ed;
- }
- }
-
- & > .footer{
- display: flex;
- position: relative;
- width: calc( 100% - 2*1em );
-
- padding: 1em;
-
- background-color: #ecf0f1;
-
- border-radius: 0 0 5px 5px;
-
- // flex props.
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-end;
-
- & button{
- left: auto;
- margin: 0 1em;
- -webkit-transform: none;
- transform: none;
- }
-
- }
-}
-
-
-#POPUP-BG{
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-
- background: #29333f;
- background: rgba(41, 51, 63, .8);
-
- z-index: 999;
-}
-
-#POPUP.active ~ #POPUP-BG{
- display: block;
-}
\ No newline at end of file
diff --git a/webpack/scss/menu.scss b/webpack/scss/menu.scss
index 935d6c0..da64ac3 100644
--- a/webpack/scss/menu.scss
+++ b/webpack/scss/menu.scss
@@ -14,65 +14,59 @@
---------------------------------------------------------*/
display: flex;
position: absolute;
- top: 0;
+ top: $header-height;
left: 0;
- width: $menu-outer-width;
- height: 100%;
+ width: calc( #{$menu-width} - 1px );
+ height: calc( 100% - #{$header-height} );
background-color: $menu-bg;
+ border-right: 1px solid #e3e7eb;
// flex properties
flex-direction: column;
justify-content: space-around;
align-items: center;
+ z-index: 200;
+
/* (2) Items
---------------------------------------------------------*/
.item{
display: block;
position: relative;
- width: $menu-width;
- height: $menu-width;
+ width: $menu-item-width;
+ height: $menu-item-width;
margin-top: .5em;
- border-radius: 3px / 3px;
-
- box-shadow: inset 0 0 0 transparent;
-
background: $menu-bg center center no-repeat;
background-size: auto 50%;
- border: 1px solid lighten($menu-bg, 5%);
- transition: all .2s ease-in-out;
+ transition: all .1s ease-in-out;
cursor: pointer;
z-index: 1;
/* (1) Set icons */
- &[data-icon='home']{ background-image: url('/asset/svg/home.svg@7992a3'); }
- &[data-icon='teacher']{ background-image: url('/asset/svg/teacher.svg@7992a3'); }
- &[data-icon='ue']{ background-image: url('/asset/svg/ue.svg@7992a3'); }
- &[data-icon='settings']{ background-image: url('/asset/svg/settings.svg@7992a3'); }
- &[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg@7992a3'); }
- &[data-icon='login']{ background-image: url('/asset/svg/login.svg@7992a3'); }
- &[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@7992a3'); }
+ &[data-icon='home']{ background-image: url('/asset/svg/home.svg@#{$menu-item-inactive}'); }
+ &[data-icon='teacher']{ background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}'); }
+ &[data-icon='ue']{ background-image: url('/asset/svg/ue.svg@#{$menu-item-inactive}'); }
+ &[data-icon='settings']{ background-image: url('/asset/svg/settings.svg@#{$menu-item-inactive}'); }
+ &[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg@#{$menu-item-inactive}'); }
+ &[data-icon='login']{ background-image: url('/asset/svg/login.svg@#{$menu-item-inactive}'); }
+ &[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@#{$menu-item-inactive}'); }
/* (2) On hover */
&:hover, &.active{
- border: 1px solid lighten($menu-bg, 20%);
- // box-shadow: inset 0 0 5px darken($menu-bg, 6%);
- box-shadow: 0 0 8px darken($menu-bg, 7%);
+ background-size: auto 55%;
}
- color: #4a71dd;
-
&[data-icon='home']:hover, &[data-icon='home'].active{ background-image: url('/asset/svg/home.svg@10d197'); }
&[data-icon='teacher']:hover, &[data-icon='teacher'].active{ background-image: url('/asset/svg/teacher.svg@edb910'); }
&[data-icon='ue']:hover, &[data-icon='ue'].active{ background-image: url('/asset/svg/ue.svg@1fc9ef'); }
- &[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@b7b7b7'); }
+ &[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@545f75'); }
&[data-icon='fiche']:hover, &[data-icon='fiche'].active{ background-image: url('/asset/svg/fiche.svg@ea4C3a'); }
&[data-icon='login']:hover, &[data-icon='login'].active{ background-image: url('/asset/svg/login.svg@dab245'); }
&[data-icon='logout']:hover, &[data-icon='logout'].active{ background-image: url('/asset/svg/logout.svg@dab245'); }
@@ -91,8 +85,9 @@
padding: .3em .7em;
background-color: $menu-bg;
+ border: 1px solid darken($menu-bg, 5%);
- color: #fff;
+ color: invert(#fff);
border-radius: 3px / 3px;
diff --git a/webpack/scss/pop-up.scss b/webpack/scss/pop-up.scss
new file mode 100644
index 0000000..47c963e
--- /dev/null
+++ b/webpack/scss/pop-up.scss
@@ -0,0 +1,107 @@
+@import 'constants';
+
+/* [4] Popup background - window
+==========================================*/
+#POPUP{
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ min-width: 50%;
+ max-width: 50%;
+ min-height: 30%;
+ max-height: 50%;
+
+ // flex properties
+ flex-direction: column;
+ justify-content: space-between;
+
+ border-radius: 5px;
+
+ background: $bg-color;
+ color: $secondary-color;
+
+ box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);
+
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+
+ z-index: 1000;
+
+ &.active{
+ display: flex;
+ }
+
+
+ & > .header{
+ display: block;
+ position: relative;
+ width: calc( 100% - 2*1em );
+
+ padding: 1em;
+
+ border-radius: 5px 5px 0 0;
+ border-bottom: 2px solid darken($bg-color, 5%);
+
+ font-size: 1.1em;
+ font-weight: bold;
+
+ color: $primary-color;
+ }
+
+ & > .body{
+ display: block;
+ position: relative;
+ width: calc( 100% - 2*1em );
+
+ padding: 1em;
+
+ b, strong{
+ color: $primary-color;
+ }
+ }
+
+ & > .footer{
+ display: flex;
+ position: relative;
+ width: calc( 100% - 2*1em );
+
+ padding: 1em;
+
+ background-color: darken($bg-color, 5%);
+
+ border-radius: 0 0 5px 5px;
+
+ // flex props.
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+
+ & button{
+ left: auto;
+ margin: 0 1em;
+ -webkit-transform: none;
+ transform: none;
+ }
+
+ }
+}
+
+
+#POPUP-BG{
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ background: #29333f;
+ background: rgba(41, 51, 63, .8);
+
+ z-index: 999;
+}
+
+#POPUP.active ~ #POPUP-BG{
+ display: block;
+}
\ No newline at end of file