autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: css - common styles + test

Browse Source
This commit is contained in:
gaelle morin
2020-12-04 15:44:45 +01:00
parent 7166ce1391
commit 961a8b6cb8
76 changed files with 1340 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/styles/hubl-framework/README.md Normal 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.

18
src/styles/hubl-framework/_index.scss Normal file
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';

46
src/styles/hubl-framework/avatars/_index.scss Normal file
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;
}
}

50
src/styles/hubl-framework/badges/_index.scss Normal file
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;
}
}
}

188
src/styles/hubl-framework/buttons/_index.scss Normal file
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;
}
}
}
}
}
}

84
src/styles/hubl-framework/commons/borders.scss
View File

@ -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;
}
}
}

75
src/styles/hubl-framework/commons/colors.scss
View File

@ -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);
}

2
src/styles/hubl-framework/commons/texts.scss
View File

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

10
src/styles/hubl-framework/forms/_index.scss Normal file
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';
}

27
src/styles/hubl-framework/forms/buttons.scss Normal file
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;
}*/
}

34
src/styles/hubl-framework/forms/inputs.scss Normal file
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;
}

82
src/styles/hubl-framework/forms/widgets.scss Normal file
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;
}
}
}

4
src/styles/hubl-framework/icons/_index.scss Normal file
View File

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

42
src/styles/hubl-framework/icons/colors.scss Normal file
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;
}
}

14
src/styles/hubl-framework/icons/positions.scss Normal file
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;
}
}

18
src/styles/hubl-framework/icons/sizes.scss Normal file
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;
}
}

37
src/styles/hubl-framework/icons/styles.scss Normal file
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);
}
}
}

19
src/styles/hubl-framework/links/_index.scss Normal file
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);
}

3
src/styles/hubl-framework/segments/_index.scss Normal file
View File

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

13
src/styles/hubl-framework/segments/positions.scss Normal file
View 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
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;
}
}
}

244
src/styles/hubl-framework/segments/spaces.scss Normal file
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;
}
}
}
}

5
src/styles/hubl-framework/tables/_index.scss Normal file
View 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
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;
}
}
}
}
}

6
src/styles/hubl-framework/tables/cells.scss Normal file
View 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
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;
}
}
}

22
src/styles/hubl-framework/tables/sizes.scss Normal file
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;
}
}

14
src/styles/hubl-framework/tables/tables.scss Normal file
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%;
}
}

83
src/styles/hubl-framework/tags/_index.scss Normal file
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);
}
}
}
}