feature: css - common styles + test
This commit is contained in:
gaelle morin
parent
7166ce1391
commit
961a8b6cb8
@ -7,6 +7,7 @@
|
||||
"url": "https://git.startinblox.com/applications/hubl.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build:interactions": "cp src/interactions.html dist",
|
||||
"build": "run-p copy:* build:*",
|
||||
"build:css": "node-sass src/styles/index.scss -o dist/styles/",
|
||||
"build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js",
|
||||
@ -18,6 +19,7 @@
|
||||
"copy:image": "copyfiles -f src/images/* dist/images",
|
||||
"copy:sw": "copyfiles -f src/sw.js dist",
|
||||
"serve": "pushstate-server -d ./dist -p 3000",
|
||||
"watch:interactions": "npm-watch build:interactions",
|
||||
"watch": "run-p build watch:* serve",
|
||||
"watch:css": "npm-watch build:css",
|
||||
"watch:js": "npm-watch build:js",
|
||||
@ -34,6 +36,7 @@
|
||||
"test": "cypress run"
|
||||
},
|
||||
"watch": {
|
||||
"build:interactions": "src/interactions.html",
|
||||
"build:css": "src/styles/**/*",
|
||||
"build:manifest": "make-webmanifest.mjs",
|
||||
"build:i18n": "src/locales/**/*",
|
||||
|
||||
@ -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="/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)
|
||||
|
||||
//- 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="/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="/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="/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="/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="/lib/solid-xmpp-chat/dist/index.js" defer)
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
.segment.lg-three-quarter.float-left.align-middle
|
||||
//-.segment.lg-three-quarter.float-left.align-middle
|
||||
.logo
|
||||
solid-link(next='dashboard')
|
||||
img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`)
|
||||
|
||||
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
|
||||
solid-notifications.notLoggedIn(
|
||||
nested-field="inbox"
|
||||
|
||||
@ -22,10 +22,12 @@ html(lang="en")
|
||||
header#header.segment.bg-color-white.shadow
|
||||
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
|
||||
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)
|
||||
#dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
|
||||
|
||||
168
src/interactions.html
Normal file
168
src/interactions.html
Normal 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>
|
||||
0
src/styles/hubl-app/_index.scss
Normal file
0
src/styles/hubl-app/_index.scss
Normal file
15
src/styles/hubl-framework/README.md
Normal file
15
src/styles/hubl-framework/README.md
Normal 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.
|
||||
18
src/styles/hubl-framework/_index.scss
Normal file
18
src/styles/hubl-framework/_index.scss
Normal 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';
|
||||
46
src/styles/hubl-framework/avatars/_index.scss
Normal file
46
src/styles/hubl-framework/avatars/_index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
50
src/styles/hubl-framework/badges/_index.scss
Normal file
50
src/styles/hubl-framework/badges/_index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
188
src/styles/hubl-framework/buttons/_index.scss
Normal file
188
src/styles/hubl-framework/buttons/_index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,24 @@
|
||||
.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 {
|
||||
border-width: thick;
|
||||
}
|
||||
&-color {
|
||||
&.color {
|
||||
&-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
@ -16,69 +31,8 @@
|
||||
&-heading {
|
||||
border-color: var(--color-heading);
|
||||
}
|
||||
}
|
||||
&-top {
|
||||
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);
|
||||
&-grey {
|
||||
border-color: #D6CECE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,14 +5,18 @@
|
||||
--color-heading: #2E3F58;
|
||||
}
|
||||
|
||||
.highlight::selection {
|
||||
background-color: var(--color-third);
|
||||
}
|
||||
|
||||
.bg-color-primary {
|
||||
background-color: var(--color-primary);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
&.reverse {
|
||||
background-color: var(--color-secondary);
|
||||
@ -22,11 +26,11 @@
|
||||
.bg-color-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
&.reverse {
|
||||
background-color: var(--color-primary);
|
||||
@ -36,11 +40,11 @@
|
||||
.bg-color-third {
|
||||
background-color: var(--color-third);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
background-color: var(--color-heading);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
&.reverse {
|
||||
background-color: var(--color-heading);
|
||||
@ -50,26 +54,38 @@
|
||||
.bg-color-heading {
|
||||
background-color: var(--color-heading);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
background-color: var(--color-third);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
&.reverse {
|
||||
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 {
|
||||
color: var(--color-primary);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
}
|
||||
&.reverse {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
@ -78,14 +94,9 @@
|
||||
.text-color-secondary {
|
||||
color: var(--color-secondary);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@ -94,12 +105,9 @@
|
||||
.text-color-third {
|
||||
color: var(--color-third);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
}
|
||||
&.reverse {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
@ -108,13 +116,18 @@
|
||||
.text-color-heading {
|
||||
color: var(--color-heading);
|
||||
|
||||
&.active[active] {
|
||||
color: var(--color-third);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.active:active {
|
||||
color: white;
|
||||
}
|
||||
&.reverse {
|
||||
color: var(--color-third);
|
||||
}
|
||||
}
|
||||
|
||||
.text-color-white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-hover:hover {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
&-small {
|
||||
font-size: 13px;
|
||||
}
|
||||
&-normal {
|
||||
&-medium {
|
||||
font-size: 14px;
|
||||
}
|
||||
&-large {
|
||||
|
||||
10
src/styles/hubl-framework/forms/_index.scss
Normal file
10
src/styles/hubl-framework/forms/_index.scss
Normal 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';
|
||||
}
|
||||
27
src/styles/hubl-framework/forms/buttons.scss
Normal file
27
src/styles/hubl-framework/forms/buttons.scss
Normal 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;
|
||||
}*/
|
||||
}
|
||||
34
src/styles/hubl-framework/forms/inputs.scss
Normal file
34
src/styles/hubl-framework/forms/inputs.scss
Normal 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;
|
||||
}
|
||||
82
src/styles/hubl-framework/forms/widgets.scss
Normal file
82
src/styles/hubl-framework/forms/widgets.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
src/styles/hubl-framework/icons/_index.scss
Normal file
4
src/styles/hubl-framework/icons/_index.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import 'styles';
|
||||
@import 'sizes';
|
||||
@import 'positions';
|
||||
@import 'colors';
|
||||
42
src/styles/hubl-framework/icons/colors.scss
Normal file
42
src/styles/hubl-framework/icons/colors.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
14
src/styles/hubl-framework/icons/positions.scss
Normal file
14
src/styles/hubl-framework/icons/positions.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.icon {
|
||||
|
||||
&.centered {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&.margin-right-small::before {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
&.margin-right-xxsmall::before {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
18
src/styles/hubl-framework/icons/sizes.scss
Normal file
18
src/styles/hubl-framework/icons/sizes.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
37
src/styles/hubl-framework/icons/styles.scss
Normal file
37
src/styles/hubl-framework/icons/styles.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
19
src/styles/hubl-framework/links/_index.scss
Normal file
19
src/styles/hubl-framework/links/_index.scss
Normal 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);
|
||||
}
|
||||
3
src/styles/hubl-framework/segments/_index.scss
Normal file
3
src/styles/hubl-framework/segments/_index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'positions';
|
||||
@import 'spaces';
|
||||
@import 'sizes';
|
||||
13
src/styles/hubl-framework/segments/positions.scss
Normal file
13
src/styles/hubl-framework/segments/positions.scss
Normal file
@ -0,0 +1,13 @@
|
||||
.segment {
|
||||
position: relative;
|
||||
|
||||
.align-middle {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
&.float-left {
|
||||
float: left;
|
||||
}
|
||||
&.float-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
29
src/styles/hubl-framework/segments/sizes.scss
Normal file
29
src/styles/hubl-framework/segments/sizes.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
244
src/styles/hubl-framework/segments/spaces.scss
Normal file
244
src/styles/hubl-framework/segments/spaces.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
src/styles/hubl-framework/tables/_index.scss
Normal file
5
src/styles/hubl-framework/tables/_index.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import 'tables';
|
||||
@import 'cells';
|
||||
@import 'headers';
|
||||
@import 'bodies';
|
||||
@import 'sizes';
|
||||
22
src/styles/hubl-framework/tables/bodies.scss
Normal file
22
src/styles/hubl-framework/tables/bodies.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
src/styles/hubl-framework/tables/cells.scss
Normal file
6
src/styles/hubl-framework/tables/cells.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.table-cell {
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
20
src/styles/hubl-framework/tables/headers.scss
Normal file
20
src/styles/hubl-framework/tables/headers.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
src/styles/hubl-framework/tables/sizes.scss
Normal file
22
src/styles/hubl-framework/tables/sizes.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
14
src/styles/hubl-framework/tables/tables.scss
Normal file
14
src/styles/hubl-framework/tables/tables.scss
Normal 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%;
|
||||
}
|
||||
}
|
||||
83
src/styles/hubl-framework/tags/_index.scss
Normal file
83
src/styles/hubl-framework/tags/_index.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,23 +1,2 @@
|
||||
@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';
|
||||
}
|
||||
@import 'hubl-framework/_index';
|
||||
@import 'hubl-app/_index';
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
--color-grey: #636363;
|
||||
--color-heading: #2E3F58;
|
||||
|
||||
--nav-height: 72px;
|
||||
|
||||
--color-complementary: #5BB4CE;
|
||||
--color-complementary-darken: #35A0C0;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 10px;
|
||||
font-size: 14px;
|
||||
font-family: Open Sans, sans-serif;
|
||||
--sib-notifications-theme: var(--color-primary);
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
background-color: var(--color-main-background);
|
||||
box-sizing: border-box;
|
||||
color: var(--color-grey) !important;
|
||||
font-size: 14px;
|
||||
/* Fix for viewport height bug in webkit for mobile */
|
||||
height: -webkit-fill-available;
|
||||
min-height: -webkit-fill-available;
|
||||
23
src/styles_old/index.scss
Normal file
23
src/styles_old/index.scss
Normal 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';
|
||||
}
|
||||
@ -9,7 +9,7 @@ solid-router(default-route='project-profile', hidden)
|
||||
template
|
||||
solid-link(data-src='\${value}', next='messages')
|
||||
|
||||
.content-box__info.flex
|
||||
.content-box__info
|
||||
|
||||
div#loader-project-profile.loader
|
||||
div
|
||||
|
||||
Loading…
Reference in New Issue
Block a user