From db40b83e5ae4913096c6215b9bc8db6903f0789d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 4 Feb 2019 09:48:39 +0100 Subject: [PATCH] ui(css styles) : font-size was moved from px to rem. --- src/dependencies.pug | 3 +- src/header.pug | 7 +- src/styles/content.scss | 32 +++---- src/styles/filters.scss | 20 ++-- src/styles/form.scss | 34 +++---- src/styles/header.scss | 139 ++++++++++++++++++--------- src/styles/job-offers.scss | 19 ++-- src/styles/main.scss | 115 +++++----------------- src/styles/members.scss | 39 ++++---- src/styles/menu-left.scss | 164 +++++++++++--------------------- src/styles/menu-right.scss | 7 +- src/styles/project-profile.scss | 47 ++++----- src/styles/right-panel.scss | 10 +- src/styles/variables.scss | 37 ++++--- src/styles/variables.scss.orig | 106 +++++++++++++++++++++ 15 files changed, 412 insertions(+), 367 deletions(-) create mode 100644 src/styles/variables.scss.orig diff --git a/src/dependencies.pug b/src/dependencies.pug index b1e1a35..20b63eb 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -34,9 +34,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //- cdn //- don't forget to change version in hd-widgets.js -script(type="module" src="https://unpkg.com/@startinblox/core@0.5") +script(type="module" src="https://unpkg.com/@startinblox/core@0.5.24") script(type="module" src="https://unpkg.com/@startinblox/router@latest") script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1") script(type="module" src="/scripts/hd-widgets.js") - diff --git a/src/header.pug b/src/header.pug index af1b856..6551d37 100644 --- a/src/header.pug +++ b/src/header.pug @@ -3,10 +3,9 @@ img(src="/images/logo.png" width=111 height=32) #search-bar - div - input#search-input(type='search') - i#search-icon.icon-magnifier(aria-hidden='true') - i#close-search-icon.icon-close(aria-hidden='true') + input#search-input(type='search') + i#search-icon.icon-magnifier(aria-hidden='true') + i#close-search-icon.icon-close(aria-hidden='true') details summary#notifications-button diff --git a/src/styles/content.scss b/src/styles/content.scss index a91f6fb..0b797d3 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -17,8 +17,8 @@ } sib-display-img { - width: 2.5em; - height: 2.5em; + width: 4.25rem; + height: 4.25rem; overflow: hidden; border-radius: 100%; } @@ -60,7 +60,7 @@ // chat .chat-view { - padding: 1em; + padding: 1.7rem; position: relative; z-index: 0; @extend %frame; @@ -126,7 +126,7 @@ sib-display#member-info { flex-direction: column; position: relative; @extend %frame; - padding: 1em; + padding: 1.7rem; label { display: none; @@ -134,9 +134,9 @@ sib-display#member-info { div[name='header'] { border-bottom: 1px solid $color-anti-flash-white; - padding-bottom: 1em; - padding: 0.5em; - margin-bottom: 1em; + padding-bottom: 1.7rem; + padding: 0.85rem; + margin-bottom: 1.7rem; display: flex; flex-direction: column; >*{ @@ -190,8 +190,8 @@ sib-display#member-info { border-style: solid; border-color: $color-majorelle-blue; color: $color-majorelle-blue; - margin: 1em; - padding: 1em; + margin: 1.7rem; + padding: 1.7rem; text-decoration:none; } @@ -242,26 +242,26 @@ hdapp-available { div { display: inline-block; - margin-right: 0.4em; + margin-right: 0.7rem; } } sib-link[next='member-chat'] { border-style: solid; - margin: 1em; + margin: 1.7rem; display: flex; border-radius: 25px; border-style: solid; border-color: $color-majorelle-blue; color: $color-majorelle-blue; - margin: 1em; - padding: 1em; + margin: 1.7rem; + padding: 1.7rem; text-decoration:none; } div[name='pseudonym'] { - margin-top: -1em; - margin-bottom: 1em; + margin-top: -1.7rem; + margin-bottom: 1.7rem; } #member-info { @@ -276,7 +276,7 @@ hdapp-available { sib-form { form > * { - margin-top: 0.5em; + margin-top: 0.85rem; } // button like diff --git a/src/styles/filters.scss b/src/styles/filters.scss index 13b6f1a..8eee93c 100644 --- a/src/styles/filters.scss +++ b/src/styles/filters.scss @@ -4,7 +4,7 @@ grid-gap: 0px 15px; grid-template-columns: 50% 50%; grid-template-rows: 3.5em 3.5em; - padding-bottom: 3em; + padding-bottom: 4.8rem; label { display: block; @@ -14,10 +14,10 @@ appearance: none; border-style: none; box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); - font-size: 85%; + font-size: 1.36rem; line-height: 1.80; - margin-top: 1em; - padding: 0.7em; + margin-top: 1.36rem; + padding: 0.9rem; width: 95%; -moz-appearance: none; -webkit-appearance: none; @@ -35,7 +35,7 @@ background-size: 14px 9px; box-sizing: border-box; display: inline-block; - padding: 0.5em 12.5em 0.5em 1em; + padding: 0.68rem; } sib-form-label-text { @@ -44,10 +44,8 @@ } } -#offers-list > sib-form > form { - @extend %filters; -} - -#profiles-list > sib-form > form { - @extend %filters; +#offers-list, #profiles-list { + & > sib-form > form { + @extend %filters; + } } diff --git a/src/styles/form.scss b/src/styles/form.scss index 8e7777f..fc130ac 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -3,34 +3,34 @@ flex-direction: column; margin: 0 auto; min-height: 100vh; - padding: 4em 5em 6em; + padding: 6.8rem 8.5rem 10.2rem; @extend %frame; .form-view { border-bottom: 1px solid $color-platinum; - padding-bottom: 1.5em; + padding-bottom: 2.55rem; } } #job-offer-create, #project-create, #project-edit { - font-size: 17px; + font-size: 1.7rem; h1 { color: $color-purple-dark; font-weight: bold; - font-size: 20px; + font-size: 2rem; text-align: center; } p.form-goal { - margin-bottom: 4em; + margin-bottom: 6.8rem; text-align: center; } p[name$='-text'] { - font-size: 15px; + font-size: 1.5rem; margin-bottom: 2em; } @@ -54,7 +54,7 @@ > label { color: $color-spun-pearl; font-weight: 600; - margin-bottom: 0.5em; + margin-bottom: 0.85rem; } input, @@ -68,12 +68,12 @@ input, textarea { - padding: 1em; + padding: 1.7rem; } select { - margin-bottom: 1em; - padding: 0.5em; + margin-bottom: 1.7rem; + padding: 0.85rem; } } @@ -91,7 +91,7 @@ padding-left: 0; div.choices__list { - margin-top: 1em; + margin-top: 1.7rem; div.choices__item { @extend %skill; @@ -105,8 +105,8 @@ } input[type='text'].choices__input { - max-width: 16em; - min-width: 16em; + max-width: 27.2rem; + min-width: 27.2rem; } } } @@ -164,10 +164,10 @@ border-radius: 100%; color: $color-majorelle-blue; cursor: pointer; - font-size: 1.5em; + font-size: 2.55rem; height: 1em; line-height: 0; - margin: 0.2em; + margin: 0.34rem; padding: 0 0.04em 0.08em; vertical-align: middle; width: 1em; @@ -175,7 +175,7 @@ } input[type='submit'] { - margin-top: 3.5em; + margin-top: 6rem; @extend %submit-form; } } @@ -185,6 +185,6 @@ input, textarea { - margin-bottom: 2em; + margin-bottom: 3.4rem; } } diff --git a/src/styles/header.scss b/src/styles/header.scss index 0211842..26d477c 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -1,69 +1,119 @@ #header { + align-items: center; background-color: $color-white; color: $color-dark-lava; - //position: relative; - //@include border-shadow(bottom); - box-shadow: 0 2px 4px rgba(148, 98, 98, 0.09); - border: solid $color-white; - border-width: 1px 0; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); display: flex; - //flex-grow: 0; - //flex-basis : 150px; flex-shrink: 0; - align-items: center; - padding: 1em 0.4em; + padding: 1.6rem 0.64rem; position: relative; z-index: 1; + //position: relative; + //@include border-shadow(bottom); + //flex-grow: 0; + //flex-basis : 150px; > * { - padding: 0 1.8rem; + padding: 0 2.5rem; } } #button-toggle { - @include icon('menu'); - display: none; color: $color-dark-lava; - font-size: 2em; - padding: 0.72em; cursor: pointer; + display: none; + font-size: 3.2rem; + padding: 2.3rem; + @include icon('menu'); } #logo { flex: 1 1 0; } -details summary::-webkit-details-marker { - display:none; -} - -#notifications-button { - @include icon(bell); - font-size: 2em; - cursor: pointer; - list-style-type: none; +#search-bar { position: relative; - - .menu-notification { - position: absolute; - top: -3px; - left: 3px; + + #search-input { + border-radius: 10em; + padding: 0.64rem 1.28rem; + border: 1px solid $color-bombay; + height: 3.8rem; + width: 28rem; + -webkit-appearance: textfield; + + & ~ #close-search-icon, + & ~ #search-icon { + color: $color-bombay; + display: block; + font-size: 1.7rem; + margin: auto; + position: absolute; + right: 3.7rem; + top: 50%; + transform: translateY(-50%); + -webkit-text-stroke: 1px $color-bombay; + } + + & ~ #close-search-icon { + opacity: 0; + } + + &:focus { + & ~ #close-search-icon { + opacity: 1; + } + + & ~ #search-icon { + visibility: hidden; + } + } } } -#notifications { - position: absolute; - right: 0; - bottom: 0; - height: 0; - left: 0; - z-index: 1; +details { + summary::-webkit-details-marker { + display: none; + } - > div { + #notifications-button { + cursor: pointer; + font-size: 3rem; + list-style-type: none; + position: relative; + @include icon(bell); + + .menu-notification { + //flex-basis: 3em; + align-items: center; + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + left: 0.3rem; + position: absolute; + top: -0.3rem; + width: 2em; + + @extend %notification; + } + } + + #notifications { + bottom: 0; + height: 0; + left: 0; position: absolute; - top: 0; right: 0; + z-index: 1; + + > div { + position: absolute; + right: 0; + top: 0; + } } } @@ -77,12 +127,12 @@ details summary::-webkit-details-marker { } img { - width: 48px; + border-radius: 100%; height: 48px; + margin-right: 2rem; object-fit: cover; object-position: center; - border-radius: 100%; - margin-right: 1rem; + width: 48px; } sib-display-div[name='first_name'] { @@ -90,16 +140,17 @@ details summary::-webkit-details-marker { display: flex; div[name='first_name'] { - font-size: 16px; + align-items: flex-end; + display: flex; + font-size: 1.8rem; font-weight: 600; @include icon('arrow-down'); &::before { - color: color-dark-lava; - margin-left: 10px; + margin-left: 1.5rem; } - } } } } + diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss index ae07381..975b04c 100644 --- a/src/styles/job-offers.scss +++ b/src/styles/job-offers.scss @@ -1,5 +1,6 @@ #offers-list { @extend .grid-layer; + > sib-form { grid-column-start: start; grid-column-end: middle; @@ -14,14 +15,14 @@ grid-row-end: end; &:first-of-type { - margin-top: 3em; + margin-top: 5rem; } > sib-display { @extend %frame; display: block; - margin: 1em 0; - padding: 2em; + margin: 1.7rem 0; + padding: 3.4rem; /*&:nth-child(odd) { background-color: $color-anti-flash-white; }*/ @@ -39,7 +40,7 @@ } [name='creation'] { - margin-top: 20px; + margin-top: 2rem; } [name='description'] { @@ -48,7 +49,7 @@ [name='send'] { color: $color-majorelle-blue; - font-size: 13px; + font-size: 1.3rem; text-align: right; > sib-link { @@ -56,8 +57,8 @@ @include icon('speech'); &::before { - font-size: 15px; - margin-right: 12px; + font-size: 1.5rem; + margin-right: 1.2rem; } } } @@ -99,9 +100,9 @@ border: 1px solid yellow; border-radius: 3px; color: $color-rolling-stone; - font-size: 15px; + font-size: 1.5rem; font-weight: 400; - margin-left: 1em; + margin-left: 1.7rem; padding: calc(16px - 0.8em) 0.7em; } } diff --git a/src/styles/main.scss b/src/styles/main.scss index d1a0a23..59c9815 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -10,22 +10,20 @@ // box-sizing: inherit; } -html { - //box-sizing: border-box; +:root { + font-size: 62.5%; font-family: Open Sans, sans-serif; - font-size: 13px; - background-color: $color-anti-flash-white; - color: $color-text-base; + + body { + //box-sizing: border-box; + background-color: $color-anti-flash-white; + color: $color-text-base; + font-size: 1.6rem; + margin: 0 auto; + overflow-wrap: break-word; + } } -body { - margin: 0 auto; - overflow-wrap: break-word; -// height: 100%; -// display:flex; -// flex-direction: column; - } - h1, h2, h3, @@ -39,7 +37,7 @@ h6 { span { font-weight: 400; - padding-left: 0.5em; + padding-left: 0.85rem; &:before { content: '// '; @@ -48,22 +46,22 @@ h6 { } h1 { - font-size: 1.24em; + font-size: 2.1rem; } -h2 { font-size: 20px; +h2 { font-size: 2rem; } h3 { - font-size: 16px; + font-size: 1.6rem; } h4 { - font-size: 0.68em; + font-size: 1.2rem; } h5 { - font-size: 20px; + font-size: 2rem; } .debug { @@ -87,30 +85,7 @@ button { .frame { @extend %frame; - padding: 3em; -} - -.menu-notification { - //flex-basis: 3em; - align-items: center; - display: flex; - flex-direction: column; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - width: 2em; - - > div { - align-items: center; - background-color: $color-mustard; - border-radius: 100%; - color: $color-dark-lava; - display: flex; - font-size: 12px; - height: 1.7em; - justify-content: center; - width: 1.7em; - } + padding: 5rem; } .layer { @@ -160,50 +135,6 @@ button { } } -#search-bar > div { - position: relative; -} - -#search-icon { - -webkit-text-stroke: 1px $color-bombay; - color: $color-bombay; - pointer-events: none; -} - -#close-search-icon, -#search-icon { - position: absolute; - right: 0.8em; - top: 50%; - transform: translateY(-50%); - margin: auto; - display: block; - font-size: 1.2em; -} - -#search-input { - -webkit-appearance: textfield; - border-radius: 10em; - padding: 0.4em 0.8em; - border: 1px solid $color-bombay; - height: 2.8rem; - width: 22rem; - - & ~ #close-search-icon { - opacity: 0; - } - - &:focus { - & ~ #close-search-icon { - opacity: 1; - } - - & ~ #search-icon { - visibility: hidden; - } - } -} - sib-route, sib-trigger, sib-link { @@ -213,7 +144,7 @@ sib-link { sib-link.back { color: $color-purple-dark; display: block; - font-size: 20px; + font-size: 2rem; font-weight: bold; text-align: right; @include icon('arrow-left-circle'); @@ -298,8 +229,12 @@ li[name*='groups'] { border: 1px solid $color-mikado-yellow; border-radius: 3px; color: $color-rolling-stone; - font-size: 13px; + font-size: 1.3rem; font-weight: 400; - margin-left: 1em; + margin-left: 1.7rem; padding: calc(16px - 1em) 0.7em; + + &:first-of-type { + margin-left: 0; + } } diff --git a/src/styles/members.scss b/src/styles/members.scss index 96a7acc..4285060 100644 --- a/src/styles/members.scss +++ b/src/styles/members.scss @@ -4,7 +4,7 @@ nav { align-items: center; display: flex; - font-size: 24px; + font-size: 2.4rem; justify-content: center; button { @@ -26,7 +26,7 @@ } span { - font-size: 26px; + font-size: 2.6rem; } } @@ -43,7 +43,7 @@ flex-wrap: wrap; grid-column-start: start; grid-column-end: end; - margin-bottom: 1em; + margin-bottom: 1.7rem; } & > div { @@ -53,23 +53,23 @@ color: $color-quartz; font-weight: bold; justify-content: center; - margin-bottom: 2.2em; + margin-bottom: 3.75rem; white-space: nowrap; &::before, &::after { border-top: 1px solid $color-timberwolf; content: ''; position: relative; - top: 0.5em; + top: 0.85rem; width: 35.2vw; } &::before { - right: 3em; + right: 5.1rem; } &::after { - left: 3em; + left: 5.1rem; } } @@ -81,6 +81,7 @@ display: flex; flex-flow: column wrap; margin-bottom: 2.5rem; + padding-bottom: 10rem; @media(min-width: 56rem) { height: 62rem; width: 32%; @@ -94,7 +95,7 @@ border-bottom: 1px solid $color-anti-flash-white; display: flex; flex-direction: column; - padding: 0.5em 0 2em; + padding: 0.85rem 0 3.4rem; > *:not(sib-display-img) { display: flex; @@ -106,7 +107,7 @@ background-color: white; border-radius: 50%; height: 28vh; - margin: 1em auto; + margin: 1.7rem auto; overflow: hidden; position: relative; width: 28vh; @@ -132,24 +133,24 @@ display: flex; flex-basis: 3.5em; line-height: 1.6; - margin: 1.5em 0; - padding: 0 4em; + margin: 2.5rem 0; + padding: 0 6.8rem; text-align: center; } [next=member-chat] { align-self: center; border: 1px solid $color-majorelle-blue; - border-radius: 2em; + border-radius: 3.4rem; color: $color-majorelle-blue; - font-size: 18px; + font-size: 1.8rem; font-weight: bold; - padding: 0.6em 1.5em 0.4em; + padding: 1rem 2.55rem 0.7rem; @include icon('speech'); &::before { - font-size: 25px; - padding-right: 0.5em; + font-size: 2.5rem; + padding-right: 0.85rem; } } } @@ -159,11 +160,11 @@ > sib-display-div > div, > sib-display-lookuplist > ul { margin-bottom: 0; - margin-top: 1em; + margin-top: 1.7rem; &::before { color: $color-selective-yellow; - font-size: 20px; + font-size: 2rem; padding: 0 0.6em 0 1em; } } @@ -176,7 +177,7 @@ } > sib-display-lookuplist[name$='skills'] > ul { - margin-left: 1em; + margin-left: 1.7rem; } [name$='city'] * { diff --git a/src/styles/menu-left.scss b/src/styles/menu-left.scss index d420583..16587bf 100644 --- a/src/styles/menu-left.scss +++ b/src/styles/menu-left.scss @@ -1,26 +1,20 @@ #navbar { background-color: $color-purple-dark; color: $color-white; + display: block; + flex: 0 0 16em; + flex-direction: column; + overflow: auto; + transition: flex-basis 0.5s ease-in-out; // 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 { @@ -33,40 +27,12 @@ } } - .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 { + cursor: pointer; 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; + padding: 1.6rem; &[active] { background-color: $color-mustard; @@ -81,111 +47,93 @@ .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; + justify-content: center; + flex-grow: 0; + flex-shrink: 0; + font-size: 1.7rem; + width: 3.2em; &:before { - width: 1.9em; + border-radius: 100%; height: 1.9em; line-height: 1.9em; - font-size: 1.6em; - border-radius: 100%; + width: 1.9em; // 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; + flex-grow: 1; + flex-shrink: 0; font-weight: 600; - letter-spacing: 0.17px; - font-size: 16px; + justify-content: center; + letter-spacing: 0.017rem; + text-transform: uppercase; + width: 8em; } - + /*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; + align-self: center; display: flex; - flex-direction: column; + flex-grow: 0; + flex-shrink: 0; justify-content: center; - align-items: center; + width: 2em; > 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; - } + + @extend %notification; } } - - &[id-prefix] { - display: none; + + .menu-chevron { + align-items: center; + color: $color-spun-pearl; + display: flex; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + width: 2em; } > sib-display { display: block; - font-size: 0.9em; - color: #aaa; + } + } + + .sub-menu { + padding-left: 2.88rem; + + div { + color: $color-spun-pearl; + cursor: pointer; + padding-bottom: 1.12rem; - > div { - margin-bottom: 1.5em; + div[name='project'] { + display: flex; - > sib-display { - cursor: pointer; - display: block; - padding: 0.5em 2em; + sib-display-div[name='dash'] { + margin: 0 0.4em; } } } } + + .divider { + height: 1px; + background-color: $color-gainsboro-a02; + } } } diff --git a/src/styles/menu-right.scss b/src/styles/menu-right.scss index 271031f..602d26f 100644 --- a/src/styles/menu-right.scss +++ b/src/styles/menu-right.scss @@ -8,7 +8,6 @@ background-color: $color-link-water; color: $color-purple-dark; flex: 0 0 auto; - font-size: 16px; font-weight: 600; > ul { @@ -24,13 +23,13 @@ margin-bottom: 0; margin-left: 0; margin-top: 0; - padding: 1.5em 1.5em; + padding: 2.55rem 2.55rem; position: relative; width: 12em; &::before { float: left; - font-size: 40px; + font-size: 4rem; margin-left: 0; margin-right: 1.5rem; } @@ -52,7 +51,7 @@ &[name^='project'] { > li::before { - font-size: 40px; + font-size: 4rem; } } diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss index 59d1593..0413bb6 100644 --- a/src/styles/project-profile.scss +++ b/src/styles/project-profile.scss @@ -1,11 +1,11 @@ #project-profile { [name^='block-']:not([name='block-title']) { - margin-top: 3em; + margin-top: 5.1rem; [name^='label-'] { font-weight: bold; - margin-bottom: 0.8em; + margin-bottom: 1.4rem; text-transform: uppercase; @extend h2; } @@ -13,20 +13,20 @@ sib-display-div:not(:first-of-type), ul, [name*='job'] { - font-size: 15px; + font-size: 1.5rem; } } [name='block-title'] { border-bottom: 1px solid $color-link-water; display: flex; - padding-bottom: 2em; + padding-bottom: 3.4rem; > * { color: $color-dark-lava; - font-size: 20px; + font-size: 2rem; font-weight: bold; - padding-right: 0.5em; + padding-right: 0.85rem; text-transform: uppercase; } @@ -35,7 +35,7 @@ } > sib-display-div[name='name'] { - padding-left: 0.5em; + padding-left: 0.85rem; } > :not(:nth-last-child(n+4)) { @@ -44,11 +44,6 @@ text-transform: none; } - > :not(:nth-last-child(n+3)) { - color: $color-text-base; - font-size: 16px; - } - [name='entitled'] { margin-left: auto; } @@ -74,13 +69,13 @@ [name^='details-'] { display: flex; - font-size: 15px; - margin-bottom: 0.5em; + font-size: 1.5rem; + margin-bottom: 0.85rem; [name='cell-name'], [name='business-contribution'] { font-weight: bold; - margin-right: 5px; + margin-right: 0.5rem; } [name='comma'] { @@ -93,26 +88,26 @@ display: flex; margin-left: auto; margin-right: auto; - margin-top: 1em; + margin-top: 1.7rem; max-width: 100%; > * { border: 1px solid $color-link-water; flex: 1 1 auto; justify-content: space-between; - margin: 0 -1px -1px 0; + margin: 0 -0.1rem -0.1rem 0; min-width: 25vw; padding: 0; h5 { - margin-left: 1.1em; - margin-top: 1.2em; + margin-left: 2rem; + margin-top: 2rem; } ul { - font-size: 15px; + font-size: 1.5rem; list-style: none; - margin: -1.2em 0 2.2em -1.2em; + margin: -2.04rem 0 3.74rem -2.04rem; li { @@ -140,19 +135,19 @@ } &:not(:first-child) { - padding-left: 3em; + padding-left: 5.1rem; li { - margin-bottom: 1em; + margin-bottom: 1.7rem; &:last-child { - margin-top: 1.3em; + margin-top: 2.2rem; } &::before { color: $color-selective-yellow; - font-size: 20px; - padding: 0 0.6em 0 0; + font-size: 2rem; + padding: 0 1rem 0 0; } } diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss index 1fe0d30..8f8ff5b 100644 --- a/src/styles/right-panel.scss +++ b/src/styles/right-panel.scss @@ -1,7 +1,7 @@ .right-link { - padding: 0.5em; - margin-bottom: 1em; - margin-left: 5em; + padding: 0.85rem; + margin-bottom: 1.7rem; + margin-left: 8.5rem; flex-basis: auto; border-radius: 2em; @@ -22,7 +22,7 @@ background-color: $color-mustard; border-radius: 100%; justify-content: center; - margin-right: 0.7em; + margin-right: 1.2rem; //flex-direction: column; width: 1.8em; height: 1.8em; @@ -41,7 +41,7 @@ .icon-plus { font-size: 20px; justify-content: center; - margin: 0.3em 0.3em 0.3em 0; + margin: 0.5rem 0.5rem 0.5rem 0; &:before { //font-size: 1.3em; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 5d7bd69..f3fd166 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -26,23 +26,37 @@ $color-majorelle-blue: hsl(244, 73%, 62%); %button { display: inline-block; - padding: 0.5em 1.5em; + padding: 0.85rem 2.55rem; border: none; border-radius: 100em; font-weight: normal; -} +} + +%notification { + > div:first-of-type { + align-items: center; + background-color: $color-mustard; + border-radius: 100%; + color: $color-dark-lava; + display: flex; + font-size: 1.3rem; + height: 1.7em; + justify-content: center; + width: 1.7em; + } +} + +%shadow { + box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19); +} %content-padding { - padding: 2.6em; + padding: 4.4rem; } %frame { @extend %shadow; background-color: $color-white; -} - -%shadow { - box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19); } %skill { @@ -50,10 +64,9 @@ $color-majorelle-blue: hsl(244, 73%, 62%); border: 1px solid $color-selective-yellow; border-radius: 2em; color: $color-white; - font-size: 16px; font-weight: bold; - margin: 0.25em; - padding: 0.3em 1.2em; + margin: 0.4rem; + padding: 0.5rem 2rem; } %status-open { @@ -63,7 +76,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%); color: $color-white; display: inline-block; font-weight: normal; - padding: 0.5em 1em; + padding: 0.85rem 1.7rem; } %submit-form { @@ -72,7 +85,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%); float: right; font-weight: bold; text-transform: uppercase; -} +} $breakpoints: ( phone: 480px, diff --git a/src/styles/variables.scss.orig b/src/styles/variables.scss.orig new file mode 100644 index 0000000..954a669 --- /dev/null +++ b/src/styles/variables.scss.orig @@ -0,0 +1,106 @@ +//Color Variables +$color-quartz: hsl(0, 0%, 29%); +$color-timberwolf: hsl(0, 0%, 85%); +$color-white: hsl(0, 0%,100%); + +$color-selective-yellow: hsl(43, 100%, 50%); +$color-mikado-yellow: hsl(45, 95%, 54%); +$color-mustard: hsl(46, 100%, 67%); + +$color-rolling-stone: hsl(210, 4%, 50%); +$color-taupe-gray: hsl(210, 5%, 56%); +$color-platinum: hsl(210, 17%, 91%); +$color-anti-flash-white: hsl(210, 25%, 95%); +$color-text-base: hsl(213, 4%, 50%); +$color-gainsboro: hsl(213, 13%, 86%); +$color-gainsboro-a02: hsla(213, 13%, 86%, 0.2); +$color-bombay: hsl(215, 9%, 73%); +$color-manatee: hsl(215, 6%, 63%); +$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%); + +%button { + display: inline-block; + padding: 0.85rem 2.55rem; + border: none; + border-radius: 100em; + font-weight: normal; +} + +%content-padding { + padding: 2.6em; +} + +%frame { + @extend %shadow; + background-color: $color-white; +} + +%notification { + > div:first-of-type { + align-items: center; + background-color: $color-mustard; + border-radius: 100%; + color: $color-dark-lava; + display: flex; + font-size: 1.3rem; + height: 1.7em; + justify-content: center; + width: 1.7em; + } +} + +%shadow { + box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19); +} + +<<<<<<< HEAD +======= +%content-padding { + padding: 4.4rem; +} + +%frame { + @extend %shadow; + background-color: $color-white; +} + +>>>>>>> 7b4f073... variables ok +%skill { + background-color: $color-selective-yellow; + border: 1px solid $color-selective-yellow; + border-radius: 2em; + color: $color-white; + font-weight: bold; + margin: 0.4rem; + padding: 0.5rem 2rem; +} + +%status-open { + background-color: $color-majorelle-blue; + border: none; + border-radius: 100em; + color: $color-white; + display: inline-block; + font-weight: normal; + padding: 0.85rem 1.7rem; +} + +%submit-form { + background-color: $color-purple-dark; + color: $color-white; + float: right; + font-weight: bold; + text-transform: uppercase; +} + +$breakpoints: ( + phone: 480px, + tablet: 768px, + desktop: 1024px, +);