feature+ui(circles): issue #91 CSS - Right menu of circles + issue #92 CSS - circle-create + issue #93 HTML-CSS - circle-profile
Add styles to the right menu and fix bug on toggle Add styles to the form Add styles and HTML to circle-profile Add styles to sib-form-multiple-dropdown Clean up content.scss and circle-profile
This commit is contained in:
Gaëlle Morin
@ -70,56 +70,6 @@
|
||||
@include pos();
|
||||
}
|
||||
}
|
||||
// member-profile && members
|
||||
|
||||
/*.members-list-condensed {
|
||||
img {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> div > sib-display > div {
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 2fr;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-column-gap: 3rem;
|
||||
align-items: center;
|
||||
|
||||
div[name="teammate-img"] {
|
||||
background: blue;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
ul{
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
list-style-type: none;
|
||||
}
|
||||
>[name$="user"]{
|
||||
color: $color-dark-lava;
|
||||
}
|
||||
>[name$="avatar"]{
|
||||
grid-column-start: first;
|
||||
grid-column-end: middle;
|
||||
grid-row-start: first;
|
||||
grid-row-end: end;
|
||||
}
|
||||
}
|
||||
|
||||
// ul {
|
||||
// padding-left: 1em;
|
||||
// }
|
||||
}*/
|
||||
|
||||
sib-display#member-info {
|
||||
display: flex;
|
||||
|
||||
@ -12,6 +12,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
#circle-create,
|
||||
#circle-edit,
|
||||
#job-offer-create,
|
||||
#project-create,
|
||||
#project-edit {
|
||||
@ -47,14 +49,11 @@
|
||||
sib-form-label-text,
|
||||
sib-form-multiple-dropdown,
|
||||
sib-form-textarea {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> label {
|
||||
color: $color-spun-pearl;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.85rem;
|
||||
@extend %label;
|
||||
}
|
||||
|
||||
input,
|
||||
@ -77,11 +76,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-auto-completion {
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-dropdown,
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
label {
|
||||
color: $color-dark-lava;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-auto-completion {
|
||||
|
||||
div.choices__inner {
|
||||
background-color: inherit;
|
||||
@ -117,6 +123,7 @@
|
||||
[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-top: 2em;
|
||||
|
||||
&:before {
|
||||
border: 2px solid $color-taupe-gray;
|
||||
@ -155,6 +162,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
|
||||
sib-form-dropdown {
|
||||
|
||||
select {
|
||||
background: $color-glitter;
|
||||
border: none;
|
||||
color: $color-purple-dark;
|
||||
line-height: 1.5;
|
||||
margin-left: 1rem;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
button {
|
||||
@ -174,6 +194,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-textarea {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
margin-top: 6rem;
|
||||
@extend %submit-form;
|
||||
|
||||
106
src/styles/group-profile.scss
Normal file
106
src/styles/group-profile.scss
Normal file
@ -0,0 +1,106 @@
|
||||
#circle-profile {
|
||||
min-height: 100%;
|
||||
|
||||
.block-group > div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
sib-display > div {
|
||||
align-items: center;
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
||||
display: grid;
|
||||
font-size: 1.6rem;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
height: auto;
|
||||
justify-items: center;
|
||||
margin: 1rem 0.5rem 1rem 0;
|
||||
position: relative;
|
||||
padding-right: 1rem;
|
||||
padding-top: 1rem;
|
||||
text-align: center;
|
||||
width: 14em;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
> div[name='teammate-img'] {
|
||||
background-color: $color-bombay;
|
||||
border-radius: 50%;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
height: 6vh;
|
||||
overflow: hidden;
|
||||
width: 6vh;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> hdapp-userinfo {
|
||||
|
||||
> label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div[name='teammate-name'] {
|
||||
grid-column: 3 / span 2;
|
||||
grid-row: 1 / span 1;
|
||||
|
||||
sib-display-div[name='first_name'] {
|
||||
display: inline;
|
||||
|
||||
> div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
sib-display-div[name='last_name'] {
|
||||
display: inline;
|
||||
|
||||
> div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div[name='teammate-pseudonym'] {
|
||||
align-self: start;
|
||||
font-size: 1.2rem;
|
||||
grid-column: 3 / span 2;
|
||||
grid-row: 2 / span 1;
|
||||
|
||||
> * > * {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
> sib-display-div[name='teammate-profile'] {
|
||||
color: $color-dark-lava;
|
||||
font-size: 1.2rem;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 3 / span 1;
|
||||
}
|
||||
|
||||
> sib-link {
|
||||
color: $color-majorelle-blue;
|
||||
font-size: 1.2rem;
|
||||
justify-self: stretch;
|
||||
grid-column: 3 / span 2;
|
||||
grid-row: 3 / span 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -14,6 +14,7 @@
|
||||
@import 'filters';
|
||||
@import 'right-panel';
|
||||
|
||||
@import 'group-profile';
|
||||
@import 'job-offers';
|
||||
@import 'members';
|
||||
@import 'project-profile';
|
||||
|
||||
@ -180,7 +180,7 @@ sib-link.back {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#project-views-container {
|
||||
#views-container {
|
||||
flex: 1 0 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -238,3 +238,32 @@ li[name*='groups'] {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[name='user-thumb'] {
|
||||
align-items: center;
|
||||
color: $color-quartz;
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
margin: -0.25em;
|
||||
|
||||
> * {
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
sib-display-img {
|
||||
border-radius: 100%;
|
||||
height: 2.5em;
|
||||
overflow: hidden;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
div[name*='roles'] {
|
||||
border: 1px solid yellow;
|
||||
border-radius: 3px;
|
||||
color: $color-rolling-stone;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
margin-left: 1em;
|
||||
padding: calc(16px - 0.8em) 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,11 +77,11 @@
|
||||
&.offsite-is-closed {
|
||||
transform: translate(12rem);
|
||||
|
||||
& #jsOffsiteToggle::before {
|
||||
& .jsOffsiteToggle::before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
& ~ #project-views-container {
|
||||
& ~ #views-container {
|
||||
flex-basis: 95%;
|
||||
transform: translate(12rem);
|
||||
}
|
||||
|
||||
@ -30,9 +30,25 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
|
||||
border: none;
|
||||
border-radius: 100em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
%content-padding {
|
||||
padding: 4.4rem;
|
||||
}
|
||||
|
||||
%frame {
|
||||
@extend %shadow;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
%label {
|
||||
color: $color-spun-pearl;
|
||||
font-weight: 600;
|
||||
margin: 2em 0 0.5em;
|
||||
}
|
||||
|
||||
%notification {
|
||||
|
||||
> div:first-of-type {
|
||||
align-items: center;
|
||||
background-color: $color-mustard;
|
||||
@ -50,15 +66,6 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
|
||||
box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
|
||||
}
|
||||
|
||||
%content-padding {
|
||||
padding: 4.4rem;
|
||||
}
|
||||
|
||||
%frame {
|
||||
@extend %shadow;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
%skill {
|
||||
background-color: $color-selective-yellow;
|
||||
border: 1px solid $color-selective-yellow;
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
//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,
|
||||
);
|
||||
Reference in New Issue
Block a user