feature: css - common styles + test

This commit is contained in:
gaelle morin 2020-12-04 15:44:45 +01:00
parent 7166ce1391
commit 961a8b6cb8
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
76 changed files with 1340 additions and 132 deletions

View File

@ -7,6 +7,7 @@
"url": "https://git.startinblox.com/applications/hubl.git" "url": "https://git.startinblox.com/applications/hubl.git"
}, },
"scripts": { "scripts": {
"build:interactions": "cp src/interactions.html dist",
"build": "run-p copy:* build:*", "build": "run-p copy:* build:*",
"build:css": "node-sass src/styles/index.scss -o dist/styles/", "build:css": "node-sass src/styles/index.scss -o dist/styles/",
"build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js", "build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js",
@ -18,6 +19,7 @@
"copy:image": "copyfiles -f src/images/* dist/images", "copy:image": "copyfiles -f src/images/* dist/images",
"copy:sw": "copyfiles -f src/sw.js dist", "copy:sw": "copyfiles -f src/sw.js dist",
"serve": "pushstate-server -d ./dist -p 3000", "serve": "pushstate-server -d ./dist -p 3000",
"watch:interactions": "npm-watch build:interactions",
"watch": "run-p build watch:* serve", "watch": "run-p build watch:* serve",
"watch:css": "npm-watch build:css", "watch:css": "npm-watch build:css",
"watch:js": "npm-watch build:js", "watch:js": "npm-watch build:js",
@ -34,6 +36,7 @@
"test": "cypress run" "test": "cypress run"
}, },
"watch": { "watch": {
"build:interactions": "src/interactions.html",
"build:css": "src/styles/**/*", "build:css": "src/styles/**/*",
"build:manifest": "make-webmanifest.mjs", "build:manifest": "make-webmanifest.mjs",
"build:i18n": "src/locales/**/*", "build:i18n": "src/locales/**/*",

View File

@ -14,7 +14,7 @@ script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.11" defer)
script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defer) script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defer)
//- script(type="module" src="/lib/sib-router/src/index.js" defer) //- script(type="module" src="/lib/sib-router/src/index.js" defer)
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" defer) //-script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" defer)
//- script(type="module" src="/lib/sib-notifications/index.js" defer) //- script(type="module" src="/lib/sib-notifications/index.js" defer)
//- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13 //- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
@ -27,19 +27,19 @@ script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notific
//- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.0" defer) //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.0" defer)
//- script(type="module" src="/lib/sib-resource/sib-resource.js" defer) //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) //-if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.2" defer) script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.2" defer)
//- script(type="module" src="/lib/solid-job-board/dist/index.js" defer) //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) //-if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.2" defer) script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.2" defer)
//- script(type="module" src="/lib/solid-directory/dist/index.js" defer) //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) //-if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.6" defer) script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.6" defer)
//- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer) //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
if endpoints.users || (endpoints.get && endpoints.get.users) //-if endpoints.users || (endpoints.get && endpoints.get.users)
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.4" defer) script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.4" defer)
//- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer) //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)

View File

