css: refactoring & fixing - day 1

This commit is contained in:
Jean-Baptiste Pasquier 2019-05-13 18:50:34 +02:00
parent 5eff8ffcec
commit 6c1a28f604
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
53 changed files with 842 additions and 1383 deletions

View File

@ -60,7 +60,7 @@ $(DIST_DIR)/index.staging.html: src/index.pug src/config.json $(wildcard src/*.p
node_modules/.bin/pug --pretty $< --out $(dir $@) -E staging.html -O src/config.json || touch $@
# sass
$(DIST_DIR)/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
$(DIST_DIR)/styles/index.css: src/styles/_index.scss $(wildcard src/*.scss src/*/*.scss src/*/*/*.scss src/*/*/*/*.scss)
@echo sass: $< ➜ $@
@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@

View File

@ -21,6 +21,12 @@ bs.init({
proxy: `http://localhost:${port}`,
open: false,
notify: false,
port: browserSyncPort
// tunnel: true,
port: browserSyncPort,
files: [
'www/styles/index.css',
'www/scripts/index.js',
'www/index.html',
'www/images/**',
'www/fonts/**'
]
});

View File

@ -1,28 +1,21 @@
// Scripts
//- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js")
//script(src="/lib/webcomponentsjs/webcomponents-loader.js")
//- script(src="lib/html-imports.js")
script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
script(src="/scripts/index.js")
// Stylesheets
//- Stylesheets
link(rel='stylesheet', href='/lib/normalize.css')
link(rel='stylesheet', href='/styles/index.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;subset=latin-ext')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
// Web components
//- local
//script(type="module" src="/lib/sib-core/sib-display.js")
//script(type="module" src="/lib/sib-router/sib-router.js")
//script(type="module" src="/lib/sib-core/sib-form.js")
//- script(type="module" src="/lib/sib-core/src/index.js")
//- script(type="module" src="/lib/sib-router/src/index.js")
//- script(type="module" src="/lib/sib-chat/sib-chat.js")
//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
//- script(type="module" src="/lib/sib-directory/sib-directory.js")
//link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn
//- CDN
script(type="module" src="https://unpkg.com/@startinblox/core@0.7.15")
script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")

View File

@ -1,4 +1,3 @@
#button-toggle
#logo
img(src="/images/logo.png" width=111 height=32)

View File

@ -9,33 +9,33 @@ html(lang="en")
link(rel="icon" type="image/png" href="/images/favicon.png")
include dependencies.pug
body
div.layer
header#header.row(role='banner')
include header.pug
.content.row
include menu-left.pug
header#header.row(role='banner')
include header.pug
.content.row
include menu-left.pug
main#mainContainer
main#mainContainer
//- #dashboard(hidden)
include page-dashboard.pug
#members(hidden)
include page-members.pug
#member-chat(hidden)
include page-member-chat.pug
#job-offers(hidden)
include page-job-offers.pug
#job-offer-create(hidden)
include page-job-offer-create.pug
#project(hidden)
include page-project.pug
#user-profile(hidden)
#user-settings(hidden)
#user-admin(hidden)
//- #client-creation(hidden)
include page-client-creation.pug
//-#groups(hidden)
include page-groups.pug
#circle(hidden)
include page-group.pug
//- #search(hidden)
include page-search.pug
#members(hidden).padded-width
include page-members.pug
#job-offers(hidden).padded-width
include page-job-offers.pug
#job-offer-create(hidden).padded-width
sib-link(class="backlink", next="job-offers") Back
include page-job-offer-create.pug
#project(hidden)
include page-project.pug
#circle(hidden)
include page-group.pug
#member-chat(hidden)
include page-member-chat.pug
#user-profile(hidden)
#user-settings(hidden)
#user-admin(hidden)

View File

@ -4,8 +4,7 @@ nav#navbar
div.menu-notification
sib-display(
data-src=`${sdn}/members/`,
data-fields='-',
counter-template='${counter}'
data-fields='-'
)
div.menu-label Members
div.menu-icon.icon-people
@ -14,8 +13,7 @@ nav#navbar
div.menu-notification
sib-display(
data-src=`${sdn}/job-offers/`,
data-fields='-',
counter-template='${counter}'
data-fields='-'
)
div.menu-label Job offers
div.menu-icon.icon-briefcase

View File

@ -1,4 +1,4 @@
.frame-form
.frame-form.full-wide
h1 New group
p.form-goal Here you can create a new group according to your interests, what you want to share, etc.
.form-view

View File

@ -1,4 +1,4 @@
#circle-edit
#circle-edit.frame-form
h1 Edit group
.form-view
sib-form.block(

View File

@ -16,7 +16,7 @@ nav.jsRightMenu(role='navigation')
sib-route(name='circle-create')
li
a Add new
#views-container
.views-container
#circle-chat
include page-group-chat.pug
#circle-profile

View File

@ -1,4 +1,4 @@
.frame-form
.frame-form.frame
sib-widget(name='title-text')
template
@ -8,7 +8,6 @@
template
p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
sib-link(next='job-offers' class='back') Back
h1 Post a new job offer
p.form-goal This form allows you to share an offer to all members of the network.
.form-view

View File

@ -5,7 +5,7 @@ div.grid-layer
include templates/template-joboffers-filter.pug
div.grid-layer-main.containerV
h2 New offers
h1 New offers
span Here you can find and post offers
sib-display#offers-list(
data-src=`${sdn}/job-offers/`,
@ -38,7 +38,7 @@ div.grid-layer
div.grid-layer-links.containerV
template#groups-list-template
p ${value}
sib-link(next="job-offer-create").containerH.containerCenter.action-link
sib-link(next="job-offer-create").plus-button
div.icon-plus
div Post a new offer
//-sib-link().containerH.containerCenter.how-link

View File

@ -1,4 +1,4 @@
.frame-form
.frame-form.full-wide
h1 New project
p.form-goal Here you can create your project, add members and assign them a job.
.form-view

View File

@ -17,7 +17,7 @@ sib-widget(name='template-members')
label-user.name='Member(s)',
)
.frame-form
.frame-form.full-wide
h1 Edit your project
p.form-goal Here you can edit your projet's details
.form-view

View File

@ -1,4 +1,4 @@
.frame
.frame-form.full-wide
include templates/template-business-provider.pug
include templates/template-customer.pug

View File

@ -15,7 +15,7 @@ nav.jsRightMenu(role='navigation')
sib-route(name='project-create', use-id)
li
a Add new
#views-container
.views-container
#project-chat
include page-project-chat.pug
#project-profile

View File

@ -1,63 +0,0 @@
document.addEventListener("DOMContentLoaded", function (event) {
// Constants declaration
const navBar = document.querySelector("#navbar");
const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input");
const btnToggle = document.querySelector("#button-toggle");
// Shortcuts
window.addEventListener("keydown", function (e) {
// CTRL + K triggers the search feature
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
e.preventDefault();
e.stopPropagation();
openSearchBar();
}
// Escape key
else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
closeSearchBar();
}
});
searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
function openSearchBar(e) {
navBar.classList.add("search-mode");
searchBar.querySelector("#search-input").focus();
searchView.classList.add("search-mode");
}
function closeSearchBar(e) {
navBar.classList.remove("search-mode");
searchView.classList.remove("search-mode");
}
function emptySearchBar(e) {
searchInput.value = '';
openSearchBar();
searchInput.focus;
}
// Synchronizes the search input with the <ldp-form>s
searchInput.addEventListener("keyup", (e) => {
searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
el.value = searchInput.value;
});
});
btnToggle.addEventListener('click', e => {
navBar.classList.toggle('open');
e.stopPropagation();
});
window.addEventListener('click', e => {
navBar.classList.remove('open');
});
});

View File

@ -1,34 +1,7 @@
document.addEventListener('DOMContentLoaded', function (event) {
const navBar = document.querySelector('#navbar');
const btnToggle = document.querySelector('#button-toggle');
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
if (!navBar || !btnToggle) return;
btnToggle.addEventListener('click', e => {
navBar.classList.toggle('open');
e.stopPropagation();
});
window.addEventListener('click', e => {
navBar.classList.remove('open');
});
function resize() {
setTimeout(() =>
Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
if (!elm.offsetParent) return;
elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
}));
}
window.addEventListener('resize', resize);
window.addEventListener('navigate', resize);
window.addEventListener('popstate', resize);
document.addEventListener('load', resize);
document.addEventListener('WebComponentsReady', resize);
resize();
// Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
const menu = menuWrapper.querySelector('.menu');
@ -44,5 +17,6 @@ document.addEventListener('DOMContentLoaded', function (event) {
btnRightMenu.addEventListener('click', e => {
rightMenu.classList.toggle('offsite-is-closed');
})
})
});
});

17
src/styles/_index.scss Normal file
View File

@ -0,0 +1,17 @@
@charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media';
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'components/icons/index';
@import 'base/main';
@import 'components/index';
main#mainContainer {
@import 'layout/members/index';
@import 'layout/job-offers/index';
@import 'layout/project-profile/index';
@import 'layout/circle-profile/index';
@import 'layout/member-chat/index';
}

View File

@ -0,0 +1,24 @@
@mixin style-template-fieldset($name: 'default') {
template-legend-#{$name} {
border-bottom: 1px solid $color-221-51-90;
color: $color-233-18-29;
font-size: 1.8rem;
font-weight: 600;
padding-bottom: 1rem;
}
}
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
box-shadow: 0 0 8px 0 $shadow;
background-color: $background;
}
%user-role {
border: 1px solid $color-45-95-54;
border-radius: 3px;
color: $color-210-4-50;
font-size: 1.4rem;
font-weight: 400;
margin-right: 0.4rem;
padding: calc(1.6rem - 0.8em) 0.7em;
}

View File

@ -0,0 +1,25 @@
// Color Variables
$color-43-100-50: hsl(43, 100%, 50%);
$color-45-95-54: hsl(45, 95%, 54%);
$color-46-100-67: hsl(46, 100%, 67%);
$color-46-100-50: hsl(46, 100%, 50%);
$color-0-0-100: hsl(0, 0%, 100%);
$color-210-17-91: hsl(210, 17%, 91%);
$color-222-52-90: hsl(222, 52%, 90%);
$color-210-25-95: hsl(210, 25%, 95%);
$color-222-57-95: hsl(222, 57%, 95%);
$color-213-20-91: hsl(213, 20%, 91%);
$color-221-51-90: hsl(221, 51%, 90%);
$color-0-0-85: hsl(0, 0%, 85%);
$color-229-25-79: hsl(229, 25%, 79%);
$color-215-9-73: hsl(215, 9%, 73%);
$color-244-10-70: hsl(244, 10%, 70%);
$color-215-6-63: hsl(215, 6%, 63%);
$color-210-5-56: hsl(210, 5%, 56%);
$color-210-4-50: hsl(210, 4%, 50%);
$color-213-4-50: hsl(213, 4%, 50%);
$color-213-13-86: hsla(213, 13%, 86%, 0.2);
$color-0-0-29: hsl(0, 0%, 29%);
$color-233-18-29: hsl(233, 18%, 29%);
$color-216-4-22: hsl(216, 4%, 22%);
$color-244-73-62: hsl(244, 73%, 62%);

View File

@ -0,0 +1,73 @@
.grid-layer {
display: grid;
font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end];
grid-template-rows: [start]7em[middle]auto[end];
}
%flex-grid-layer {
display: flex;
flex-direction: column;
align-items: stretch;
}
.grid-layer-main {
@extend %flex-grid-layer;
grid-column-start: start;
grid-column-end: end;
grid-row-start: start;
grid-row-end: end;
}
.grid-layer-links {
@extend %flex-grid-layer;
grid-column-start: middle;
grid-column-end: end;
grid-row-start: start;
grid-row-end: middle;
}
.containerH {
display: flex;
flex-wrap: wrap;
}
.containerV {
display: flex;
flex-direction: column;
align-items: stretch;
}
.grow {
flex-grow: 1;
flex-shrink: 1;
}
.fix {
flex-grow: 0;
flex-shrink: 0;
}
.containerCenter {
justify-content: center;
align-items: center;
}
.reverse {
flex-direction: row-reverse;
}
.row {
display: flex;
max-width: 100%;
}
.content {
flex-direction: row;
height: 100%;
overflow: hidden;
}
.col {
min-width: 0;
}

114
src/styles/base/main.scss Normal file
View File

@ -0,0 +1,114 @@
$breakpoints: (phone: 480px,
tablet: 768px,
desktop: 1024px) !default;
[hidden],
.hidden {
display: none !important;
}
:root {
font-size: 10px;
font-family: Open Sans, sans-serif;
--sib-notifications-theme: #{$color-46-100-50};
body {
background-color: $color-210-25-95;
color: $color-213-4-50;
font-size: 1.6rem;
overflow: hidden;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
}
img {
max-height: 100%;
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-216-4-22;
font-weight: 600;
padding: 0;
span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}
}
h1 {
font-size: 2.1rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 2rem;
}
button {
background: none;
border: none;
padding: 0;
}
%padding-main {
padding: 5rem;
}
.padded-width {
flex: 1;
@extend %padding-main;
}
.frame {
@include window-style-modal();
@extend %padding-main;
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 2rem 1rem 5rem 2rem;
}
/* Dividing into columns */
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
@else {
@warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
+"Available breakpoints are: #{map-keys($breakpoints)}.";
}
}
// Compatibility layer for non-updated components
@import 'compat';

