autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui(right panel): #issue84 CSS - Right panel

Browse Source 
Transform svg files + add them as font.
Review and correct HTML architecture.
Review and add styles.
Open/close menu on right + expand content.
This commit is contained in:
Gaëlle Morin
2019-01-25 15:47:14 +01:00
parent ed50a26380
commit 5bf9568e2f
21 changed files with 530 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/styles/icons/custom-icons.scss Normal file
View File

@ -0,0 +1,115 @@
/* Custom icons */
$ci-filename: "custom-icons";
$ci-font-name: "custom-icons";
$ci-font-family: "custom-icons";
$ci-font-weight: "regular";
$ci-font-path: "../fonts" !default;
$ci-css-prefix: ci !default;
$ci-version: "tlnzh2" !default;
@font-face {
font-family: '#{$ci-font-name}';
src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}');
src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}#iefix') format('embedded-opentype'),
url('#{$ci-font-path}/#{$ci-filename}.ttf?#{$ci-version}') format('truetype'),
url('#{$ci-font-path}/#{$ci-filename}.woff?#{$ci-version}') format('woff'),
url('#{$ci-font-path}/#{$ci-filename}.svg?#{$ci-version}##{$ci-filename}') format('svg');
font-weight: normal;
font-style: normal;
}
$ci-icons: (
awareness: '\e900',
businessman: '\e901',
information: '\e902',
list-1: '\e903',
sale: '\e904',
armor: '\e905',
chat: '\e906',
list: '\e907',
network: '\e908',
offer: '\e909',
reaction: '\e90a',
add: '\e90b',
appointment: '\e90c',
desk: '\e90d',
file: '\e90e',
premium: '\e90f',
team: '\e910',
beer: '\e911',
networking: '\e912',
receipt: '\e913',
robot: '\e914',
team-1: '\e915',
croupier: '\e916',
learning: '\e917',
review: '\e918',
surf: '\e919',
document: '\e91a',
code: '\e91b',
hat: '\e91c',
beer1: '\e91d',
alien: '\e91e',
drawing: '\e91f',
feedback: '\e920',
globe: '\e921'
);
%ci,
[class^='ci-']::before,
[class*='ci-']::before {
display: inline-block;
/* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$ci-font-name}' !important;
font-size: 25px;
font-style: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-align: center;
text-decoration: inherit;
width: 1em;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@function char($character-code) {
@if function-exists("selector-append") {
@return unquote("\"\\#{$character-code}\"");
}
@if "\\#{'x'}" == "\\x" {
@return str-slice("\x", 1, 1) + $character-code;
}
@else {
@return #{"\"\\"}#{$character-code + "\""};
}
}
@function ci($name) {
@if map-has-key($ci-icons, $name) == false {
@warn "Icon #{$name} not found.";
@return "";
}
@return char(map-get($ci-icons, $name));
}
@each $key, $value in $ci-icons {
.#{$ci-css-prefix}-#{$key}:before {
content: char($value);
}
}
@mixin ci($value) {
&:before {
@extend %ci;
@extend .#{$ci-css-prefix}-#{$value};
}
}

9
src/styles/icons.scss → src/styles/icons/icons.scss
View File

@ -58,16 +58,7 @@
// text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}
%outline-person {
background-image: url(/images/svg/icon-outline-person.svg);
background-repeat: no-repeat;
background-position: left top;
padding-top: 20px;
margin-left: 1.35em;;
}
$icons: (
/* outline-person: '\f206', */
user-female: '\e000',
people: '\e001',
user-follow: '\e002',

6
src/styles/material-design-icons.scss → src/styles/icons/material-design-icons.scss
View File

@ -28,10 +28,10 @@ $mdi-icons: (
);
%mdi,
[class^='mdi-']:before,
[class*='mdi-']:before {
[class^='mdi-']::before,
[class*='mdi-']::before {
display: inline-block;
font-family: '#{$mdi-font-name}';
font-family: '#{$mdi-font-name}' !important;
font-size: 25px;
font-style: normal;
font-weight: normal;

9
src/styles/index.scss
View File

@ -1,8 +1,10 @@
@charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media';
@import 'material-design-icons';
@import 'icons';
@import 'icons/custom-icons';
@import 'icons/icons';
@import 'icons/material-design-icons';
@import 'variables';
@import 'mixins';
@import 'main';
@ -18,4 +20,5 @@
// @import 'members';
@import 'header';
@import 'menu';
@import 'menu-left';
@import 'menu-right';

54
src/styles/main.scss
View File

@ -112,11 +112,8 @@ h5 {
overflow-x: hidden;
}
#subContainer {
#content {
display: flex;
flex-grow: 1;
align-items: stretch;
overflow: hidden;
}
#mainContainer {
@ -137,50 +134,7 @@ h5 {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
> sib-router {
font-family: monospace;
color: $color-dark-lava;
background-color: $color-timberwolf;
display: flex;
flex-direction: column;
sib-route {
cursor: pointer;
> div {
position: relative;
padding: 1.5em 3em;
border-bottom: 1px solid $color-taupe-gray;
}
&:hover {
background-color: $color-taupe-gray;
}
&[active] {
font-weight: bold;
background-color: $color-dark-lava;
color: $color-selective-yellow;
> div:before {
opacity: 1;
transform: translateX(-150%);
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}
> div {
@include icon(arrow-left);
&:before {
position: absolute;
transform: translateX(-50%);
opacity: 0;
}
}
}
}
overflow-x: hidden;
> div {
//display: flex;
@ -278,8 +232,8 @@ sib-link.back {
flex-direction: row-reverse;
}
.scrollY {
#project-views-container {
flex: 1 0 0;
overflow-y: auto;
}

207
src/styles/menu-left.scss Normal file
View File

@ -0,0 +1,207 @@
#navbar {
background-color: $color-purple-dark;
color: $color-white;
// max-width: 16rem;
// position: relative;
// min-height: 100%;
transition: flex-basis 0.5s ease-in-out;
display: block;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 16em;
overflow: auto;
flex-direction: column;
font-size: 16px;
&.open {
transform: translateX(0);
}
//@include border-shadow(right);
sib-router {
display: flex;
flex-direction: column;
.menu-wrapper {
&.is-closed {
.sub-menu {
display: none;
}
.menu-chevron {
transform: rotate(180deg);
}
}
}
.divider {
height: 1px;
background-color: $color-gainsboro-a02;
}
.sub-menu {
padding-left: 1.8em;
div {
color: $color-spun-pearl;
padding-bottom: 0.7em;
font-size: 15px;
cursor: pointer;
div[name='project'] {
display: flex;
sib-display-div[name='dash'] {
margin: 0 0.4em;
}
}
}
}
.menu {
display: flex;
flex-direction: row-reverse;
padding: 1em;
// border-top: 1px solid #ddd;
// &:last-child {
// border-bottom: 1px solid #ddd;
// }
cursor: pointer;
font-weight: bold;
&[active] {
background-color: $color-mustard;
color: $color-purple-dark;
.menu-icon:before {
background-color: $color-purple-dark;
color: $color-white;
// transform: perspective(1000px) translateZ(1px) scale(0.8);
}
.menu-notification > sib-display > div:first-child {
background-color: $color-purple-dark;
color: $color-mustard;
font-size: 12px;
}
}
.menu-icon {
//flex-basis: 2em;
width: 4em;
flex-shrink: 0;
flex-grow: 0;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
font-size: 11px;
&:before {
width: 1.9em;
height: 1.9em;
line-height: 1.9em;
font-size: 1.6em;
border-radius: 100%;
// transform: perspective(1000px) translateZ(1px) scale(1);
// will-change: transform;
// transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
}
.menu-chevron {
width: 2em;
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> div {
color: $color-spun-pearl;
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
}
}
.menu-label {
//flex-basis: 8em;
width: 8em;
flex-shrink: 0;
flex-grow: 1;
justify-content: center;
display: flex;
flex-direction: column;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.17px;
font-size: 16px;
}
/*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
.menu-notification {
//flex-basis: 3em;
width: 2em;
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> sib-display {
> div:first-of-type {
color: $color-dark-lava;
display: flex;
justify-content: center;
align-items: center;
width: 1.7em;
height: 1.7em;
border-radius: 100%;
background-color: $color-mustard;
font-size: 12px;
}
}
}
&[id-prefix] {
display: none;
}
> sib-display {
display: block;
font-size: 0.9em;
color: #aaa;
> div {
margin-bottom: 1.5em;
> sib-display {
cursor: pointer;
display: block;
padding: 0.5em 2em;
}
}
}
}
}
}
@include media('width<phone') {
#button-toggle {
display: block;
}
#navbar {
//transform: translateX(-120%);
transition: flex-basis 0.5s ease-in-out;
flex-basis: 0;
//position: absolute;
//top: auto;
//display: none;
//z-index: 1;
}
}

92
src/styles/menu-right.scss Normal file
View File

@ -0,0 +1,92 @@
#mainContainer {
> div {
nav {
> sib-router {
background-color: $color-link-water;
color: $color-purple-dark;
flex: 0 0 auto;
font-size: 16px;
font-weight: 600;
> ul {
cursor: pointer;
list-style: none;
margin: 0;
padding-left: 0;
li {
align-items: center;
border-bottom: 1px solid $color-lavender-gray;
display: flex;
margin-bottom: 0;
margin-left: 0;
margin-top: 0;
padding: 1.5em 1.5em;
position: relative;
width: 12em;
&::before {
float: left;
font-size: 40px;
margin-left: 0;
margin-right: 1.5rem;
}
}
> li {
@include icon('arrow-right-circle');
}
> sib-route {
&[active] {
background-color: $color-purple-dark;
color: $color-mustard;
display: inline-block;
}
&[name^='circle'],
&[name^='project'] {
> li::before {
font-size: 40px;
}
}
&[name$='chat'] > li {
@include ci('chat');
}
&[name$='create'] > li {
@include ci('offer');
}
&[name$='edit'] > li {
@include ci('list');
}
&[name$='profile'] > li {
@include ci('information');
}
}
}
}
&.offsite-is-closed {
transform: translate(12rem);
& #jsOffsiteToggle::before {
transform: rotate(180deg);
}
& ~ #project-views-container {
flex-basis: 95%;
transform: translate(12rem);
}
}
}
}
}

208
src/styles/menu.scss
View File

@ -1,208 +0,0 @@
// #navbar{}
// #navbar-router{}
#navbar {
background-color: $color-purple-dark;
color: $color-white;
// max-width: 16rem;
// position: relative;
// min-height: 100%;
transition: flex-basis 0.5s ease-in-out;
display: block;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 16em;
overflow: auto;
flex-direction: column;
font-size: 16px;
&.open {
transform: translateX(0);
}
//@include border-shadow(right);
}
@include media('width<phone') {
#button-toggle {
display: block;
}
#navbar {
//transform: translateX(-120%);
transition: flex-basis 0.5s ease-in-out;
flex-basis: 0;
//position: absolute;
//top: auto;
//display: none;
//z-index: 1;
}
}
sib-router {
display: flex;
flex-direction: column;
.menu-wrapper {
&.is-closed {
.sub-menu {
display: none;
}
.menu-chevron {
transform: rotate(180deg);
}
}
}
.divider {
height: 1px;
background-color: $color-gainsboro-a02;
}
.sub-menu {
padding-left: 1.8em;
div {
color: $color-spun-pearl;
padding-bottom: 0.7em;
font-size: 15px;
cursor: pointer;
div[name='project'] {
display: flex;
sib-display-div[name='dash'] {
margin: 0 0.4em;
}
}
}
}
.menu {
display: flex;
flex-direction: row-reverse;
padding: 1em;
// border-top: 1px solid #ddd;
// &:last-child {
// border-bottom: 1px solid #ddd;
// }
cursor: pointer;
font-weight: bold;
&[active] {
background-color: $color-mustard;
color: $color-purple-dark;
.menu-icon:before {
background-color: $color-purple-dark;
color: $color-white;
// transform: perspective(1000px) translateZ(1px) scale(0.8);
}
.menu-notification > sib-display > div:first-child {
background-color: $color-purple-dark;
color: $color-mustard;
font-size: 12px;
}
}
.menu-icon {
//flex-basis: 2em;
width: 4em;
flex-shrink: 0;
flex-grow: 0;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
font-size: 11px;
&:before {
width: 1.9em;
height: 1.9em;
line-height: 1.9em;
font-size: 1.6em;
border-radius: 100%;
// transform: perspective(1000px) translateZ(1px) scale(1);
// will-change: transform;
// transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
}
.menu-chevron {
width: 2em;
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> div {
color: $color-spun-pearl;
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
}
}
.menu-label {
//flex-basis: 8em;
width: 8em;
flex-shrink: 0;
flex-grow: 1;
justify-content: center;
display: flex;
flex-direction: column;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.17px;
font-size: 16px;
}
/*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
.menu-notification {
//flex-basis: 3em;
width: 2em;
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> sib-display {
> div:first-of-type {
color: $color-dark-lava;
display: flex;
justify-content: center;
align-items: center;
width: 1.7em;
height: 1.7em;
border-radius: 100%;
background-color: $color-mustard;
font-size: 12px;
}
}
}
&[id-prefix] {
display: none;
}
> sib-display {
display: block;
font-size: 0.9em;
color: #aaa;
> div {
margin-bottom: 1.5em;
> sib-display {
cursor: pointer;
display: block;
padding: 0.5em 2em;
}
}
}
}
}

1
src/styles/variables.scss
View File

@ -18,6 +18,7 @@ $color-bombay: hsl(215, 9%, 73%);
$color-dark-lava: hsl(216, 4%, 22%);
$color-link-water: hsl(221, 51%, 90%);
$color-glitter: hsl(222, 57%, 95%);
$color-lavender-gray: hsl(229, 25%, 79%);
$color-purple-dark: hsl(233, 18%, 29%);
$color-spun-pearl: hsl(244, 10%, 70%);
$color-majorelle-blue: hsl(244, 73%, 62%);