feature: css - common styles + test
This commit is contained in:
gaelle morin
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,154 +0,0 @@
|
||||
// Color Variables
|
||||
:root {
|
||||
--color-primary: #FF0055;
|
||||
--color-secondary: #0068FF;
|
||||
--color-third: #00E3B4;
|
||||
--color-grey: #636363;
|
||||
--color-heading: #2E3F58;
|
||||
|
||||
--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%);
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -1,319 +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>form>input[type=submit] {
|
||||
@extend .button,
|
||||
.text-bolder,
|
||||
.text-uppercase,
|
||||
.reversed,
|
||||
.button-secondary,
|
||||
.bordered;
|
||||
height: auto;
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
left: 10%;
|
||||
white-space: normal;
|
||||
width: 80%;
|
||||
z-index: 1;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
/*height: 3rem;
|
||||
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,
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.button-complementary,
|
||||
.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,
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.button-primary,
|
||||
.bordered;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
margin: auto 2.2rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*solid-form-multipleselect {
|
||||
|
||||
&.select-skills .ss-values .ss-disabled::before {
|
||||
content: "Select skills";
|
||||
}
|
||||
|
||||
solid-form-dropdown-autocompletion-label > label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ss-main {
|
||||
font-weight: normal;
|
||||
margin-bottom: 7.8rem;
|
||||
margin-top: 1.6rem;
|
||||
max-width: 50vw;
|
||||
text-transform: none;
|
||||
|
||||
.ss-multi-selected {
|
||||
align-items: center;
|
||||
background-color: var(--color-input-background);
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-height: 4.2rem;
|
||||
padding-left: 1.2rem;
|
||||
|
||||
.ss-add {
|
||||
font-size: 1.8rem;
|
||||
margin: 0 18px 0 0;
|
||||
|
||||
span.ss-plus {
|
||||
background: var(--color-input-icon);
|
||||
|
||||
&::after {
|
||||
background: var(--color-input-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ss-values {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
width: 100%;
|
||||
|
||||
.ss-disabled {
|
||||
color: transparent;
|
||||
font-size: 1.4rem;
|
||||
left: calc(1.2rem - 5px);
|
||||
position: absolute;
|
||||
top: calc(-6rem + 7px);
|
||||
|
||||
&::before {
|
||||
color: var(--color-grey-5);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.ss-value {
|
||||
@extend .skill;
|
||||
display: flex;
|
||||
|
||||
.ss-value-delete {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ss-list {
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,148 +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 */
|
||||
|
||||
.table {
|
||||
|
||||
.user-thumb.is-spaced,
|
||||
[name='user-thumb'] {
|
||||
padding: 0.8rem 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table solid-ac-checker {
|
||||
/*text-align: center;*/
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@import 'chat';
|
||||
@import 'comment';
|
||||
@import 'filters';
|
||||
@import 'sidebar';
|
||||
@import 'skills';
|
||||
@import 'tags';
|
||||
@import 'project-edit-picture';
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
@ -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;
|
||||
}
|
||||
}*/
|
||||
@ -1,3 +0,0 @@
|
||||
@import 'custom-icons';
|
||||
@import 'icons';
|
||||
@import 'material-design-icons';
|
||||
@ -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};
|
||||
}
|
||||
}
|
||||
@ -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};
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
0
src/styles/hubl-app/_index.scss
Normal file
0
src/styles/hubl-app/_index.scss
Normal file
15
src/styles/hubl-framework/README.md
Normal file
15
src/styles/hubl-framework/README.md
Normal file
@ -0,0 +1,15 @@
|
||||
# GAELLE VA REDIGER LA DOCUMENTATION DU CSS ICI !
|
||||
|
||||
Les avatars
|
||||
Utiliser la class `.avatar` sur un élément HTML englobant une image.
|
||||
L'élément sera arrondi avec une hauteur et une largeur par défaut de 50px.
|
||||
Les avatars peuvent avoir différentes tailles.
|
||||
|
||||
Les badges
|
||||
Utiliser la class `.badge` sur un élément HTML.
|
||||
L'élément sera arrondi. Par défaut, le texte sera bleu foncé et sa taille fera 11px, l'intérieur du cercle sera vert avec une taille de 18px;
|
||||
Le texte et le cercle peuvent avoir différente couleurs.
|
||||
|
||||
Les boutons
|
||||
Utiliser la class `.button` sur un élément HTML.
|
||||
Ils peuvent être rectangulaires avec les bords arrondis ou ronds, avec différentes couleurs.
|
||||
18
src/styles/hubl-framework/_index.scss
Normal file
18
src/styles/hubl-framework/_index.scss
Normal file
@ -0,0 +1,18 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../../node_modules/include-media/dist/include-media';
|
||||
@import '../../../node_modules/normalize.css/normalize';
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@import 'commons/_index';
|
||||
@import 'avatars/_index';
|
||||
@import 'badges/_index';
|
||||
@import 'buttons/_index';
|
||||
@import 'links/_index';
|
||||
@import 'forms/_index';
|
||||
@import 'icons/_index';
|
||||
@import 'segments/_index';
|
||||
@import 'tables/_index';
|
||||
@import 'tags/_index';
|
||||
46
src/styles/hubl-framework/avatars/_index.scss
Normal file
46
src/styles/hubl-framework/avatars/_index.scss
Normal file
@ -0,0 +1,46 @@
|
||||
.avatar {
|
||||
background: #E4E8ED;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
>img,
|
||||
object {
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
>img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
>object {
|
||||
max-height: 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
&.xsmall {
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
}
|
||||
&.small {
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
&.large {
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
}
|
||||
&.xlarge {
|
||||
height: 241px;
|
||||
width: 241px;
|
||||
}
|
||||
}
|
||||
50
src/styles/hubl-framework/badges/_index.scss
Normal file
50
src/styles/hubl-framework/badges/_index.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.badge {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
color: var(--color-heading);
|
||||
background: var(--color-third);
|
||||
|
||||
&.color-primary {
|
||||
background: white;
|
||||
border: 1px solid var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.color-secondary {
|
||||
background: white;
|
||||
border: 1px solid var(--color-secondary);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
&.color-third {
|
||||
background: white;
|
||||
border: 1px solid var(--color-third);
|
||||
color: var(--color-third);
|
||||
}
|
||||
|
||||
&.reversed {
|
||||
&.color-primary {
|
||||
background: var(--color-primary);
|
||||
border: 1px solid var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.color-secondary {
|
||||
background: var(--color-secondary);
|
||||
border: 1px solid var(--color-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.color-third {
|
||||
background: var(--color-third);
|
||||
border: 1px solid var(--color-third);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
188
src/styles/hubl-framework/buttons/_index.scss
Normal file
188
src/styles/hubl-framework/buttons/_index.scss
Normal file
@ -0,0 +1,188 @@
|
||||
button,
|
||||
.button,
|
||||
input[type='submit'],
|
||||
a {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
&.button {
|
||||
padding: 8px 20px;
|
||||
border-radius: 16.5px;
|
||||
height: 33px;
|
||||
|
||||
&.rounded {
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
padding: 2px;
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&.icon::before {
|
||||
font-size: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&.color-primary {
|
||||
background-color: white;
|
||||
*,
|
||||
& {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.color-secondary {
|
||||
background-color: white;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
color: white;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.color-third {
|
||||
color: var(--color-third);
|
||||
background-color:white;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-third);
|
||||
}
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-third);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-third);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.color-disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: white;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: #636363;
|
||||
}
|
||||
&.bordered {
|
||||
border: 1px solid #636363;
|
||||
}
|
||||
&:hover {
|
||||
background-color: white;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: #636363;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.reversed {
|
||||
&.color-primary {
|
||||
background-color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: white;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.color-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: white;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.color-third {
|
||||
background-color: var(--color-third);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: white;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-third);
|
||||
}
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-third);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.color-disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #636363;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
}
|
||||
&.bordered {
|
||||
border: 1px solid white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #636363;
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,24 @@
|
||||
.border {
|
||||
|
||||
|
||||
&.all-sides {
|
||||
border: 1px solid;
|
||||
}
|
||||
&.top {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
&.right {
|
||||
border-right: 1px solid;
|
||||
}
|
||||
&.bottom {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
&.left {
|
||||
border-left: 1px solid;
|
||||
}
|
||||
&-thick {
|
||||
border-width: thick;
|
||||
}
|
||||
&-color {
|
||||
&.color {
|
||||
&-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
@ -16,69 +31,8 @@
|
||||
&-heading {
|
||||
border-color: var(--color-heading);
|
||||
}
|
||||
}
|
||||
&-top {
|
||||
border-top: 1px solid;
|
||||
|
||||
&-color-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
&-color-secondary {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
&-color-third {
|
||||
border-color: var(--color-third);
|
||||
}
|
||||
&-color-heading {
|
||||
border-color: var(--color-heading);
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
border-right: 1px solid;
|
||||
|
||||
&-color-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
&-color-secondary {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
&-color-third {
|
||||
border-color: var(--color-third);
|
||||
}
|
||||
&-color-heading {
|
||||
border-color: var(--color-heading);
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
border-bottom: 1px solid;
|
||||
|
||||
&-color-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
&-color-secondary {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
&-color-third {
|
||||
border-color: var(--color-third);
|
||||
}
|
||||
&-color-heading {
|
||||
border-color: var(--color-heading);
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
border-left: 1px solid;
|
||||
|
||||
&-color-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
&-color-secondary {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
&-color-third {
|
||||
border-color: var(--color-third);
|
||||
}
|
||||
&-color-heading {
|
||||
border-color: var(--color-heading);
|
||||
&-grey {
|
||||
border-color: #D6CECE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,14 +5,18 @@
|
||||
--color-heading: #2E3F58;
|
||||
}
|
||||
|
||||
.highlight::selection {
|
||||
background-color: var(--color-third);
|
||||
}
|
||||
|
||||
.bg-color-primary {
|
||||
background-color: var(--color-primary);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
&.reverse {
|
||||
background-color: var(--color-secondary);
|
||||
@ -22,11 +26,11 @@
|
||||
.bg-color-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
&.reverse {
|
||||
background-color: var(--color-primary);
|
||||
@ -36,11 +40,11 @@
|
||||
.bg-color-third {
|
||||
background-color: var(--color-third);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
background-color: var(--color-heading);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
&.reverse {
|
||||
background-color: var(--color-heading);
|
||||
@ -50,26 +54,38 @@
|
||||
.bg-color-heading {
|
||||
background-color: var(--color-heading);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
background-color: var(--color-third);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
&.reverse {
|
||||
background-color: var(--color-third);
|
||||
}
|
||||
}
|
||||
|
||||
.bg-color-grey {
|
||||
background-color: #F1F1F1;
|
||||
|
||||
&.active:active {
|
||||
background-color: var(--color-heading);
|
||||
}
|
||||
&.hover:hover:not(:active) {
|
||||
background-color: #E4E4E4;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-color-white {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.text-color-primary {
|
||||
color: var(--color-primary);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
}
|
||||
&.reverse {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
@ -78,14 +94,9 @@
|
||||
.text-color-secondary {
|
||||
color: var(--color-secondary);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@ -94,12 +105,9 @@
|
||||
.text-color-third {
|
||||
color: var(--color-third);
|
||||
|
||||
&.active[active] {
|
||||
&.active:active {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
}
|
||||
&.reverse {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
@ -108,13 +116,18 @@
|
||||
.text-color-heading {
|
||||
color: var(--color-heading);
|
||||
|
||||
&.active[active] {
|
||||
color: var(--color-third);
|
||||
}
|
||||
&.hover:hover {
|
||||
opacity: 0.3;
|
||||
&.active:active {
|
||||
color: white;
|
||||
}
|
||||
&.reverse {
|
||||
color: var(--color-third);
|
||||
}
|
||||
}
|
||||
|
||||
.text-color-white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-hover:hover {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
&-small {
|
||||
font-size: 13px;
|
||||
}
|
||||
&-normal {
|
||||
&-medium {
|
||||
font-size: 14px;
|
||||
}
|
||||
&-large {
|
||||
|
||||
10
src/styles/hubl-framework/forms/_index.scss
Normal file
10
src/styles/hubl-framework/forms/_index.scss
Normal file
@ -0,0 +1,10 @@
|
||||
solid-form {
|
||||
|
||||
[data-id="error"] {
|
||||
display: none !important; // Hide the default core message, english only with a weird message
|
||||
}
|
||||
|
||||
@import 'inputs';
|
||||
@import 'buttons';
|
||||
@import 'widgets';
|
||||
}
|
||||
27
src/styles/hubl-framework/forms/buttons.scss
Normal file
27
src/styles/hubl-framework/forms/buttons.scss
Normal file
@ -0,0 +1,27 @@
|
||||
.button-register>form>input[type='submit'] {
|
||||
/*@extend .button,
|
||||
.text-bolder,
|
||||
.text-uppercase,
|
||||
.reversed,
|
||||
.button-secondary,
|
||||
.bordered;*/
|
||||
height: auto;
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
left: 10%;
|
||||
white-space: normal;
|
||||
width: 80%;
|
||||
z-index: 1;
|
||||
|
||||
/*@include breakpoint(lg) {
|
||||
height: 3rem;
|
||||
position: unset;
|
||||
bottom: unset;
|
||||
white-space: unset;
|
||||
left: unset;
|
||||
width: unset;
|
||||
z-index: unset;
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}*/
|
||||
}
|
||||
34
src/styles/hubl-framework/forms/inputs.scss
Normal file
34
src/styles/hubl-framework/forms/inputs.scss
Normal file
@ -0,0 +1,34 @@
|
||||
input[type='text'],
|
||||
textarea {
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #636363;
|
||||
padding: 12px 14px;
|
||||
margin-top: 6px;
|
||||
line-height: 1;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: var(--color-secondary);
|
||||
|
||||
&:required:invalid {
|
||||
border-color: 1px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.input-bg-grey input {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.input-bg-white input {
|
||||
background: white;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 110px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input.icon {
|
||||
background-position: right 12px top 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
82
src/styles/hubl-framework/forms/widgets.scss
Normal file
82
src/styles/hubl-framework/forms/widgets.scss
Normal file
@ -0,0 +1,82 @@
|
||||
solid-form-text-label>input[type='text'] + label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
solid-form-dropdown-autocompletion,
|
||||
solid-form-dropdown-autocompletion-label,
|
||||
solid-form-multipleselect-autocompletion-label,
|
||||
hubl-status {
|
||||
|
||||
.ss-main {
|
||||
font-weight: normal;
|
||||
margin-top: 6px;
|
||||
text-transform: none;
|
||||
|
||||
.ss-single-selected {
|
||||
background-color: #F6F6F6;
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
color: var(--color-grey);
|
||||
font-weight: normal;
|
||||
min-height: 46px;
|
||||
padding: 12px 14px;
|
||||
|
||||
.ss-disabled {
|
||||
color: #7A7F85;
|
||||
}
|
||||
|
||||
.ss-arrow {
|
||||
font-size: 15px;
|
||||
margin: 0 12px 0 0;
|
||||
|
||||
span {
|
||||
border: solid var(--color-grey);
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ss-list {
|
||||
color: var(--color-grey);
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
solid-form-date {
|
||||
input[type="date"] {
|
||||
background-image: url("/images/calendar.svg");
|
||||
background-position: right 12px top 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.4rem;
|
||||
color: var(--color-input-icon);
|
||||
cursor: default;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 1.6rem;
|
||||
max-width: 50vw;
|
||||
padding-right: 3rem;
|
||||
/* Needed to replace the close icon in FF when you are selecting a date */
|
||||
padding-top: 1.2rem;
|
||||
/* Needed to center the close icon in FF when you are selecting a date */
|
||||
position: relative;
|
||||
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-clear-button {
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
/* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
src/styles/hubl-framework/icons/_index.scss
Normal file
4
src/styles/hubl-framework/icons/_index.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import 'styles';
|
||||
@import 'sizes';
|
||||
@import 'positions';
|
||||
@import 'colors';
|
||||
42
src/styles/hubl-framework/icons/colors.scss
Normal file
42
src/styles/hubl-framework/icons/colors.scss
Normal file
@ -0,0 +1,42 @@
|
||||
.icon {
|
||||
|
||||
&-primary{
|
||||
|
||||
&::before {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&.hover:hover::before {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
&-secondary{
|
||||
|
||||
&::before {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
&.hover:hover::before {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
&-third{
|
||||
|
||||
&::before {
|
||||
color: var(--color-third);
|
||||
}
|
||||
&.hover:hover::before {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
}
|
||||
&-heading{
|
||||
|
||||
&::before {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
&.hover:hover::before {
|
||||
color: var(--color-third);
|
||||
}
|
||||
}
|
||||
&-grey::before {
|
||||
color: #636363;
|
||||
}
|
||||
}
|
||||
14
src/styles/hubl-framework/icons/positions.scss
Normal file
14
src/styles/hubl-framework/icons/positions.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.icon {
|
||||
|
||||
&.centered {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&.margin-right-small::before {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
&.margin-right-xxsmall::before {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
18
src/styles/hubl-framework/icons/sizes.scss
Normal file
18
src/styles/hubl-framework/icons/sizes.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.icon {
|
||||
|
||||
&::before {
|
||||
font-size: 18px;
|
||||
}
|
||||
&-xsmall::before {
|
||||
font-size: 12px;
|
||||
}
|
||||
&-small::before {
|
||||
font-size: 15px;
|
||||
}
|
||||
&-large::before {
|
||||
font-size: 20px;
|
||||
}
|
||||
&-xlarge::before {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
37
src/styles/hubl-framework/icons/styles.scss
Normal file
37
src/styles/hubl-framework/icons/styles.scss
Normal file
@ -0,0 +1,37 @@
|
||||
.icon {
|
||||
|
||||
&.icon-magnify {
|
||||
background-image: url("/lib/solid-directory/dist/assets/magnify.svg");
|
||||
}
|
||||
&.icon-arrow-down {
|
||||
background-image: url();
|
||||
}
|
||||
&.rounded {
|
||||
border: 2px solid;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&-small {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
&-large {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
&-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
&-secondary {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
&-third {
|
||||
border-color: var(--color-third);
|
||||
}
|
||||
&-heading {
|
||||
border-color: var(--color-heading);
|
||||
}
|
||||
}
|
||||
}
|
||||
19
src/styles/hubl-framework/links/_index.scss
Normal file
19
src/styles/hubl-framework/links/_index.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.backlink {
|
||||
color: #636363;
|
||||
text-decoration: underline;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
3
src/styles/hubl-framework/segments/_index.scss
Normal file
3
src/styles/hubl-framework/segments/_index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'positions';
|
||||
@import 'spaces';
|
||||
@import 'sizes';
|
||||
13
src/styles/hubl-framework/segments/positions.scss
Normal file
13
src/styles/hubl-framework/segments/positions.scss
Normal file
@ -0,0 +1,13 @@
|
||||
.segment {
|
||||
position: relative;
|
||||
|
||||
.align-middle {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
&.float-left {
|
||||
float: left;
|
||||
}
|
||||
&.float-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
29
src/styles/hubl-framework/segments/sizes.scss
Normal file
29
src/styles/hubl-framework/segments/sizes.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.segment {
|
||||
|
||||
&.lg {
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
&-quarter {
|
||||
width: 25%;
|
||||
}
|
||||
&-third {
|
||||
width: 33.333%;
|
||||
}
|
||||
&-half {
|
||||
width: 50%;
|
||||
}
|
||||
&-two-third {
|
||||
width: 66.666%;
|
||||
}
|
||||
&-three-quarter {
|
||||
width: 75%;
|
||||
}
|
||||
&-full {
|
||||
width: 100%;
|
||||
}
|
||||
&-auto {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
244
src/styles/hubl-framework/segments/spaces.scss
Normal file
244
src/styles/hubl-framework/segments/spaces.scss
Normal file
@ -0,0 +1,244 @@
|
||||
.segment {
|
||||
box-sizing: border-box;
|
||||
|
||||
&.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.margin {
|
||||
&-xxsmall {
|
||||
margin: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
margin: 10px;
|
||||
}
|
||||
&-small {
|
||||
margin: 15px;
|
||||
}
|
||||
&-medium {
|
||||
margin: 20px;
|
||||
}
|
||||
&-large {
|
||||
margin: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
margin: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
margin: 35px;
|
||||
}
|
||||
&-top {
|
||||
&-xxsmall {
|
||||
margin-top: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
margin-top: 10px;
|
||||
}
|
||||
&-small {
|
||||
margin-top: 15px;
|
||||
}
|
||||
&-medium {
|
||||
margin-top: 20px;
|
||||
}
|
||||
&-large {
|
||||
margin-top: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
margin-top: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
&-xxsmall {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
margin-right: 10px;
|
||||
}
|
||||
&-small {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&-medium {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&-large {
|
||||
margin-right: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
margin-right: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
&-xxsmall {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&-small {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
&-medium {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&-large {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
&-xxsmall {
|
||||
margin-left: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&-small {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&-medium {
|
||||
margin-left: 20px;
|
||||
}
|
||||
&-large {
|
||||
margin-left: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
margin-left: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
margin-left: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.padding {
|
||||
&-xxsmall {
|
||||
padding: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
padding: 10px;
|
||||
}
|
||||
&-small {
|
||||
padding: 15px;
|
||||
}
|
||||
&-medium {
|
||||
padding: 20px;
|
||||
}
|
||||
&-large {
|
||||
padding: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
padding: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
padding: 35px;
|
||||
}
|
||||
&-top {
|
||||
&-xxsmall {
|
||||
padding-top: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
padding-top: 10px;
|
||||
}
|
||||
&-small {
|
||||
padding-top: 15px;
|
||||
}
|
||||
&-medium {
|
||||
padding-top: 20px;
|
||||
}
|
||||
&-large {
|
||||
padding-top: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
padding-top: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
padding-top: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
&-xxsmall {
|
||||
padding-right: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
padding-right: 10px;
|
||||
}
|
||||
&-small {
|
||||
padding-right: 15px;
|
||||
}
|
||||
&-medium {
|
||||
padding-right: 20px;
|
||||
}
|
||||
&-large {
|
||||
padding-right: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
padding-right: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
padding-right: 35px;
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
&-xxsmall {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
&-small {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
&-medium {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
&-large {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
&-xxsmall {
|
||||
padding-left: 5px;
|
||||
}
|
||||
&-xsmall {
|
||||
padding-left: 10px;
|
||||
}
|
||||
&-small {
|
||||
padding-left: 15px;
|
||||
}
|
||||
&-medium {
|
||||
padding-left: 20px;
|
||||
}
|
||||
&-large {
|
||||
padding-left: 25px;
|
||||
}
|
||||
&-xlarge {
|
||||
padding-left: 30px;
|
||||
}
|
||||
&-xxlarge {
|
||||
padding-left: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
src/styles/hubl-framework/tables/_index.scss
Normal file
5
src/styles/hubl-framework/tables/_index.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import 'tables';
|
||||
@import 'cells';
|
||||
@import 'headers';
|
||||
@import 'bodies';
|
||||
@import 'sizes';
|
||||
22
src/styles/hubl-framework/tables/bodies.scss
Normal file
22
src/styles/hubl-framework/tables/bodies.scss
Normal file
@ -0,0 +1,22 @@
|
||||
.table-body {
|
||||
display: table-row-group;
|
||||
border-left: 1px solid #C9C8C8;
|
||||
|
||||
&>div {
|
||||
display: contents;
|
||||
|
||||
&>solid-display {
|
||||
display: table-row;
|
||||
|
||||
&>div {
|
||||
display: contents;
|
||||
|
||||
&>.table-cell {
|
||||
border-bottom: 1px solid #C9C8C8;
|
||||
border-right: 1px solid #C9C8C8;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
src/styles/hubl-framework/tables/cells.scss
Normal file
6
src/styles/hubl-framework/tables/cells.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.table-cell {
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
20
src/styles/hubl-framework/tables/headers.scss
Normal file
20
src/styles/hubl-framework/tables/headers.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.table-header {
|
||||
display: table-header-group;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-top: 1px solid #C9C8C8;
|
||||
border-bottom: 1px solid #C9C8C8;
|
||||
border-left: 1px solid #C9C8C8;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.25px;
|
||||
|
||||
&>.table-cell {
|
||||
height: 50px;
|
||||
border-right: 1px solid white;
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid #C9C8C8;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
src/styles/hubl-framework/tables/sizes.scss
Normal file
22
src/styles/hubl-framework/tables/sizes.scss
Normal file
@ -0,0 +1,22 @@
|
||||
.table-body,
|
||||
.table-header {
|
||||
|
||||
.w280 {
|
||||
width: 280px;
|
||||
}
|
||||
.w450 {
|
||||
width: 450px;
|
||||
}
|
||||
.w370 {
|
||||
width: 370px;
|
||||
}
|
||||
.w230 {
|
||||
width: 230px;
|
||||
}
|
||||
.w70 {
|
||||
width: 70px;
|
||||
}
|
||||
.w162 {
|
||||
width: 162px;
|
||||
}
|
||||
}
|
||||
14
src/styles/hubl-framework/tables/tables.scss
Normal file
14
src/styles/hubl-framework/tables/tables.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
overflow: auto;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
83
src/styles/hubl-framework/tags/_index.scss
Normal file
83
src/styles/hubl-framework/tags/_index.scss
Normal file
@ -0,0 +1,83 @@
|
||||
.tag {
|
||||
cursor: pointer;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.24px;
|
||||
line-height: 17px;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 3px;
|
||||
padding: 4px 11px;
|
||||
|
||||
&.beta {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.color-primary {
|
||||
background: white;
|
||||
border: 1px solid var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
|
||||
&.hover:hover {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.color-secondary {
|
||||
background: white;
|
||||
border: 1px solid var(--color-secondary);
|
||||
color: var(--color-secondary);
|
||||
|
||||
&.hover:hover {
|
||||
background: var(--color-secondary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.color-third {
|
||||
background: white;
|
||||
border: 1px solid var(--color-third);
|
||||
color: var(--color-third);
|
||||
|
||||
&.hover:hover {
|
||||
background: var(--color-third);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.reversed {
|
||||
&.color-primary {
|
||||
background: var(--color-primary);
|
||||
border: 1px solid var(--color-primary);
|
||||
color: white;
|
||||
|
||||
&.hover:hover {
|
||||
background: white;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.color-secondary {
|
||||
background: var(--color-secondary);
|
||||
border: 1px solid var(--color-secondary);
|
||||
color: white;
|
||||
|
||||
&.hover:hover {
|
||||
background: white;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
&.color-third {
|
||||
background: var(--color-third);
|
||||
border: 1px solid var(--color-third);
|
||||
color: white;
|
||||
|
||||
&.hover:hover {
|
||||
background: white;
|
||||
color: var(--color-third);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,23 +1,2 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../node_modules/include-media/dist/include-media';
|
||||
@import '../../node_modules/normalize.css/normalize';
|
||||
|
||||
@import 'abstracts/fonts';
|
||||
@import 'abstracts/variables';
|
||||
@import 'abstracts/mixins';
|
||||
@import 'components/loader';
|
||||
@import 'components/icons/index';
|
||||
@import 'base/main';
|
||||
@import 'base/about';
|
||||
|
||||
#viewport {
|
||||
@import 'components/index';
|
||||
@import 'layout/members/index';
|
||||
@import 'layout/job-offers/index';
|
||||
@import 'layout/user/index';
|
||||
@import 'layout/events/index';
|
||||
@import 'layout/resources/index';
|
||||
@import 'layout/dashboard/index';
|
||||
@import 'layout/polls/index';
|
||||
}
|
||||
@import 'hubl-framework/_index';
|
||||
@import 'hubl-app/_index';
|
||||
|
||||
@ -1 +0,0 @@
|
||||
@import 'dashboard.scss';
|
||||
@ -1,7 +0,0 @@
|
||||
.dashboard>div {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
solid-dashboard .icon::before {
|
||||
width: 41px;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
@import 'events.scss';
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
@import 'job-offers.scss';
|
||||
@ -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;
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
@import 'members';
|
||||
@import 'member-profile';
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
@ -1 +0,0 @@
|
||||
@import 'polls.scss';
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
@import 'resources.scss';
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
@import 'messages';
|
||||
@ -1,13 +0,0 @@
|
||||
.avatar-container {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
||||
.avatar {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.avatar-text {
|
||||
position: absolute;
|
||||
top: 2.8rem;
|
||||
}
|
||||
Reference in New Issue
Block a user