View File

@ -0,0 +1,8 @@
@import 'form';
@import 'content';
@import 'filters';
@import 'howto';
@import 'header';
@import 'menu-left';
@import 'menu-right';
@import 'skills';

View File

@ -0,0 +1,114 @@
.backlink {
font-size: 1.5rem;
margin: 2rem 0 0 2rem;
@include icon('arrow-left-circle');
color: #3d4057;
text-decoration: underline;
&::before {
text-decoration: none;
}
&::before {
font-size: 2rem;
margin-right: 1rem;
}
}
sib-route,
sib-link {
cursor: pointer;
}
// group
#group-profile {
sib-display-div[name='name'] div {
@extend h1;
}
sib-display-div[name='label-description'] div {
@extend h2;
}
}
// chat
.chat-view {
padding: 1.7rem;
position: relative;
z-index: 0;
@include window-style-modal();
height: calc(100vh - 104px);
> sib-chat {
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
#member-profile {
@include media('width>tablet') {
div[name='header'] {
float: left;
width: 50%;
}
}
div[name='name'] {
@extend h1;
div {
display: inline-block;
margin-right: 0.7rem;
}
}
sib-link[next='member-chat'] {
border-style: solid;
display: flex;
border-radius: 25px;
border-style: solid;
border-color: $color-244-73-62;
color: $color-244-73-62;
padding: 1.7rem;
text-decoration:none;
}
div[name='pseudonym'] {
margin-top: -1.7rem;
margin-bottom: 1.7rem;
}
#member-info {
&:after {
content: '';
display: block;
clear: both;
}
}
}
sib-form {
form > * {
margin-top: 0.85rem;
}
// button like
input[type='color'],
input[type='file'],
input[type='reset'],
input[type='submit'] {
display: inline-block;
padding: 0.85rem 2.55rem;
border: none;
border-radius: 100em;
font-weight: normal;
}
input[type='reset'] {
display: none;
}
}

