diff --git a/package-lock.json b/package-lock.json index 0c71f76..6556470 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "@startinblox/hubl-styling-framework": "^1.0.3", "fs-extra": "^9.0.1", "normalize.css": "^8.0.1", "parcel-bundler": "^1.12.4", @@ -1440,6 +1441,11 @@ } } }, + "node_modules/@startinblox/hubl-styling-framework": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.3.tgz", + "integrity": "sha512-AJnCktH3fSLl6sWwA/Txtc7v458XTwEpyXHLmf0DRIS03K9FtBJIZzeQ9xhB8lINLIymU+DYqlL2/bdgJx/Cog==" + }, "node_modules/@types/q": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz", @@ -10596,6 +10602,11 @@ "any-observable": "^0.3.0" } }, + "@startinblox/hubl-styling-framework": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.3.tgz", + "integrity": "sha512-AJnCktH3fSLl6sWwA/Txtc7v458XTwEpyXHLmf0DRIS03K9FtBJIZzeQ9xhB8lINLIymU+DYqlL2/bdgJx/Cog==" + }, "@types/q": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz", diff --git a/package.json b/package.json index 302ee0f..20119c3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "prebuild": "rimraf build", "build": "NODE_ENV='production' node internal/parcel.js", "watch": "rimraf build && node internal/parcel.js", - "integration": "rimraf build && parcel src/hubl-framework.html", "cypress:open": "cypress open", "cypress:verify": "cypress verify", "cypress:info": "cypress info", @@ -46,6 +45,7 @@ ] }, "dependencies": { + "@startinblox/hubl-styling-framework": "^1.0.3", "fs-extra": "^9.0.1", "normalize.css": "^8.0.1", "parcel-bundler": "^1.12.4", diff --git a/src/hubl-framework.html b/src/hubl-framework.html deleted file mode 100644 index 9ca3f52..0000000 --- a/src/hubl-framework.html +++ /dev/null @@ -1,169 +0,0 @@ - - - - - - Hubl Styling Framework - - - - - -

Avatars

-
- -
-
- -
-
- -
-
- -
-
- -
- -

Badges

- 1 - 2 - 3 - 4 - 5 - 6 - 7 - -

Buttons + shadows + Text uppercase + text bold

- - - - - - - - - - - -

Borders

-
-

Salut

-
-
-

Salut

-
-
-

Salut

-
-
-

Salut

-
-
-

Salut

-
- -

Colors

-
-

Lorem

-
-
-

Ipsum

-
-

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.

- -

Text sizes + weights + position + letters spacings

-

text xsmall and centered

-

Text small with larger letter spacing

-

Text medium, semibold, right-aligned

-

Text large and bold

-

Text xlarge with underline

-

Text xxlarge with large letter spacing

- -

Forms

- -
- - - - -
- - -

Icons

- - Lorem - - -

Segments

- -
-
- - -
-
- - -
-
- -

Tables

-
-
-
-
Lorem
-
Ipsum
-
Dolor
-
-
-
- -
-
-
-
-
- -
-
-
-
-

Tags

- Lorem -

Links

-
- Back -
-
- hello -
-

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.

-

User thumb

- -
- - - - - Gaëlle Morin - @gaelle - -
- - - - - - - Sylvain - Le Bon - - - - - - - diff --git a/src/styles/hubl-app/content/_index.scss b/src/styles/content/_index.scss similarity index 89% rename from src/styles/hubl-app/content/_index.scss rename to src/styles/content/_index.scss index cfd8a43..8b42be3 100644 --- a/src/styles/hubl-app/content/_index.scss +++ b/src/styles/content/_index.scss @@ -11,7 +11,7 @@ main { /*margin-top: 50px;*/ overflow: hidden; - /*@media($large) { + /*@media(min-width: 1024px) { margin-top: 0; }*/ @@ -21,7 +21,7 @@ main { &.sidebar-is-closed { - @media($large) { + @media(min-width: 1024px) { margin-left: -152px; transform: translate(152px); } @@ -65,7 +65,7 @@ main { &.jsRightMenu { display: none; - @media($large) { + @media(min-width: 1024px) { display: block; } } @@ -76,7 +76,7 @@ main { &.jsRightMenu[open] { - @media($large) { + @media(min-width: 1024px) { display: block; bottom: 0; box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12); @@ -86,7 +86,7 @@ main { top: 50px; z-index: 1; } - @media($large) { + @media(min-width: 1024px) { box-shadow: none; min-width: unset; position: unset; diff --git a/src/styles/hubl-app/header/_index.scss b/src/styles/header/_index.scss similarity index 93% rename from src/styles/hubl-app/header/_index.scss rename to src/styles/header/_index.scss index fdca4b2..d8aba0b 100644 --- a/src/styles/hubl-app/header/_index.scss +++ b/src/styles/header/_index.scss @@ -29,7 +29,7 @@ header { solid-notifications { color: var(--color-primary); - @media($small) { + @media(min-width: 640px) { padding: 0; } @@ -37,10 +37,9 @@ header { position: relative; .solid-notifications__button { - @include icon('bell'); font-size: 2.5rem; - @media($large) { + @media(min-width: 1024px) { font-size: 3rem; } @@ -57,7 +56,7 @@ header { position: absolute; top: 1px; - @media($large) { + @media(min-width: 1024px) { left: 2.1rem; top: -3px; } @@ -75,7 +74,7 @@ header { .solid-notifications__triangle-shadow { display: none; - @media($large) { + @media(min-width: 1024px) { background: white; display: block; position: absolute; @@ -113,7 +112,7 @@ header { top: 2.5em; width: 100vw; - @media($large) { + @media(min-width: 1024px) { max-height: calc(100vh - 93px); position: absolute; left: auto; @@ -218,11 +217,11 @@ header { line-height: 1.7rem; margin: 1.1rem 0 0; - @media($small) { + @media(min-width: 640px) { max-width: 226px; } - @media($large) { + @media(min-width: 1024px) { max-width: 256px; } } @@ -254,7 +253,7 @@ header { color: white; outline: none; - @media($large) { + @media(min-width: 1024px) { background-color: var(--color-heading); } } @@ -269,7 +268,7 @@ header { width: 215px; top: 42px; - @media($large) { + @media(min-width: 1024px) { width: 100%; top: 72px; } @@ -293,18 +292,5 @@ header { } } } - - &[open] { - - #user-controls__profile { - - div { - - solid-display-value[name='button'] { - @include icon('close'); - } - } - } - } } } diff --git a/src/styles/hubl-app/_index.scss b/src/styles/hubl-app/_index.scss deleted file mode 100644 index 8e45ad1..0000000 --- a/src/styles/hubl-app/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'header/_index'; -@import 'left-nav/_index'; -@import 'content/_index'; diff --git a/src/styles/hubl-framework/README.md b/src/styles/hubl-framework/README.md deleted file mode 100644 index 9499afb..0000000 --- a/src/styles/hubl-framework/README.md +++ /dev/null @@ -1,18 +0,0 @@ -# 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. diff --git a/src/styles/hubl-framework/_index.scss b/src/styles/hubl-framework/_index.scss deleted file mode 100644 index 70429ce..0000000 --- a/src/styles/hubl-framework/_index.scss +++ /dev/null @@ -1,14 +0,0 @@ -@charset "UTF-8"; - -@import 'normalize.css'; - -@import 'commons/_index'; -@import 'icons/_index'; -@import 'avatars/_index'; -@import 'badges/_index'; -@import 'buttons/_index'; -@import 'links/_index'; -@import 'segments/_index'; -@import 'forms/_index'; -@import 'tables/_index'; -@import 'tags/_index'; diff --git a/src/styles/hubl-framework/avatars/_index.scss b/src/styles/hubl-framework/avatars/_index.scss deleted file mode 100644 index 2eae1dc..0000000 --- a/src/styles/hubl-framework/avatars/_index.scss +++ /dev/null @@ -1,46 +0,0 @@ -.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; - } -} diff --git a/src/styles/hubl-framework/badges/_index.scss b/src/styles/hubl-framework/badges/_index.scss deleted file mode 100644 index 1ae3c5e..0000000 --- a/src/styles/hubl-framework/badges/_index.scss +++ /dev/null @@ -1,50 +0,0 @@ -.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; - } - } -} diff --git a/src/styles/hubl-framework/buttons/_index.scss b/src/styles/hubl-framework/buttons/_index.scss deleted file mode 100644 index 42c1f1a..0000000 --- a/src/styles/hubl-framework/buttons/_index.scss +++ /dev/null @@ -1,214 +0,0 @@ -button, -.button, -input[type='submit'], -a { - background: none; - border: none; - cursor: pointer; - display: inline-block; - padding: 0; - - form { - display: inline-block; - } - - [data-id="error"] { - display: none !important; // Hide the default core message, english only with a weird message - } - - &.button { - padding: 7.5px 20px; - border-radius: 16.5px; - text-decoration: none; - - &.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: 6px; - } - &.text-semibold { - *, - & { - font-weight: 600; - } - } - &.text-bold { - *, - & { - font-weight: 700; - } - } - &.text-uppercase { - *, - & { - text-transform: uppercase; - } - } - &.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; - } - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss deleted file mode 100644 index 38b8e47..0000000 --- a/src/styles/hubl-framework/commons/_index.scss +++ /dev/null @@ -1,28 +0,0 @@ -:root { - box-sizing: border-box; - color: #636363; - font-family: Open Sans, sans-serif; - font-size: 14px; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} - -.hidden, [hidden] { - display: none !important; -} - -.block { - display: block; -} - -@import 'colors'; -@import 'loaders'; -@import 'texts'; -@import 'borders'; -@import 'shadows'; -@import 'user-thumb'; -@import 'lists'; diff --git a/src/styles/hubl-framework/commons/borders.scss b/src/styles/hubl-framework/commons/borders.scss deleted file mode 100644 index fd57c33..0000000 --- a/src/styles/hubl-framework/commons/borders.scss +++ /dev/null @@ -1,38 +0,0 @@ -.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 { - &-primary { - border-color: var(--color-primary); - } - &-secondary { - border-color: var(--color-secondary); - } - &-third { - border-color: var(--color-third); - } - &-heading { - border-color: var(--color-heading); - } - &-grey { - border-color: #D6CECE; - } - } -} diff --git a/src/styles/hubl-framework/commons/colors.scss b/src/styles/hubl-framework/commons/colors.scss deleted file mode 100644 index 79ff7ff..0000000 --- a/src/styles/hubl-framework/commons/colors.scss +++ /dev/null @@ -1,122 +0,0 @@ -:root { - --color-primary: #FF0055; - --color-secondary: #0068FF; - --color-third: #00E3B4; - --color-heading: #2E3F58; -} - -.highlight::selection { - background-color: var(--color-third); -} - -.bg-color-primary { - background-color: var(--color-primary); - - &.active:active { - background-color: var(--color-secondary); - } - &.hover:hover:not(:active) { - background-color: #202B3C; - } - &.reverse { - background-color: var(--color-secondary); - } -} - -.bg-color-secondary { - background-color: var(--color-secondary); - - &.active:active { - background-color: var(--color-primary); - } - &.hover:hover:not(:active) { - background-color: #202B3C; - } - &.reverse { - background-color: var(--color-primary); - } -} - -.bg-color-third { - background-color: var(--color-third); - - &.active:active { - background-color: var(--color-heading); - } - &.hover:hover:not(:active) { - background-color: #202B3C; - } - &.reverse { - background-color: var(--color-heading); - } -} - -.bg-color-heading { - background-color: var(--color-heading); - - &.active:active { - background-color: var(--color-third); - } - &.hover:hover:not(:active) { - background-color: #202B3C; - } - &.reverse { - background-color: var(--color-third); - } -} - -.bg-color-white { - background: white; -} - -.text-color-primary { - color: var(--color-primary); - - &.active:active { - color: var(--color-secondary); - } - &.reverse { - color: var(--color-secondary); - } -} - -.text-color-secondary { - color: var(--color-secondary); - - &.active:active { - color: var(--color-primary); - } - &.reverse { - color: var(--color-primary); - } -} - -.text-color-third { - color: var(--color-third); - - &.active:active { - color: var(--color-heading); - } - &.reverse { - color: var(--color-heading); - } -} - -.text-color-heading { - color: var(--color-heading); - - &.active:active { - color: white; - } - &.reverse { - color: var(--color-third); - } -} - -.text-color-white { - color: white; -} - -.text-hover:hover { - color: var(--color-secondary); -} diff --git a/src/styles/hubl-framework/commons/lists.scss b/src/styles/hubl-framework/commons/lists.scss deleted file mode 100644 index ce598b0..0000000 --- a/src/styles/hubl-framework/commons/lists.scss +++ /dev/null @@ -1,5 +0,0 @@ -ul { - list-style: none; - margin: 0; - padding: 0; -} diff --git a/src/styles/hubl-framework/commons/loaders.scss b/src/styles/hubl-framework/commons/loaders.scss deleted file mode 100644 index 3bdc6e5..0000000 --- a/src/styles/hubl-framework/commons/loaders.scss +++ /dev/null @@ -1,72 +0,0 @@ -.loader { - margin: 0 auto; - position: relative; - width: 80px; - height: 20px; - - &.loader-top { - top: 30px; - } - - div { - position: absolute; - width: 13px; - height: 13px; - border-radius: 50%; - background: var(--color-heading); - animation-timing-function: cubic-bezier(0, 1, 1, 0); - } - - &.loader-menu div { - width: 8px; - height: 8px; - background: white; - } - - div:nth-child(1) { - left: 8px; - animation: lds-ellipsis1 0.6s infinite; - } - - div:nth-child(2) { - left: 8px; - animation: lds-ellipsis2 0.6s infinite; - } - - div:nth-child(3) { - left: 32px; - animation: lds-ellipsis2 0.6s infinite; - } - - div:nth-child(4) { - left: 56px; - animation: lds-ellipsis3 0.6s infinite; - } -} - -@keyframes lds-ellipsis1 { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } -} - -@keyframes lds-ellipsis3 { - 0% { - transform: scale(1); - } - 100% { - transform: scale(0); - } -} - -@keyframes lds-ellipsis2 { - 0% { - transform: translate(0, 0); - } - 100% { - transform: translate(24px, 0); - } -} diff --git a/src/styles/hubl-framework/commons/shadows.scss b/src/styles/hubl-framework/commons/shadows.scss deleted file mode 100644 index 5a93c0d..0000000 --- a/src/styles/hubl-framework/commons/shadows.scss +++ /dev/null @@ -1,10 +0,0 @@ -.shadow { - box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.14); - - &-small { - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09); - } - &-large { - box-shadow: 0 7px 8px 0 rgba(46, 63, 88, 0.16); - } -} \ No newline at end of file diff --git a/src/styles/hubl-framework/commons/texts.scss b/src/styles/hubl-framework/commons/texts.scss deleted file mode 100644 index a1d6807..0000000 --- a/src/styles/hubl-framework/commons/texts.scss +++ /dev/null @@ -1,56 +0,0 @@ -.text { - - &-xsmall { - font-size: 12px; - } - &-small { - font-size: 13px; - } - &-medium { - font-size: 14px; - } - &-large { - font-size: 15px; - } - &-xlarge { - font-size: 16px; - } - &-xxlarge { - font-size: 18px; - } - &-normal { - font-weight: 400; - } - &-semibold { - font-weight: 600; - } - &-bold { - font-weight: 700; - } - &-uppercase { - text-transform: uppercase; - } - &-underline { - text-decoration: underline; - } - &-letter-spacing-large { - letter-spacing: 0.2px; - } - &-letter-spacing-larger { - letter-spacing: 0.38px; - } - &-center { - text-align: center; - } - &-right { - text-align: right; - } -} - -.word-spacing-left { - margin-left: 0.60rem; -} - -.word-spacing-right { - margin-right: 0.60rem; -} diff --git a/src/styles/hubl-framework/commons/user-thumb.scss b/src/styles/hubl-framework/commons/user-thumb.scss deleted file mode 100644 index 145b5df..0000000 --- a/src/styles/hubl-framework/commons/user-thumb.scss +++ /dev/null @@ -1,99 +0,0 @@ -.user-thumb { - display: block; - position: relative; - box-sizing: border-box; - - div { - display: flex; - align-items: center; - - .user-thumb-avatar { - background: #E4E8ED; - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - height: 50px; - width: 50px; - margin-right: 15px; - border-radius: 50%; - overflow: hidden; - - &.user-thumb-avatar__size { - height: 44px; - width: 44px; - } - >img, - object { - object-fit: cover; - object-position: center; - } - >img { - max-height: 100%; - max-width: 100%; - position: absolute; - top: 0; - left: 0; - border-radius: 50%; - } - >object { - max-height: 40%; - max-width: 40%; - } - } - - .user-thumb-content { - flex: 1 1 auto; - - .user-thumb-content__name-and-icon { - display: flex; - justify-content: flex-start; - align-items: center; - - .name { - font-size: 14px; - font-weight: 600; - flex: 0 1 auto; - letter-spacing: 0.38px; - } - - .icon { - margin-left: 10px; - cursor: pointer; - - &::before { - font-size: 15px; - } - - &.top-align::before { - vertical-align: super; - margin-top: -10px; - margin-right: 5px; - } - } - - .tag { - margin-top: -19px; - } - } - - .user-thumb-content__sub-text{ - display: flex; - - &.username { - font-size: 12px; - - &::before { - content: "@"; - } - } - &.community { - .icon::before { - font-size: 15px; - margin-top: 1px; - } - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/hubl-framework/fonts/FacitBold.eot b/src/styles/hubl-framework/fonts/FacitBold.eot deleted file mode 100644 index 86e5ba4..0000000 Binary files a/src/styles/hubl-framework/fonts/FacitBold.eot and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/FacitBold.svg b/src/styles/hubl-framework/fonts/FacitBold.svg deleted file mode 100644 index ba3771c..0000000 --- a/src/styles/hubl-framework/fonts/FacitBold.svg +++ /dev/null @@ -1,4590 +0,0 @@ - - - - -Created by FontForge 20190801 at Wed Aug 3 20:38:00 2005 - By www-data -(c) 2004 Just Another Foundry. All Rights Reserved. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/styles/hubl-framework/fonts/FacitBold.ttf b/src/styles/hubl-framework/fonts/FacitBold.ttf deleted file mode 100644 index b59e2d6..0000000 Binary files a/src/styles/hubl-framework/fonts/FacitBold.ttf and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/FacitBold.woff b/src/styles/hubl-framework/fonts/FacitBold.woff deleted file mode 100644 index 4dc692b..0000000 Binary files a/src/styles/hubl-framework/fonts/FacitBold.woff and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/FacitRegular.eot b/src/styles/hubl-framework/fonts/FacitRegular.eot deleted file mode 100644 index 6222dc4..0000000 Binary files a/src/styles/hubl-framework/fonts/FacitRegular.eot and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/FacitRegular.svg b/src/styles/hubl-framework/fonts/FacitRegular.svg deleted file mode 100644 index b034c12..0000000 --- a/src/styles/hubl-framework/fonts/FacitRegular.svg +++ /dev/null @@ -1,4584 +0,0 @@ - - - - -Created by FontForge 20190801 at Wed Aug 3 20:37:59 2005 - By www-data -(c) 2004 Just Another Foundry. All Rights Reserved. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/styles/hubl-framework/fonts/FacitRegular.ttf b/src/styles/hubl-framework/fonts/FacitRegular.ttf deleted file mode 100644 index f11721f..0000000 Binary files a/src/styles/hubl-framework/fonts/FacitRegular.ttf and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/FacitRegular.woff b/src/styles/hubl-framework/fonts/FacitRegular.woff deleted file mode 100644 index 4b505fb..0000000 Binary files a/src/styles/hubl-framework/fonts/FacitRegular.woff and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.eot b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.eot deleted file mode 100644 index 38d4f18..0000000 Binary files a/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.eot and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.svg b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.svg deleted file mode 100644 index 254b1f3..0000000 --- a/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.svg +++ /dev/null @@ -1,518 +0,0 @@ - - - - -Created by FontForge 20190801 at Wed Jul 18 13:30:07 2012 - By www-data -Copyright (c) 2008 by Mark Simonson. All rights reserved. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.ttf b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.ttf deleted file mode 100644 index f5a52da..0000000 Binary files a/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.ttf and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.woff b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.woff deleted file mode 100644 index 3b8b5fb..0000000 Binary files a/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.woff and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/custom-icons.eot b/src/styles/hubl-framework/fonts/custom-icons.eot deleted file mode 100644 index 4d91e63..0000000 Binary files a/src/styles/hubl-framework/fonts/custom-icons.eot and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/custom-icons.svg b/src/styles/hubl-framework/fonts/custom-icons.svg deleted file mode 100644 index 0d1e0e9..0000000 --- a/src/styles/hubl-framework/fonts/custom-icons.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/styles/hubl-framework/fonts/custom-icons.ttf b/src/styles/hubl-framework/fonts/custom-icons.ttf deleted file mode 100644 index ee7fef2..0000000 Binary files a/src/styles/hubl-framework/fonts/custom-icons.ttf and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/custom-icons.woff b/src/styles/hubl-framework/fonts/custom-icons.woff deleted file mode 100644 index ae227e7..0000000 Binary files a/src/styles/hubl-framework/fonts/custom-icons.woff and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/material-design-icons.eot b/src/styles/hubl-framework/fonts/material-design-icons.eot deleted file mode 100644 index b9798ea..0000000 Binary files a/src/styles/hubl-framework/fonts/material-design-icons.eot and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/material-design-icons.svg b/src/styles/hubl-framework/fonts/material-design-icons.svg deleted file mode 100644 index f5cbbec..0000000 --- a/src/styles/hubl-framework/fonts/material-design-icons.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/styles/hubl-framework/fonts/material-design-icons.ttf b/src/styles/hubl-framework/fonts/material-design-icons.ttf deleted file mode 100644 index 75cde78..0000000 Binary files a/src/styles/hubl-framework/fonts/material-design-icons.ttf and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/material-design-icons.woff b/src/styles/hubl-framework/fonts/material-design-icons.woff deleted file mode 100644 index 8adbd27..0000000 Binary files a/src/styles/hubl-framework/fonts/material-design-icons.woff and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/material-design-icons.woff2 b/src/styles/hubl-framework/fonts/material-design-icons.woff2 deleted file mode 100644 index bc58886..0000000 Binary files a/src/styles/hubl-framework/fonts/material-design-icons.woff2 and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/simple-line-icons.eot b/src/styles/hubl-framework/fonts/simple-line-icons.eot deleted file mode 100644 index 66e8f53..0000000 Binary files a/src/styles/hubl-framework/fonts/simple-line-icons.eot and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/simple-line-icons.svg b/src/styles/hubl-framework/fonts/simple-line-icons.svg deleted file mode 100644 index e8cb6e4..0000000 --- a/src/styles/hubl-framework/fonts/simple-line-icons.svg +++ /dev/null @@ -1,392 +0,0 @@ - - - -Copyright (C) 2018 by original authors @ fontello.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/styles/hubl-framework/fonts/simple-line-icons.ttf b/src/styles/hubl-framework/fonts/simple-line-icons.ttf deleted file mode 100644 index fabbda3..0000000 Binary files a/src/styles/hubl-framework/fonts/simple-line-icons.ttf and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/simple-line-icons.woff b/src/styles/hubl-framework/fonts/simple-line-icons.woff deleted file mode 100644 index 052fed2..0000000 Binary files a/src/styles/hubl-framework/fonts/simple-line-icons.woff and /dev/null differ diff --git a/src/styles/hubl-framework/fonts/simple-line-icons.woff2 b/src/styles/hubl-framework/fonts/simple-line-icons.woff2 deleted file mode 100644 index c2c69aa..0000000 Binary files a/src/styles/hubl-framework/fonts/simple-line-icons.woff2 and /dev/null differ diff --git a/src/styles/hubl-framework/forms/_index.scss b/src/styles/hubl-framework/forms/_index.scss deleted file mode 100644 index d1f4fc8..0000000 --- a/src/styles/hubl-framework/forms/_index.scss +++ /dev/null @@ -1,14 +0,0 @@ -solid-form.button-register { - - [data-id="error"] { - display: none !important; // Hide the default core message, english only with a weird message - } - - form>* { - display: block; - } - - @import 'inputs'; - @import 'buttons'; - @import 'widgets'; -} diff --git a/src/styles/hubl-framework/forms/buttons.scss b/src/styles/hubl-framework/forms/buttons.scss deleted file mode 100644 index 18d8192..0000000 --- a/src/styles/hubl-framework/forms/buttons.scss +++ /dev/null @@ -1,27 +0,0 @@ -:not(.add-member) + input[type='submit'] { - @extend .button, - .text-xsmall, - .text-bold, - .text-uppercase, - .reversed, - .color-secondary, - .bordered; - height: auto; - position: fixed; - bottom: 1em; - left: 10%; - white-space: normal; - width: 80%; - z-index: 1; - - @media($large) { - position: unset; - bottom: unset; - white-space: unset; - left: unset; - width: unset; - z-index: unset; - float: right; - margin-top: 10px; - } -} diff --git a/src/styles/hubl-framework/forms/inputs.scss b/src/styles/hubl-framework/forms/inputs.scss deleted file mode 100644 index c618a3a..0000000 --- a/src/styles/hubl-framework/forms/inputs.scss +++ /dev/null @@ -1,28 +0,0 @@ -input[type='text'], -input[type='email'], -textarea { - background: #F6F6F6; - border: none; - outline: none; - color: #636363; - padding: 12px 14px; - margin-top: 6px; - line-height: 1; - height: 46px; - width: 100%; - box-sizing: border-box; - -webkit-tap-highlight-color: var(--color-secondary); - - &:required:invalid { - border-color: 1px solid var(--color-primary); - } -} - -.input-bg-white input { - background: white; -} - -textarea { - height: 110px; - resize: vertical; -} diff --git a/src/styles/hubl-framework/forms/widgets.scss b/src/styles/hubl-framework/forms/widgets.scss deleted file mode 100644 index dce4cb1..0000000 --- a/src/styles/hubl-framework/forms/widgets.scss +++ /dev/null @@ -1,101 +0,0 @@ -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; - } -} - -.add-member { - display: block; - width: 50%; - padding-right: 15px; - position: relative; - float: left; -} - -.add-member + input[type='submit'] { - @extend .button, - .text-xsmall, - .text-bold, - .text-uppercase, - .color-secondary, - .bordered; - margin-top: 14px; - white-space: normal; -} - -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; - } - } -} diff --git a/src/styles/hubl-framework/icons/_index.scss b/src/styles/hubl-framework/icons/_index.scss deleted file mode 100644 index 8484e8f..0000000 --- a/src/styles/hubl-framework/icons/_index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'styles'; -@import 'sizes'; -@import 'positions'; -@import 'colors'; -@import 'custom-icons'; -@import 'material-design-icons'; -@import 'simple-line-icons'; diff --git a/src/styles/hubl-framework/icons/colors.scss b/src/styles/hubl-framework/icons/colors.scss deleted file mode 100644 index fd0140c..0000000 --- a/src/styles/hubl-framework/icons/colors.scss +++ /dev/null @@ -1,42 +0,0 @@ -.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; - } -} diff --git a/src/styles/hubl-framework/icons/custom-icons.scss b/src/styles/hubl-framework/icons/custom-icons.scss deleted file mode 100644 index e69e85d..0000000 --- a/src/styles/hubl-framework/icons/custom-icons.scss +++ /dev/null @@ -1,115 +0,0 @@ -/* Custom icons */ - -$ci-filename: "custom-icons"; -$ci-font-name: "custom-icons"; -$ci-font-family: "custom-icons"; -$ci-font-weight: "regular"; -$ci-font-path: "fonts" !default; -$ci-css-prefix: ci !default; -$ci-version: "tlnzh2" !default; - -@font-face { - font-family: '#{$ci-font-name}'; - src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}'); - src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}#iefix') format('embedded-opentype'), - url('#{$ci-font-path}/#{$ci-filename}.ttf?#{$ci-version}') format('truetype'), - url('#{$ci-font-path}/#{$ci-filename}.woff?#{$ci-version}') format('woff'), - url('#{$ci-font-path}/#{$ci-filename}.svg?#{$ci-version}##{$ci-filename}') format('svg'); - font-weight: normal; - font-style: normal; -} - -$ci-icons: ( - awareness: '\e900', - businessman: '\e901', - information: '\e902', - list-1: '\e903', - sale: '\e904', - armor: '\e905', - chat: '\e906', - list: '\e907', - network: '\e908', - offer: '\e909', - reaction: '\e90a', - add: '\e90b', - appointment: '\e90c', - desk: '\e90d', - file: '\e90e', - premium: '\e90f', - team: '\e910', - beer: '\e911', - networking: '\e912', - receipt: '\e913', - robot: '\e914', - team-1: '\e915', - croupier: '\e916', - learning: '\e917', - review: '\e918', - surf: '\e919', - document: '\e91a', - code: '\e91b', - hat: '\e91c', - beer1: '\e91d', - alien: '\e91e', - add-user: '\e91f', - feedback: '\e920', - globe: '\e921', - bubble-add: '\e922' -); - -%ci, -[class^='ci-']::before, -[class*='ci-']::before { - display: inline-block; - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: '#{$ci-font-name}' !important; - font-style: normal; - font-weight: normal; - line-height: 1; - speak: none; - text-align: center; - text-decoration: inherit; - width: 1em; - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; - - /* Better Font Rendering */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -@function char($character-code) { - @if function-exists("selector-append") { - @return unquote("\"\\#{$character-code}\""); - } - - @if "\\#{'x'}" == "\\x" { - @return str-slice("\x", 1, 1) + $character-code; - } - @else { - @return #{"\"\\"}#{$character-code + "\""}; - } -} - -@function ci($name) { - @if map-has-key($ci-icons, $name) == false { - @warn "Icon #{$name} not found."; - @return ""; - } - @return char(map-get($ci-icons, $name)); -} - -@each $key, $value in $ci-icons { - .#{$ci-css-prefix}-#{$key}:before { - content: char($value); - } -} - -@mixin ci($value) { - &:before { - @extend %ci; - @extend .#{$ci-css-prefix}-#{$value}; - } -} diff --git a/src/styles/hubl-framework/icons/material-design-icons.scss b/src/styles/hubl-framework/icons/material-design-icons.scss deleted file mode 100644 index baa0a20..0000000 --- a/src/styles/hubl-framework/icons/material-design-icons.scss +++ /dev/null @@ -1,91 +0,0 @@ -/* MaterialDesignIcons.com */ - -$mdi-filename: "material-design-icons"; -$mdi-font-name: "material-design-icons"; -$mdi-font-family: "material-design-icons"; -$mdi-font-weight: "regular"; -$mdi-font-path: "fonts" !default; -$mdi-css-prefix: mdi !default; -$mdi-version: "3.3.92" !default; - -@font-face { - font-family: '#{$mdi-font-name}'; - src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}'); - src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'), - url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'), - url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'), - url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'), - url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg'); - font-weight: normal; - font-style: normal; -} - -$mdi-icons: ( - account-outline: '\F013', - atom: '\F767', - cellphone-iphone: '\F120', - check: '\F12C', - email-outline: '\F1F0', - link-variant: '\F339' -); - -%mdi, -[class^='mdi-']::before, -[class*='mdi-']::before { - display: inline-block; - font-family: '#{$mdi-font-name}' !important; - font-size: 25px; - font-style: normal; - font-weight: normal; - line-height: 0.5em; - margin-left: -0.15em; - text-align: center; - text-decoration: inherit; - width: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; -} - -@function char($character-code) { - @if function-exists("selector-append") { - @return unquote("\"\\#{$character-code}\""); - } - - @if "\\#{'x'}" == "\\x" { - @return str-slice("\x", 1, 1) + $character-code; - } - @else { - @return #{"\"\\"}#{$character-code + "\""}; - } -} - -@function mdi($name) { - @if map-has-key($mdi-icons, $name) == false { - @warn "Icon #{$name} not found."; - @return ""; - } - @return char(map-get($mdi-icons, $name)); -} - -@each $key, $value in $mdi-icons { - .#{$mdi-css-prefix}-#{$key}:before { - content: char($value); - } -} - -@mixin mdi($value) { - &:before { - @extend %mdi; - @extend .#{$mdi-css-prefix}-#{$value}; - } -} - - -.#{$mdi-css-prefix}-blank:before { - content: "\F68C"; - visibility: hidden; -} diff --git a/src/styles/hubl-framework/icons/positions.scss b/src/styles/hubl-framework/icons/positions.scss deleted file mode 100644 index 4f51262..0000000 --- a/src/styles/hubl-framework/icons/positions.scss +++ /dev/null @@ -1,15 +0,0 @@ -.icon { - - &.centered { - margin: 0 auto; - } - &.margin-right-small::before { - margin-right: 15px; - } - &.margin-right-xsmall::before { - margin-right: 10px; - } - &.margin-right-xxsmall::before { - margin-right: 5px; - } -} \ No newline at end of file diff --git a/src/styles/hubl-framework/icons/simple-line-icons.scss b/src/styles/hubl-framework/icons/simple-line-icons.scss deleted file mode 100644 index 0a33c85..0000000 --- a/src/styles/hubl-framework/icons/simple-line-icons.scss +++ /dev/null @@ -1,262 +0,0 @@ -@font-face { - font-family: 'simple-line-icons'; - src: url('fonts/simple-line-icons.eot?23594131'); - src: url('fonts/simple-line-icons.eot?23594131#iefix') - format('embedded-opentype'), - url('fonts/simple-line-icons.woff2?23594131') format('woff2'), - url('fonts/simple-line-icons.woff?23594131') format('woff'), - url('fonts/simple-line-icons.ttf?23594131') format('truetype'), - url('fonts/simple-line-icons.svg?23594131#simple-line-icons') - format('svg'); - font-weight: normal; - font-style: normal; -} -/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ -/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ -/* -@media screen and (-webkit-min-device-pixel-ratio:0) { - @font-face { - font-family: 'simple-line-icons'; - src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg'); - } -} -*/ -%icon, -[class^='icon-']:before, -[class*=' icon-']:before { - font-family: 'simple-line-icons'; - font-style: normal; - font-weight: normal; - speak: none; - - display: inline-block; - text-decoration: inherit; - width: 1em; - text-align: center; - /* opacity: .8; */ - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; - - /* fix buttons height, for twitter bootstrap */ - line-height: 1em; - - /* you can be more comfortable with increased icons size */ - /* font-size: 120%; */ - - /* Font smoothing. That was taken from TWBS */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - /* Uncomment for 3D effect */ - // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); -} - -$icons: ( - user-female: '\e000', - people: '\e001', - user-follow: '\e002', - user-following: '\e003', - user-unfollow: '\e004', - user: '\e005', - trophy: '\e006', - speedometer: '\e007', - social-youtube: '\e008', - social-twitter: '\e009', - social-tumblr: '\e00a', - social-facebook: '\e00b', - social-dropbox: '\e00c', - social-dribbble: '\e00d', - shield: '\e00e', - screen-tablet: '\e00f', - screen-smartphone: '\e010', - screen-desktop: '\e011', - plane: '\e012', - notebook: '\e013', - mustache: '\e014', - mouse: '\e015', - magnet: '\e016', - magic-wand: '\e017', - hourglass: '\e018', - graduation: '\e019', - ghost: '\e01a', - game-controller: '\e01b', - fire: '\e01c', - eyeglass: '\e01d', - envelope-open: '\e01e', - envelope-letter: '\e01f', - energy: '\e020', - emotsmile: '\e021', - disc: '\e022', - cursor-move: '\e023', - crop: '\e024', - credit-card: '\e025', - chemistry: '\e026', - bell: '\e027', - badge: '\e028', - anchor: '\e029', - wallet: '\e02a', - vector: '\e02b', - speech: '\e02c', - puzzle: '\e02d', - printer: '\e02e', - present: '\e02f', - playlist: '\e030', - pin: '\e031', - picture: '\e032', - map: '\e033', - layers: '\e034', - handbag: '\e035', - globe-alt: '\e036', - globe: '\e037', - frame: '\e038', - folder-alt: '\e039', - film: '\e03a', - feed: '\e03b', - earphones-alt: '\e03c', - earphones: '\e03d', - drop: '\e03e', - drawar: '\e03f', - docs: '\e040', - directions: '\e041', - direction: '\e042', - diamond: '\e043', - cup: '\e044', - compass: '\e045', - call-out: '\e046', - call-in: '\e047', - call-end: '\e048', - calculator: '\e049', - bubbles: '\e04a', - briefcase: '\e04b', - book-open: '\e04c', - basket-loaded: '\e04d', - basket: '\e04e', - bag: '\e04f', - action-undo: '\e050', - action-redo: '\e051', - wrench: '\e052', - umbrella: '\e053', - trash: '\e054', - tag: '\e055', - support: '\e056', - size-fullscreen: '\e057', - size-actual: '\e058', - shuffle: '\e059', - share-alt: '\e05a', - share: '\e05b', - rocket: '\e05c', - question: '\e05d', - pie-chart: '\e05e', - pencil: '\e05f', - note: '\e060', - music-tone-alt: '\e061', - music-tone: '\e062', - microphone: '\e063', - loop: '\e064', - logout: '\e065', - login: '\e066', - list: '\e067', - like: '\e068', - home: '\e069', - grid: '\e06a', - graph: '\e06b', - equalizer: '\e06c', - dislike: '\e06d', - cursor: '\e06e', - control-start: '\e06f', - control-rewind: '\e070', - control-play: '\e071', - control-pause: '\e072', - control-forward: '\e073', - control-end: '\e074', - calendar: '\e075', - bulb: '\e076', - chart: '\e077', - arrow-up-circle: '\e078', - arrow-right-circle: '\e079', - arrow-left-circle: '\e07a', - arrow-down-circle: '\e07b', - ban: '\e07c', - bubble: '\e07d', - camrecorder: '\e07e', - camera: '\e07f', - check: '\e080', - clock: '\e081', - close: '\e082', - cloud-download: '\e083', - cloud-upload: '\e084', - doc: '\e085', - envelope: '\e086', - eye: '\e087', - flag: '\e088', - folder: '\e089', - heart: '\e08a', - info: '\e08b', - key: '\e08c', - link: '\e08d', - lock: '\e08e', - lock-open: '\e08f', - magnifier: '\e090', - magnifier-add: '\e091', - magnifier-remove: '\e092', - paper-clip: '\e093', - paper-plane: '\e094', - plus: '\e095', - location-pin: '\e096', - power: '\e097', - refresh: '\e098', - reload: '\e099', - settings: '\e09a', - star: '\e09b', - symble-female: '\e09c', - symbol-male: '\e09d', - target: '\e09e', - volume-1: '\e09f', - volume-2: '\e0a0', - volume-off: '\e0a1', - phone: '\e600', - menu: '\e601', - options-vertical: '\e602', - options: '\e603', - arrow-down: '\e604', - arrow-left: '\e605', - arrow-right: '\e606', - arrow-up: '\e607', - paypal: '\e608', - social-instagram: '\e609', - social-linkedin: '\e60a', - social-pintarest: '\e60b', - social-github: '\e60c', - social-google: '\e60d', - social-reddit: '\e60e', - social-skype: '\e60f', - social-behance: '\e610', - social-foursqare: '\e611', - social-soundcloud: '\e612', - social-spotify: '\e613', - social-stumbleupon: '\e614', - minus: '\e615', - organization: '\e616', - exclamation: '\e617', - social-vkontakte: '\e618', - event: '\e619', - social-steam: '\e620', - idea:'\e076' -); - - -@each $name, $code in $icons { - .icon-#{$name} { - &:before { - content: $code; - } - } -} -@mixin icon($code) { - &:before { - @extend %icon; - @extend .icon-#{$code}; - } -} diff --git a/src/styles/hubl-framework/icons/sizes.scss b/src/styles/hubl-framework/icons/sizes.scss deleted file mode 100644 index fdff513..0000000 --- a/src/styles/hubl-framework/icons/sizes.scss +++ /dev/null @@ -1,18 +0,0 @@ -.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; - } -} diff --git a/src/styles/hubl-framework/icons/styles.scss b/src/styles/hubl-framework/icons/styles.scss deleted file mode 100644 index dbb2131..0000000 --- a/src/styles/hubl-framework/icons/styles.scss +++ /dev/null @@ -1,43 +0,0 @@ -.icon { - - input, - .ss-single-selected { - background-position: right 12px top 50%; - background-repeat: no-repeat; - } - &.icon-magnify input, - &.icon-magnify .ss-single-selected { - background-image: url("https://cdn.skypack.dev/@startinblox/component-directory@1.3.0/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); - } - } -} diff --git a/src/styles/hubl-framework/links/_index.scss b/src/styles/hubl-framework/links/_index.scss deleted file mode 100644 index b1bc7e6..0000000 --- a/src/styles/hubl-framework/links/_index.scss +++ /dev/null @@ -1,26 +0,0 @@ -solid-link, -solid-route { - cursor: pointer; -} - -.backlink { - color: #636363; - font-size: 13px; - text-decoration: underline; - @include icon('arrow-left-circle'); - - &::before { - display: inline-block; - font-size: 20px; - margin-right: 10px; - text-decoration: none; - } - - &:hover { - text-decoration: none; - } -} - -.link { - color: var(--color-secondary); -} diff --git a/src/styles/hubl-framework/segments/_index.scss b/src/styles/hubl-framework/segments/_index.scss deleted file mode 100644 index a001083..0000000 --- a/src/styles/hubl-framework/segments/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'positions'; -@import 'spaces'; -@import 'sizes'; diff --git a/src/styles/hubl-framework/segments/positions.scss b/src/styles/hubl-framework/segments/positions.scss deleted file mode 100644 index acbdbdc..0000000 --- a/src/styles/hubl-framework/segments/positions.scss +++ /dev/null @@ -1,16 +0,0 @@ -.segment { - position: relative; - - .align-middle { - transform: translateY(50%); - } - &.float-left { - float: left; - } - &.float-right { - float: right; - } - &.center { - margin: 0 auto; - } -} diff --git a/src/styles/hubl-framework/segments/sizes.scss b/src/styles/hubl-framework/segments/sizes.scss deleted file mode 100644 index c89f001..0000000 --- a/src/styles/hubl-framework/segments/sizes.scss +++ /dev/null @@ -1,36 +0,0 @@ -$small: "min-width: 640px"; -$medium: "min-width: 768px"; -$large: "min-width: 1024px"; -$xlarge: "min-width: 1280px"; - -.segment { - - @media($large) { - &.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; - } - } - } -} diff --git a/src/styles/hubl-framework/segments/spaces.scss b/src/styles/hubl-framework/segments/spaces.scss deleted file mode 100644 index 16cfc21..0000000 --- a/src/styles/hubl-framework/segments/spaces.scss +++ /dev/null @@ -1,244 +0,0 @@ -.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; - } - } - } -} \ No newline at end of file diff --git a/src/styles/hubl-framework/tables/_index.scss b/src/styles/hubl-framework/tables/_index.scss deleted file mode 100644 index f3f751a..0000000 --- a/src/styles/hubl-framework/tables/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'tables'; -@import 'cells'; -@import 'headers'; -@import 'bodies'; -@import 'sizes'; diff --git a/src/styles/hubl-framework/tables/bodies.scss b/src/styles/hubl-framework/tables/bodies.scss deleted file mode 100644 index 1df0b82..0000000 --- a/src/styles/hubl-framework/tables/bodies.scss +++ /dev/null @@ -1,22 +0,0 @@ -.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; - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/hubl-framework/tables/cells.scss b/src/styles/hubl-framework/tables/cells.scss deleted file mode 100644 index f72f41b..0000000 --- a/src/styles/hubl-framework/tables/cells.scss +++ /dev/null @@ -1,6 +0,0 @@ -.table-cell { - display: table-cell; - white-space: nowrap; - text-align: center; - vertical-align: middle; -} diff --git a/src/styles/hubl-framework/tables/headers.scss b/src/styles/hubl-framework/tables/headers.scss deleted file mode 100644 index bda2de4..0000000 --- a/src/styles/hubl-framework/tables/headers.scss +++ /dev/null @@ -1,20 +0,0 @@ -.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; - } - } -} diff --git a/src/styles/hubl-framework/tables/sizes.scss b/src/styles/hubl-framework/tables/sizes.scss deleted file mode 100644 index 155887e..0000000 --- a/src/styles/hubl-framework/tables/sizes.scss +++ /dev/null @@ -1,22 +0,0 @@ -.table-body, -.table-header { - - .w280 { - width: 280px; - } - .w450 { - width: 450px; - } - .w370 { - width: 370px; - } - .w230 { - width: 230px; - } - .w70 { - width: 70px; - } - .w162 { - width: 162px; - } -} diff --git a/src/styles/hubl-framework/tables/tables.scss b/src/styles/hubl-framework/tables/tables.scss deleted file mode 100644 index 37e0253..0000000 --- a/src/styles/hubl-framework/tables/tables.scss +++ /dev/null @@ -1,35 +0,0 @@ -.table-wrapper { - position: relative; - width: 100%; - - /* Bottom scrollbar */ - overflow: auto; - height: auto; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: none; - scrollbar-width: thin; - scrollbar-color: var(--color-heading) var(--color-grey); - - &::-webkit-scrollbar-track { - background-color: var(--color-grey); - border-radius: 10px; - } - - &::-webkit-scrollbar { - height: 5px; - } - - &::-webkit-scrollbar-thumb { - background-color: var(--color-heading); - border-radius: 10px; - } - - .table { - border-collapse: collapse; - display: table; - overflow: auto; - table-layout: fixed; - width: 100%; - max-width: 100%; - } -} diff --git a/src/styles/hubl-framework/tags/_index.scss b/src/styles/hubl-framework/tags/_index.scss deleted file mode 100644 index eb2fc2b..0000000 --- a/src/styles/hubl-framework/tags/_index.scss +++ /dev/null @@ -1,82 +0,0 @@ -.tag:not(:empty) { - cursor: pointer; - 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); - } - } - } -} diff --git a/src/styles/index.scss b/src/styles/index.scss index 068550f..e435c95 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,8 +1,11 @@ @charset "UTF-8"; +@import "@startinblox/hubl-styling-framework/dist/index.css"; + main { background-color: pink; } -@import 'hubl-framework/_index'; -@import 'hubl-app/_index'; +@import 'header/_index'; +@import 'left-nav/_index'; +@import 'content/_index'; diff --git a/src/styles/hubl-app/left-nav/_index.scss b/src/styles/left-nav/_index.scss similarity index 100% rename from src/styles/hubl-app/left-nav/_index.scss rename to src/styles/left-nav/_index.scss diff --git a/src/styles_old/abstracts/_fonts.scss b/src/styles_old/abstracts/_fonts.scss deleted file mode 100644 index 191ee64..0000000 --- a/src/styles_old/abstracts/_fonts.scss +++ /dev/null @@ -1,27 +0,0 @@ -@font-face { - font-family: 'RefrigeratorDelxW01Bold'; - src: url('../fonts/RefrigeratorDelxW01Bold.eot'); - src: url('../fonts/RefrigeratorDelxW01Bold.eot') format('embedded-opentype'), - url('../fonts/RefrigeratorDelxW01Bold.woff') format('woff'), - url('../fonts/RefrigeratorDelxW01Bold.ttf') format('truetype'), - url('../fonts/RefrigeratorDelxW01Bold.svg#RefrigeratorDelxW01Bold') format('svg'); - font-weight: bold; -} -@font-face { - font-family: 'Facit'; - src: url('../fonts/FacitRegular.eot'); - src: url('../fonts/FacitRegular.eot') format('embedded-opentype'), - url('../fonts/FacitRegular.woff') format('woff'), - url('../fonts/FacitRegular.ttf') format('truetype'), - url('../fonts/FacitRegular.svg#FacitRegular') format('svg'); - font-weight: 400; -} -@font-face { - font-family: 'Facit'; - src: url('../fonts/FacitBold.eot'); - src: url('../fonts/FacitBold.eot') format('embedded-opentype'), - url('../fonts/FacitBold.woff') format('woff'), - url('../fonts/FacitBold.ttf') format('truetype'), - url('../fonts/FacitBold.svg#FacitBold') format('svg'); - font-weight: 700; -} \ No newline at end of file diff --git a/src/styles_old/abstracts/_mixins.scss b/src/styles_old/abstracts/_mixins.scss deleted file mode 100644 index 0dad7ef..0000000 --- a/src/styles_old/abstracts/_mixins.scss +++ /dev/null @@ -1,58 +0,0 @@ -@mixin window-style-modal($background: var(--color-white), $shadow: hsla(212, 7%, 55%, 0.19)) { - box-shadow: 0 0 8px 0 $shadow; - background-color: $background; -} - -@mixin breakpoint($min: 0, $max: 0) { - $type: type-of($min); - - @if $type==string { - @if $min==xs { - @media (max-width: 576px) { - @content; - } - } - - @else if $min==sm { - @media (max-width: 768px) { - @content; - } - } - - @else if $min==md { - @media (max-width: 991px) { - @content; - } - } - - @else if $min==lg { - @media (min-width: 992px) { - @content; - } - } - - @else { - @warn "Beware ! Breakpoints mixin supports xs, sm, md, lg"; - } - } - - @else if $type==number { - $query: "all" !default; - - @if $min !=0 and $max !=0 { - $query: "(min-width: #{$min}) and (max-width: #{$max})"; - } - - @else if $min !=0 and $max==0 { - $query: "(min-width: #{$min})"; - } - - @else if $min==0 and $max !=0 { - $query: "(max-width: #{$max});" - } - - @media #{$query} { - @content; - } - } -} diff --git a/src/styles_old/abstracts/_variables.scss b/src/styles_old/abstracts/_variables.scss deleted file mode 100644 index 0bb357d..0000000 --- a/src/styles_old/abstracts/_variables.scss +++ /dev/null @@ -1,156 +0,0 @@ -// Color Variables -:root { - --color-primary: #FF0055; - --color-secondary: #0068FF; - --color-third: #00E3B4; - --color-grey: #636363; - --color-heading: #2E3F58; - - --nav-height: 72px; - - --color-complementary: #5BB4CE; - --color-complementary-darken: #35A0C0; - - --color-white: hsl(0, 0%, 100%); - - --color-black-h: 16; - --color-black-s: 45%; - --color-black-l: 6%; - --color-black: hsl(var(--color-black-h), var(--color-black-s), var(--color-black-l)); /* 180D09 */ - - /* Fifty shades of greys */ - --color-grey-1: hsl(calc(var(--color-black-h) + 200), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 16%)); /*hsl(216, 4%, 22%); #36383B */ - --color-grey-2: hsl(calc(var(--color-black-h) + 217), calc(var(--color-black-s) - 27%), calc(var(--color-black-l) + 23%)); /*hsl(233, 18%, 29%); #3C3F57 */ - --color-grey-3: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 23%)); /*hsl(0, 0%, 29%); #4A4A4A */ - --color-grey-4: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 43%), calc(var(--color-black-l) + 43%)); /*hsl(0, 2%, 49%); #807A7A */ - --color-grey-5: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 44%)); /*hsl(213, 4%, 50%); #7A7F85 */ - --color-grey-6: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 57%)); /*hsl(0, 4%, 63%); #A59D9D */ - --color-grey-7: hsl(calc(var(--color-black-h) + 228), calc(var(--color-black-s) + 35%), calc(var(--color-black-l) + 64%)); /*hsl(244, 10%, 70%); #ABAABA */ - --color-grey-8: hsl(calc(var(--color-black-h) + 212), calc(var(--color-black-s) - 20%), calc(var(--color-black-l) + 73%)); /*hsl(228, 25%, 79%); #BDC2D7 */ - --color-grey-9: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 36%), calc(var(--color-black-l) + 76%)); /*hsl(0, 9%, 82%); #D6CECE */ - --color-grey-10: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 42%), calc(var(--color-black-l) + 87%)); /*hsl(0, 3%, 93%); #EEEDED */ - --color-grey-11: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 32%), calc(var(--color-black-l) + 80%)); /*hsl(213, 13%, 86%); #D7DBE0 */ - --color-grey-12: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 25%), calc(var(--color-black-l) + 85%)); /*hsl(213, 20%, 91%); #E4E8ED */ - --color-grey-13: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 90%)); /*hsl(0, 0%, 96%); #F4F4F4 */ - - - /* CUSTOM COLORS FOR CLIENT */ - --color-main-background: var(--color-grey-13); - --color-main-text: var(--color-grey-4); - --color-highlight-primary: var(--color-primary); - --color-user-panel: var(--color-black); - --color-avatar-background: var(--color-grey-10); - --color-title: var(--color-secondary); - --color-h1: var(--color-secondary); - --color-h2: var(--color-secondary); - - /* Header's elements */ - --color-header-background: var(--color-white); - --color-bell: var(--color-secondary); - --color-notification-counter-number: var(--color-white); - --color-notification-summary: var(--color-grey-4); - --solid-notifications-theme: var(--color-primary); - --color-notification-item-border: var(--color-grey-12); - --color-notification-scrollbar-background: #EDF1FA; - --color-notification-scrollbar-track: var(--color-grey-8); - --color-user-panel-header-text: var(--color-secondary); - --color-user-panel-header-background: var(--color-white); - --color-user-panel-header-text-open: var(--color-white); - --color-user-panel-header-background-open: var(--color-secondary); - --color-user-panel-list-background: var(--color-white); - --color-user-panel-list-text-hover: var(--color-primary); - --color-user-panel-list-border: var(--color-grey-12); - - /* Left menu */ - --color-menu-highlight-primary: var(--color-highlight-primary); - --color-menu-background: var(--color-secondary); - --color-menu-text: var(--color-white); - --color-menu-text-active: var(--color-white); - --color-menu-background-active: var(--color-menu-highlight-primary); - --color-menu-badge-background: var(--color-secondary); - --color-menu-badge-text-active: var(--color-menu-text-active); - --color-menu-badge-background-active: var(--color-complementary); - --color-menu-icon-background-active: var(--color-secondary); - - /* Right menu */ - --color-right-menu-background: var(--color-grey-10); - --color-right-menu-text: var(--color-secondary); - --color-right-menu-link-border: var(--color-grey-9); - --color-right-menu-active-text: var(--color-white); - --color-right-menu-active-background: var(--color-secondary); - --color-right-menu-active-icon: var(--color-white); - - /* Scrollbar */ - --color-scrollbar-right-background: var(--color-white); - --color-scrollbar-right-track: var(--color-grey-9); - --color-scrollbar-left-background: var(--color-secondary); - --color-scrollbar-left-track: var(--color-grey-11); - --color-scrollbar-table-background: var(--color-grey-10); - --color-scrollbar-table-track: var(--color-secondary); - - /* tags */ - --color-tag-admin-text: var(--color-complementary); - --color-tag-admin-border: var(--color-complementary); - - /* Form elements */ - --color-button-white: var(--color-white); - --color-button-primary: var(--color-primary); - --color-button-secondary: var(--color-secondary); - --color-button-complementary: var(--color-complementary); - - --color-input-background: var(--color-grey-10); - --color-input-text: var(--color-secondary); - --color-input-icon: var(--color-secondary); - --color-input-active: var(--color-secondary); - --color-fieldset: var(--color-title); - --color-fieldset-border: var(--color-grey-10); - --color-button-modal: var(--color-title); - --color-select-list: var(--color-secondary); - --color-select-add-button: var(--color-button-secondary); - --color-select-add-button-background: var(--color-button-white); - --color-add-button-background: var(--color-button-secondary); - --color-add-button: var(--color-white); - - --color-label-light: var(--color-grey-6); - - /* skill */ - --color-skill-background: var(--color-primary); - --color-skill-text: var(--color-white); - - /* icon */ - --color-icon: var(--color-complementary); - - /* Table */ - --color-table-header-background: var(--color-grey-6); - --color-table-header-text: var(--color-white); - --color-table-border: var(--color-grey-8); - - /* User thumb */ - --color-user-thumb-name: var(--color-grey-4); - - --color-backlink: var(--color-secondary); - --color-content-header: var(--color-grey-9); - - /* job board */ - --color-job-board-primary: var(--color-primary) !important; - --color-job-board-secondary: var(--color-secondary)!important; - --color-job-board-complementary: var(--color-complementary)!important; - --color-job-board-complementary-darken: var(--color-complementary-darken)!important; - --color-job-board-white: var(--color-white)!important; - --color-job-board-black-1: var(--color-black)!important; - --color-job-board-grey-10: #E4E8ED !important; // for some reason with the var it doesh't work var(--color-grey-12) !important; - - /* directory */ - --color-directory-primary: var(--color-primary)!important; - --color-directory-secondary: var(--color-secondary)!important; - --color-directory-complementary: var(--color-complementary)!important; - --color-directory-complementary-darken: var(--color-complementary-darken)!important; - --color-directory-white: var(--color-white)!important; - --color-directory-black: var(--color-black)!important; -} - -/* Variables for event */ -$color-212-4-50: hsl(212.7,4.3%,50%); -$color-0-0-22: hsl(0,0%,22.7%); -$color-203-87-19: hsl(203, 87.8%, 19.2%); -$color-357-67-45: hsl(357,67.5%,45.9%); diff --git a/src/styles_old/base/about.scss b/src/styles_old/base/about.scss deleted file mode 100644 index ab2026a..0000000 --- a/src/styles_old/base/about.scss +++ /dev/null @@ -1,56 +0,0 @@ -#about{ - h2,h3{ - text-transform: uppercase; - } - h2{ - margin-left: 1.5em; - } - .flex-content-white{ - display: flex; - @media only screen and (max-width: 768px) { - flex-direction: column; - } - >div{ - padding: 2em 2.5em; - text-align: center; - margin: 0 1.5em 3em 1.5em; - background: white; - box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.11); - display: flex; - flex-direction: column; - justify-content: space-between; - } - >div:first-child{ - width: 60%; - } - >div:last-child{ - width: 35%; - @media only screen and (max-width: 768px) { - width: 60%; - } - } - a{ - text-decoration: none; - } - } - - .main-cta{ - background: var(--color-white) none repeat scroll 0% 0%; - border: 1px solid var(--color-primary); - border-radius: 55px; - color: var(--color-primary); - cursor: pointer; - font-weight: bold; - text-transform: uppercase; - width: 50%; - font-size: 1.1rem; - align-self: center; - padding: 0.5rem 1.5rem; - } - - .main-cta:hover{ - background: var(--color-primary) none repeat scroll 0% 0%; - border : 1px solid var(--color-primary); - color: var(--color-white); - } -} \ No newline at end of file diff --git a/src/styles_old/base/form.scss b/src/styles_old/base/form.scss deleted file mode 100644 index a24bdb5..0000000 --- a/src/styles_old/base/form.scss +++ /dev/null @@ -1,243 +0,0 @@ -solid-form { - [data-id="error"] { - display: none !important; // Hide the default core message, english only with a weird message - } -} - -.form form { - margin-left: -25px; - transition: all .3s ease; - /*display: block; - height: fit-content; - margin-bottom: 75px; - transition: all .3s ease; - }*/ - - label { - display: block; - } -} - - -.button-register input[type=submit] { - @extend .button; - @extend .text-bold; - @extend .text-uppercase; - @extend .reversed; - @extend .button-secondary; - @extend .bordered; - height: auto; - position: fixed; - bottom: 1em; - left: 10%; - white-space: normal; - width: 80%; - z-index: 1; - - @include breakpoint(lg) { - /*height: 3rem; - left: 0; - margin: 0; - margin-left: auto; - margin-top: 32px; - position: relative; - width: auto;*/ - position: unset; - bottom: unset; - white-space: unset; - left: unset; - width: unset; - z-index: unset; - float: right; - margin-top: 10px; - } -} - -/* WIDGETS SIB (let in .content-box to override default styles) */ - -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; - } -} - -/* Additional styles for the select to add a member in circle-edit */ -.block.select-add>form { - display: block; - - @include breakpoint(lg) { - display: flex; - flex-direction: row; - margin-bottom: 2.6rem; - margin-top: 1.8rem; - } - - label { - margin-top: 0; - } - - .ss-main { - min-width: 35vw; - } - - input[type=submit] { - @extend .button; - @extend .text-bold; - @extend .text-uppercase; - @extend .button-complementary; - @extend .bordered; - margin: 10px 0; - width: 100%; - - @include breakpoint(lg) { - height: 32px; - margin: auto 0 auto 2.2rem; - width: auto; - } - } -} -/* End */ - -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; - } - } -} - -solid-form-file { - - div { - display: flex; - flex-direction: column-reverse; - align-items: center; - margin-top: 1.8rem; - - @include breakpoint(lg) { - flex-direction: row-reverse; - justify-content: flex-end; - } - - input[type='file'] { - height: 0.1px; - opacity: 0; - overflow: hidden; - position: absolute; - width: 0.1px; - z-index: -1; - } - - input[type='text'] { - margin-bottom: 0.8rem; - width: 100%; - - @include breakpoint(lg) { - width: auto; - } - } - - label { - @extend .button; - @extend .text-bold; - @extend .text-uppercase; - @extend .button-primary; - @extend .bordered; - text-align: center; - width: 100%; - - @include breakpoint(lg) { - margin: auto 2.2rem; - width: auto; - } - } - } -} - -/* CUSTOM WIDGETS */ - -hubl-member-form { - width: 100%; - - form { - display: flex; - flex-direction: column; - - [name='member-form__input'] { - margin-bottom: 1rem; - } - - solid-form-dropdown-autocompletion-label, - solid-form-multipleselect-autocompletion-label { - float: left; - } - - input[type='submit'] { - background-color: var(--color-select-add-button-background); - border: 1px solid var(--color-select-add-button); - color: var(--color-select-add-button); - } - } -} diff --git a/src/styles_old/base/header.scss b/src/styles_old/base/header.scss deleted file mode 100644 index 61dd4ab..0000000 --- a/src/styles_old/base/header.scss +++ /dev/null @@ -1,468 +0,0 @@ -#header { - height: 72px; - z-index: 999; - /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);*/ /*mockup value*/ - padding: 0 25px; -} - -/*#header { - max-height: 50px; - height: 50px; - display: flex; - align-items: center; - background-color: var(--color-header-background); - color: var(--color-black); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); - flex-shrink: 0; - position: fixed; - z-index: 999; - width: -webkit-fill-available; - width: -moz-available; - - @include breakpoint(lg) { - max-height: 83px; - height: 83px; - position: relative; - } - - &.is-spaced { - padding: 0 0.8rem; - - @include breakpoint(lg) { - padding: 0 2.5rem; - } - } - - .header-left { - flex-grow: 1; - position: relative; - - .logo { - display: inline-block; - } - - .beta-tag { - display: none; - - @include breakpoint(lg) { - display: inline-block; - font-size: 1.4rem; - font-weight: 600; - line-height: 19px; - letter-spacing: 0.19px; - padding: 3px 13px 3px 15px; - border-radius: 3px; - background: var(--color-primary); - color: var(--color-white); - position: fixed; - top: 12px; - left: 267px; - } - } - } - - >*:not(:first-child) { - margin-left: 2rem; - - @include breakpoint(lg) { - margin-left: 0; - } - }*/ - - /* Fix: to remove the place taken by these elements */ - /*solid-widget[name='hubl-user-avatar'] { - display: contents; - } - - solid-notifications-template[data-rdf-type='hd:circle'], - solid-notifications-template[data-rdf-type='foaf:user'] { - position: absolute; - } -}*/ - -/* General styling for both notification and user's panel */ -details { - /*position: relative;*/ - - summary { - - &::-moz-list-bullet { - list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */ - } - - &::-webkit-details-marker { - display: none; - } - } -} -/* End */ - -solid-notifications { - color: var(--color-bell); - - @include breakpoint(sm) { - padding: 0; - } - - .solid-notifications__container { - position: relative; - - .solid-notifications__button { - @include icon('bell'); - font-size: 2.5rem; - - @include breakpoint(lg) { - font-size: 3rem; - } - - &::before { - margin-left: 0; - } - - img { - display: none; - } - - .solid-notifications__counter { - left: 2rem; - position: absolute; - top: 1px; - - @include breakpoint(lg) { - left: 2.1rem; - top: -3px; - } - - span { - color: white; - } - } - } - - .solid-notifications__triangle-back { - display: none; - } - - .solid-notifications__triangle-shadow { - display: none; - - @include breakpoint(lg) { - background: white; - display: block; - position: absolute; - left: auto; - right: -2.1em; - top: 5em; - transform: initial; - width: 0; - z-index: 4; - - &::after { - content: ""; - position: absolute; - width: 0; - height: 0; - margin-left: -5em; - top: 0px; - left: 50%; - border: 1em solid black; - border-color: #fff #fff transparent transparent; - transform-origin: 0 0; - transform: rotate(-45deg); - box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14); - } - } - } - - .solid-notifications__list { - border: none; - border-radius: 0; - box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24); - max-height: calc(100vh - 50px); - position: fixed; - left: 0; - top: 2.5em; - width: 100vw; - - @include breakpoint(lg) { - max-height: calc(100vh - 93px); - position: absolute; - left: auto; - right: -2.3em; - top: 3.95em; - width: 347px; - } - - /* Custom scrollbar */ - overflow: auto; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: none; - scrollbar-width: thin; - scrollbar-color: #C9C8C8 #F1F1F1; - - &::-webkit-scrollbar-track { - background: #F1F1F1; - } - - &::-webkit-scrollbar-thumb { - background-color: #C9C8C8; - border-radius: 8px; - } - - &::-webkit-scrollbar { - width: 8px; - } - /* End of custom scrollbar */ - - .solid-notifications__item { - border-bottom: none; - - &:hover { - background-color: transparent; - - & solid-notification__title, - & solid-notification__summary { - color: var(--color-secondary); - } - } - - .solid-notification { - padding: 1.2rem 0 1.5rem; - - &[data-read] { - opacity: 0.5; - } - - .solid-notification__avatar { - align-items: center; - background: var(--color-grey); - display: flex; - height: 35px; - justify-content: center; - margin-left: 1.6rem; - margin-right: 1.4rem; - overflow: hidden; - position: relative; - vertical-align: middle; - width: 35px; - - img { - background-color: var(--color-grey); - height: 100%; - object-fit: cover; - object-position: center center; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - } - - .solid-notification__content { - font-family: Open Sans, sans-serif; - - .solid-notification__title { - color: var(--color-heading); - font-size: 1.3rem; - font-weight: 600; - - .solid-notification__title__side { - font-weight: normal; - - >span:first-child { - margin-right: 4px; - } - } - - .solid-notification__title__icon { - display: inline-block; - font-family: simple-line-icons; - } - } - - .solid-notification__summary { - color: var(--color-grey); - font-size: 1.2rem; - line-height: 1.7rem; - margin: 1.1rem 0 0; - - @include breakpoint(320px, 388px) { - max-width: 226px; - } - - @include breakpoint(lg) { - max-width: 256px; - } - } - } - - .solid-notification__read { - display: none; - } - } - } - } - } -} - -#user-controls { - padding: 0; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - summary { - cursor: pointer; - display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ - - &:focus { - background-color: transparent; - color: white; - outline: none; - - @include breakpoint(lg) { - background-color: var(--color-heading); - } - } - } - - #user-controls__profile { - div { - display: flex; - flex-direction: row-reverse; - - > * { - vertical-align: middle; - } - - hubl-user-avatar { - /*height: 3.3rem; - margin-right: 0; - width: 3.3rem;*/ - - @include breakpoint(lg) { - /*margin-right: 16px;*/ - /*height: 4.8rem; - width: 4.8rem;*/ - } - } - - solid-display-value[name='first_name'] { - @include icon('arrow-down'); - align-items: center; - display: none; - flex-direction: row-reverse; - - &::before { - margin-left: 1.5rem; - } - - @include breakpoint(lg) { - display: flex; - } - } - } - } - - #user-controls__panel { - height: 0; - position: absolute; - right: 0; - z-index: 1; - /* Quick fix for mobile version */ - width: 215px; - top: 42px; - - @include breakpoint (lg) { - width: 100%; - top: 72px; - } - - > nav { - background-color: white; - box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); - position: absolute; - right: 0; - top: 0; - width: 100%; - - ul { - list-style: none; - margin: 0; - padding: 0; - - solid-route { - display: block; - - &:hover a { - color: var(--color-secondary); - } - } - - li { - - solid-link { - display: block; - /*margin-right: 0;*/ - /*padding: 1.6rem 1.3rem;*/ - } - &:hover { - - solid-link { - color: var(--color-secondary); - } - } - } - - .icon::before { - margin-right: 10px; - } - } - - button { - /*color: var(--color-grey-4); - padding: 1.6rem 1.3rem;*/ - text-align: left; - width: 100%; - - &:hover { - color: var(--color-secondary); - } - } - } - } - - &[open] { - /*background-color: var(--color-heading);*/ - color: var(--color-heading); - - #user-controls__profile { - - div { - - solid-display-value[name='first_name'] { - @include icon('close'); - - &::before { - margin-left: 1.5rem; - } - } - } - } - } -} - -.mobile-menu-icon { - - display: block; - padding-left: 0; - font-size: 24px; - - @include breakpoint(lg) { - display: none; - } -} diff --git a/src/styles_old/base/main.scss b/src/styles_old/base/main.scss deleted file mode 100644 index e6a070f..0000000 --- a/src/styles_old/base/main.scss +++ /dev/null @@ -1,990 +0,0 @@ -* { - outline: none; -} - -:root { - font-size: 14px; - font-family: Open Sans, sans-serif; - --sib-notifications-theme: var(--color-primary); - - body { - background-color: var(--color-main-background); - box-sizing: border-box; - color: var(--color-grey) !important; - /* Fix for viewport height bug in webkit for mobile */ - height: -webkit-fill-available; - min-height: -webkit-fill-available; - } - - main { - width: calc(100% - 256px); - } - - .notLoggedIn { - visibility: hidden; - } -} - -.segment { - /*background: white;*/ - position: relative; - - .align-middle { - transform: translateY(50%); - } - .box-border { - box-sizing: border-box; - } - &.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; - } - } - &.float-left { - float: left; - } - &.float-right { - float: right; - } - &.clearfix::after { - content: ""; - clear: both; - display: block; - height: 0; - width: 100%; - } - &.margin-top-small { - margin-top: 10px; - } - &.margin-left { - margin-left: 20px; - } - &.margin-right-xsmall { - margin-right: 15px; - } - &.margin-bottom { - margin-bottom: 20px; - } - &.margin-bottom-xlarge { - margin-bottom: 30px; - } - &.margin-bottom-xxlarge { - margin-bottom: 35px; - } - &.margin-top-xxlarge { - margin-top: 35px; - } - &.margin-left-small { - margin-left: 15px; - } - &.margin-right-xsmall { - margin-right: 6px; - } - &.margin-right-small { - margin-right: 15px; - } - &.margin-right { - margin-right: 20px; - } - &.margin-bottom { - margin-bottom: 20px; - } - &.padding-small { - padding: 10px; - } - &.padding-y-small { - padding-top: 10px; - padding-bottom: 10px; - } - &.padding { - padding: 14px; - } - &.padding-large { - padding: 20px; - } - &.padding-xlarge { - padding: 25px; - } - &.padding-left-large { - padding-left: 25px - } -} - -.avatar { - border-radius: 50%; - object-fit: cover; - height: 50px; - width: 50px; - - &.xsmall { - height: 31px; - width: 31px; - } - &.small { - height: 44px; - width: 44px; - } - &.large { - height: 180px; - width: 180px; - } - &.xlarge { - height: 241px; - width: 241px; - } - &.margin-right-small { - margin-right: 16px; - } -} - -.border-bottom { - border-bottom: 1px solid #D6CECE; -} - -.shadow { - box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); -} - -.bg-color-third { - background: var(--color-third); -} - -.bg-color-heading { - background: var(--color-heading); -} - -.bg-color-white { - background: white; -} - -.icon { - - &::before { - font-size: 20px; - } - - &.icon-magnify { - background-image: url(); - } - &.icon-arrow-down { - background-image: url(); - } - &.rounded{ - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - - &-small { - height: 35px; - width: 35px; - } - &-large { - height: 70px; - width: 70px; - } - } - &.xxsmall::before { - font-size: 12px; - } - &.xsmall::before { - font-size: 15px; - } - &.small::before { - font-size: 18px; - } - &.large::before { - font-size: 30px; - } - &.xlarge::before { - font-size: 40px; - } - &.centered { - margin: 0 auto; - } - &.icon-margin-right::before { - margin-right: 15px; - } - &.icon-margin-right-xxsmall::before { - margin-right: 5px; - } -} - -.icon-color-primary::before { - color: var(--color-primary); -} - -.icon-color-secondary::before { - color: var(--color-secondary); -} - -.icon-color-third::before { - color: var(--color-third); -} - -.icon-color-heading::before { - color: var(--color-heading); -} - -.text-bold { - font-weight: 600; -} - -.text-bolder { - font-weight: 700; -} - -.text-normal { - font-weight: normal; -} - -.text-uppercase { - text-transform: uppercase; -} - -.text-underline { - text-decoration: underline; -} - -.text-xsmall { - font-size: 12px; -} - -.text-small { - font-size: 14px; -} - -.text-large { - font-size: 16px; -} - -.text-xlarge { - font-size: 18px; -} - -.text-color-primary { - color: var(--color-primary); -} - -.text-color-secondary { - color: var(--color-secondary); -} - -.text-color-third { - color: var(--color-third); -} - -.text-color-heading { - color: var(--color-heading); -} - -.text-color-white { - color: white; -} - -.text-letter-spacing-wide {} - -.text-letter-spacing-wider {} - -.text-letter-spacing-widest {} - -.text-letter-spacing-large { - letter-spacing: 0.2px; -} - -.text-letter-spacing-larger { - letter-spacing: 0.38px; -} - -.text-center { - text-align: center; -} - -.text-right { - text-align: right; -} - - -.logo { - height: 34px; - width: 220px; - display: inline-block; - - >solid-link { - >img { - max-height: 100%; - max-width: 100%; - } - } -} - -.tag { - 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); - } - &.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; - } - } -} - -input:not([type='file']):not([type='search']):not([type='submit']), -textarea { - border: none; - background: #F6F6F6; - color: var(--color-grey); - 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); - } -} - -textarea { - height: 100px; - resize: vertical; -} - -/* General styles for pagination */ -nav#main__menu solid-display.nosub>nav { - display: grid; - grid-template-areas: "left middle right"; - grid-template-rows: auto; - text-align: center; - overflow: hidden; - - >[data-id="prev"] { - grid-area: left; - line-height: 1; - } - >[data-id="next"] { - grid-area: right; - line-height: 1; - } - >span { - grid-area: middle; - } - button { - color: transparent; - - &[disabled] { - opacity: 0.5; - } - } -} - -/* Styles for pagination in the left menu */ -nav#main__menu solid-display.nosub>nav { - grid-template-columns: auto 30% auto; - - >span { - font-size: 18px; - } - button { - font-size: 15px; - color: white; - } -} - - - -/* Fix for solid-dashboard fixture */ -solid-dashboard section { - padding: 1rem !important; - - @include breakpoint(lg) { - padding: 4.2rem !important; - } - - .icon { - display: inline-block; - } -} - -/*.wrapper { - display: grid; - grid-template-areas: - "header" - "content"; - - @include breakpoint(lg) { - grid-template-columns: 265px auto; - grid-template-areas: - "header header" - "leftmenu content"; - } -}*/ - -/*.header { - grid-area: header; -}*/ - -.left-menu { - /*grid-area: leftmenu;*/ - - @include breakpoint(lg) { - height: calc(100vh - 72px); /* 72px = nav height */ - /*position: sticky; - top: 0;*/ - overflow-x: hidden; - overflow-y: scroll; - } - - &.jsLeftMenu { - display: none; - - @include breakpoint(lg) { - display: block; - } - } - - &.jsLeftMenu[open] { - display: block; - bottom: 0; - box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); - width: 80vw; - position: fixed; - right: 0; - top: 0; - z-index: 1000; - - @include breakpoint(lg) { - display: none; - } - } -} - -.content { - /*grid-area: content;*/ - - @include breakpoint(lg) { - /*position: sticky; - top: 0;*/ - /*overflow-y: auto;*/ - height: calc(100vh - 72px); - /*overflow-x: hidden;*/ - } -} - - - -/* Add scrollbar to the left and right menu, and to the content */ -nav, .views-container, .table-wrapper { - overflow: auto; - height: auto; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: none; -} - -/* Custom scrollbar of the left-menu */ -nav { - scrollbar-width: thin; - scrollbar-color: var(--color-grey) var(--color-heading); - - &::-webkit-scrollbar-track { - background: var(--color-heading); - } - - &::-webkit-scrollbar-thumb { - background-color: var(--color-grey); - border-radius: 6px; - border: 3px solid var(--color-heading); - } - - &::-webkit-scrollbar { - width: 11px; - } -} - -/* Custom scrollbar of the content */ -.views-container { - scrollbar-width: thin; - scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background); - - &::-webkit-scrollbar-track { - background: var(--color-scrollbar-right-background); - } - - &::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-right-track); - border-radius: 6px; - border: 3px solid var(--color-scrollbar-right-background); - } - - &::-webkit-scrollbar { - width: 11px; - } -} - -/* Custom scrollbar of the table */ -.table-wrapper { - scrollbar-width: thin; - scrollbar-color: var(--color-heading) var(--color-grey); - - &::-webkit-scrollbar-track { - background-color: var(--color-grey); - border-radius: 10px; - } - - &::-webkit-scrollbar { - height: 5px; - } - - &::-webkit-scrollbar-thumb { - background-color: var(--color-heading); - border-radius: 10px; - } -} - -/* Quick fix. Will be removed later */ -/*#admin-circles, -#admin-projects, -#admin-users { - display: contents; -}*/ - -[hidden], -.hidden { - display: none !important; -} - -img { - max-height: 100%; - max-width: 100%; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - color: var(--color-heading); - margin: 0; -} - -.avatar { - align-items: center; - background-color: var(--color-avatar-background); - border-radius: 50%; - display: flex; - justify-content: center; - overflow: hidden; - position: relative; - - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - object-position: center; - position: absolute; - top: 0; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } -} - -.customer-logo { - box-sizing: border-box; - display: flex; - height: 8.5vh; - justify-content: flex-end; - margin-top: 20px; - text-align: end; - width: 15vw; -} - -.project-edit-logo { - display: flex; - height: 8.5vh; - margin-top: 20px; - margin-bottom: 30px; - - form { - display: flex; - } - - hubl-user-avatar { - width: 104px; - } - - input[type='submit'] { - @extend .button; - @extend .text-bold; - @extend .text-uppercase; - @extend .button-primary; - @extend .bordered; - align-self: center; - } -} - -.form-picture { - - form { - display: block; - text-align: center; - margin-bottom: 2.6rem; - padding-top: 1.8rem; - - @include breakpoint(lg) { - display: flex; - width: 100%; - } - - hubl-user-avatar { - display: inline-block; - max-width: 100%; - max-height: 16.5vh; - - @include breakpoint(lg) { - margin-left: 20px; - max-height: 8.5vh; - max-width: none; - width: calc(35vw - 20px); - } - - >object, - >img { - display: block; - max-height: 16.5vh !important; - - @include breakpoint(lg) { - max-height: 8.5vh !important; - } - } - } - - input { - @extend .button; - @extend .text-bold; - @extend .text-uppercase; - @extend .button-primary; - @extend .bordered; - margin: 10px 0; - width: 100%; - - @include breakpoint(lg) { - margin: auto 0 auto 2.2rem; - width: auto; - } - } - } -} - - - -.p_relative { - position: relative; -} - -.flex_column { - flex-direction: column; -} - -.flex_vertical-center { - align-items: center; -} - -.w90 { - - @include breakpoint(sm) { - width: 90%; - } -} - -.w100 { - - @include breakpoint(sm) { - width: 100%; - } -} - -.content-box { - /*@include window-style-modal();*/ - /*flex-direction: column; - flex-grow: 1; - margin: 2rem 1rem 5rem 2rem;*/ - - &.full-width { - /*background: var(--color-white); - flex: 1; - font-size: 1.6rem;*/ - /*margin: 0 auto;*/ - /*min-height: 100%;*/ - } -} - -/* Header inside circle, project view */ -.content-box__header { - border-bottom: 1px solid var(--color-content-header); - padding: 1.8rem 0 1.4rem; - margin: 0 1.6rem; - - @include breakpoint(lg) { - padding: 2rem; - margin: 0; - } - - .mobile-sidebar-button { - float: right; - color: var(--color-secondary); - font-size: 1.8rem; - font-weight: bold!important; - - &::before { - font-size: 2.2rem; - font-weight: normal; - margin-right: 1.2rem; - } - - @include breakpoint(lg) { - display: none; - } - } - - solid-display { - @include breakpoint(sm) { - float: left; - } - } - - /* For solid-display on project, circle, or private message view */ - solid-display { - width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */ - - div { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: calc(100% - 20px); - - .h1-aside { - font-size: 1.8rem; - - &:not(:empty)::before { - color: var(--color-grey-4); - content: ' - '; - font-size: 2rem; - font-weight: bold; - } - } - - .description { - color: var(--color-grey-4); - - } - - .name { - color: var(--color-grey-4); - font-weight: normal; - } - } - } -} - -.content-box__height { - min-height: calc(100vh - 50px); /* Heights of main header and sub-header */ - - @include breakpoint(lg) { - min-height: calc(100vh - 72px); - } -} - -.content-box__info { - flex-direction: column; - padding: 1rem; - - @include breakpoint(lg) { - padding: 3.2rem; - } - - * { - box-sizing: border-box; - } -} - -/*.modal { - color: var(--color-white); - margin: 75px; - padding: 40px; - max-height: 85vh; - text-align: center; - - img { - max-width: 75%; - } - - solid-link { - font-size: 2.7rem; - position: absolute; - right: 32px; - top: 32px; - - button { - color: var(--color-secondary); - } - } -}*/ - -.admin-header { - /* Quick fix for alignment on mobile before admin content rework */ - flex-direction: column; - align-items: flex-start; - margin-bottom: 20px; - /*end */ - - @include breakpoint(lg) { - flex-direction: row; - align-items: center; - justify-content: space-between; - margin-bottom: 5rem; - } - - h3 { - /* Quick fix for alignment on mobile before admin content rework */ - margin-bottom: 20px; - /* end */ - - /*@include breakpoint(lg) { - margin-top: 0; - }*/ - } - - solid-ac-checker, - solid-link { - width: 100%; - - @include breakpoint(lg) { - width: auto; - } - } -} - -.centered { - text-align: center; -} - -.block { - display: block; -} - -.flex { - display: flex; -} - -.desktop-button__end { - display: block; - - @include breakpoint(lg) { - display: flex; - justify-content: flex-end; - } -} - -.space-between { - justify-content: space-between; - - &.with-padding { - padding-bottom: 1.4rem; - } -} - -.mobile-vertical-align { - flex-direction: column; - - @include breakpoint(lg) { - flex-direction: row; - } -} - -.word-spacing-left { - margin-left: 0.60rem; -} - -.word-spacing-right { - margin-right: 0.60rem; -} - -.mobile-margin__bottom { - margin-bottom: 1rem; - - @include breakpoint(lg) { - margin-bottom: 0; - } -} - -// Other base components -@import 'buttons'; -@import 'form'; -@import 'table'; -@import 'header'; -@import 'menu-left'; -@import 'user-thumb'; diff --git a/src/styles_old/base/menu-left.scss b/src/styles_old/base/menu-left.scss deleted file mode 100644 index 1c8ddc2..0000000 --- a/src/styles_old/base/menu-left.scss +++ /dev/null @@ -1,181 +0,0 @@ -#main__menu { - width: 256px; - - &.open { - transform: translateX(0); - } - - .unread { - font-weight: bolder; - } - - solid-router { - /* Chevron visible on large screen + rotation */ - .menu-wrapper { - .menu-icon.icon-arrow-up { - visibility: hidden; - } - @include breakpoint(lg) { - .menu-icon.icon-arrow-up { - visibility: visible; - } - &.is-closed { - .sub-menu { - display: none; - } - .menu-chevron { - transform: rotateX(180deg); - } - } - } - } - /* end */ - - /* General styles for the main tabs */ - .menu { - cursor: pointer; - display: flex; - align-items: center; - - &[active] { - background-color: var(--color-third); - color: var(--color-heading); - - .menu-icon:before { - background-color: var(--color-heading); - color: white; - } - &+.divider { - display: none; - } - } - .menu-icon { - &::before { - border-radius: 100%; - height: 1.9em; - line-height: 1.9em; - width: 1.9em; - } - } - } - /* End */ - - - /* Styles for the submenus */ - .sub-menu { - - .project-tab, - .circle-tab, - .message-tab { - - /* Spaces and cursor */ - /* For project and circle */ - hubl-menu-fix-url-project>solid-link>solid-display>div, - hubl-menu-fix-url-circle>solid-link>solid-display>div, - solid-form + div>solid-display>div { - display: flex; - justify-content: space-between; - padding: 6px 10px 6px 23px; - cursor: pointer; - } - - &>div>solid-display { - display: block; - - &:last-child>div { - margin-bottom: 2.2rem; - } - &[fields="project(customer.name, name), badge"]>div { - padding: 0; - } - } - - /* when a subtab is [active] */ - solid-display[active]>div { - background-color: var(--color-third); - color: var(--color-heading); - font-weight: bold; - } - - /* Styles for the search input */ - .search-field>input { - margin-left: 30px; - margin-bottom: 10px; - width: calc(80vw - 71px); - display: block; - background-color: var(--color-heading); - color: white; - border: 1px solid white; - border-radius: 3px; - padding-left: 9.5px; - height: 27px; - opacity: 0.8; - - @include breakpoint(lg) { - margin: auto; - margin-bottom: 10px; - width: auto; - } - } - - /* Styles for the small icon */ - .sub-menu-icon { - width: 20px; - text-align: center; - - div { - font-family: simple-line-icons; - margin-right: 4px; - } - } - - /* Styles for the name */ - .sub-menu-name { - flex: 3; - - .project-customer, - .project-name, - &>div{ - display: block; - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - - @include breakpoint(lg) { - width: 150px; - } - } - - &.ellipsis>div, - .project-customer, - .project-name>div { - - @include breakpoint(lg) { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - - /* Styles for the counter */ - .sub-menu-badge div.counter:not([data-nb-unread="0"]) { - text-align: center; - display: block; - background-color: var(--color-third, gray); - border-radius: 50%; - font-size: 12px; - line-height: 20px; - width: 20px; - height: 20px; - padding-bottom: 0; - color: var(--color-heading); - } - } - } - - .divider { - height: 1px; - background-color: #D7DBE0; - opacity: 0.2; - } - } -} \ No newline at end of file diff --git a/src/styles_old/base/table.scss b/src/styles_old/base/table.scss deleted file mode 100644 index cf0b801..0000000 --- a/src/styles_old/base/table.scss +++ /dev/null @@ -1,178 +0,0 @@ -/* Display and positioning of the table and its elements */ - -.table-wrapper { - overflow: auto; - position: relative; - width: 100%; - margin-bottom: 60px; - - @include breakpoint(lg) { - margin-bottom: 0; - } - - .table { - border-collapse: collapse; - display: table; - overflow: auto; - table-layout: fixed; - width: 100%; - max-width: 100%; - } - - .table-header { - display: table-header-group; - text-align: center; - vertical-align: middle; - border-top: 1px solid #C9C8C8; - border-left: 1px solid #C9C8C8; - background: var(--color-third); - color: var(--color-heading); - font-size: 16px; - font-weight: 600; - letter-spacing: 0.25px; - - &>.table-cell { - display: table-cell; - height: 50px; - text-align: center; - vertical-align: middle; - border-right: 1px solid white; - white-space: nowrap; - - &:last-child { - border-right: 1px solid #C9C8C8; - } - } - } - - .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; - display: table-cell; - text-align: center; - vertical-align: middle; - height: 64px; - } - solid-multiple[name="user.communities"] { - text-align: left; - } - } - } - - /*&>solid-multiple { - display: contents;*/ - - &>div { - display: contents; - - &>hubl-team-template-edit { - display: table-row; - - &>* { - border-bottom: 1px solid var(--color-table-border); - display: table-cell; - text-align: center; - vertical-align: middle; - } - } - } - /*}*/ - } - } -} - -/* Styles of the table and its elements */ - -.table-body, -.table-header { - - /* Fix. Could disappear when we can add .class on set fields */ - [name^='cell-1'] { - @extend .w280; - } - - .w280 { - width: 280px; - } - - .w450 { - width: 450px; - } - - .w370 { - width: 370px; - } - - .w230 { - width: 230px; - } - - .w70 { - width: 70px; - } - - .w162 { - width: 162px; - } - - .hashtag::before { - content: '#'; - } -} - -/* Styles of specific cells */ - -.cell-with-buttons { - text-align: center; - - [name='button'] { - - input[type='submit'] { - @extend .button; - @extend .text-bold; - @extend .text-uppercase; - @extend .reversed; - @extend .button-secondary; - @extend .bordered; - @extend .desktop-btn-margin__left; - } - } - - &.is-spaced { - padding: 0.8rem 2.2rem; - } -} - -.cell-with-name { - color: var(--color-secondary); - font-weight: 600; - padding-left: 2rem; - text-align: left; -} - -/* Styles of elements inside cells */ - -.table { - - .user-thumb.is-spaced, - [name='user-thumb'] { - padding: 0.8rem 2.2rem; - } -} - -.table solid-ac-checker { - /*text-align: center;*/ -} diff --git a/src/styles_old/base/user-thumb.scss b/src/styles_old/base/user-thumb.scss deleted file mode 100644 index 569678f..0000000 --- a/src/styles_old/base/user-thumb.scss +++ /dev/null @@ -1,139 +0,0 @@ -/* The grids */ -%user-thumb__grid { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, auto); -} - -%user-thumb__grid-sup { - align-items: center; - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; -} - -%user-thumb__grid-inf { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; -} - -/* Styles for elements of user-thumb*/ -.user-thumb__picture { - align-self: center; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - height: 7vh; - width: 7vh; -} - -.user-thumb__name { - color: var(--color-user-thumb-name); - font-weight: 600; - margin-right: 1rem; - text-align: left; -} - -.user-thumb__send { - position: relative; - bottom: 7px; - left: -5px; - - solid-link { - @include icon('speech'); - - &::before { - display: inline-block; - color: var(--color-primary); - } - } -} - -.user-thumb__admin:not(:empty) { - display: block !important; - @extend %tag-admin; -} - -.user-thumb__username { - align-items: center; - display: flex; - - &::before { - content: '@'; - } -} -solid-multiple[name="user.communities"] { - * { - display: contents; - } - - solid-display-value { - &:after { - content: ","; - margin-right: 5px; - } - - display: inline-block!important; - } - - >solid-display>div>solid-display:last-child>div>solid-display-value:after { - display: none; - } - - >solid-display { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: calc(50% - 22px - 0.5rem); - line-height: 22px; - } - - @include mdi('atom'); - align-items: center; - display: flex; - margin-right: 1.6rem; - - &::before { - color: var(--color-icon); - margin-right: 0.50rem; - } -} - -.user-thumb__lead:not(:empty) { - @include icon('eyeglass'); - align-items: center; - display: flex; - - &::before { - color: var(--color-icon); - font-size: 1.9rem; - font-weight: bold; - margin-left: 0; - margin-right: 0.50rem; - } -} -.user-thumb[name="classGroup"] { - display: block; - margin-top: 15px; -} - -/* Apply the grids to all user-thumbs */ -.user-thumb>div, -.user-thumb>[name='classGrid'], -[name='user-thumb'] { - - @extend %user-thumb__grid; - - >[name='sup'] { - @extend %user-thumb__grid-sup; - } - - >[name='sub'] { - @extend %user-thumb__grid-inf; - } -} diff --git a/src/styles_old/components/_index.scss b/src/styles_old/components/_index.scss deleted file mode 100644 index 9f53556..0000000 --- a/src/styles_old/components/_index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'chat'; -@import 'comment'; -@import 'filters'; -@import 'sidebar'; -@import 'skills'; -@import 'tags'; -@import 'project-edit-picture'; diff --git a/src/styles_old/components/chat.scss b/src/styles_old/components/chat.scss deleted file mode 100644 index 440e3be..0000000 --- a/src/styles_old/components/chat.scss +++ /dev/null @@ -1,20 +0,0 @@ -.chat-view { - padding: 0; - height: calc(100vh - 106px); - position: relative; - overflow: hidden; - - @include breakpoint(lg) { - height: calc(100vh - 84px - 83px); /* Header's and subheader's height on mobile */ - } - - > solid-xmpp-chat { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 0; - } -} - diff --git a/src/styles_old/components/comment.scss b/src/styles_old/components/comment.scss deleted file mode 100644 index 60add66..0000000 --- a/src/styles_old/components/comment.scss +++ /dev/null @@ -1,122 +0,0 @@ -/* #job-offers { - - details { - - summary { - color: $color-244-73-62; - cursor: pointer; - display: flex; - padding: 1.3rem 2.1rem; - - &::-moz-list-bullet { - list-style-type: none; - } - - &::-webkit-details-marker { - display: none; - } - - span { - @include icon('speech'); - font-weight: 600; - - &::before { - margin: 0 1rem 0 0; - } - } - - .icon-arrow-up { - margin-left: auto; - } - } - - &[open] { - - .icon-arrow-up { - transform: rotate(180deg); - } - } - - sib-conversation.conversation { - - .sib-conversation { - font-family: Open Sans; - - [name='conversation-wrapper'] { - display: flex; - - [name='conversation-avatar'] { - margin-right: 6px; - - .avatar { - height: 35px; - width: 35px; - } - } - - [name='conversation-content'] { - - [name='author_user.name'] { - color: $color-0-0-29; - font-size: 1.5rem; - } - - .conversation__messages { - display: none; - } - } - } - - >solid-display.conversation>div>solid-display:first-child { - margin-bottom: 4.5rem; - } - - solid-ac-checker { - border-top: 1px solid $color-210-17-91; - - solid-form-textarea-label { - - >label div { - color: $color-210-5-56; - font-size: 1.4rem; - margin-bottom: 1rem; - visibility: hidden; - - &::before { - content: 'Add a comment'; - visibility: visible; - } - } - - textarea { - border: none; - font-size: 1.5rem; - resize: none; - } - } - - input[type='submit'] { - border: 1px solid $color-244-73-62; - border-radius: 100em; - color: $color-244-73-62; - font-size: 1.3rem; - padding: 0.8rem 1.5rem; - text-transform: lowercase; - - &:hover { - background-color: $color-244-73-62; - border: 1px solid $color-244-73-62; - color: white; - } - } - } - - .conversation>div>solid-display, - .conversation-form { - border: none; - margin: 1rem 2.1rem; - } - } - } - } -}*/ diff --git a/src/styles_old/components/filters.scss b/src/styles_old/components/filters.scss deleted file mode 100644 index 1831909..0000000 --- a/src/styles_old/components/filters.scss +++ /dev/null @@ -1,59 +0,0 @@ -/*%filters { - display: grid; - grid-gap: 0px 15px; - grid-template-columns: 1fr 1fr; - grid-template-rows: 3.5em 3.5em; - - label { - display: block; - } - - input, select { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - border-style: none; - box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); - color: $color-210-5-56; - font-size: 1.36rem; - line-height: 1.80; - margin-top: 1.36rem; - padding: 0.9rem; - width: 95%; - } - - input[type="submit"] { - display: none; - } - - select { - background: $color-0-0-100; - background-image: url("/images/chevron-down.png"); - background-position: right 12px top 60%; - background-repeat: no-repeat; - background-size: 14px 9px; - box-sizing: border-box; - display: inline-block; - width: 100%; - - > option:not(:first-child) { - color: black; - } - } - - solid-form-label-text { - display: flex; - flex-direction: column; - } - - solid-form-placeholder-dropdown[name="skills"] { - grid-column-end: 3; - grid-column-start: 1; - } -} - -.job-board, #members-list { - solid-form[naked] { - @extend %filters; - } -}*/ diff --git a/src/styles_old/components/icons/_index.scss b/src/styles_old/components/icons/_index.scss deleted file mode 100644 index 37259f7..0000000 --- a/src/styles_old/components/icons/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'custom-icons'; -@import 'icons'; -@import 'material-design-icons'; \ No newline at end of file diff --git a/src/styles_old/components/icons/custom-icons.scss b/src/styles_old/components/icons/custom-icons.scss deleted file mode 100644 index b8c030c..0000000 --- a/src/styles_old/components/icons/custom-icons.scss +++ /dev/null @@ -1,116 +0,0 @@ -/* Custom icons */ - -$ci-filename: "custom-icons"; -$ci-font-name: "custom-icons"; -$ci-font-family: "custom-icons"; -$ci-font-weight: "regular"; -$ci-font-path: "../fonts" !default; -$ci-css-prefix: ci !default; -$ci-version: "tlnzh2" !default; - -@font-face { - font-family: '#{$ci-font-name}'; - src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}'); - src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}#iefix') format('embedded-opentype'), - url('#{$ci-font-path}/#{$ci-filename}.ttf?#{$ci-version}') format('truetype'), - url('#{$ci-font-path}/#{$ci-filename}.woff?#{$ci-version}') format('woff'), - url('#{$ci-font-path}/#{$ci-filename}.svg?#{$ci-version}##{$ci-filename}') format('svg'); - font-weight: normal; - font-style: normal; -} - -$ci-icons: ( - awareness: '\e900', - businessman: '\e901', - information: '\e902', - list-1: '\e903', - sale: '\e904', - armor: '\e905', - chat: '\e906', - list: '\e907', - network: '\e908', - offer: '\e909', - reaction: '\e90a', - add: '\e90b', - appointment: '\e90c', - desk: '\e90d', - file: '\e90e', - premium: '\e90f', - team: '\e910', - beer: '\e911', - networking: '\e912', - receipt: '\e913', - robot: '\e914', - team-1: '\e915', - croupier: '\e916', - learning: '\e917', - review: '\e918', - surf: '\e919', - document: '\e91a', - code: '\e91b', - hat: '\e91c', - beer1: '\e91d', - alien: '\e91e', - add-user: '\e91f', - feedback: '\e920', - globe: '\e921', - bubble-add: '\e922' -); - -%ci, -[class^='ci-']::before, -[class*='ci-']::before { - display: inline-block; - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: '#{$ci-font-name}' !important; - font-size: 25px; - font-style: normal; - font-weight: normal; - line-height: 1; - speak: none; - text-align: center; - text-decoration: inherit; - width: 1em; - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; - - /* Better Font Rendering */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -@function char($character-code) { - @if function-exists("selector-append") { - @return unquote("\"\\#{$character-code}\""); - } - - @if "\\#{'x'}" == "\\x" { - @return str-slice("\x", 1, 1) + $character-code; - } - @else { - @return #{"\"\\"}#{$character-code + "\""}; - } -} - -@function ci($name) { - @if map-has-key($ci-icons, $name) == false { - @warn "Icon #{$name} not found."; - @return ""; - } - @return char(map-get($ci-icons, $name)); -} - -@each $key, $value in $ci-icons { - .#{$ci-css-prefix}-#{$key}:before { - content: char($value); - } -} - -@mixin ci($value) { - &:before { - @extend %ci; - @extend .#{$ci-css-prefix}-#{$value}; - } -} diff --git a/src/styles_old/components/icons/icons.scss b/src/styles_old/components/icons/icons.scss deleted file mode 100644 index 651b237..0000000 --- a/src/styles_old/components/icons/icons.scss +++ /dev/null @@ -1,263 +0,0 @@ -@font-face { - font-family: 'simple-line-icons'; - src: url('../fonts/simple-line-icons.eot?23594131'); - src: url('../fonts/simple-line-icons.eot?23594131#iefix') - format('embedded-opentype'), - url('../fonts/simple-line-icons.woff2?23594131') format('woff2'), - url('../fonts/simple-line-icons.woff?23594131') format('woff'), - url('../fonts/simple-line-icons.ttf?23594131') format('truetype'), - url('../fonts/simple-line-icons.svg?23594131#simple-line-icons') - format('svg'); - font-weight: normal; - font-style: normal; -} -/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ -/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ -/* -@media screen and (-webkit-min-device-pixel-ratio:0) { - @font-face { - font-family: 'simple-line-icons'; - src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg'); - } -} -*/ -%icon, -[class^='icon-']:before, -[class*=' icon-']:before { - font-family: 'simple-line-icons'; - font-style: normal; - font-weight: normal; - speak: none; - - display: inline-block; - text-decoration: inherit; - width: 1em; - margin-right: 0.2em; - text-align: center; - /* opacity: .8; */ - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; - - /* fix buttons height, for twitter bootstrap */ - line-height: 1em; - - /* you can be more comfortable with increased icons size */ - /* font-size: 120%; */ - - /* Font smoothing. That was taken from TWBS */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - /* Uncomment for 3D effect */ - // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); -} - -$icons: ( - user-female: '\e000', - people: '\e001', - user-follow: '\e002', - user-following: '\e003', - user-unfollow: '\e004', - user: '\e005', - trophy: '\e006', - speedometer: '\e007', - social-youtube: '\e008', - social-twitter: '\e009', - social-tumblr: '\e00a', - social-facebook: '\e00b', - social-dropbox: '\e00c', - social-dribbble: '\e00d', - shield: '\e00e', - screen-tablet: '\e00f', - screen-smartphone: '\e010', - screen-desktop: '\e011', - plane: '\e012', - notebook: '\e013', - mustache: '\e014', - mouse: '\e015', - magnet: '\e016', - magic-wand: '\e017', - hourglass: '\e018', - graduation: '\e019', - ghost: '\e01a', - game-controller: '\e01b', - fire: '\e01c', - eyeglass: '\e01d', - envelope-open: '\e01e', - envelope-letter: '\e01f', - energy: '\e020', - emotsmile: '\e021', - disc: '\e022', - cursor-move: '\e023', - crop: '\e024', - credit-card: '\e025', - chemistry: '\e026', - bell: '\e027', - badge: '\e028', - anchor: '\e029', - wallet: '\e02a', - vector: '\e02b', - speech: '\e02c', - puzzle: '\e02d', - printer: '\e02e', - present: '\e02f', - playlist: '\e030', - pin: '\e031', - picture: '\e032', - map: '\e033', - layers: '\e034', - handbag: '\e035', - globe-alt: '\e036', - globe: '\e037', - frame: '\e038', - folder-alt: '\e039', - film: '\e03a', - feed: '\e03b', - earphones-alt: '\e03c', - earphones: '\e03d', - drop: '\e03e', - drawar: '\e03f', - docs: '\e040', - directions: '\e041', - direction: '\e042', - diamond: '\e043', - cup: '\e044', - compass: '\e045', - call-out: '\e046', - call-in: '\e047', - call-end: '\e048', - calculator: '\e049', - bubbles: '\e04a', - briefcase: '\e04b', - book-open: '\e04c', - basket-loaded: '\e04d', - basket: '\e04e', - bag: '\e04f', - action-undo: '\e050', - action-redo: '\e051', - wrench: '\e052', - umbrella: '\e053', - trash: '\e054', - tag: '\e055', - support: '\e056', - size-fullscreen: '\e057', - size-actual: '\e058', - shuffle: '\e059', - share-alt: '\e05a', - share: '\e05b', - rocket: '\e05c', - question: '\e05d', - pie-chart: '\e05e', - pencil: '\e05f', - note: '\e060', - music-tone-alt: '\e061', - music-tone: '\e062', - microphone: '\e063', - loop: '\e064', - logout: '\e065', - login: '\e066', - list: '\e067', - like: '\e068', - home: '\e069', - grid: '\e06a', - graph: '\e06b', - equalizer: '\e06c', - dislike: '\e06d', - cursor: '\e06e', - control-start: '\e06f', - control-rewind: '\e070', - control-play: '\e071', - control-pause: '\e072', - control-forward: '\e073', - control-end: '\e074', - calendar: '\e075', - bulb: '\e076', - chart: '\e077', - arrow-up-circle: '\e078', - arrow-right-circle: '\e079', - arrow-left-circle: '\e07a', - arrow-down-circle: '\e07b', - ban: '\e07c', - bubble: '\e07d', - camrecorder: '\e07e', - camera: '\e07f', - check: '\e080', - clock: '\e081', - close: '\e082', - cloud-download: '\e083', - cloud-upload: '\e084', - doc: '\e085', - envelope: '\e086', - eye: '\e087', - flag: '\e088', - folder: '\e089', - heart: '\e08a', - info: '\e08b', - key: '\e08c', - link: '\e08d', - lock: '\e08e', - lock-open: '\e08f', - magnifier: '\e090', - magnifier-add: '\e091', - magnifier-remove: '\e092', - paper-clip: '\e093', - paper-plane: '\e094', - plus: '\e095', - location-pin: '\e096', - power: '\e097', - refresh: '\e098', - reload: '\e099', - settings: '\e09a', - star: '\e09b', - symble-female: '\e09c', - symbol-male: '\e09d', - target: '\e09e', - volume-1: '\e09f', - volume-2: '\e0a0', - volume-off: '\e0a1', - phone: '\e600', - menu: '\e601', - options-vertical: '\e602', - options: '\e603', - arrow-down: '\e604', - arrow-left: '\e605', - arrow-right: '\e606', - arrow-up: '\e607', - paypal: '\e608', - social-instagram: '\e609', - social-linkedin: '\e60a', - social-pintarest: '\e60b', - social-github: '\e60c', - social-google: '\e60d', - social-reddit: '\e60e', - social-skype: '\e60f', - social-behance: '\e610', - social-foursqare: '\e611', - social-soundcloud: '\e612', - social-spotify: '\e613', - social-stumbleupon: '\e614', - minus: '\e615', - organization: '\e616', - exclamation: '\e617', - social-vkontakte: '\e618', - event: '\e619', - social-steam: '\e620', - idea:'\e076' -); - - -@each $name, $code in $icons { - .icon-#{$name} { - &:before { - content: $code; - } - } -} -@mixin icon($code) { - &:before { - @extend %icon; - @extend .icon-#{$code}; - } -} diff --git a/src/styles_old/components/icons/material-design-icons.scss b/src/styles_old/components/icons/material-design-icons.scss deleted file mode 100644 index 2793d84..0000000 --- a/src/styles_old/components/icons/material-design-icons.scss +++ /dev/null @@ -1,91 +0,0 @@ -/* MaterialDesignIcons.com */ - -$mdi-filename: "material-design-icons"; -$mdi-font-name: "material-design-icons"; -$mdi-font-family: "material-design-icons"; -$mdi-font-weight: "regular"; -$mdi-font-path: "../fonts" !default; -$mdi-css-prefix: mdi !default; -$mdi-version: "3.3.92" !default; - -@font-face { - font-family: '#{$mdi-font-name}'; - src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}'); - src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'), - url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'), - url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'), - url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'), - url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg'); - font-weight: normal; - font-style: normal; -} - -$mdi-icons: ( - account-outline: '\F013', - atom: '\F767', - cellphone-iphone: '\F120', - check: '\F12C', - email-outline: '\F1F0', - link-variant: '\F339' -); - -%mdi, -[class^='mdi-']::before, -[class*='mdi-']::before { - display: inline-block; - font-family: '#{$mdi-font-name}' !important; - font-size: 25px; - font-style: normal; - font-weight: normal; - line-height: 0.5em; - margin-left: -0.15em; - text-align: center; - text-decoration: inherit; - width: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; -} - -@function char($character-code) { - @if function-exists("selector-append") { - @return unquote("\"\\#{$character-code}\""); - } - - @if "\\#{'x'}" == "\\x" { - @return str-slice("\x", 1, 1) + $character-code; - } - @else { - @return #{"\"\\"}#{$character-code + "\""}; - } -} - -@function mdi($name) { - @if map-has-key($mdi-icons, $name) == false { - @warn "Icon #{$name} not found."; - @return ""; - } - @return char(map-get($mdi-icons, $name)); -} - -@each $key, $value in $mdi-icons { - .#{$mdi-css-prefix}-#{$key}:before { - content: char($value); - } -} - -@mixin mdi($value) { - &:before { - @extend %mdi; - @extend .#{$mdi-css-prefix}-#{$value}; - } -} - - -.#{$mdi-css-prefix}-blank:before { - content: "\F68C"; - visibility: hidden; -} diff --git a/src/styles_old/components/loader.scss b/src/styles_old/components/loader.scss deleted file mode 100644 index eef86ae..0000000 --- a/src/styles_old/components/loader.scss +++ /dev/null @@ -1,75 +0,0 @@ -.loader { - margin: 0 auto; - position: relative; - width: 80px; - height: 20px; - - &.loader-top { - top: 30px; - } - - div { - position: absolute; - width: 13px; - height: 13px; - border-radius: 50%; - background: var(--color-menu-background); - animation-timing-function: cubic-bezier(0, 1, 1, 0); - } - - &.loader-menu div { - width: 8px; - height: 8px; - background: var(--color-menu-text); - } - - div:nth-child(1) { - left: 8px; - animation: lds-ellipsis1 0.6s infinite; - } - - div:nth-child(2) { - left: 8px; - animation: lds-ellipsis2 0.6s infinite; - } - - div:nth-child(3) { - left: 32px; - animation: lds-ellipsis2 0.6s infinite; - } - - div:nth-child(4) { - left: 56px; - animation: lds-ellipsis3 0.6s infinite; - } -} - -@keyframes lds-ellipsis1 { - 0% { - transform: scale(0); - } - - 100% { - transform: scale(1); - } -} - -@keyframes lds-ellipsis3 { - 0% { - transform: scale(1); - } - - 100% { - transform: scale(0); - } -} - -@keyframes lds-ellipsis2 { - 0% { - transform: translate(0, 0); - } - - 100% { - transform: translate(24px, 0); - } -} diff --git a/src/styles_old/components/project-edit-picture.scss b/src/styles_old/components/project-edit-picture.scss deleted file mode 100644 index e167109..0000000 --- a/src/styles_old/components/project-edit-picture.scss +++ /dev/null @@ -1,39 +0,0 @@ -.project-edit-picture { - - >div>*:not(:last-child) { - margin-bottom: 2rem; - } - - hubl-user-avatar { - background: transparent; - border-radius: 0; - display: inline-block; - text-align: center; - - object, img { - position: relative; - } - } - - solid-ac-checker:first-of-type { - display: block; - - @include breakpoint(lg) { - display: flex; - } - - #solid-picture-remove { - margin-left: 0; - margin-top: 2rem; - - @include breakpoint(lg) { - margin-left: 2rem; - margin-top: 0; - } - } - } - - solid-ac-checker:last-of-type { - align-self: flex-end; - } -} diff --git a/src/styles_old/components/sidebar.scss b/src/styles_old/components/sidebar.scss deleted file mode 100644 index ed7ce55..0000000 --- a/src/styles_old/components/sidebar.scss +++ /dev/null @@ -1,123 +0,0 @@ -.no-sidebar { - flex: 1; - margin-top: 50px; - - @include breakpoint(lg) { - margin-top: 0; - } - - &.with-padding { - padding: 1.3rem; - - @include breakpoint(lg) { - padding: 2.5rem; - } - } -} - -.with-sidebar { - flex-grow: 1; - display: flex; - flex-direction: row; - align-items: stretch; - margin-top: 50px; - overflow: hidden; - - @include breakpoint(lg) { - margin-top: 0; - } - - .views-container { - flex: 1 0 0; - /*-webkit-backface-visibility: hidden;*/ - - &.sidebar-is-closed { - - @include breakpoint(lg) { - margin-left: -18.5rem; - transform: translate(18.5rem); - } - } - } - - >div { - transition: all 0.5s; - } - - nav { - background: #F1F1F1; - transition: all 0.5s; - width: 25rem; - - >solid-router { - flex: 0 0 auto; - - >ul { - cursor: pointer; - display: flex; - flex-direction: column; - list-style: none; - margin: 0; - padding-left: 0; - - li { - border-bottom: 1px solid #D6CECE; - &>a { - vertical-align: super; - } - } - - &>li:first-child>a { - vertical-align: middle; - } - - >solid-route { - - &[active] { - background-color: var(--color-heading); - color: white; - } - - &:hover:not([active]) { - background: #E4E4E4; - } - } - } - } - - &.jsRightMenu { - display: none; - - @include breakpoint(lg) { - display: block; - } - } - - &.jsRightMenu:not([open]) { - transform: translate(18.5rem); - - & .jsOffsiteToggle::before { - transform: rotate(180deg); - } - } - - &.jsRightMenu[open] { - - @include breakpoint(md) { - display: block; - background: var(--color-right-menu-background); - bottom: 0; - box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12); - min-width: 60%; - position: fixed; - right: 0; - top: 50px; - z-index: 1; - } - - @include breakpoint(lg) { - top: 83px; - } - } - } -} diff --git a/src/styles_old/components/skills.scss b/src/styles_old/components/skills.scss deleted file mode 100644 index b6290fd..0000000 --- a/src/styles_old/components/skills.scss +++ /dev/null @@ -1,16 +0,0 @@ -solid-multiple[name*='skills'] { - display: flex; - flex-wrap: wrap; -} - -.skill { - background-color: var(--color-skill-background); - border: 1px solid var(--color-skill-background); - border-radius: 2em; - color: var(--color-skill-text); - display: block; - font-size: 1.4rem; - font-weight: bold; - margin: 0.4rem 1rem 0.4rem 0; - padding: 0.5rem 2rem; -} \ No newline at end of file diff --git a/src/styles_old/components/tags.scss b/src/styles_old/components/tags.scss deleted file mode 100644 index 018d780..0000000 --- a/src/styles_old/components/tags.scss +++ /dev/null @@ -1,13 +0,0 @@ -%tag-admin { - display: none; - - @include breakpoint(lg) { - border: 1px solid var(--color-tag-admin-border); - border-radius: 3px; - color: var(--color-tag-admin-text); - font-size: 1.4rem; - font-weight: 400; - margin-left: 0.6rem; - padding: 0.35rem 0.98rem; - } -} diff --git a/src/styles_old/index.scss b/src/styles_old/index.scss deleted file mode 100644 index bdbee89..0000000 --- a/src/styles_old/index.scss +++ /dev/null @@ -1,23 +0,0 @@ -@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'; -} diff --git a/src/styles_old/layout/dashboard/_index.scss b/src/styles_old/layout/dashboard/_index.scss deleted file mode 100644 index 686996f..0000000 --- a/src/styles_old/layout/dashboard/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'dashboard.scss'; \ No newline at end of file diff --git a/src/styles_old/layout/dashboard/dashboard.scss b/src/styles_old/layout/dashboard/dashboard.scss deleted file mode 100644 index a7beab8..0000000 --- a/src/styles_old/layout/dashboard/dashboard.scss +++ /dev/null @@ -1,7 +0,0 @@ -.dashboard>div { - margin: 0 2px; -} - -solid-dashboard .icon::before { - width: 41px; -} \ No newline at end of file diff --git a/src/styles_old/layout/events/_index.scss b/src/styles_old/layout/events/_index.scss deleted file mode 100644 index be4ff7d..0000000 --- a/src/styles_old/layout/events/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'events.scss'; \ No newline at end of file diff --git a/src/styles_old/layout/events/events.scss b/src/styles_old/layout/events/events.scss deleted file mode 100644 index be0ef78..0000000 --- a/src/styles_old/layout/events/events.scss +++ /dev/null @@ -1,185 +0,0 @@ -solid-event section { - max-width: 1400px; - margin: auto; -} -#events, -#circle-events { - width: 100%; - font-family: "Facit"; - font-weight: 400; - color: var(--color-main-text); - solid-event { - solid-display div { - max-width: 1110px; - solid-display { - margin: 0 0 20px 40px; - } - } - .red-button, - .event-type { - background-color: var(--color-add-button-background); - } - .black-button { - background-color: var(--highlight-font-color); - margin-left: 10%; - } - .event-type, - .event-place-name { - font-weight: 700; - } - #listevents, - #circle-listevents { - [name="name"], - event-display-link-event .mdi::before { - color: var(--color-primary); - } - } - .event-place-name, - .nextevent-startdate, - event-display-link-event { - color: var(--highlight-font-color); - } - .solid-event { - font-family: "Facit"; - font-weight: 400; - .page-title { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 3.2rem; - line-height: 3.8rem; - color: var(--color-primary); - } - } - #default-listevents, - #circles-listevents { - .newtype .button { - font-size: 1.2rem; - width: max-content; - height: max-content; - padding: 5px 20px; - color: var(--color-primary); - } - .headline h2 { - float: left; - margin-top: 35px; - color: var(--color-primary); - text-transform: none; - font-family: "RefrigeratorDelxW01Bold"; - font-size: 2.4rem; - } - solid-form { - solid-form-dropdown-label { - label { - height: 2.5rem; - } - } - } - [name="name"] { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 1.8rem; - line-height: 2.6rem; - letter-spacing: 0.32px; - color: var(--color-primary); - padding: 5px; - max-width: 250px; - margin: 5px auto; - } - .event-type { - font-size: 1.1rem; - padding: 5px 20px; - width: max-content; - height: max-content; - } - event-display-location-events { - padding: 5px; - } - } - .eventdetail { - solid-display div { - display: block; - } - .mdi::before { - margin: 0 5px 0 20px; - } - [name="infotext"] { - text-align: left; - } - [name="name"] { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 3.2rem; - line-height: 3.8rem; - color: var(--color-primary); - display: block; - } - color: var(--color-primary); - .event-type { - width: max-content; - padding: 5px 20px; - font-size: 1.1rem; - line-height: 1.3rem; - height: 13px; - margin: 10px 20px; - } - [name="longDescription"] p { - font-size: 1.6rem; - line-height: 2.6rem; - } - event-display-link-event a { - font-size: 1.6rem; - } - } - .newevent label div, - .newevent solid-form-file-label div label { - line-height: 2.2rem; - text-transform: uppercase; - color: var(--form-title); - font-size: 13px; - font-weight: 600; - font-family: Open sans; - } - .newevent select, - .newevent textarea, - .newevent input, - .newtype input { - background-color: var(--form-inputs-background); - } - .newevent input[type="submit"], - .newtype input[type="submit"], - button { - width: max-content; - padding: 5px 20px; - background-color: #3C3F57; - } - .newevent input[type="file"] { - background-color: transparent; - } - } - @media (max-width: 991px) { - #listevents { - margin-top: 65px; - } - } -} - -#events { - background-color: #f0f3f6; -} - -#circle-events solid-event .events solid-form solid-form-dropdown-label select { - background-color: #f0f3f6; -} - -.with-sidebar nav>solid-router>ul [name="circle-events"] { - li::before { - content: ''; - height: 40px; - width: 40px; - mask: url('/images/appointment.svg') center no-repeat; - mask-size: contain; - -webkit-mask: url('/images/appointment.svg') center no-repeat; - -webkit-mask-size: contain; - background-color: var(--color-right-menu-text); - } - &[active] li::before { - background-color: var(--color-right-menu-active-text); - } -} \ No newline at end of file diff --git a/src/styles_old/layout/job-offers/_index.scss b/src/styles_old/layout/job-offers/_index.scss deleted file mode 100644 index 07a4c0e..0000000 --- a/src/styles_old/layout/job-offers/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'job-offers.scss'; \ No newline at end of file diff --git a/src/styles_old/layout/job-offers/job-offers.scss b/src/styles_old/layout/job-offers/job-offers.scss deleted file mode 100644 index b120517..0000000 --- a/src/styles_old/layout/job-offers/job-offers.scss +++ /dev/null @@ -1,206 +0,0 @@ -/*.job-offers__container { - @extend %grid-layer; -} - -solid-job-board { - @extend %grid-layer-main; - @extend %containerV; -} - -.job-offers__newoffer { - @extend %grid-layer-links; - @extend %containerV; -} - -#job-offers { - - .plus-button { - @extend .howto; - background-color: $color-43-100-50; - color: $color-0-0-100; - font-weight: bold; - text-transform: uppercase; - cursor: pointer; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - - .icon-plus { - font-size: 20px; - justify-content: center; - margin: 0.5rem 0.5rem 0.5rem 0; - - } - } - - .job-board__list { - @extend %grid-layer; - - >solid-form { - grid-column-start: start; - grid-column-end: middle; - grid-row-start: start; - grid-row-end: middle; - } - - >div { - grid-column-start: start; - grid-column-end: end; - grid-row-start: middle; - grid-row-end: end; - - &:first-of-type { - margin-top: 5rem; - } - - >solid-display { - @include window-style-modal(); - display: block; - font-size: 1.5rem; - margin: 1.7rem 0; - - [name="offer-detail"] { - display: block; - border-bottom: 1px solid $color-210-17-91; - margin: 0 2.1rem; - padding: 2.1rem 0; - - [name='user-thumb'] { - align-items: center; - display: flex; - margin: -0.25em; - - >*:not(solid-action) { - margin: 0.25em; - } - - [name='author.first_name'] { - color: $color-0-0-29; - font-weight: 600; - } - - solid-multiple[name$='groups'] { - display: flex; - - label { - display: none; - } - - >* { - @extend %tag-role; - } - } - - author-avatar { - align-items: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - height: 4.25rem; - justify-content: center; - margin-right: 2rem; - overflow: hidden; - width: 4.25rem; - - img { - height: 100%; - object-fit: cover; - object-position: center; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - } - } - - [name='creationDate'] { - display: block; - margin-bottom: 0.7rem; - margin-top: 2rem; - } - - [name='title'] { - @extend h3; - display: block; - font-weight: bold; - line-height: 19px; - } - - [name='description'] { - display: block; - line-height: 1.6; - margin-bottom: 1.6rem; - } - - [name='skills'] { - label { - display: none; - } - } - - author-contact { - color: $color-244-73-62; - font-size: 1.3rem; - float: right; - - >solid-link { - cursor: pointer; - @include icon('speech'); - - &::before { - font-size: 1.5rem; - margin-right: 1.2rem; - } - } - } - - [name='status'] { - float: right; - display: flex; - align-items: center; - margin: -0.25em; - - >* { - margin: 0.25em; - } - - strong { - background-color: $color-244-73-62; - border: none; - border-radius: 100em; - color: $color-0-0-100; - display: inline-block; - font-weight: normal; - padding: 0.85rem 1.7rem; - } - } - } - - .sib-conversation, - .conversation > div { - display: flex; - flex-direction: column-reverse; - } - - [name="dateCreated"] { - display: none; - } - } - } - } -} - -solid-action[name='edit'] { - margin-left: auto; - color: $color-215-6-63; - - &>solid-link { - @include icon('pencil'); - font-size: 2rem; - } -}*/ - diff --git a/src/styles_old/layout/members/_index.scss b/src/styles_old/layout/members/_index.scss deleted file mode 100644 index 2450f36..0000000 --- a/src/styles_old/layout/members/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'members'; -@import 'member-profile'; diff --git a/src/styles_old/layout/members/member-profile.scss b/src/styles_old/layout/members/member-profile.scss deleted file mode 100644 index 4a334d8..0000000 --- a/src/styles_old/layout/members/member-profile.scss +++ /dev/null @@ -1,152 +0,0 @@ -/*#member-profile { - display: flex; - flex-direction: column; - flex-grow: 1; - - .member-info { - background-color: $color-0-0-100; - box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); - margin: 2rem 1rem 5rem 2rem; - min-height: 100vh; - - .member-bio { - - solid-set-default[name='member-profile__bio'] { - display: grid; - grid-gap: 1rem; - grid-template-areas: "avatar name status" - "avatar pseudo status" - "avatar bio status" - "avatar list button"; - grid-template-columns: 1fr 2fr 1fr; - - solid-set-default[name='member-img'] { - grid-area: avatar; - - member-picture { - align-items: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - height: 28vh; - justify-content: center; - overflow: hidden; - width: 28vh; - - img { - height: 265px; - object-fit: cover; - object-position: center; - width: 265px; - } - - object { - height: 45%; - width: 45%; - } - } - - img { - border-radius: 50%; - height: 250px; - object-fit: cover; - object-position: center; - overflow: hidden; - width: 250px; - } - } - - solid-set-default[name='member-profile'] { - align-items: baseline; - align-self: end; - display: flex; - grid-area: name; - - >solid-multiple[name$='groups'] { - display: flex; - padding-left: 1.4rem; - } - } - - solid-display-value[name='profile.bio'] { - grid-area: bio; - } - - solid-set-default[name='infos'] { - display: block; - grid-area: list; - - @extend %member-info; - } - - member-status[name$='profile.available'] { - align-self: flex-end; - color: $color-244-73-62; - grid-area: status; - justify-self: flex-end; - - span { - align-items: center; - align-self: center; - display: flex; - flex-direction: column; - font-weight: 600; - line-height: 2; - } - - span.status-one { - @include ci('awareness'); - - &::before { - border-bottom: 2px solid $color-43-100-50; - font-size: 7.3rem; - padding-bottom: 1.5rem; - } - } - - span.status-two { - @include ci('armor'); - - &::before { - border-bottom: 2px solid $color-43-100-50; - font-size: 7.3rem; - padding-bottom: 1.5rem; - } - } - } - - solid-action[name='send'] { - align-self: flex-end; - grid-area: button; - justify-self: flex-end; - } - - [next=messages] { - @include icon('speech'); - border: 1px solid $color-244-73-62; - border-radius: 2em; - color: $color-244-73-62; - font-size: 18px; - font-weight: bold; - justify-self: end; - padding: 0.6em 1.5em 0.4em; - - &::before { - font-size: 25px; - padding-right: 0.5em; - } - } - } - } - - .member-skills { - - label { - float: left; - font-weight: bold; - display: block; - padding-bottom: 0.5rem; - } - } - } -}*/ diff --git a/src/styles_old/layout/members/members.scss b/src/styles_old/layout/members/members.scss deleted file mode 100644 index ca07cb0..0000000 --- a/src/styles_old/layout/members/members.scss +++ /dev/null @@ -1,242 +0,0 @@ -/*%member-info { - - solid-multiple[name^='user.'], - >member-info>div, - >solid-display-value { - display: flex; - flex-wrap: wrap; - margin-bottom: 0; - margin-top: 1.7rem; - - &::before { - color: $color-43-100-50; - padding: 0 0.6em 0 0; - } - } - - [name$='profile.city'] * { - @include mdi('atom'); - } - - [name$='email'] * { - @include mdi('email-outline'); - } - - [name$='profile.phone'] * { - @include mdi('cellphone-iphone'); - } - - [name="profile.website"]:not(:empty) { - @include mdi('link-variant'); - } -} - -member-info-groups { - @extend %tag-role; -} - -#members-list { - - #members-list__content { - @extend %grid-layer; - - nav { - align-items: center; - display: flex; - flex-wrap: wrap; - font-size: 2.4rem; - justify-content: center; - - button { - color: $color-210-25-95; - - &:before { - color: $color-216-4-22; - @include icon('arrow-left-circle'); - } - - &:disabled::before { - color: $color-215-6-63; - } - } - - button:nth-of-type(2) { - order: 1; - transform: rotate(180deg); - } - - span { - font-size: 2.6rem; - } - } - - &>solid-form { - grid-column-start: start; - grid-column-end: middle; - grid-row-start: start; - grid-row-end: middle; - } - - &>div, - &>nav { - grid-column-start: start; - grid-column-end: end; - margin-bottom: 1.7rem; - } - - &>div:first-of-type { - display: flex; - color: $color-0-0-29; - flex-wrap: wrap; - font-weight: bold; - justify-content: center; - margin: 3.75rem 0; - position: relative; - - &::before { - border-top: 1px solid $color-0-0-85; - bottom: 0; - content: ''; - left: 0; - margin: 0 auto; - position: absolute; - right: 0; - top: 50%; - width: 100%; - z-index: -1; - } - - span { - background-color: $color-210-25-95; - padding: 0 60px; - } - } - - &>div:nth-of-type(2) { - display: grid; - grid-gap: 30px; - grid-template-columns: 1fr; - grid-template-rows: auto; - - @media only screen and (min-width: 850px) { - grid-template-columns: repeat(2, 1fr); - } - - @media only screen and (min-width: 1180px) { - grid-template-columns: repeat(3, 1.5fr); - } - - &>solid-display { - background-color: white; - box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); - color: $color-210-4-50; - cursor: pointer; - min-height: auto; - position: relative; - text-decoration: none; - top: 0; - transition: all .1s ease-in; - - &>div { - display: flex; - flex-direction: column; - } - - &:hover { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24); - top: -2px; - } - - label { - display: none; - } - - solid-multiple[name$='groups'] { - align-items: flex-start; - display: flex; - justify-content: flex-end; - min-height: 3.4rem; - padding-left: 2.6rem; - padding-right: 2.6rem; - padding-top: 1.3rem; - - >* { - margin: 0.3rem; - } - } - - member-picture { - align-items: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - height: 28vh; - justify-content: center; - margin: 1.7rem auto; - overflow: hidden; - width: 28vh; - - img { - height: 100%; - object-fit: cover; - object-position: center; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - } - - solid-set-default[name='bio'] { - align-items: center; - border-bottom: 1px solid $color-210-25-95; - display: flex; - flex-direction: column; - padding-bottom: 3rem; - - >* { - text-align: center; - } - - [name='pseudonym'] { - margin-top: 0.6rem; - } - - solid-display-value[name$='bio'] { - flex: 1; - margin: 2.5rem 0; - padding: 0 10px; - width: 70%; - flex-basis: 4.5em; - } - - [name='send'] { - border: 1px solid $color-244-73-62; - border-radius: 3.4rem; - color: $color-244-73-62; - font-size: 1.8rem; - font-weight: bold; - padding: 1rem 2.55rem 0.7rem; - @include icon('speech'); - - [next=messages]:before { - font-size: 2.5rem; - padding-right: 0.85rem; - } - } - } - - solid-set-default[name='infos'] { - padding: 0.4rem 2rem 3.7rem; - @extend %member-info; - - solid-multiple[name='skills'] { - margin: 1.6rem 0; - } - } - } - } - } -}*/ diff --git a/src/styles_old/layout/polls/_index.scss b/src/styles_old/layout/polls/_index.scss deleted file mode 100644 index 381e936..0000000 --- a/src/styles_old/layout/polls/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'polls.scss'; \ No newline at end of file diff --git a/src/styles_old/layout/polls/polls.scss b/src/styles_old/layout/polls/polls.scss deleted file mode 100644 index 348b545..0000000 --- a/src/styles_old/layout/polls/polls.scss +++ /dev/null @@ -1,550 +0,0 @@ -solid-poll > div { - max-width: 1400px; - margin: auto; -} -#polls, -#circle-polls { - h2 { - text-transform: inherit; - } - /*style of poll listing*/ - #default-pollListing, #circles-pollListing { - margin: auto; - .headline { - h2 { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 2.4rem; - color: var(--color-primary); - float: left; - margin-top: 5px; - } - solid-link { - display:flex; - justify-content: end; - margin-top: 30px; - margin-right: 70px; - z-index: 1; - position: relative; - .add-poll { - background-color: var(--color-add-button-background); - color: var(--color-add-button); - box-shadow: 0px 0px 4px 1px #CACACA; - text-transform: uppercase; - font-weight: 700; - line-height: 20px; - &::before { - font-family: "material-design-icons"; - content: "\F419"; - width: 1em; - display: inline-block; - margin: 0 5px 0 10px; - font-size: 2rem; - vertical-align: middle; - font-weight: 400; - } - } - } - } - .all-polls { - solid-form { - display: block; - border-bottom: solid 1px #cacaca; - height: 90px; - margin: 30px 25px 25px; - max-width: 85%; - solid-form-dropdown-label label { - font-size: 1.4rem; - font-family: "Facit"; - } - solid-form-placeholder-text { - margin-left: 15px; - input { - border-radius: 4px; - } - } - } - > div { - display: flex; - flex-wrap: wrap; - justify-content: left; - height: 100%; - max-width: 1100px; - margin: auto; - > solid-display { - width: 320px; - height: 550px; - margin: 0 0 20px 40px; - >div:first-of-type { - background-color: #fff; - height: 100%; - -webkit-box-shadow: 0px 0px 4px 1px #CACACA; - box-shadow: 0px 0px 4px 1px #CACACA; - *[name="body"] { - /*size of tags of poll card*/ - poll-display-votetags { - >div { - width: 64px; - height: 24px; - p { - font-size: 11px; - } - } - } - } - img { - width: 320px; - height: 230px; - object-fit: cover; - } - [name="title"] { - font-family: "RefrigeratorDelxW01Bold"; - color: var(--color-primary); - font-size: 1.8rem; - font-weight: 600; - text-transform: uppercase; - height: 30px; - width: 100%; - display: inline-block; - } - [name="hostingOrganisation"], - [name="endDate"] { - color: var(--highlight-font-color); - font-family: Facit; - font-size: 14px; - letter-spacing: 0; - line-height: 22px; - } - [name="hostingOrganisation"] { - &::before { - content: '\e037'; - font-family: 'simple-line-icons'; - color: var(--color-secondary); - height: 22px; - width: 24px; - font-size: 16px; - letter-spacing: 0; - line-height: 22px; - display: inline-block; - text-align: center; - } - } - [name="dateLine"] { - display: flex; - flex-direction: row; - margin-top: 10px; - div [name="dateImage"]::before { - display: inline-block; - font: normal normal normal 24px/1 "Material Design Icons"; - content: "\F6AF"; - color: var(--color-secondary); - height: 22px; - width: 24px; - font-size: 20px; - line-height: 22px; - text-align: center; - } - } - [name="shortDescription"] { - color: var(--color-main-text); - font-family: Facit; - font-size: 14px; - letter-spacing: 0; - line-height: 22px; - text-align: center; - max-height: 100%; - } - } - } - } - } - } - /*personnalise css on poll page*/ - #default-pollPage, #circles-pollPage { - width: 90%; - max-width: 1110px; - margin: auto; - h1, - h2 { - font-family: "RefrigeratorDelxW01Bold";; - } - h1 { - font-size: 3.2rem; - line-height: 3.8rem; - margin: 20px auto; - } - h2 { - font-size: 26px; - line-height: 31px; - } - .vote-debate-content .active-tab, - .vote-debate-content .border-content { - background-color: white; - } - solid-display.topline { - >div:first-of-type { - *[name="right"] { - poll-display-votetags { - >div { - width: 64px; - height: 24px; - p { - font-size: 11px; - } - } - } - } - } - } - [name="hostingOrganisation"], - [name="dateLine"] { - color: var(--highlight-font-color); - font-family: Facit; - font-size: 16px; - font-weight: bold; - } - [name="dateLine"] solid-set-default { - display: flex; - margin-top: 7px; - solid-display-value, solid-display-date-value { - margin-left: 7px; - } - } - [name="hostingOrganisation"] { - margin-left: 0; - [name="hostingOrganisation"]::before { - content: '\e037'; - font-family: "simple-line-icons"; - font-weight: 400; - color: var(--color-secondary); - margin-right: 10px; - font-size: 16px; - } - } - div [name="dateImage"]::before { - font-family: "Material Design Icons"; - font-weight: 400; - content: "\F6AF"; - color: var(--color-secondary); - font-size: 20px; - } - [name="shortDescription"], - [name="longDescription"] { - margin: 20px 0; - color: var(--color-main-text); - font-family: Facit; - } - [name="shortDescription"] { - margin: 20px 0; - font-size: 18px; - line-height: 28px; - } - [name="longDescription"] { - font-size: 16px; - line-height: 26px; - } - .vote-section, - .share-vote { - font-family: Facit; - padding: 15px 25px; - } - .vote-tab-content h3::before { - font-family: "Material Design Icons"; - font-weight: 400; - font-size: 20px; - margin-right: 10px; - color: var(--highlight-font-color); - } - .vote-section > h3::before { - content:"\F004"; - } - #totalVotesDisplay::before, - .share-vote h3::before { - content: "\F00E"; - } - .vote-section > h3 { - margin-top: 15px; - } - #poll-votes-values solid-display > div > solid-set-default, - [name="chosenOption"] label { - margin-top: 10px; - } - #poll-votes-values solid-display > div [name="progressBar"] { - margin-top: 5px; - } - div[name="progressBar"] > div, - div[name="progressBar"] div .progressBarValue { - margin: 0; - } - .poll-votes-form input[type="submit"] { - height: 38px; - border-radius: 19px; - box-shadow: 0 0 7px 0 rgba(0,0,0,0.15); - } - .poll-votes-form input[type="submit"]:disabled { - opacity: 0.3; - } - .unavailablePoll { - font-style: italic; - } - .progressBarValue { - height: 25px; - line-height: 25px; - padding-left: 5px; - } - .send-share, - .back-to-list { - background-color: var(--highlight-font-color); - padding: 5px 25px; - font-size: 1.4rem; - &::before { - font-family: "Material Design Icons"; - font-weight: 400; - font-size: 20px; - vertical-align: middle; - color: white; - } - } - .send-share { - a { - font-size: 1.4rem; - line-height: 23px; - margin-left: 5px; - } - &::before { - content: "\F48A"; - } - } - .vote-debate-content .border-content.padded { - padding: 0; - .debate-tab-content sib-conversation { - width: 100%; - .sib-conversation { - .conversation-item { - position: relative; - [name="conversation-subhead"] { - position: absolute; - top: 4px; - left: 200px; - font-size: 1.3rem; - color: #aaa; - } - [name="conversation-author"] { - font-size: 1.3rem; - } - } - .conversation-form { - border-top: 1px solid #ddd !important; - textarea { - background-color: transparent; - border: none; - font-size: 1.4rem; - } - } - input[type="submit"] { - text-indent: -999px; - width: 30px; - background: url(../images/send.png) no-repeat center; - background-size: auto; - background-size: contain; - border: none; - position: absolute; - right: 15px; - top: calc(50% - 11px); - } - } - } - } - .poll-footer { - padding: 20px 0 40px; - .back-to-list { - margin-left: 10%; - &::before { - content: "\F04D"; - } - } - .share-poll { - visibility: hidden; - } - } - } -} - -#polls, #default-polls, #circles-polls { - .views-container { - background-color: #f0f3f6;; - } - #circles-add-survey, #default-add-survey { - background-color: white; - padding: 50px 0; - margin: -20px auto; - h2 { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 3.2rem; - line-height: 3.8rem; - color: var(--title-font-color); - margin-bottom: 0; - } - p { - margin-top: 10px; - color: var(--color-main-text); - font-family: Facit; - font-size: 16px; - } - form { - padding: 25px 0; - width: 1000px; - max-width: 90%; - display: block; - input { - height: 3rem; - } - textarea { - height: 110px; - } - solid-form-label-text, - solid-form-textarea, - solid-form-label-textarea, - solid-form-textarea-label { - display: block; - margin: 15px 0; - padding: 0; - } - label > div, solid-form-file-image > div label, solid-form-dropdown-autocompletion[name="tags"] > label::before { - margin-bottom: 5px; - margin-top: 20px; - color: var(--form-title); - font-size: 13px; - font-weight: 600; - text-transform: uppercase; - } - solid-form-file-image > div { - margin-bottom: 15px; - button { - width: 20px; - } - input { - align-self: center; - } - label { - margin-bottom: 15px; - } - img { - margin-right: 10px; - max-width: 250px; - } - } - solid-form-label-text[name="title"] { - margin-bottom: 5px; - } - .form-tips { - font-family: Facit; - } - .h3-like { - font-family: "RefrigeratorDelxW01Bold"; - } - solid-multiple-form[name="pollOptions"] { - div { - margin-bottom: 10px; - div { - display: flex; - width: 100%; - justify-content: space-between; - poll-custom-choice { - width: calc(100% - 45px); - solid-form-label-text[name="name"] { - margin-bottom: 0; - } - } - button { - border: 1px solid var(--color-primary); - background-color: transparent; - border-radius: 15px; - font-size: 24px; - color: var(--color-primary); - padding: 0; - height: 30px; - width: 30px; - align-self: flex-end; - margin-bottom: 5px; - } - } - } - > button { - height: 28px; - line-height: 14px; - text-transform: uppercase; - font-family: Facit; - padding: 0 30px; - font-weight: bold; - font-size: 13px; - margin: 10px 0; - color: var(--color-primary); - &::before { - content: "\F419"; - font-family: Material Design Icons; - margin-right: 7px; - font-size: 2rem; - vertical-align: middle; - text-decoration: none; - } - } - } - .ss-main { - margin-top: 10px; - .ss-multi-selected .ss-values .ss-value { - border-radius: 14px; - background-color: var(--color-secondary); - padding: 5px 10px; - font-size: 11px; - } - } - input[type="submit"] { - font-size: 1.4rem; - margin: 25px 0; - float: right; - width: max-content; - padding: 5px 20px; - display: block; - text-transform: uppercase; - } - } - .poll-footer { - .back-to-list { - background-color: var(--highlight-font-color); - padding: 5px 25px; - font-size: 1.4rem; - margin-left: 10%; - border-radius: 15px; - color: white; - &::before { - font-family: "Material Design Icons"; - font-weight: 400; - font-size: 20px; - vertical-align: middle; - color: white; - content: "\F04D"; - } - } - } - } -} - -#circle-polls #circles-pollListing .all-polls solid-form solid-form-placeholder-text input { - background-color: #f0f3f6; -} - -.with-sidebar nav>solid-router>ul [name="circle-polls"] { - li::before { - content: ''; - height: 40px; - width: 40px; - mask: url('/images/vote.svg') center no-repeat; - mask-size: contain; - -webkit-mask: url('/images/vote.svg') center no-repeat; - -webkit-mask-size: contain; - background-color: var(--color-right-menu-text); - } - &[active] li::before { - background-color: var(--color-right-menu-active-text); - } -} \ No newline at end of file diff --git a/src/styles_old/layout/resources/_index.scss b/src/styles_old/layout/resources/_index.scss deleted file mode 100644 index e0c41ce..0000000 --- a/src/styles_old/layout/resources/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'resources.scss'; \ No newline at end of file diff --git a/src/styles_old/layout/resources/resources.scss b/src/styles_old/layout/resources/resources.scss deleted file mode 100644 index 652daab..0000000 --- a/src/styles_old/layout/resources/resources.scss +++ /dev/null @@ -1,156 +0,0 @@ -#resources, -#circle-resources { - width: 100%; - font-family: "Facit"; - font-weight: 400; - color: var(--content-font-color); - solid-resource { - solid-display div { - max-width: 1110px; - solid-display { - margin: 0 0 20px 40px; - } - } - .solid-resource { - font-family: "Facit"; - .page-title { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 3.2rem; - line-height: 3.8rem; - color: var(--color-primary); - } - .red-button { - background-color: var(--color-add-button-background); - } - .black-button { - background-color: var(--highlight-font-color); - margin-left: 10%; - } - .lnk-newresource { - margin-top: 30px; - margin-right: 70px; - z-index: 1; - position: relative; - } - .listresources .lnk-newkeyword { - top: 155px; - left: 220px; - .button.thin-button.mdi { - padding: 5px 20px; - } - } - .listresources { - .headline h2 { - float: left; - margin-top: 5px; - color: var(--color-primary); - text-transform: none; - font-family: "RefrigeratorDelxW01Bold"; - font-size: 2.4rem; - } - solid-form { - select { - width: 150px; - } - } - } - .listresources { - .lnk-newkeyword .button { - font-size: 1.2rem; - width: max-content; - height: max-content; - padding: 10px 30px; - color: var(--color-primary); - } - solid-display solid-display { - [name="name"] { - font-family: "RefrigeratorDelxW01Bold"; - color: var(--color-primary); - } - [name="link"] a, [name="document"] a { - width: 75%; - margin-bottom: 10px; - padding-left: 35px; - position: relative; - &::before { - position: absolute; - left: 0; - } - } - } - } - .resourcedetail { - background-color: transparent; - [name="name"] { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 3.2rem; - line-height: 3.8rem; - color: var(--color-primary); - } - [name="infotext"] { - justify-content: flex-start; - } - .sib-conversation { - background-color: white; - textarea { - background-color: transparent; - } - } - } - .newresource label div, - .newresource solid-form-file div label { - line-height: 2.2rem; - text-transform: uppercase; - color: var(--form-title); - font-size: 13px; - font-weight: 600; - font-family: Open sans; - } - .newresource select, - .newresource textarea, - .newresource input, - .newresource solid-multiple-select .ss-main .ss-multi-selected { - background-color: var(--form-inputs-background); - } - .newresource input[type="submit"] { - background-color: var(--form-submit-button); - } - .newresource input[type="file"] { - background-color: transparent; - } - .resource-tag { - font-family: Facilt; - font-weight: 600; - } - } - } - @media (max-width: 991px) { - .solid-resource { - margin-top: 65px; - } - } -} - -#resources { - background-color: #f0f3f6; -} - -#circle-resources .resources solid-form solid-form-dropdown select { - background-color: #f0f3f6; -} - -.with-sidebar nav>solid-router>ul [name="circle-resources"] { - li::before { - content: ''; - height: 40px; - width: 40px; - mask: url('/images/file.svg') center no-repeat; - mask-size: contain; - -webkit-mask: url('/images/file.svg') center no-repeat; - -webkit-mask-size: contain; - background-color: var(--color-right-menu-text); - } - &[active] li::before { - background-color: var(--color-right-menu-active-text); - } -} \ No newline at end of file diff --git a/src/styles_old/layout/user/_index.scss b/src/styles_old/layout/user/_index.scss deleted file mode 100644 index 865c281..0000000 --- a/src/styles_old/layout/user/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'messages'; diff --git a/src/styles_old/layout/user/messages.scss b/src/styles_old/layout/user/messages.scss deleted file mode 100644 index db9e071..0000000 --- a/src/styles_old/layout/user/messages.scss +++ /dev/null @@ -1,16 +0,0 @@ -.avatar-container { - display: inline-block; - margin-right: 10px; - - .avatar { - height: 40px; - width: 40px; - } -} -.avatar-text { - position: absolute; - top: 7.5rem; - @include breakpoint(lg) { - top: 2.8rem; - } -} \ No newline at end of file