hubl/src/styles/index.scss

264 lines
4.0 KiB
SCSS
Raw Normal View History

@charset "UTF-8";
@import "@startinblox/hubl-styling-framework/dist/index.css";
main {
background-color: pink;
}
2021-01-18 10:51:33 +00:00
solid-display>div {
display: contents !important;
}
2020-12-22 15:04:13 +00:00
.whitespace-normal {
white-space: normal;
}
.block {
display: block;
}
2021-01-18 10:51:33 +00:00
.line-xlarge {
line-height: 22px;
}
.send-display {
position: absolute;
right: 20px;
top: 20px;
&::before {
margin-top: 4px;
margin-right: 0.5px;
}
}
.button-modify-picture {
position: absolute;
bottom: 51px;
right: 30px;
z-index: 1;
}
.button-modify-profile {
position: absolute;
right: 40px;
top: 40px;
z-index: 1;
}
.button-modify-skill {
position: absolute;
z-index: 1;
right: 40px;
}
.counter>div:nth-child(1) {
display: block !important;
position: relative;
text-align: center;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
&::before {
border-top: 1px solid #807A7A;
bottom: 0;
content: '';
left: 0;
margin: 0 auto;
opacity: 0.2;
position: absolute;
right: 0;
top: 50%;
width: 100%;
}
&>span {
padding: 0 18.5px 0 21.5px;
background: #F6F6F6;
font-size: 16px;
position: relative;
color: var(--color-heading);
text-align: center;
}
}
.pagination nav {
display: grid;
font-size: 20px;
margin-top: 56px;
grid-template-columns: auto 7% auto;
grid-template-rows: auto;
grid-template-areas: "left middle right";
overflow: hidden;
text-align: center;
align-content: center;
width: 100%;
@media(max-width: 768px) {
grid-template-columns: auto 27% auto;
}
>[data-id="prev"] {
align-self: end;
grid-area: left;
justify-self: end;
line-height: 1;
}
>[data-id="next"] {
align-self: baseline;
grid-area: right;
justify-self: start;
transform: rotate(180deg);
}
button {
color: transparent;
&:before {
background-color: var(--color-secondary);
content: '';
display: inline-block;
height: 20px;
mask: url('/lib/solid-directory/dist/assets/arrow-left-circle.svg') 1% 1% / 1px 1px no-repeat;
mask-size: cover;
-webkit-mask: url('/lib/solid-directory/dist/assets/arrow-left-circle.svg') 1% 1% / 1px 1px no-repeat;
-webkit-mask-size: cover;
width: 20px;
}
&:disabled::before {
background-color: #5D7393;
opacity: 50%;
}
}
span {
color: #5D7393;
font-size: 20px;
font-weight: 600;
line-height: 27px;
}
}
/* Member-profile */
#member-profile .send-message {
right: 20px;
position: absolute;
bottom: 0;
}
#member-profile .member-bio,
#profile .member-bio {
max-width: 50%;
}
.icon-location-pin::before,
.icon-bell::before {
margin-left: -3px;
}
2021-01-18 10:51:33 +00:00
/* Job-offers */
.job-edit {
position: absolute;
right: 20px;
top: 20px;
2021-01-08 14:39:37 +00:00
}
2021-01-18 10:51:33 +00:00
.padding-very-xxlarge {
padding-left: 135px;
padding-right: 135px;
}
2021-01-18 15:21:59 +00:00
$small: "max-width: 768px";
2021-01-08 14:39:37 +00:00
2021-01-15 09:37:22 +00:00
.segment {
@media($small) {
&.sm {
&-hidden {
display: none;
}
2021-01-08 14:39:37 +00:00
2021-01-15 09:37:22 +00:00
&-quarter {
width: 25%;
}
2021-01-15 09:37:22 +00:00
&-third {
width: 33.333%;
}
2021-01-15 09:37:22 +00:00
&-half {
width: 50%;
}
&-two-third {
width: 66.666%;
}
&-three-quarter {
width: 75%;
}
&-full {
width: 100%;
}
&-auto {
width: auto;
}
}
&.sm-children {
&-hidden>div>solid-display {
display: none;
}
&-quarter>div>solid-display {
width: 25%;
}
&-third>div>solid-display {
width: 33.333%;
}
&-half>div>solid-display {
width: 50%;
}
&-two-third>div>solid-display {
width: 66.666%;
}
&-three-quarter>div>solid-display {
width: 75%;
}
&-full>div>solid-display {
width: 100%;
}
&-auto>div>solid-display {
width: auto;
}
}
}
2021-01-08 14:39:37 +00:00
}
2021-01-15 09:37:22 +00:00
@import 'header/_index';
@import 'left-nav/_index';
2021-01-10 16:53:56 +00:00
@import 'content/_index';
@import 'about/_index';
2021-01-18 10:51:33 +00:00
@import 'members/_index';
@import 'profile/_index';
@import 'job-offers/_index';
2021-01-12 17:10:31 +00:00
@import 'chat/_index';