View File

@ -14,7 +14,7 @@
-webkit-appearance: none;
border-style: none;
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
color: $color-taupe-gray;
color: $color-210-5-56;
font-size: 1.36rem;
line-height: 1.80;
margin-top: 1.36rem;
@ -27,7 +27,7 @@
}
select {
background: $color-white;
background: $color-0-0-100;
background-image: url("/images/chevron-down.png");
background-position: right 12px top 60%;
background-repeat: no-repeat;

View File

@ -1,31 +1,26 @@
@include style-template-fieldset('fee');
@include style-template-fieldset('customer');
@include style-template-fieldset('team');
.frame-form {
display: flex;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
padding: 6.8rem 8.5rem 10.2rem;
@extend %frame;
&.full-wide {
display: flex;
flex: 1;
font-size: 1.5rem;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
padding: 6.8rem 8.5rem 10.2rem;
background: $color-0-0-100;
}
.form-view {
border-bottom: 1px solid $color-platinum;
border-bottom: 1px solid $color-210-17-91;
padding-bottom: 2.55rem;
}
}
@include styleTemplateFieldset('fee');
@include styleTemplateFieldset('customer');
@include styleTemplateFieldset('team');
#circle-create,
#circle-edit,
#job-offer-create,
#project-create,
#project-edit {
flex: 1;
font-size: 1.5rem;
h1 {
color: $color-purple-dark;
color: $color-233-18-29;
font-weight: bold;
font-size: 2rem;
text-align: center;
@ -49,9 +44,9 @@
input {
-webkit-appearance: none;
align-items: center;
background: $color-glitter;
background: $color-222-57-95;
border: none;
color: $color-purple-dark;
color: $color-233-18-29;
display: inline-flex;
justify-content: flex-start;
line-height: 1.5;
@ -69,14 +64,21 @@
flex-direction: column;
> label {
@extend %label;
color: $color-244-10-70;
font-weight: 600;
margin: 2em 0 0.5em;
text-transform: uppercase;
> div {
padding-bottom: 1rem;
}
}
select,
textarea {
background: $color-glitter;
background: $color-222-57-95;
border: none;
color: $color-purple-dark;
color: $color-233-18-29;
line-height: 1.5;
width: 100%;
@ -97,7 +99,7 @@
sib-form-multiple-dropdown {
label {
color: $color-dark-lava;
color: $color-216-4-22;
font-weight: 600;
text-transform: initial;
}
@ -119,7 +121,7 @@
/*@extend %skill;*/
button.choices__button {
border-left: 1px solid $color-selective-yellow;
border-left: 1px solid $color-43-100-50;
opacity: 1;
padding-left: 0;
}
@ -142,7 +144,7 @@
margin-top: 2em;
&:before {
border: 2px solid $color-taupe-gray;
border: 2px solid $color-210-5-56;
content: '';
height: 1rem;
left: 0;
@ -155,8 +157,8 @@
&:checked {
&:before {
border: 2px solid $color-taupe-gray;
color: $color-majorelle-blue;
border: 2px solid $color-210-5-56;
color: $color-244-73-62;
height: 1rem;
left: 0;
margin-left: 1rem;
@ -169,7 +171,7 @@
}
&:after {
background: $color-white;
background: $color-0-0-100;
content: '';
height: 1rem;
position: absolute;
@ -198,10 +200,10 @@
button {
appearance: none;
background-color: $color-white;
background-color: $color-0-0-100;
border: 1px solid;
border-radius: 100%;
color: $color-majorelle-blue;
color: $color-244-73-62;
cursor: pointer;
font-size: 2.55rem;
height: 1em;
@ -226,7 +228,11 @@
input[type='submit'] {
margin-top: 6rem;
@extend %submit-form;
background-color: $color-233-18-29;
color: $color-0-0-100;
float: right;
font-weight: bold;
text-transform: uppercase;
}
}
@ -271,10 +277,10 @@ sib-multiple-form[name='members'] {
button {
appearance: none;
background-color: $color-white;
background-color: $color-0-0-100;
border: 1px solid;
border-radius: 100%;
color: $color-majorelle-blue;
color: $color-244-73-62;
cursor: pointer;
font-size: 2.55rem;
height: 1em;

View File

@ -1,8 +1,8 @@
#header {
align-items: center;
background-color: $color-white;
color: $color-dark-lava;
background-color: $color-0-0-100;
color: $color-216-4-22;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
display: flex;
flex-shrink: 0;
@ -15,15 +15,6 @@
}
}
#button-toggle {
color: $color-dark-lava;
cursor: pointer;
display: none;
font-size: 3.2rem;
padding: 2.3rem;
@include icon('menu');
}
#logo {
flex: 1 1 0;
}
@ -34,14 +25,14 @@
#search-input {
border-radius: 10em;
padding: 0.64rem 1.28rem;
border: 1px solid $color-bombay;
border: 1px solid $color-215-9-73;
height: 3.8rem;
width: 28rem;
-webkit-appearance: textfield;
& ~ #close-search-icon,
& ~ #search-icon {
color: $color-bombay;
color: $color-215-9-73;
display: block;
font-size: 1.7rem;
margin: auto;
@ -49,7 +40,7 @@
right: 3.7rem;
top: 50%;
transform: translateY(-50%);
-webkit-text-stroke: 1px $color-bombay;
-webkit-text-stroke: 1px $color-215-9-73;
}
& ~ #close-search-icon {
@ -115,8 +106,8 @@ details {
details#user-controls {
summary:focus {
background-color: $color-purple-dark;
color: $color-white;
background-color: $color-233-18-29;
color: $color-0-0-100;
outline: none;
}
@ -160,7 +151,7 @@ details#user-controls {
z-index: 1;
> nav {
background-color: $color-white;
background-color: $color-0-0-100;
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
position: absolute;
right: 0;
@ -178,14 +169,14 @@ details#user-controls {
padding: 1.6rem 1.3rem;
a {
color: $color-text-base;
color: $color-213-4-50;
text-decoration: none;
}
}
}
button {
color: $color-text-base;
color: $color-213-4-50;
padding: 1.6rem 1.3rem;
text-align: left;
width: 100%;
@ -194,8 +185,8 @@ details#user-controls {
}
&[open] {
background-color: $color-purple-dark;
color: $color-white;
background-color: $color-233-18-29;
color: $color-0-0-100;
#user-controls__profile {

View File

@ -0,0 +1,17 @@
.howto {
padding: 0.85rem;
margin-bottom: 1.7rem;
margin-left: 8.5rem;
flex-basis: auto;
border-radius: 2em;
div[class*="icon-"] {
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}
}

View File

@ -0,0 +1,3 @@
@import 'custom-icons';
@import 'icons';
@import 'material-design-icons';

View File

@ -1,14 +1,10 @@
#navbar {
background-color: $color-purple-dark;
color: $color-white;
background-color: $color-233-18-29;
color: $color-0-0-100;
display: block;
flex: 0 0 16em;
flex-direction: column;
overflow: auto;
flex: 0 0 16em;
transition: flex-basis 0.5s ease-in-out;
// max-width: 16rem;
// position: relative;
// min-height: 100%;
&.open {
transform: translateX(0);
@ -35,18 +31,17 @@
padding: 1.6rem;
&[active] {
background-color: $color-mustard;
color: $color-purple-dark;
background-color: $color-46-100-67;
color: $color-233-18-29;
.menu-icon:before {
background-color: $color-purple-dark;
color: $color-white;
// transform: perspective(1000px) translateZ(1px) scale(0.8);
background-color: $color-233-18-29;
color: $color-0-0-100;
}
.menu-notification > sib-display > div:first-child {
background-color: $color-purple-dark;
color: $color-mustard;
background-color: $color-233-18-29;
color: $color-46-100-67;
}
}
@ -64,9 +59,6 @@
height: 1.9em;
line-height: 1.9em;
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);
}
}
@ -82,26 +74,9 @@
width: 8em;
}
/*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
.menu-notification {
align-self: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
width: 2em;
> sib-display {
> div:first-of-type {
@extend %notification;
}
}
}
.menu-chevron {
align-items: center;
color: $color-spun-pearl;
color: $color-244-10-70;
display: flex;
flex-grow: 0;
flex-shrink: 0;
@ -118,7 +93,7 @@
padding-left: 2.88rem;
div {
color: $color-spun-pearl;
color: $color-244-10-70;
cursor: pointer;
padding-bottom: 1.12rem;
@ -138,24 +113,8 @@
.divider {
height: 1px;
background-color: $color-gainsboro-a02;
background-color: $color-213-13-86;
}
}
}
@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;
}
}

View File

@ -1,17 +1,40 @@
#mainContainer {
display: flex;
flex-grow: 1;
flex-shrink: 1;
overflow-y: auto;
> div {
>div#project,
>div#circle {
flex-grow: 1;
display: flex;
flex-direction: row-reverse;
align-items: stretch;
overflow-x: hidden;
.views-container {
flex: 1 0 0;
overflow-y: auto;
}
>div {
transition: all 0.5s;
}
}
>div {
nav {
transition: all 0.5s;
> sib-router {
>sib-router {
background-color: $color-222-52-90;
color: $color-purple-dark;
color: $color-233-18-29;
flex: 0 0 auto;
font-weight: 600;
> ul {
>ul {
cursor: pointer;
list-style: none;
margin: 0;
@ -19,7 +42,7 @@
li {
align-items: center;
border-bottom: 1px solid $color-lavender-gray;
border-bottom: 1px solid $color-229-25-79;
display: flex;
margin: 0;
padding: 2.55rem 2.55rem;
@ -34,39 +57,39 @@
}
}
> li {
>li {
@include icon('arrow-right-circle');
}
> sib-route {
>sib-route {
&[active] {
background-color: $color-purple-dark;
color: $color-mustard;
background-color: $color-233-18-29;
color: $color-46-100-67;
display: inline-block;
}
&[name^='circle'],
&[name^='project'] {
> li::before {
>li::before {
font-size: 4rem;
}
}
&[name$='chat'] > li {
&[name$='chat']>li {
@include ci('chat');
}
&[name$='create'] > li {
&[name$='create']>li {
@include ci('offer');
}
&[name$='edit'] > li {
&[name$='edit']>li {
@include ci('list');
}
&[name$='profile'] > li {
&[name$='profile']>li {
@include ci('information');
}
}
@ -80,7 +103,7 @@
transform: rotate(180deg);
}
& ~ #views-container {
&~.views-container {
margin-left: -15.5rem;
transform: translate(15.5rem);
}

View File

@ -0,0 +1,18 @@
/* TEMPLATE SKILLS*/
sib-multiple[name*='skills'] {
display: flex;
flex-wrap: wrap;
}
.skill {
background-color: $color-43-100-50;
border: 1px solid $color-43-100-50;
border-radius: 2em;
color: $color-0-0-100;
display: block;
font-size: 1.4rem;
font-weight: bold;
margin: 0.4rem 1rem 0.4rem 0;
padding: 0.5rem 2rem;
}

View File

@ -1,191 +0,0 @@
// job offers
// .new-job-offer {
// @extend %button;
// text-transform: uppercase;
// margin-left: 1em;
// margin-bottom: 1em
// //float: right;
// }
// skills
/*#member-profile sib-display-lookuplist {
display: flex;
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li[name*='skills'] {
padding: 0.3em 1.2em;
border: 1px solid;
border-radius: 2em;
margin: 0.25em;
background-color: $color-selective-yellow;
color: $color-white;
font-weight: bold;
}
}
*/
// group
#group-profile {
sib-display-div[name='name'] div {
@extend h1;
}
sib-display-div[name='label-description'] div {
@extend h2;
}
}
// chat
.chat-view {
padding: 1.7rem;
position: relative;
z-index: 0;
@extend %frame;
height: calc(100vh - 104px);
> sib-chat {
@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;
// }
}*/
hdapp-available {
display: block;
text-align: right;
strong {
@extend %button;
}
}
/*#member-profile {
ul {
@include list-reset();
}
}*/
#member-profile {
@include media('width>tablet') {
div[name='header'] {
float: left;
width: 50%;
}
}
div[name='name'] {
@extend h1;
div {
display: inline-block;
margin-right: 0.7rem;
}
}
sib-link[next='member-chat'] {
border-style: solid;
display: flex;
border-radius: 25px;
border-style: solid;
border-color: $color-majorelle-blue;
color: $color-majorelle-blue;
padding: 1.7rem;
text-decoration:none;
}
div[name='pseudonym'] {
margin-top: -1.7rem;
margin-bottom: 1.7rem;
}
#member-info {
&:after {
content: '';
display: block;
clear: both;
}
}
}
sib-form {
form > * {
margin-top: 0.85rem;
}
// button like
input[type='color'],
input[type='file'],
input[type='reset'],
input[type='submit'] {
@extend %button;
}
input[type='reset'] {
display: none;
}
}
/*
label {
@extend h2;
&:after {
content: ':';
}
}
*/

View File

@ -1,28 +0,0 @@
@charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media';
@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
@import 'icons/custom-icons';
@import 'icons/icons';
@import 'icons/material-design-icons';
@import 'variables';
@import 'mixins';
@import 'main';
@import 'form';
@import 'content';
@import 'filters';
@import 'right-panel';
@import 'group-profile';
@import 'job-offers';
@import 'member-profile';
@import 'members';
@import 'project-profile';
@import 'member-chat';
// @import 'members';
@import 'header';
@import 'menu-left';
@import 'menu-right';

View File

@ -1,134 +0,0 @@
#offers-list {
@extend .grid-layer;
> sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
> div {
grid-column-start: start;
grid-column-end: end;
grid-row-start: middle;
grid-row-end: end;
&:first-of-type {
margin-top: 5rem;
}
> sib-display {
@extend %frame;
display: block;
font-size: 1.5rem;
margin: 1.7rem 0;
padding: 3.4rem;
/*&:nth-child(odd) {
background-color: $color-anti-flash-white;
}*/
[name='user-thumb'] {
align-items: center;
display: flex;
margin: -0.25em;
> * {
margin: 0.25em;
}
[name='author.first_name'] {
color: $color-quartz;
font-weight: 600;
}
sib-multiple[name$='groups'] {
display: flex;
label {
display: none;
}
> * {
@extend %group;
}
}
sib-display-img {
background-color: $color-white;
border-radius: 50%;
height: 4.25rem;
overflow: hidden;
position: relative;
width: 4.25rem;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
[name='creationDate'] {
display: block;
margin-bottom: 0.7rem;
margin-top: 2rem;
}
[name='title'] {
@extend h3;
display: block;
font-weight: bold;
line-height: 19px;
}
[name='description'] {
display: block;
line-height: 1.6;
margin-bottom: 1.6rem;
}
[name='skills'] {
label {
display: none;
}
}
[name='send'] {
color: $color-majorelle-blue;
font-size: 1.3rem;
float: right;
> sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 1.5rem;
margin-right: 1.2rem;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
strong {
@extend %status-open;
}
}
}
}
}

View File

@ -0,0 +1 @@
@import 'circle-profile';

View File

@ -31,7 +31,7 @@
}
> div[name='teammate-img'] {
background-color: $color-bombay;
background-color: $color-215-9-73;
border-radius: 50%;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
@ -61,7 +61,7 @@
}
> sib-display-value[name='teammate-profile'] {
color: $color-dark-lava;
color: $color-216-4-22;
display: block;
font-size: 1.2rem;
grid-column: 1 / span 2;
@ -69,7 +69,7 @@
}
> sib-display-value[name='teammate-contact'] {
color: $color-majorelle-blue;
color: $color-244-73-62;
font-size: 1.2rem;
justify-self: stretch;
grid-column: 3 / span 2;

View File

@ -0,0 +1 @@
@import 'job-offers.scss';

View File

@ -0,0 +1,163 @@
#job-offers {
.plus-button {
@extend .howto;
background-color: $color-43-100-50;
color: $color-0-0-100;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.icon-plus {
font-size: 20px;
justify-content: center;
margin: 0.5rem 0.5rem 0.5rem 0;
}
}
#offers-list {
@extend .grid-layer;
>sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
>div {
grid-column-start: start;
grid-column-end: end;
grid-row-start: middle;
grid-row-end: end;
&:first-of-type {
margin-top: 5rem;
}
>sib-display {
@include window-style-modal();
display: block;
font-size: 1.5rem;
margin: 1.7rem 0;
padding: 3.4rem;
/*&:nth-child(odd) {
background-color: $color-210-25-95;
}*/
[name='user-thumb'] {
align-items: center;
display: flex;
margin: -0.25em;
>* {
margin: 0.25em;
}
[name='author.first_name'] {
color: $color-0-0-29;
font-weight: 600;
}
sib-multiple[name$='groups'] {
display: flex;
label {
display: none;
}
>* {
@extend %user-role;
}
}
sib-display-img {
background-color: $color-0-0-100;
border-radius: 50%;
height: 4.25rem;
overflow: hidden;
position: relative;
width: 4.25rem;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
[name='creationDate'] {
display: block;
margin-bottom: 0.7rem;
margin-top: 2rem;
}
[name='title'] {
@extend h3;
display: block;
font-weight: bold;
line-height: 19px;
}
[name='description'] {
display: block;
line-height: 1.6;
margin-bottom: 1.6rem;
}
[name='skills'] {
label {
display: none;
}
}
[name='send'] {
color: $color-244-73-62;
font-size: 1.3rem;
float: right;
>sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 1.5rem;
margin-right: 1.2rem;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
>* {
margin: 0.25em;
}
strong {
background-color: $color-244-73-62;
border: none;
border-radius: 100em;
color: $color-0-0-100;
display: inline-block;
font-weight: normal;
padding: 0.85rem 1.7rem;
}
}
}
}
}
}

View File

@ -0,0 +1 @@
@import 'member-chat.scss';

View File

@ -0,0 +1,2 @@
@import 'members';
@import 'member-profile';

View File

@ -3,25 +3,14 @@
flex-direction: column;
flex-grow: 1;
.backlink {
font-size: 1.5rem;
margin: 2rem 0 0 2rem;
@extend %backlink;
&::before {
font-size: 2rem;
margin-right: 1rem;
}
}
#member-info {
background-color: $color-white;
background-color: $color-0-0-100;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
margin: 2rem 1rem 5rem 2rem;
min-height: 100vh;
div[name='member-profile__bio'] {
border-bottom: 1px solid $color-link-water;
border-bottom: 1px solid $color-221-51-90;
display: grid;
grid-template-areas: "avatar name status"
"avatar pseudo status"
@ -49,7 +38,7 @@
grid-area: name;
> sib-display-value[name^='user.'] {
color: $color-dark-lava;
color: $color-216-4-22;
font-weight: bold;
@extend h1;
}
@ -80,7 +69,7 @@
member-status[name$='available']{
align-self: flex-end;
color: $color-majorelle-blue;
color: $color-244-73-62;
grid-area: status;
justify-self: flex-end;
@ -97,7 +86,7 @@
@include ci('awareness');
&::before {
border-bottom: 2px solid $color-selective-yellow;
border-bottom: 2px solid $color-43-100-50;
font-size: 7.3rem;
padding-bottom: 1.5rem;
}
@ -107,7 +96,7 @@
@include ci('armor');
&::before {
border-bottom: 2px solid $color-selective-yellow;
border-bottom: 2px solid $color-43-100-50;
font-size: 7.3rem;
padding-bottom: 1.5rem;
}
@ -122,9 +111,9 @@
[next=member-chat] {
@include icon('speech');
border: 1px solid $color-majorelle-blue;
border: 1px solid $color-244-73-62;
border-radius: 2em;
color: $color-majorelle-blue;
color: $color-244-73-62;
font-size: 18px;
font-weight: bold;
justify-self: end;

View File

@ -1,3 +1,51 @@
%member-info {
sib-multiple[name^='user.'],
> member-info > div,
> sib-display-value {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
margin-top: 1.7rem;
&::before {
color: $color-43-100-50;
padding: 0 0.6em 0 0;
}
}
[name$='city'] * {
@include mdi('atom');
}
[name$='email'] * {
@include mdi('email-outline');
}
[name$='phone'] * {
@include mdi('cellphone-iphone');
}
[name="foaf:homepage"]:not(:empty) {
@include mdi('link-variant');
}
}
.how-link {
@extend .howto;
background-color: $color-0-0-100;
color: $color-216-4-22;
flex-wrap: nowrap;
.icon-idea {
background-color: $color-46-100-67;
border-radius: 100%;
justify-content: center;
margin-right: 1.2rem;
width: 1.8em;
height: 1.8em;
}
}
#members-list {
@extend .grid-layer;
@ -11,15 +59,15 @@
justify-content: center;
button {
color: $color-anti-flash-white;
color: $color-210-25-95;
&:before {
color: $color-dark-lava;
color: $color-216-4-22;
@include icon('arrow-left-circle');
}
&:disabled::before {
color: $color-manatee;
color: $color-215-6-63;
}
}
@ -53,14 +101,14 @@
justify-content: space-between;
&:first-of-type {
color: $color-quartz;
color: $color-0-0-29;
font-weight: bold;
justify-content: center;
margin: 3.75rem 0;
position: relative;
&::before {
border-top: 1px solid $color-timberwolf;
border-top: 1px solid $color-0-0-85;
bottom: 0;
content: '';
left: 0;
@ -73,7 +121,7 @@
}
span {
background-color: $color-anti-flash-white;
background-color: $color-210-25-95;
padding: 0 60px;
}
}
@ -81,7 +129,7 @@
> sib-display {
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
color: $color-rolling-stone;
color: $color-210-4-50;
cursor: pointer;
display: flex;
flex-flow: column wrap;
@ -110,7 +158,7 @@
}
div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white;
border-bottom: 1px solid $color-210-25-95;
display: flex;
flex-direction: column;
padding: 0.85rem 0 3.4rem;
@ -122,7 +170,7 @@
}
member-picture {
background-color: $color-white;
background-color: $color-0-0-100;
border-radius: 50%;
height: 28vh;
margin: 1.7rem auto;
@ -157,9 +205,9 @@
[next=member-chat] {
align-self: center;
border: 1px solid $color-majorelle-blue;
border: 1px solid $color-244-73-62;
border-radius: 3.4rem;
color: $color-majorelle-blue;
color: $color-244-73-62;
font-size: 1.8rem;
font-weight: bold;
padding: 1rem 2.55rem 0.7rem;

View File

@ -0,0 +1 @@
@import 'project-profile'

View File

@ -19,12 +19,12 @@
}
[name='block-title'] {
border-bottom: 1px solid $color-link-water;
border-bottom: 1px solid $color-221-51-90;
display: flex;
padding-bottom: 3.4rem;
> * {
color: $color-dark-lava;
color: $color-216-4-22;
font-size: 2rem;
font-weight: bold;
padding-right: 0.85rem;
@ -40,7 +40,7 @@
}
> :nth-child(5) {
color: $color-purple-dark;
color: $color-233-18-29;
font-weight: normal;
text-transform: none;
}
@ -50,7 +50,7 @@
}
> :nth-last-child(-n+2) {
color: $color-text-base;
color: $color-213-4-50;
font-size: 1.6rem;
font-weight: normal;
text-transform: none;
@ -105,7 +105,7 @@
max-width: 100%;
> * {
border: 1px solid $color-link-water;
border: 1px solid $color-221-51-90;
flex: 1 1 auto;
justify-content: space-between;
margin: 0 -0.1rem -0.1rem 0;
@ -158,7 +158,7 @@
}
&::before {
color: $color-selective-yellow;
color: $color-43-100-50;
font-size: 2.2rem;
padding: 0 1rem 0 0;
}
@ -187,7 +187,7 @@
grid-row: 1 / span 2;
div {
background-color: $color-white;
background-color: $color-0-0-100;
border-radius: 50%;
height: 7vh;
overflow: hidden;
@ -223,7 +223,7 @@
margin-left: 1rem;
sib-multiple [name='name'] {
@extend %group;
@extend %user-role;
}
}
}

View File

@ -1,332 +0,0 @@
[hidden],
.hidden,
.is-hidden {
display: none !important;
}
:root {
font-size: 62.5%;
font-family: Open Sans, sans-serif;
--sib-notifications-theme: #{$color-46-100-50};
body {
/*Will help to make .content fit your height screen size. Part.1*/
background-color: $color-anti-flash-white;
color: $color-text-base;
display: flex;
flex-direction: column;
font-size: 1.6rem;
height: 100vh;
margin: 0;
overflow: hidden;
overflow-wrap: break-word;
}
}
img {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-dark-lava;
font-weight: 600;
padding: 0;
/*margin: 0.67em 0;*/
span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}
}
h1 {
font-size: 2.1rem;
}
h2 { font-size: 2rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 2rem;
}
.debug {
outline: 2px dotted red;
}
button {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
-webkit-appearance: none;
}
li {
list-style: none;
margin-right: 0.4rem;
padding-left: 0;
}
#job-offers,
#members {
@extend %content-padding;
}
.frame {
@extend %frame;
padding: 5rem;
}
.layer {
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: stretch;
overflow-x: hidden;
}
/*
#content {
display: flex;
overflow: hidden;
}
*/
#mainContainer {
flex-grow: 1;
flex-shrink: 1;
overflow-y: auto;
}
.limiter {
display: block;
max-width: 650px;
}
/* sub menu (right menu) */
#mainContainer {
display: flex;
> div#project,
> div#circle {
flex-grow: 1;
display: flex;
flex-direction: row-reverse;
align-items: stretch;
overflow-x: hidden;
> div {
transition: all 0.5s;
}
}
}
sib-route,
sib-link {
cursor: pointer;
}
sib-link.back {
color: $color-purple-dark;
display: block;
font-size: 2rem;
font-weight: bold;
text-align: right;
}
.containerH {
display: flex;
flex-wrap: wrap;
}
.containerV {
display: flex;
flex-direction: column;
align-items: stretch;
}
.grow {
flex-grow: 1;
flex-shrink: 1;
}
.fix {
flex-grow: 0;
flex-shrink: 0;
}
.containerCenter {
justify-content: center;
align-items: center;
}
.reverse {
flex-direction: row-reverse;
}
#views-container {
flex: 1 0 0;
overflow-y: auto;
}
.grid-layer{
display: grid;
font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end];
grid-template-rows: [start]7em[middle]auto[end];
}
.grid-layer-main {
grid-column-start: start;
grid-column-end: end;
grid-row-start: start;
grid-row-end: end;
}
.grid-layer-links {
grid-column-start: middle;
grid-column-end: end;
grid-row-start: start;
grid-row-end: middle;
}
/* TEMPLATE SKILLS*/
sib-multiple[name*='skills'] {
display: flex;
flex-wrap: wrap;
}
.skill {
background-color: $color-selective-yellow;
border: 1px solid $color-selective-yellow;
border-radius: 2em;
color: $color-white;
display: block;
font-size: 1.4rem;
font-weight: bold;
margin: 0.4rem 1rem 0.4rem 0;
padding: 0.5rem 2rem;
}
member-info-groups {
@extend %group;
}
/* NEW RESPONSIVE */
.right-sidebar {
overflow: hidden;
transition: width 0.3s;
}
.right-sidebar.js-right-sidebar-expanded {
width: 130px;
}
.right-sidebar.js-right-sidebar-collapsed {
width: 62px;
}
/*Define the basic row-column properties that construct the foundation*/
.row {
display: flex;
max-width: 100%;
}
.content {
/*Will help to make .content fit your height screen size. Part 2*/
flex-direction: row;
height: 100%;
overflow: hidden;
}
.col {
min-width: 0;
}
.block-grid {
display: flex;
flex-wrap: nowrap;
height: 100%;
}
/* Dividing into columns */
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
@else {
@warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
}
}
.small-2 {
@include respond-to('phone'){
display: block;
flex: 0 1 calc(100% / 12 * 2);
}
}
.small-shrink {
@include respond-to('phone') {
display: block;
flex: 0 1 auto;
}
}
.medium-auto {
@include respond-to('tablet') {
display: block;
flex: 1;
overflow: auto;
}
}
.small-12 {
@include respond-to('phone') {
display: block;
flex: 0 1 calc(100% / 12 * 12);
}
}
.small-auto {
@include respond-to ('phone') {
display: block;
flex: 1;
overflow: auto;
}
}