@ -1,11 +1,11 @@
.segment.lg-three-quarter.float-left.align-middle //-.segment.lg-three-quarter.float-left.align-middle
.logo .logo
solid-link(next='dashboard') solid-link(next='dashboard')
img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`) img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`)
span.tag.beta.reversed.color-primary(data-trans='header.beta') span.tag.beta.reversed.color-primary(data-trans='header.beta')
.segment.lg-auto.float-right //-.segment.lg-auto.float-right
.segment.lg-auto.float-left.margin-right.align-middle .segment.lg-auto.float-left.margin-right.align-middle
solid-notifications.notLoggedIn( solid-notifications.notLoggedIn(
nested-field="inbox" nested-field="inbox"

View File

@ -22,10 +22,12 @@ html(lang="en")
header#header.segment.bg-color-white.shadow header#header.segment.bg-color-white.shadow
include header.pug include header.pug
nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu //-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
include menu-left.pug include menu-left.pug
nav.segment.lg-quarter.bg-color-heading
main#viewport.segment.float-left.notLoggedIn main.segment.lg-three-quarter.bg-color-third
//-main#viewport.segment.float-left.notLoggedIn
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
#dashboard(hidden, data-view="dashboard").no-sidebar.with-padding #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding

168
src/interactions.html Normal file
View File

@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaction</title>
<link rel="stylesheet" href="/styles/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">
</head>
<body>
<p>Avatars</p>
<div class="avatar xsmall">
<object type="image/svg+xml" data="/images/alien.svg"></object>
</div>
<div class="avatar small">
<object type="image/svg+xml" data="/images/alien.svg"></object>
</div>
<div class="avatar">
<object type="image/svg+xml" data="/images/alien.svg"></object>
</div>
<div class="avatar large">
<object type="image/svg+xml" data="/images/alien.svg"></object>
</div>
<div class="avatar xlarge">
<object type="image/svg+xml" data="/images/alien.svg"></object>
</div>
<p>Badges</p>
<span class="badge color-primary">1</span>
<span class="badge reversed color-primary">2</span>
<span class="badge color-secondary">3</span>
<span class="badge reversed color-secondary">4</span>
<span class="badge color-third">5</span>
<span class="badge reversed color-third">6</span>
<span class="badge">7</span>
<p>Buttons + shadows + Text uppercase + text bold</p>
<button class="button color-primary bordered">Quitter le projet</button>
<button class="button reversed color-primary bordered shadow-small">Quitter le projet</button>
<button class="button color-secondary bordered shadow">Quitter le projet</button>
<button class="button reversed color-secondary bordered">Quitter le projet</button>
<button class="button color-third bordered shadow-large">Quitter le projet</button>
<button class="button reversed color-third bordered">Quitter le projet</button>
<button class="button color-disabled bordered">Quitter le projet</button>
<button class="button reversed color-disabled bordered">Quitter le projet</button>
<button class="button color-primary bordered text-uppercase text-bold">Quitter le projet</button>
<solid-link class="button rounded reversed color-secondary icon-pencil icon-large bordered"></solid-link>
<p>Borders</p>
<div class="border all-sides color-primary">
<p>Salut</p>
</div>
<div class="border left color-secondary">
<p>Salut</p>
</div>
<div class="border bottom color-third">
<p>Salut</p>
</div>
<div class="border right color-heading">
<p>Salut</p>
</div>
<div class="border all-sides color-grey">
<p>Salut</p>
</div>
<p>Colors</p>
<div class="segment lg-half padding-medium bg-color-grey hover active text-color-heading">
<p>Lorem</p>
</div>
<div class="segment lg-quarter padding-small bg-color-heading hover active text-color-white">
<p>Ipsum</p>
</div>
<p class="text-hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.</p>
<p>Text sizes + weights + position + letters spacings </p>
<p class="text-xsmall text-center">text xsmall and centered</p>
<p class="text-small text-letter-spacing-larger">Text small with larger letter spacing</p>
<p class="text-medium text-semibold text-right">Text medium, semibold, right-aligned</p>
<p class="text-large text-bold">Text large and bold</p>
<p class="text-xlarge text-underline">Text xlarge with underline</p>
<p class="text-xxlarge text-letter-spacing-large">Text xxlarge with large letter spacing</p>
<p>Forms</p>
<solid-form class="button-register">
<form action="">
<input type="text" name="" id="">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input class="icon icon-magnify" type="text" name="" id="">
<input type="submit" value="Register">
</form>
</solid-form>
<p>Icons</p>
<span class="icon icon-home icon-primary hover margin-right-small"></span>
<span>Lorem</span>
<span class="icon icon-envelope icon-secondary rounded rounded-large rounded-primary icon-xlarge centered"></span>
<p>Segments</p>
<solid-form class="button-register">
<form class="segment lg-full padding-large clearfix" action="">
<div class="segment lg-half float-left padding-right-small">
<label>Lorem</label>
<input type="text" name="" id="">
</div>
<div class="segment lg-half float-left padding-left-small">
<label>Ipsum</label>
<input type="text" name="" id="">
</div>
</form>
</solid-form>
<p>Tables</p>
<div class="table-wrapper">
<div class="table">
<div class="table-header bg-color-heading">
<div class="table-cell w280">Lorem</div>
<div class="table-cell w280">Ipsum</div>
<div class="table-cell w280">Dolor</div>
</div>
<div class="table-body">
<div>
<solid-display>
<div>
<div class="table-cell w280"></div>
<div class="table-cell w280"></div>
<div class="table-cell w280"></div>
</div>
</solid-display>
</div>
</div>
</div>
</div>
<p>Tags</p>
<span class="tag color-primary hover">Lorem</span>
<p>Links</p>
<div>
<solid-link class="backlink icon icon-arrow-left-circle margin-right-small icon-large">Back</solid-link>
</div>
<div>
<a class="link" href="">hello</a>
</div>
<p>Highlight</p>
<p class="highlight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.</p>
<p>User thumb</p>
<solid-display class="segment lg-auto clearfix">
<div>
<hubl-user-avatar class="segment float-left margin-right-xsmall avatar xsmall">
<img src="https://www.resetera.com/data/avatar/1537498521/m/47/47921.jpg" alt="">
</hubl-user-avatar>
<solid-set-default class="segment lg-auto float-left block">
<solid-display-value class="block text-small text-semibold text-color-heading">Gaëlle Morin</solid-display-value>
<solid-display-value class="block text-xsmall">@gaelle</solid-display-value>
</solid-set-default>
</div>
</solid-display>
<solid-set-default class="segment lg-auto clearfix">
<author-avatar class="segment float-left margin-right-xsmall avatar xsmall">
<img src="https://www.resetera.com/data/avatar/1537498521/m/47/47921.jpg" alt="">
</author-avatar>
<solid-set-default class="segment lg-auto float-left block">
<solid-display-value class="text-small text-semibold text-color-heading">Sylvain</solid-display-value>
<solid-display-value class="text-small text-semibold text-color-heading">Le Bon</solid-display-value>
<author-contact>
<solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
</author-contact>
</solid-set-default>
</solid-set-default>
</body>
</html>

View File

View File

@ -0,0 +1,15 @@
# GAELLE VA REDIGER LA DOCUMENTATION DU CSS ICI !
Les avatars
Utiliser la class `.avatar` sur un élément HTML englobant une image.
L'élément sera arrondi avec une hauteur et une largeur par défaut de 50px.
Les avatars peuvent avoir différentes tailles.
Les badges
Utiliser la class `.badge` sur un élément HTML.
L'élément sera arrondi. Par défaut, le texte sera bleu foncé et sa taille fera 11px, l'intérieur du cercle sera vert avec une taille de 18px;
Le texte et le cercle peuvent avoir différente couleurs.
Les boutons
Utiliser la class `.button` sur un élément HTML.
Ils peuvent être rectangulaires avec les bords arrondis ou ronds, avec différentes couleurs.

View File

@ -0,0 +1,18 @@
@charset "UTF-8";
@import '../../../node_modules/include-media/dist/include-media';
@import '../../../node_modules/normalize.css/normalize';
.block {
display: block;
}
@import 'commons/_index';
@import 'avatars/_index';
@import 'badges/_index';
@import 'buttons/_index';
@import 'links/_index';
@import 'forms/_index';
@import 'icons/_index';
@import 'segments/_index';
@import 'tables/_index';
@import 'tags/_index';

View File

@ -0,0 +1,46 @@
.avatar {
background: #E4E8ED;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
height: 50px;
width: 50px;
>img,
object {
object-fit: cover;
object-position: center;
}
>img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
}
>object {
max-height: 40%;
max-width: 40%;
}
&.xsmall {
height: 31px;
width: 31px;
}
&.small {
height: 44px;
width: 44px;
}
&.large {
height: 180px;
width: 180px;
}
&.xlarge {
height: 241px;
width: 241px;
}
}

View File

@ -0,0 +1,50 @@
.badge {
display: block;
border-radius: 50%;
font-size: 11px;
height: 18px;
width: 18px;
font-weight: bold;
text-align: center;
line-height: 18px;
color: var(--color-heading);
background: var(--color-third);
&.color-primary {
background: white;
border: 1px solid var(--color-primary);
color: var(--color-primary);
}
&.color-secondary {
background: white;
border: 1px solid var(--color-secondary);
color: var(--color-secondary);
}
&.color-third {
background: white;
border: 1px solid var(--color-third);
color: var(--color-third);
}
&.reversed {
&.color-primary {
background: var(--color-primary);
border: 1px solid var(--color-primary);
color: white;
}
&.color-secondary {
background: var(--color-secondary);
border: 1px solid var(--color-secondary);
color: white;
}
&.color-third {
background: var(--color-third);
border: 1px solid var(--color-third);
color: white;
}
}
}

View File

@ -0,0 +1,188 @@
button,
.button,
input[type='submit'],
a {
background: none;
border: none;
cursor: pointer;
display: inline-block;
padding: 0;
&.button {
padding: 8px 20px;
border-radius: 16.5px;
height: 33px;
&.rounded {
border-radius: 50%;
font-size: 18px;
padding: 2px;
height: 29px;
width: 29px;
display: flex;
align-items: center;
justify-content: center;
}
&.icon::before {
font-size: 15px;
margin-right: 10px;
}
&.color-primary {
background-color: white;
*,
& {
color: var(--color-primary);
}
&.bordered {
border: 1px solid var(--color-primary);
}
&:hover {
background-color: var(--color-primary);
*,
& {
color: white;
}
}
}
&.color-secondary {
background-color: white;
*,
& {
color: var(--color-secondary);
}
&.bordered {
border: 1px solid var(--color-secondary);
}
&:hover {
background-color: var(--color-secondary);
color: white;
*,
& {
color: white;
}
}
}
&.color-third {
color: var(--color-third);
background-color:white;
*,
& {
color: var(--color-third);
}
&.bordered {
border: 1px solid var(--color-third);
}
&:hover {
background-color: var(--color-third);
*,
& {
color: white;
}
}
}
&.color-disabled {
cursor: not-allowed;
background-color: white;
*,
& {
color: #636363;
}
&.bordered {
border: 1px solid #636363;
}
&:hover {
background-color: white;
*,
& {
color: #636363;
}
}
}
&.reversed {
&.color-primary {
background-color: var(--color-primary);
*,
& {
color: white;
}
&:hover {
background-color: white;
*,
& {
color: var(--color-primary);
}
&.bordered {
border: 1px solid var(--color-primary);
}
}
}
&.color-secondary {
background-color: var(--color-secondary);
*,
& {
color: white;
}
&:hover {
background-color: white;
*,
& {
color: var(--color-secondary);
}
&.bordered {
border: 1px solid var(--color-secondary);
}
}
}
&.color-third {
background-color: var(--color-third);
*,
& {
color: white;
}
&:hover {
background-color: white;
*,
& {
color: var(--color-third);
}
&.bordered {
border: 1px solid var(--color-third);
}
}
}
&.color-disabled {
cursor: not-allowed;
background-color: #636363;
*,
& {
color: white;
}
&.bordered {
border: 1px solid white;
}
&:hover {
background-color: #636363;
*,
& {
color: white;
}
}
}
}
}
}

View File

@ -1,9 +1,24 @@
.border { .border {
&.all-sides {
border: 1px solid;
}
&.top {
border-top: 1px solid;
}
&.right {
border-right: 1px solid;
}
&.bottom {
border-bottom: 1px solid;
}
&.left {
border-left: 1px solid;
}
&-thick { &-thick {
border-width: thick; border-width: thick;
} }
&-color { &.color {
&-primary { &-primary {
border-color: var(--color-primary); border-color: var(--color-primary);
} }
@ -16,69 +31,8 @@
&-heading { &-heading {
border-color: var(--color-heading); border-color: var(--color-heading);
} }
} &-grey {
&-top { border-color: #D6CECE;
border-top: 1px solid;
&-color-primary {
border-color: var(--color-primary);
}
&-color-secondary {
border-color: var(--color-secondary);
}
&-color-third {
border-color: var(--color-third);
}
&-color-heading {
border-color: var(--color-heading);
}
}
&-right {
border-right: 1px solid;
&-color-primary {
border-color: var(--color-primary);
}
&-color-secondary {
border-color: var(--color-secondary);
}
&-color-third {
border-color: var(--color-third);
}
&-color-heading {
border-color: var(--color-heading);
}
}
&-bottom {
border-bottom: 1px solid;
&-color-primary {
border-color: var(--color-primary);
}
&-color-secondary {
border-color: var(--color-secondary);
}
&-color-third {
border-color: var(--color-third);
}
&-color-heading {
border-color: var(--color-heading);
}
}
&-left {
border-left: 1px solid;
&-color-primary {
border-color: var(--color-primary);
}
&-color-secondary {
border-color: var(--color-secondary);
}
&-color-third {
border-color: var(--color-third);
}
&-color-heading {
border-color: var(--color-heading);
} }
} }
} }

View File

@ -5,14 +5,18 @@
--color-heading: #2E3F58; --color-heading: #2E3F58;
} }
.highlight::selection {
background-color: var(--color-third);
}
.bg-color-primary { .bg-color-primary {
background-color: var(--color-primary); background-color: var(--color-primary);
&.active[active] { &.active:active {
background-color: var(--color-secondary); background-color: var(--color-secondary);
} }
&.hover:hover { &.hover:hover:not(:active) {
opacity: 0.3; background-color: #202B3C;
} }
&.reverse { &.reverse {
background-color: var(--color-secondary); background-color: var(--color-secondary);
@ -22,11 +26,11 @@
.bg-color-secondary { .bg-color-secondary {
background-color: var(--color-secondary); background-color: var(--color-secondary);
&.active[active] { &.active:active {
background-color: var(--color-primary); background-color: var(--color-primary);
} }
&.hover:hover { &.hover:hover:not(:active) {
opacity: 0.3; background-color: #202B3C;
} }
&.reverse { &.reverse {
background-color: var(--color-primary); background-color: var(--color-primary);
@ -36,11 +40,11 @@
.bg-color-third { .bg-color-third {
background-color: var(--color-third); background-color: var(--color-third);
&.active[active] { &.active:active {
background-color: var(--color-heading); background-color: var(--color-heading);
} }
&.hover:hover { &.hover:hover:not(:active) {
opacity: 0.3; background-color: #202B3C;
} }
&.reverse { &.reverse {
background-color: var(--color-heading); background-color: var(--color-heading);
@ -50,26 +54,38 @@
.bg-color-heading { .bg-color-heading {
background-color: var(--color-heading); background-color: var(--color-heading);
&.active[active] { &.active:active {
background-color: var(--color-third); background-color: var(--color-third);
} }
&.hover:hover { &.hover:hover:not(:active) {
opacity: 0.3; background-color: #202B3C;
} }
&.reverse { &.reverse {
background-color: var(--color-third); background-color: var(--color-third);
} }
} }
.bg-color-grey {
background-color: #F1F1F1;
&.active:active {
background-color: var(--color-heading);
}
&.hover:hover:not(:active) {
background-color: #E4E4E4;
}
}
.bg-color-white {
background: white;
}
.text-color-primary { .text-color-primary {
color: var(--color-primary); color: var(--color-primary);
&.active[active] { &.active:active {
color: var(--color-secondary); color: var(--color-secondary);
} }
&.hover:hover {
opacity: 0.3;
}
&.reverse { &.reverse {
color: var(--color-secondary); color: var(--color-secondary);
} }
@ -78,14 +94,9 @@
.text-color-secondary { .text-color-secondary {
color: var(--color-secondary); color: var(--color-secondary);
&.active[active] { &.active:active {
color: var(--color-primary); color: var(--color-primary);
} }
&.hover:hover {
opacity: 0.3;
}
&.reverse { &.reverse {
color: var(--color-primary); color: var(--color-primary);
} }
@ -94,12 +105,9 @@
.text-color-third { .text-color-third {
color: var(--color-third); color: var(--color-third);
&.active[active] { &.active:active {
color: var(--color-heading); color: var(--color-heading);
} }
&.hover:hover {
opacity: 0.3;
}
&.reverse { &.reverse {
color: var(--color-heading); color: var(--color-heading);
} }
@ -108,13 +116,18 @@
.text-color-heading { .text-color-heading {
color: var(--color-heading); color: var(--color-heading);
&.active[active] { &.active:active {
color: var(--color-third); color: white;
}
&.hover:hover {
opacity: 0.3;
} }
&.reverse { &.reverse {
color: var(--color-third); color: var(--color-third);
} }
} }
.text-color-white {
color: white;
}
.text-hover:hover {
color: var(--color-secondary);
}

View File

@ -6,7 +6,7 @@
&-small { &-small {
font-size: 13px; font-size: 13px;
} }
&-normal { &-medium {
font-size: 14px; font-size: 14px;
} }
&-large { &-large {

View File

@ -0,0 +1,10 @@
solid-form {
[data-id="error"] {
display: none !important; // Hide the default core message, english only with a weird message
}
@import 'inputs';
@import 'buttons';
@import 'widgets';
}

View File

@ -0,0 +1,27 @@
.button-register>form>input[type='submit'] {
/*@extend .button,
.text-bolder,
.text-uppercase,
.reversed,
.button-secondary,
.bordered;*/
height: auto;
position: fixed;
bottom: 1em;
left: 10%;
white-space: normal;
width: 80%;
z-index: 1;
/*@include breakpoint(lg) {
height: 3rem;
position: unset;
bottom: unset;
white-space: unset;
left: unset;
width: unset;
z-index: unset;
float: right;
margin-top: 10px;
}*/
}

View File

@ -0,0 +1,34 @@
input[type='text'],
textarea {
border: none;
outline: none;
color: #636363;
padding: 12px 14px;
margin-top: 6px;
line-height: 1;
width: 100%;
box-sizing: border-box;
-webkit-tap-highlight-color: var(--color-secondary);
&:required:invalid {
border-color: 1px solid var(--color-primary);
}
}
.input-bg-grey input {
background: #F6F6F6;
}
.input-bg-white input {
background: white;
}
textarea {
height: 110px;
resize: vertical;
}
input.icon {
background-position: right 12px top 50%;
background-repeat: no-repeat;
}

View File

@ -0,0 +1,82 @@
solid-form-text-label>input[type='text'] + label {
display: block;
}
solid-form-dropdown-autocompletion,
solid-form-dropdown-autocompletion-label,
solid-form-multipleselect-autocompletion-label,
hubl-status {
.ss-main {
font-weight: normal;
margin-top: 6px;
text-transform: none;
.ss-single-selected {
background-color: #F6F6F6;
border: none;
border-radius: 0px;
color: var(--color-grey);
font-weight: normal;
min-height: 46px;
padding: 12px 14px;
.ss-disabled {
color: #7A7F85;
}
.ss-arrow {
font-size: 15px;
margin: 0 12px 0 0;
span {
border: solid var(--color-grey);
border-width: 0 2px 2px 0;
}
}
}
}
.ss-list {
color: var(--color-grey);
font-weight: normal;
text-transform: none;
}
}
solid-form-date {
input[type="date"] {
background-image: url("/images/calendar.svg");
background-position: right 12px top 50%;
background-repeat: no-repeat;
background-size: 1.4rem;
color: var(--color-input-icon);
cursor: default;
font-size: 1.4rem;
margin-top: 1.6rem;
max-width: 50vw;
padding-right: 3rem;
/* Needed to replace the close icon in FF when you are selecting a date */
padding-top: 1.2rem;
/* Needed to center the close icon in FF when you are selecting a date */
position: relative;
&::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0;
position: absolute;
right: 8px;
}
&::-webkit-clear-button {
cursor: pointer;
margin-bottom: 5px;
/* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
margin-right: 5px;
}
&::-webkit-inner-spin-button {
display: none;
}
}
}

View File

@ -0,0 +1,4 @@
@import 'styles';
@import 'sizes';
@import 'positions';
@import 'colors';

View File

@ -0,0 +1,42 @@
.icon {
&-primary{
&::before {
color: var(--color-primary);
}
&.hover:hover::before {
color: var(--color-secondary);
}
}
&-secondary{
&::before {
color: var(--color-secondary);
}
&.hover:hover::before {
color: var(--color-primary);
}
}
&-third{
&::before {
color: var(--color-third);
}
&.hover:hover::before {
color: var(--color-heading);
}
}
&-heading{
&::before {
color: var(--color-heading);
}
&.hover:hover::before {
color: var(--color-third);
}
}
&-grey::before {
color: #636363;
}
}

View File

@ -0,0 +1,14 @@
.icon {
&.centered {
margin: 0 auto;
}
&.margin-right-small::before {
margin-right: 15px;
}
&.margin-right-xxsmall::before {
margin-right: 5px;
}
}

View File

@ -0,0 +1,18 @@
.icon {
&::before {
font-size: 18px;
}
&-xsmall::before {
font-size: 12px;
}
&-small::before {
font-size: 15px;
}
&-large::before {
font-size: 20px;
}
&-xlarge::before {
font-size: 30px;
}
}

View File

@ -0,0 +1,37 @@
.icon {
&.icon-magnify {
background-image: url("/lib/solid-directory/dist/assets/magnify.svg");
}
&.icon-arrow-down {
background-image: url();
}
&.rounded {
border: 2px solid;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&-small {
height: 35px;
width: 35px;
}
&-large {
height: 70px;
width: 70px;
}
&-primary {
border-color: var(--color-primary);
}
&-secondary {
border-color: var(--color-secondary);
}
&-third {
border-color: var(--color-third);
}
&-heading {
border-color: var(--color-heading);
}
}
}

View File

@ -0,0 +1,19 @@
.backlink {
color: #636363;
text-decoration: underline;
&::before {
display: inline-block;
font-size: 20px;
margin-right: 10px;
text-decoration: none;
}
&:hover {
text-decoration: none;
}
}
.link {
color: var(--color-secondary);
}

View File

@ -0,0 +1,3 @@
@import 'positions';
@import 'spaces';
@import 'sizes';

View File

@ -0,0 +1,13 @@
.segment {
position: relative;
.align-middle {
transform: translateY(50%);
}
&.float-left {
float: left;
}
&.float-right {
float: right;
}
}

View File

@ -0,0 +1,29 @@
.segment {
&.lg {
&-hidden {
display: none;
}
&-quarter {
width: 25%;
}
&-third {
width: 33.333%;
}
&-half {
width: 50%;
}
&-two-third {
width: 66.666%;
}
&-three-quarter {
width: 75%;
}
&-full {
width: 100%;
}
&-auto {
width: auto;
}
}
}

View File

@ -0,0 +1,244 @@
.segment {
box-sizing: border-box;
&.clearfix::after {
content: "";
clear: both;
display: block;
height: 0;
width: 100%;
}
&.margin {
&-xxsmall {
margin: 5px;
}
&-xsmall {
margin: 10px;
}
&-small {
margin: 15px;
}
&-medium {
margin: 20px;
}
&-large {
margin: 25px;
}
&-xlarge {
margin: 30px;
}
&-xxlarge {
margin: 35px;
}
&-top {
&-xxsmall {
margin-top: 5px;
}
&-xsmall {
margin-top: 10px;
}
&-small {
margin-top: 15px;
}
&-medium {
margin-top: 20px;
}
&-large {
margin-top: 25px;
}
&-xlarge {
margin-top: 30px;
}
&-xxlarge {
margin-top: 35px;
}
}
&-right {
&-xxsmall {
margin-right: 5px;
}
&-xsmall {
margin-right: 10px;
}
&-small {
margin-right: 15px;
}
&-medium {
margin-right: 20px;
}
&-large {
margin-right: 25px;
}
&-xlarge {
margin-right: 30px;
}
&-xxlarge {
margin-right: 35px;
}
}
&-bottom {
&-xxsmall {
margin-bottom: 5px;
}
&-xsmall {
margin-bottom: 10px;
}
&-small {
margin-bottom: 15px;
}
&-medium {
margin-bottom: 20px;
}
&-large {
margin-bottom: 25px;
}
&-xlarge {
margin-bottom: 30px;
}
&-xxlarge {
margin-bottom: 35px;
}
}
&-left {
&-xxsmall {
margin-left: 5px;
}
&-xsmall {
margin-left: 10px;
}
&-small {
margin-left: 15px;
}
&-medium {
margin-left: 20px;
}
&-large {
margin-left: 25px;
}
&-xlarge {
margin-left: 30px;
}
&-xxlarge {
margin-left: 35px;
}
}
}
&.padding {
&-xxsmall {
padding: 5px;
}
&-xsmall {
padding: 10px;
}
&-small {
padding: 15px;
}
&-medium {
padding: 20px;
}
&-large {
padding: 25px;
}
&-xlarge {
padding: 30px;
}
&-xxlarge {
padding: 35px;
}
&-top {
&-xxsmall {
padding-top: 5px;
}
&-xsmall {
padding-top: 10px;
}
&-small {
padding-top: 15px;
}
&-medium {
padding-top: 20px;
}
&-large {
padding-top: 25px;
}
&-xlarge {
padding-top: 30px;
}
&-xxlarge {
padding-top: 35px;
}
}
&-right {
&-xxsmall {
padding-right: 5px;
}
&-xsmall {
padding-right: 10px;
}
&-small {
padding-right: 15px;
}
&-medium {
padding-right: 20px;
}
&-large {
padding-right: 25px;
}
&-xlarge {
padding-right: 30px;
}
&-xxlarge {
padding-right: 35px;
}
}
&-bottom {
&-xxsmall {
padding-bottom: 5px;
}
&-xsmall {
padding-bottom: 10px;
}
&-small {
padding-bottom: 15px;
}
&-medium {
padding-bottom: 20px;
}
&-large {
padding-bottom: 25px;
}
&-xlarge {
padding-bottom: 30px;
}
&-xxlarge {
padding-bottom: 35px;
}
}
&-left {
&-xxsmall {
padding-left: 5px;
}
&-xsmall {
padding-left: 10px;
}
&-small {
padding-left: 15px;
}
&-medium {
padding-left: 20px;
}
&-large {
padding-left: 25px;
}
&-xlarge {
padding-left: 30px;
}
&-xxlarge {
padding-left: 35px;
}
}
}
}

View File

@ -0,0 +1,5 @@
@import 'tables';
@import 'cells';
@import 'headers';
@import 'bodies';
@import 'sizes';

View File

@ -0,0 +1,22 @@
.table-body {
display: table-row-group;
border-left: 1px solid #C9C8C8;
&>div {
display: contents;
&>solid-display {
display: table-row;
&>div {
display: contents;
&>.table-cell {
border-bottom: 1px solid #C9C8C8;
border-right: 1px solid #C9C8C8;
height: 64px;
}
}
}
}
}

View File

@ -0,0 +1,6 @@
.table-cell {
display: table-cell;
white-space: nowrap;
text-align: center;
vertical-align: middle;
}

View File

@ -0,0 +1,20 @@
.table-header {
display: table-header-group;
text-align: center;
vertical-align: middle;
border-top: 1px solid #C9C8C8;
border-bottom: 1px solid #C9C8C8;
border-left: 1px solid #C9C8C8;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.25px;
&>.table-cell {
height: 50px;
border-right: 1px solid white;
&:last-child {
border-right: 1px solid #C9C8C8;
}
}
}

View File

@ -0,0 +1,22 @@
.table-body,
.table-header {
.w280 {
width: 280px;
}
.w450 {
width: 450px;
}
.w370 {
width: 370px;
}
.w230 {
width: 230px;
}
.w70 {
width: 70px;
}
.w162 {
width: 162px;
}
}

View File

@ -0,0 +1,14 @@
.table-wrapper {
overflow: auto;
position: relative;
width: 100%;
.table {
border-collapse: collapse;
display: table;
overflow: auto;
table-layout: fixed;
width: 100%;
max-width: 100%;
}
}

View File

@ -0,0 +1,83 @@
.tag {
cursor: pointer;
height: 17px;
font-size: 12px;
letter-spacing: 0.24px;
line-height: 17px;
border: 1px solid var(--color-primary);
border-radius: 3px;
padding: 4px 11px;
&.beta {
font-size: 14px;
font-weight: 600;
}
&.color-primary {
background: white;
border: 1px solid var(--color-primary);
color: var(--color-primary);
&.hover:hover {
background: var(--color-primary);
color: white;
}
}
&.color-secondary {
background: white;
border: 1px solid var(--color-secondary);
color: var(--color-secondary);
&.hover:hover {
background: var(--color-secondary);
color: white;
}
}
&.color-third {
background: white;
border: 1px solid var(--color-third);
color: var(--color-third);
&.hover:hover {
background: var(--color-third);
color: white;
}
}
&.reversed {
&.color-primary {
background: var(--color-primary);
border: 1px solid var(--color-primary);
color: white;
&.hover:hover {
background: white;
color: var(--color-primary);
}
}
&.color-secondary {
background: var(--color-secondary);
border: 1px solid var(--color-secondary);
color: white;
&.hover:hover {
background: white;
color: var(--color-secondary);
}
}
&.color-third {
background: var(--color-third);
border: 1px solid var(--color-third);
color: white;
&.hover:hover {
background: white;
color: var(--color-third);
}
}
}
}

View File

@ -1,23 +1,2 @@
@charset "UTF-8"; @import 'hubl-framework/_index';
@import 'hubl-app/_index';
@import '../../node_modules/include-media/dist/include-media';
@import '../../node_modules/normalize.css/normalize';
@import 'abstracts/fonts';
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'components/loader';
@import 'components/icons/index';
@import 'base/main';
@import 'base/about';
#viewport {
@import 'components/index';
@import 'layout/members/index';
@import 'layout/job-offers/index';
@import 'layout/user/index';
@import 'layout/events/index';
@import 'layout/resources/index';
@import 'layout/dashboard/index';
@import 'layout/polls/index';
}

View File

@ -6,6 +6,8 @@
--color-grey: #636363; --color-grey: #636363;
--color-heading: #2E3F58; --color-heading: #2E3F58;
--nav-height: 72px;
--color-complementary: #5BB4CE; --color-complementary: #5BB4CE;
--color-complementary-darken: #35A0C0; --color-complementary-darken: #35A0C0;

View File

@ -3,7 +3,7 @@
} }
:root { :root {
font-size: 10px; font-size: 14px;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
--sib-notifications-theme: var(--color-primary); --sib-notifications-theme: var(--color-primary);
@ -11,7 +11,6 @@
background-color: var(--color-main-background); background-color: var(--color-main-background);
box-sizing: border-box; box-sizing: border-box;
color: var(--color-grey) !important; color: var(--color-grey) !important;
font-size: 14px;
/* Fix for viewport height bug in webkit for mobile */ /* Fix for viewport height bug in webkit for mobile */
height: -webkit-fill-available; height: -webkit-fill-available;
min-height: -webkit-fill-available; min-height: -webkit-fill-available;

23
src/styles_old/index.scss Normal file
View File

@ -0,0 +1,23 @@
@charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media';
@import '../../node_modules/normalize.css/normalize';
@import 'abstracts/fonts';
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'components/loader';
@import 'components/icons/index';
@import 'base/main';
@import 'base/about';
#viewport {
@import 'components/index';
@import 'layout/members/index';
@import 'layout/job-offers/index';
@import 'layout/user/index';
@import 'layout/events/index';
@import 'layout/resources/index';
@import 'layout/dashboard/index';
@import 'layout/polls/index';
}

View File

@ -9,7 +9,7 @@ solid-router(default-route='project-profile', hidden)
template template
solid-link(data-src='\${value}', next='messages') solid-link(data-src='\${value}', next='messages')
.content-box__info.flex .content-box__info
div#loader-project-profile.loader div#loader-project-profile.loader
div div