+
-
-
-
-
-
-
-
-
Some Title
-
-
-
-
-
Some Title
-
-
+
+ in deSiGn
+ Adrien Marquès
+
+
+
+ 13
+ days left in design
+
+
+ 74
+ days to finish
+
+
+
+
+ in deSiGn
+ Lucas Mascaro
+
+
+
+ 23
+ days left in design
+
+
+ 104
+ days to finish
+
+
diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss
index e5f8582..7525ff5 100644
--- a/webpack/scss/constants.scss
+++ b/webpack/scss/constants.scss
@@ -1,7 +1,7 @@
// BACKGROUND COLOR
-$bg-color: darken(#f9f9f9, 2%);
-$bg-color: #f4f8f9;
+$bg-color: #eef2f5;
$primary-color: #545f75;
+$primary-color: #54627c;
$secondary-color: #b8c0c8;
/* COULEUR DES ERREURS */
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index ddc8948..113e37d 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -73,4 +73,234 @@
border-bottom: 2px solid darken($bg-color, 5%);
}
+}
+
+
+
+
+
+/* [2] Card style
+---------------------------------*/
+#CONTAINER.card{
+
+ display: flex;
+
+ // flex properties
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+
+
+ /* (1) Card container */
+ & > section{
+
+ display: block;
+ position: relative;
+
+ margin: 1em;
+ padding: 1.5em;
+
+ border-radius: 3px / 3px;
+ // border: 1px solid darken(#fff, 10%);
+ box-shadow: 0 1px 1px darken(#fff, 20%);
+
+ background-color: #fff;
+
+ color: $primary-color;
+
+ /* (2) Card generic title */
+ & > span.category{
+
+ display: block;
+ position: relative;
+
+ margin-bottom: .5em;
+
+ font-size: .7em;
+ color: darken($secondary-color, 10%);
+ text-transform: uppercase;
+ letter-spacing: .05em;
+
+ }
+
+ /* (2) Card title */
+ & > h1{
+
+ display: block;
+ position: relative;
+
+ color: darken($primary-color, 5%);
+ font-size: 1em;
+
+ &.warning:before{
+ content: '';
+
+ display: inline-block;
+ position: relative;
+ width: 1em;
+ height: 1em;
+
+ margin-right: .3em;
+
+ background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
+ background-size: auto 90%;
+
+ text-anchor: center;
+ }
+
+ }
+
+ /* (3) Card 2-column array */
+ & > div.table{
+
+ display: flex;
+ position: relative;
+
+ margin-top: 1em;
+ padding: .5em;
+
+ border-radius: 3px / 3px;
+ border: 1px solid darken(#fff, 15%);
+
+ // flex properties
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: nowrap;
+
+ /* (4) Column */
+ & > div{
+
+ display: flex;
+ position: relative;
+ height: 2.3em;
+
+ padding: 0 .4em;
+
+ border-left: 1px solid darken(#fff, 15%);
+
+ color: darken($secondary-color, 20%);
+
+ &:first-child{ border-left: 0; }
+
+ // flex properties
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: nowrap;
+
+ /* (4.1) Column Emphasis */
+ & > span:first-child{
+ display: block;
+ position: relative;
+
+ margin-right: .3em;
+
+ font-size: 1.5em;
+ letter-spacing: .05em;
+ }
+
+ /* (4.2) Column Emphasis */
+ & > span:last-child{
+ display: block;
+ position: relative;
+ min-width: 4em;
+ max-width: 6em;
+
+ font-size: .8em;
+ letter-spacing: .05em;
+ text-transform: uppercase;
+
+ overflow: hidden;
+ }
+
+ }
+
+ }
+
+ /* (5) Card footer */
+ & > div.footer{
+
+ display: flex;
+ position: relative;
+ margin-top: 1.3em;
+ margin-left: -1.5em;
+ height: 3.5em;
+ // 100% + parent.margin - padding
+ width: calc( 100% + 2*1.5em - 2*2em );
+
+ // remove card bottom padding
+ margin-bottom: -1.5em;
+
+ padding: 0 2em;
+
+ border-top: 1px solid darken(#fff, 10%);
+ border-radius: 0 0 3px 3px;
+ background-color: #fafbfd;
+
+ // flex properties
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: nowrap;
+
+
+ /* (5.1) Card footer element */
+ & > span{
+
+ display: flex;
+ position: relative;
+ height: 1.3em;
+
+ color: darken($secondary-color, 20%);
+
+ // center text
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+
+ &:before{
+ content: '';
+
+ display: inline-block;
+ position: relative;
+ width: 1.3em;
+ height: 1.3em;
+
+ margin-right: .4em;
+
+ background: transparent center center no-repeat;
+ background-size: 80% auto;
+
+ }
+
+ // specific icons
+ &.course:before{ background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}'); }
+ &.td:before{ background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}'); }
+ &.tp:before{ background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}'); }
+
+ // hover icons
+ &.course.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); }
+ &.td.active:before{ background-image: url('/asset/svg/td.svg@20b565'); }
+ &.tp.active:before{ background-image: url('/asset/svg/tp.svg@e85456'); }
+
+ }
+
+ /* (5.2) Card footer separator */
+ & > hr{
+ display: block;
+ position: relative;
+ width: 1px;
+ height: 1em;
+
+ border: 0;
+ background-color: darken(#fff, 10%);
+ }
+
+ }
+
+
+ }
+
}
\ No newline at end of file