View File

@ -1,160 +0,0 @@
@charset "UTF-8";
@mixin debug {
$hsla: hsla(random(360), 100%, 50%, 0.3);
background-color: $hsla;
}
@mixin log($v) {
font-family: '__log__:#{$v}';
}
@mixin offset($corner: 1, $x: 0, $y: 0) {
// corner:
// 1-----2
// | |
// | |
// 3-----4
position: absolute;
@if ($corner == 1) {
top: $y;
left: $x;
}
@if ($corner == 2) {
top: $y;
right: $x;
}
@if ($corner == 3) {
bottom: $y;
left: $x;
}
@if ($corner == 4) {
bottom: $y;
right: $x;
}
}
@mixin position($top: 0, $right: null, $bottom: null, $left: null) {
// --1--
// | |
// 4 2
// | |
// --3--
@if ($right == null) {
$right: $top;
}
@if ($bottom == null) {
$bottom: $top;
}
@if ($left == null) {
$left: $right;
}
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
@mixin pos($pos: 5, $position: absolute) {
//
// 1 2 3
//
//
// 4 5 6
//
//
// 7 8 9
//
$mod: ($pos - 1) % 3;
position: $position;
@if ($pos <= 6) {
top: 0;
}
@if ($mod <= 1) {
left: 0;
}
@if ($mod >= 1) {
right: 0;
}
@if ($pos >= 4) {
bottom: 0;
}
}
// @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
// &:after {
// content: '';
// position: absolute;
// top: if(($border == bottom), auto, 0);
// left: if(($border == right), auto, 0);
// right: if(($border == left), auto, 0);
// bottom: if(($border == top), auto, 0);
// background-image: linear-gradient(to #{$border}, $color, transparent);
// #{$border}: -$size;
// opacity: $opacity;
// @if ($border == top or $border == bottom) {
// height: $size;
// } @else {
// width: $size;
// }
// }
// }
@mixin align($horizontal: center, $vertical: middle) {
text-align: $horizontal;
white-space: nowrap;
&:after,
> * {
display: inline-block;
vertical-align: $vertical;
}
&:after {
content: '';
height: 100%;
width: 0;
visibility: hidden;
}
> * {
//text-align:left;
white-space: normal;
}
}
@mixin list-reset($deep: 0) {
padding: 0;
margin: 0;
display: block;
list-style: none;
@if ($deep == 0) {
> li {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
} @else {
ul,
ol,
li {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
}
}
@mixin styleTemplateFieldset($name) {
template-legend-#{$name} {
border-bottom: 1px solid $color-link-water;
color: $color-purple-dark;
font-size: 1.8rem;
font-weight: 600;
padding-bottom: 1rem;
}
}

View File

@ -1,50 +0,0 @@
.right-link {
padding: 0.85rem;
margin-bottom: 1.7rem;
margin-left: 8.5rem;
flex-basis: auto;
border-radius: 2em;
div[class*="icon-"] {
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}
}
.how-link {
@extend .right-link;
background-color: $color-white;
color: $color-dark-lava;
flex-wrap: nowrap;
.icon-idea {
background-color: $color-mustard;
border-radius: 100%;
justify-content: center;
margin-right: 1.2rem;
//flex-direction: column;
width: 1.8em;
height: 1.8em;
//margin-right: 1em;
}
}
.action-link {
@extend .right-link;
background-color: $color-selective-yellow;
color: $color-white;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
.icon-plus {
font-size: 20px;
justify-content: center;
margin: 0.5rem 0.5rem 0.5rem 0;
&:before {
//font-size: 1.3em;
}
}
}

View File

@ -1,150 +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-46-100-50: hsl(46, 100%, 50%);
$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-213-20-91: hsl(213, 20%, 91%);
$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-222-52-90: hsl(222, 52%, 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%);
%backlink {
@include icon('arrow-left-circle');
color: #3d4057;
text-decoration: underline;
&::before {
text-decoration: none;
}
}
%button {
display: inline-block;
padding: 0.85rem 2.55rem;
border: none;
border-radius: 100em;
font-weight: normal;
}
%content-padding {
flex: 1;
padding: 4.4rem;
}
%frame {
@extend %shadow;
background-color: $color-white;
}
%group {
border: 1px solid $color-mikado-yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 1.4rem;
font-weight: 400;
margin-right: 0.4rem;
padding: calc(1.6rem - 0.8em) 0.7em;
}
%member-info {
sib-multiple[name^='user.'],
> member-info > div,
> sib-display-value {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
margin-top: 1.7rem;
&::before {
color: $color-selective-yellow;
padding: 0 0.6em 0 0;
}
}
[name$='city'] * {
@include mdi('atom');
}
[name$='email'] * {
@include mdi('email-outline');
}
[name$='phone'] * {
@include mdi('cellphone-iphone');
}
[name="foaf:homepage"]:not(:empty) {
@include mdi('link-variant');
}
}
%label {
color: $color-spun-pearl;
font-weight: 600;
margin: 2em 0 0.5em;
text-transform: uppercase;
> div {
padding-bottom: 1rem;
}
}
%notification {
align-items: center;
background-color: $color-mustard;
border-radius: 100%;
color: $color-dark-lava;
display: flex !important;
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);
}
%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
) !default;