Initial commit
This commit is contained in:
Luka Romih
@@ -0,0 +1,8 @@
|
||||
@use "../components/toolbar";
|
||||
@use "../components/header-section";
|
||||
@use "../components/admin-side-menu";
|
||||
@use "../components/admin-main";
|
||||
@use "../components/extraction-main";
|
||||
@use "../components/dictionaries-main";
|
||||
@use "../text/text-styles.scss";
|
||||
@use "../components/footer";
|
||||
@@ -0,0 +1,6 @@
|
||||
@use "../components/toolbar";
|
||||
@use "../components/header-section";
|
||||
@use "../components/admin-side-menu";
|
||||
@use "../components/comments-main";
|
||||
@use "../components/footer";
|
||||
@use "../text/text-styles";
|
||||
@@ -0,0 +1,519 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
* {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// input:focus-visible,
|
||||
// button:focus-visible,
|
||||
// button:focus {
|
||||
// outline: none !important;
|
||||
// box-shadow: none !important;
|
||||
// }
|
||||
|
||||
.outline {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.index-font-size {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: v.$error-red;
|
||||
}
|
||||
|
||||
.text-header-title-gray {
|
||||
color: v.$header-title-gray;
|
||||
}
|
||||
|
||||
.text-header-description-gray {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
.text-gray-1 {
|
||||
color: v.$gray-1;
|
||||
}
|
||||
|
||||
.text-gray-2 {
|
||||
color: v.$gray-2;
|
||||
}
|
||||
|
||||
.text-blue-info-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.long-text-strip {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.px-10-large {
|
||||
padding: 0 10rem;
|
||||
}
|
||||
|
||||
.px-20-large {
|
||||
@media (min-width: 1200px) {
|
||||
padding: 0 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.fs-075rem {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.toperr {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.h-41 {
|
||||
display: block;
|
||||
height: 41px !important;
|
||||
}
|
||||
|
||||
.navigation-text-color {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.height50 {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
.pl-12px {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.i1rx1r {
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
}
|
||||
|
||||
.i1p5rx1p5r {
|
||||
height: 1.5rem !important;
|
||||
width: 1.5rem !important;
|
||||
}
|
||||
|
||||
.i16x16 {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
.i18x18 {
|
||||
height: 18px !important;
|
||||
width: 18px !important;
|
||||
}
|
||||
|
||||
.i24x24 {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
}
|
||||
|
||||
.i32x32 {
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
}
|
||||
|
||||
.height60 {
|
||||
height: 60px !important;
|
||||
}
|
||||
|
||||
.width350 {
|
||||
width: 350px !important;
|
||||
}
|
||||
|
||||
.w24rem {
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
.w30rem {
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
.search-bar-navigation-container {
|
||||
width: 30rem !important;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
width: 40rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.strength500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: list-item !important;
|
||||
}
|
||||
|
||||
.nav-bg {
|
||||
background-color: v.$nav-white !important;
|
||||
}
|
||||
|
||||
.d-none-weak {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-2 {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.z-20 {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.fit-content {
|
||||
width: fit-content !important;
|
||||
}
|
||||
|
||||
.text-1p5rem {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.fw-300 {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.fw-400 {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.fw-500 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.text-break {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.placeholder-gray {
|
||||
&::placeholder {
|
||||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: v.$gray-1;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: v.$gray-1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: v.$gray-1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::-ms-input-placeholder {
|
||||
/* Microsoft Edge */
|
||||
color: v.$gray-1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.children-pspe-4 {
|
||||
> * {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
> li:hover {
|
||||
color: #1e2125;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
}
|
||||
|
||||
.children-pt-pb-1 {
|
||||
> * {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ul-children-hover {
|
||||
> li:hover {
|
||||
color: #1e2125;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
}
|
||||
|
||||
.noHoverBGEffect {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.jumped-common {
|
||||
-webkit-transition: 0.4s ease-in-out;
|
||||
-moz-transition: 0.4s ease-in-out;
|
||||
-o-transition: 0.4s ease-in-out;
|
||||
transition: 0.4s ease-in-out;
|
||||
|
||||
-webkit-transform: translateY(-0.4rem) scale(0.6);
|
||||
transform: translateY(-0.4rem) scale(0.6); // 0.75 is on google
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.text-header-description-gray {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
*/
|
||||
|
||||
.border1px-gray-2 {
|
||||
border: 1px solid v.$gray-2;
|
||||
}
|
||||
|
||||
.ps-2rem {
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
|
||||
.noScrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resizeNone {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.min-height-0 {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.no-flex {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
.d-flex-and-align-end {
|
||||
display: flex !important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.green-dot {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 25px;
|
||||
bottom: 15px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: v.$logged-in-green;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.no-bg {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.pager {
|
||||
white-space: nowrap;
|
||||
|
||||
* {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 25%;
|
||||
}
|
||||
|
||||
.pager-input {
|
||||
width: 54px;
|
||||
height: 38px;
|
||||
border: 2px solid v.$gray-2;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.long-hr-gray-3 {
|
||||
background-color: v.$gray-3;
|
||||
height: 2px !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.short-hr-gray-3 {
|
||||
background-color: v.$gray-3;
|
||||
height: 1px !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.disabled-opacity {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
///// RESPONSIVE
|
||||
|
||||
.w-90 {
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.long-text-wrap-r {
|
||||
display: block;
|
||||
// width: 8ch;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
word-wrap: normal;
|
||||
|
||||
/*
|
||||
@media (min-width: 420px) {
|
||||
width: 12ch;
|
||||
}
|
||||
@media (min-width: 750px) {
|
||||
width: 25ch;
|
||||
}
|
||||
@media (min-width: 990px) {
|
||||
width: 12ch;
|
||||
}
|
||||
@media (min-width: 1750px) {
|
||||
width: 100%;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.margin-md-minus-1-rem {
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.long-text-strip-r {
|
||||
display: block;
|
||||
// width: 8ch;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/*
|
||||
@media (min-width: 420px) {
|
||||
width: 12ch;
|
||||
}
|
||||
@media (min-width: 750px) {
|
||||
width: 25ch;
|
||||
}
|
||||
@media (min-width: 990px) {
|
||||
width: 12ch;
|
||||
}
|
||||
@media (min-width: 1750px) {
|
||||
width: 100%;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.d-none-on-big {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.termin-offset-up-wide {
|
||||
top: 85px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-2rem {
|
||||
margin-left: 2rem !important;
|
||||
margin-right: 2rem !important;
|
||||
}
|
||||
|
||||
.mx-max-md-2rem {
|
||||
@media (max-width: v.$layout-breakpoint-medium) {
|
||||
margin-left: 2rem !important;
|
||||
margin-right: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-max-lg-2rem {
|
||||
@media (max-width: v.$layout-breakpoint-large) {
|
||||
margin-left: 2rem !important;
|
||||
margin-right: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-max-xl-2rem {
|
||||
@media (max-width: v.$layout-breakpoint-x-large) {
|
||||
margin-left: 2rem !important;
|
||||
margin-right: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bg {
|
||||
background-color: v.$header-description-gray !important;
|
||||
}
|
||||
|
||||
@mixin common-footer {
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.wide-footer {
|
||||
display: flex;
|
||||
@include common-footer;
|
||||
.txt {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
$padding-wide: 3rem;
|
||||
img.rsmzk {
|
||||
height: 30px;
|
||||
padding-left: $padding-wide;
|
||||
}
|
||||
|
||||
img.ekp {
|
||||
height: 56px;
|
||||
padding-right: $padding-wide;
|
||||
}
|
||||
}
|
||||
.narrow-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: v.$layout-breakpoint-x-large) {
|
||||
.narrow-footer {
|
||||
@include common-footer;
|
||||
.txt {
|
||||
font-size: 0.625rem !important;
|
||||
}
|
||||
|
||||
$padding-narrow: 1.5rem;
|
||||
.padding-for-mobile-footer {
|
||||
padding: 0 $padding-narrow;
|
||||
}
|
||||
|
||||
img.rsmzk {
|
||||
height: 24px;
|
||||
padding-left: $padding-narrow;
|
||||
}
|
||||
|
||||
img.ekp {
|
||||
height: 42px;
|
||||
padding-right: $padding-narrow;
|
||||
}
|
||||
}
|
||||
.wide-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@use "../components/toolbar";
|
||||
@use "../components/header-section";
|
||||
@use "../components/admin-side-menu";
|
||||
@use "../components/dictionaries-main";
|
||||
@use "../components/footer";
|
||||
@@ -0,0 +1,458 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
/* GLOBAL DEFINITIONS */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-family: "Roboto", "Helvetica";
|
||||
}
|
||||
|
||||
a {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
html {
|
||||
/* rem definition 1rem = 16px */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* END GLOBAL DEFINITIONS */
|
||||
|
||||
.w-39rem {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.w-650px {
|
||||
width: 650px !important;
|
||||
}
|
||||
|
||||
.tlr-0 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.calibrate-homepage-sr {
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
.calibrate-navigation-sr {
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
.calibrate-consultancy-sr {
|
||||
top: -5px;
|
||||
left: 0px;
|
||||
right: -24px;
|
||||
}
|
||||
|
||||
.bigsearch {
|
||||
top: -4px !important;
|
||||
}
|
||||
|
||||
/* MOBILE DEFINITIONS */
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 48px;
|
||||
left: 29px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* MOBILE ONLY DEFINITIONS */
|
||||
.gray-responsive-bg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
min-height: 83px;
|
||||
width: 100%;
|
||||
background: #46535b;
|
||||
* {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.signintxt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menutxt {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.language-desktop-entry {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* END MOBILE ONLY DEFINITIONS */
|
||||
|
||||
.topContainer {
|
||||
display: inline-block; /* TODO */
|
||||
|
||||
width: 100%;
|
||||
background: v.$navigation-maincolor;
|
||||
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* HERO TEXT */
|
||||
|
||||
.hero-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* END HERO TEXT */
|
||||
|
||||
/* NAVIGATION */
|
||||
|
||||
.index-nav {
|
||||
padding: 8px 0 8px 16px;
|
||||
|
||||
/* all links should not have standard decorations */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
/* display: block; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
|
||||
&:first-child {
|
||||
width: 30%;
|
||||
}
|
||||
&:last-child {
|
||||
width: 68%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
/*.nav {*/
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.nav-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: auto;
|
||||
min-width: min-content;
|
||||
max-width: max-content;
|
||||
margin: 0 0.625rem;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.threedots {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> button > *:first-child {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.nav-entry > *:first-child {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
/*
|
||||
#dropdownMenuButton1 > img {
|
||||
margin-right: 0.625rem;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* END NAVIGATION */
|
||||
|
||||
/* SEARCH BAR */
|
||||
|
||||
@mixin search-root-mobile {
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background-color: v.$nav-white;
|
||||
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 6px;
|
||||
|
||||
> span {
|
||||
height: 100%;
|
||||
/*padding: 1.25rem 0;*/
|
||||
}
|
||||
|
||||
.searchbar-icon-container {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
margin: 0 1rem;
|
||||
align-items: center;
|
||||
|
||||
.search_icon {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 100%;
|
||||
/*width: 55%;*/
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.search-button-keyboard {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin: 0 20px;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
line-height: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.dropdown-btn {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20px;
|
||||
align-items: center;
|
||||
/*margin-right: 1.25rem;*/
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* This one has widescreen special options */
|
||||
.search-root-main {
|
||||
@include search-root-mobile;
|
||||
}
|
||||
|
||||
/* This one is for always mobile size, even widescreen */
|
||||
.search-root-mobile-only {
|
||||
@include search-root-mobile;
|
||||
}
|
||||
|
||||
/* END SEARCH BAR */
|
||||
|
||||
.descriptionArea {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* END MOBILE DEFINITIONS */
|
||||
|
||||
/* medium break */
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.hero-text {
|
||||
display: block;
|
||||
font-size: 3.875rem;
|
||||
font-weight: 100;
|
||||
color: #d9d9d9;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calibrate-homepage-sr {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.signintxt {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menutxt {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.language-desktop-entry {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.topContainer {
|
||||
min-height: 419px;
|
||||
height: auto;
|
||||
/*background: v.$navigation-maincolor;*/
|
||||
/*box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);*/
|
||||
}
|
||||
|
||||
/* MOBILE ONLY DEFINITIONS */
|
||||
.gray-responsive-bg {
|
||||
//display: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* END MOBILE ONLY DEFINITIONS */
|
||||
|
||||
/* LOGO ICON */
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 84px;
|
||||
left: 40px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.index-nav {
|
||||
padding: 35px 24px 35px 40px;
|
||||
|
||||
* {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
.container {
|
||||
.nav-entry {
|
||||
display: flex;
|
||||
min-width: 1.875rem;
|
||||
/* min-height: 5rem; /* DON'T UNCOMMENT, THIS KILLS THE LAYOUT */
|
||||
font-size: 1rem;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
min-height: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* END NAVIGATION */
|
||||
|
||||
/* SEARCH BAR */
|
||||
.search-root-main {
|
||||
margin: 40px auto;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
/*width: 100%;
|
||||
max-width: 40.625rem;
|
||||
min-width: 21.875rem;*/
|
||||
width: 39rem;
|
||||
height: 80px;
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 6px;
|
||||
|
||||
/*
|
||||
&:focus {
|
||||
outline: #46535b solid 10px;
|
||||
}
|
||||
*/
|
||||
|
||||
> span {
|
||||
height: 100%;
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.searchbar-icon-container {
|
||||
width: 1.25rem;
|
||||
margin: 0 1.25rem;
|
||||
}*/
|
||||
|
||||
.search-input {
|
||||
width: 440px;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.search-button-keyboard {
|
||||
margin: 0 20px;
|
||||
width: 25px;
|
||||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.descriptionArea {
|
||||
width: 48rem;
|
||||
padding: 5rem 2rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.w-39rem {
|
||||
width: 39rem !important;
|
||||
}
|
||||
|
||||
.bigsearch {
|
||||
top: -6px !important;
|
||||
}
|
||||
|
||||
/*.search-bar * {
|
||||
/*text-align: center;*/ /*
|
||||
vertical-align: middle;
|
||||
}*/
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.mobile-left-holder {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/****************** UTILS *******************/
|
||||
|
||||
/************ END UTILS ************************/
|
||||
@@ -0,0 +1,72 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
/* POP UP KEYBOARD WITH SPECIAL CHARACTERS AND THE SUGGESTIONS STYLING FILE */
|
||||
|
||||
.kbd-root {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
.keyboard-popup {
|
||||
background-color: v.$nav-white;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0 0 6px 6px;
|
||||
padding: 1rem 2rem;
|
||||
/*width: 100%;*/
|
||||
z-index: 1000;
|
||||
/*position: fixed;*/
|
||||
height: auto;
|
||||
|
||||
span {
|
||||
min-height: 40px;
|
||||
button {
|
||||
display: block;
|
||||
margin-top: auto;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
background-color: #ddd;
|
||||
/*box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);*/
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
&:active {
|
||||
/* on click if required */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-popup {
|
||||
/*position: absolute;*/
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: v.$nav-white;
|
||||
|
||||
&:hover {
|
||||
background-color: v.$gray-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggs {
|
||||
position: absolute;
|
||||
/*top: 150px;*/
|
||||
> div {
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
background-color: #fff;
|
||||
> button.button-sugg {
|
||||
background-color: v.$nav-white;
|
||||
|
||||
&:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
.box-sizing-content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
div.material-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
margin-top: 30px;
|
||||
border: 1px solid whitesmoke;
|
||||
padding: 21px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
h4.title {
|
||||
text-align: center;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
:root {
|
||||
--omrs-color-ink-lowest-contrast: rgba(47, 60, 85, 0.18);
|
||||
--omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
|
||||
--omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
|
||||
--omrs-color-interaction: rgba(19, 19, 21, 0.6);
|
||||
--omrs-color-interaction-minus-two: rgba(73, 133, 224, 0.12);
|
||||
--omrs-color-danger: #b50706;
|
||||
--omrs-color-bg-low-contrast: #eff1f2;
|
||||
--omrs-color-ink-high-contrast: rgba(19, 19, 21, 0.6);
|
||||
--omrs-color-bg-high-contrast: #ffffff;
|
||||
}
|
||||
/** END: Non Openmrs CSS **/
|
||||
div.omrs-input-group {
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
width: 20.4375rem;
|
||||
}
|
||||
|
||||
/* Input*/
|
||||
.omrs-input-underlined > input,
|
||||
.omrs-input-filled > input {
|
||||
border: none;
|
||||
/*border-bottom: 0.125rem solid var(--omrs-color-ink-medium-contrast);*/
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
font-size: 1.0625rem;
|
||||
padding-left: 0.875rem;
|
||||
line-height: 147.6%;
|
||||
padding-top: 0.825rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > input:focus,
|
||||
.omrs-input-filled > input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > .omrs-input-label,
|
||||
.omrs-input-filled > .omrs-input-label {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 0.875rem;
|
||||
line-height: 147.6%;
|
||||
color: var(--omrs-color-ink-medium-contrast);
|
||||
transition: top 0.2s;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > svg,
|
||||
.omrs-input-filled > svg {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0.875rem;
|
||||
fill: var(--omrs-color-ink-medium-contrast);
|
||||
}
|
||||
|
||||
.omrs-input-underlined > .omrs-input-helper,
|
||||
.omrs-input-filled > .omrs-input-helper {
|
||||
font-size: 1rem;
|
||||
color: var(--omrs-color-ink-medium-contrast);
|
||||
letter-spacing: 0.0275rem;
|
||||
margin: 0.125rem 0.875rem;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > input:hover,
|
||||
.omrs-input-filled > input:hover {
|
||||
background: var(--omrs-color-interaction-minus-two);
|
||||
border-color: var(--omrs-color-ink-high-contrast);
|
||||
}
|
||||
|
||||
/* TODO WILL NEED TO DO THIS PROGRAMATICALLY */
|
||||
/*
|
||||
.omrs-input-underlined > input:focus + .omrs-input-label,
|
||||
.omrs-input-underlined > input:valid + .omrs-input-label,
|
||||
.omrs-input-filled
|
||||
> input:focus
|
||||
+ .omrs-input-label
|
||||
.omrs-input-filled
|
||||
> input:valid
|
||||
+ .omrs-input-label {
|
||||
top: 0;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Programmed version above */
|
||||
.omrs-input-underlined > .jumped {
|
||||
transition: transform 0.2s ease-out, color 0.2s ease-out,
|
||||
-webkit-transform 0.2s ease-out;
|
||||
top: -0.6rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.omrs-input-underlined:not(.omrs-input-danger)
|
||||
> input:focus
|
||||
+ .omrs-input-label,
|
||||
.omrs-input-filled:not(.omrs-input-danger) > input:focus + .omrs-input-label {
|
||||
color: var(--omrs-color-interaction);
|
||||
}
|
||||
|
||||
.omrs-input-underlined:not(.omrs-input-danger) > input:focus,
|
||||
.omrs-input-filled:not(.omrs-input-danger) > input:focus {
|
||||
border-color: var(--omrs-color-interaction);
|
||||
}
|
||||
|
||||
.omrs-input-underlined:not(.omrs-input-danger) > input:focus ~ svg,
|
||||
.omrs-input-filled:not(.omrs-input-danger) > input:focus ~ svg {
|
||||
fill: var(--omrs-color-ink-high-contrast);
|
||||
}
|
||||
|
||||
/** DISABLED **/
|
||||
|
||||
.omrs-input-underlined > input:disabled {
|
||||
background: var(--omrs-color-bg-low-contrast);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > input:disabled + .omrs-input-label,
|
||||
.omrs-input-underlined > input:disabled ~ .omrs-input-helper {
|
||||
color: var(--omrs-color-ink-low-contrast);
|
||||
}
|
||||
|
||||
.omrs-input-underlined > input:disabled ~ svg {
|
||||
fill: var(--omrs-color-ink-low-contrast);
|
||||
}
|
||||
|
||||
/** DANGER **/
|
||||
|
||||
.omrs-input-underlined.omrs-input-danger > .omrs-input-label,
|
||||
.omrs-input-underlined.omrs-input-danger > .omrs-input-helper,
|
||||
.omrs-input-filled.omrs-input-danger > .omrs-input-label,
|
||||
.omrs-input-filled.omrs-input-danger > .omrs-input-helper {
|
||||
color: var(--omrs-color-danger);
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
.dictionaries-search {
|
||||
background: #ffffff;
|
||||
border: 1px solid #b6bec4;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-table-wrapper {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 0.75rem;
|
||||
line-height: 14px;
|
||||
|
||||
/* identical to box height */
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-size: 0.75rem;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input {
|
||||
height: 20px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: v.$navigation-maincolor;
|
||||
border-color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
// Summernote
|
||||
|
||||
.note-editing-area {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.note-editor .dropdown-toggle::after {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.note-editor .note-dropdown-menu {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.note-editor .note-modal-footer {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.table-users {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-users td,
|
||||
.table-users th {
|
||||
padding: 12px 15px;
|
||||
// border: 1px solid #ddd;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.new-row {
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
|
||||
/*responsive*/
|
||||
|
||||
@media (max-width: 1192px) {
|
||||
.table-users thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-users,
|
||||
.table-users tbody,
|
||||
.table-users tr,
|
||||
.table-users td {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.table-users tr {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.table-users td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
// padding-right: 50%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
.table-users td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
margin-left: 35px;
|
||||
// width: 40%;
|
||||
// padding-left: 12px;
|
||||
font-size: 1rem;
|
||||
// font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
#add-area {
|
||||
height: 41px;
|
||||
padding: 10px 40px;
|
||||
}
|
||||
|
||||
.areas-table {
|
||||
background-color: #e0e6ea;
|
||||
th {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
tr {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.table > :not(:last-child) > :last-child > * {
|
||||
border-bottom-color: #e0e6ea;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.checkbox-table {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: v.$navigation-maincolor;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-button-grp {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.table-buttons {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.selected-row {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 6px;
|
||||
height: 67px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
body {
|
||||
background-color: v.$nav-white;
|
||||
// text-align:center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.admin-nav-mobile {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
padding: v.$panel-split-padding-vertical 0;
|
||||
// padding-top: 16px;
|
||||
// padding
|
||||
// background-color: v.$side-nav-mobile-color;
|
||||
|
||||
.nav-button {
|
||||
z-index: 10;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
// font-weight: 300;
|
||||
z-index: 10;
|
||||
color: v.$navigation-maincolor;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-nav-content {
|
||||
a {
|
||||
font-weight: 400;
|
||||
color: #46535b;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #46535b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* NOTE - it is reduced to the focused list item
|
||||
|
||||
a.menu-selected {
|
||||
color: v.$navigation-maincolor;
|
||||
}*/
|
||||
|
||||
> li {
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
line-height: 0rem;
|
||||
|
||||
> a {
|
||||
p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 8px 0 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-links {
|
||||
list-style: none;
|
||||
display: block;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
a {
|
||||
margin-left: 24px;
|
||||
line-height: 1.8rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #ffffff;
|
||||
opacity: 0.5;
|
||||
border-radius: 6px;
|
||||
// width: 100%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.disabled-li-hover:hover {
|
||||
background: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused-menu {
|
||||
background-color: #ffffff;
|
||||
.active {
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.closed {
|
||||
left: -420px;
|
||||
}
|
||||
|
||||
.opened {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
#burger-menu-img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.admin-nav-item:hover {
|
||||
background: v.$side-nav-mobile-color;
|
||||
opacity: 0.5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.root-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-nav {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 40px rgb(0 0 0 / 25%);
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.admin-nav {
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
top: 65px;
|
||||
}
|
||||
|
||||
.root-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.admin-nav-mobile {
|
||||
background-color: v.$nav-white;
|
||||
position: fixed;
|
||||
padding-bottom: 0;
|
||||
.nav-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
/*margin-top: 1rem;*/
|
||||
// margin-top: 1.5rem !important;
|
||||
margin-top: 0 !important;
|
||||
display: block;
|
||||
min-width: 15rem;
|
||||
font-weight: 300;
|
||||
margin-top: 4rem;
|
||||
margin-left: 2rem;
|
||||
font-size: 1.5rem;
|
||||
color: #848c91;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-nav-content {
|
||||
> li {
|
||||
&.focused-menu {
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
.active {
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 700;
|
||||
}
|
||||
.disabled-menu {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////*
|
||||
/* w3schools nav sample
|
||||
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
|
||||
https://www.w3schools.com/howto/howto_js_sidenav.asp
|
||||
*/
|
||||
|
||||
/*
|
||||
.sidenav {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #111;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.sidenav a {
|
||||
padding: 8px 8px 8px 32px;
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
color: #818181;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sidenav a:hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
.sidenav .closebtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
font-size: 36px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.sidenav a {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
@@ -0,0 +1,457 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
.comments-pager {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.comment.container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.verticalLine {
|
||||
// border-left: thick solid #b6bec3;
|
||||
border-left: 1px solid #b6bec4;
|
||||
}
|
||||
|
||||
.comment-initials-container {
|
||||
background: #b6bec3;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.d-block.pe-5 {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.comment-hr {
|
||||
margin-top: 0.313rem;
|
||||
margin-bottom: 0.313rem;
|
||||
}
|
||||
|
||||
.comment-author-name {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
position: relative;
|
||||
left: 0.344rem;
|
||||
// color: #252c31;
|
||||
}
|
||||
|
||||
.comment-quotename {
|
||||
font-family: "Roboto";
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 1rem;
|
||||
letter-spacing: 0em;
|
||||
text-align: left;
|
||||
margin-left: 0.625rem;
|
||||
}
|
||||
|
||||
.comment-quotedate {
|
||||
font-family: "Roboto";
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 1rem;
|
||||
letter-spacing: 0em;
|
||||
text-align: left;
|
||||
margin-left: 0.313rem;
|
||||
}
|
||||
|
||||
.comment-quotedtext {
|
||||
font-family: "Roboto";
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 1rem;
|
||||
text-align: left;
|
||||
margin-left: 1.688rem;
|
||||
color: #46535b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.comment-quotehr {
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.comment-count {
|
||||
color: #848c91;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
color: #848c91;
|
||||
font-size: 0.875rem;
|
||||
margin-left: 0.625rem;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
position: relative;
|
||||
// width: 90%;
|
||||
margin-left: 2.344rem;
|
||||
}
|
||||
|
||||
.comment-col {
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.313rem;
|
||||
}
|
||||
|
||||
.comment-text-2 {
|
||||
font-family: "Roboto";
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.comment-reply-btn {
|
||||
float: right;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.comment-seen-btn {
|
||||
float: right;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.comment-eye-off-btn {
|
||||
float: right;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.comment-white-text {
|
||||
color: #b6bec3;
|
||||
}
|
||||
|
||||
.comment-line {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-top: 0.938rem;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.side-nav-title {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
color: #848c91;
|
||||
}
|
||||
|
||||
form.comment-form::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.comments-top-hr {
|
||||
color: #b6bec4;
|
||||
opacity: 0.7;
|
||||
margin-top: 0.063rem;
|
||||
margin-bottom: 0rem;
|
||||
height: 10%;
|
||||
// margin-left: 6.7rem;
|
||||
}
|
||||
|
||||
form.comment-form textarea[type="text"] {
|
||||
// box-sizing: content-box;
|
||||
padding: 0.625rem;
|
||||
font-size: 1.063rem;
|
||||
flex: 1 1 0;
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
height: 2.9rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
resize: none;
|
||||
max-height: 200px;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
form.comment-form button {
|
||||
width: 15%;
|
||||
// margin-left: 0.1rem;
|
||||
margin-top: 0.06rem;
|
||||
background: #ffffff;
|
||||
color: v.$navigation-maincolor;
|
||||
font-family: "Roboto";
|
||||
font-size: 0.75rem;
|
||||
// height: 3rem;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
overflow: hidden;
|
||||
border-left: none;
|
||||
margin-right: 0.063rem;
|
||||
}
|
||||
|
||||
form.comment-reply-form textarea[type="text"] {
|
||||
padding: 0.625rem;
|
||||
font-size: 1.063rem;
|
||||
flex: 1 1 0;
|
||||
background: #ffffff;
|
||||
height: 3.125rem;
|
||||
// margin-left: 0.2rem;
|
||||
// max-width: 1250px;
|
||||
overflow-x: hidden;
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
form.comment-reply-form button {
|
||||
width: 15%;
|
||||
// margin-top: 0.1rem;
|
||||
background: #ffffff;
|
||||
color: v.$navigation-maincolor;
|
||||
font-family: "Roboto";
|
||||
font-size: 0.55rem;
|
||||
height: 3rem;
|
||||
border: 1px solid #b6bec4;
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
overflow: hidden;
|
||||
border-left: hidden;
|
||||
}
|
||||
|
||||
#reply-form-container {
|
||||
background-color: white;
|
||||
border: 1px solid #b6bec4;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
padding-left: 2px;
|
||||
// width: 95%;
|
||||
}
|
||||
|
||||
#quote-marks {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
#reply-circle {
|
||||
margin-left: 0.2rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.comment-reply-form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.comment-quote-author-fname {
|
||||
display: inline-block;
|
||||
font-family: "Roboto";
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
margin-left: 1.3rem;
|
||||
color: #848c91;
|
||||
}
|
||||
|
||||
.comment-quote-author-lname {
|
||||
display: inline-block;
|
||||
margin-left: 0.313rem;
|
||||
font-family: "Roboto";
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
color: #848c91;
|
||||
}
|
||||
.comment-quote-time-created {
|
||||
display: inline-block;
|
||||
margin-left: 0.313rem;
|
||||
font-family: "Roboto";
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
color: #848c91;
|
||||
}
|
||||
|
||||
.comment-quote-message {
|
||||
font-family: "Roboto";
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
color: #46535b;
|
||||
margin-left: 2.9rem;
|
||||
margin-right: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content-list-pager a {
|
||||
color: #848c90 !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.comment-reply-line {
|
||||
margin-left: 2.6rem;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-right: 20px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.comment-items {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.comment-div {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 320px) {
|
||||
.comment-form {
|
||||
align-content: center;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
border: 1px solid #b6bec4;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#comment-circle {
|
||||
margin-left: 0.3rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comments-top-hr {
|
||||
color: #b6bec4;
|
||||
opacity: 0.7;
|
||||
margin-top: 0.63rem;
|
||||
margin-bottom: 0rem;
|
||||
height: 10%;
|
||||
// margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.count-top-hr {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
.img-comment-svg {
|
||||
height: 0.825rem;
|
||||
width: 0.825rem;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.comment-text-2 {
|
||||
margin-left: 3.4rem;
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.comment-initials-container {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.quotehr {
|
||||
margin-right: 0.313rem;
|
||||
}
|
||||
/* .content-list-pager a {
|
||||
padding: 2px 1px;
|
||||
} */
|
||||
}
|
||||
|
||||
.comment-hr {
|
||||
margin-left: 3.3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
.comment-quotehr {
|
||||
margin-right: -4.375rem;
|
||||
}
|
||||
|
||||
.img-comment-svg {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.count-top-hr {
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
form.comment-form button {
|
||||
font-size: 1.06rem;
|
||||
}
|
||||
|
||||
form.comment-reply-form button {
|
||||
width: 10%;
|
||||
// margin-top: 0.1rem;
|
||||
background: #ffffff;
|
||||
color: v.$navigation-maincolor;
|
||||
font-family: "Roboto";
|
||||
font-size: 0.75rem;
|
||||
height: 3rem;
|
||||
border: 1px solid #b6bec4;
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
overflow: hidden;
|
||||
border-left: hidden;
|
||||
}
|
||||
|
||||
// .comments-content {
|
||||
// margin-left: 6rem;
|
||||
// }
|
||||
|
||||
form.comment-form button {
|
||||
width: 11%;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-holder {
|
||||
padding-left: 16px;
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.comments-holder {
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,289 @@
|
||||
@use "../variables/variables" as v;
|
||||
@use "search-filter/search-filter-navigation" as sf;
|
||||
|
||||
.consultancy-padding-main {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
background-color: #f5f5f5;
|
||||
// margin: 0 1rem;
|
||||
}
|
||||
|
||||
.consultancy-padding-admin {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.consultancy-container-unique {
|
||||
#offset-padding {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.consultancy-container {
|
||||
.consultancy-anchor {
|
||||
div {
|
||||
div {
|
||||
padding-right: 0;
|
||||
button.btn {
|
||||
height: 40px;
|
||||
/*padding-left: 0.25rem;
|
||||
|
||||
:first-child {
|
||||
padding-left: 0;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
.consultancy-question-item {
|
||||
div {
|
||||
div {
|
||||
span.question-asked-time {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.height-46p {
|
||||
height: 46px !important;
|
||||
}
|
||||
|
||||
.header-consultancy-divider-middle {
|
||||
.select2-selection {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-cons-btn {
|
||||
opacity: 80%;
|
||||
|
||||
&:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.send-cons-btn {
|
||||
width: 164px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
#consultancyModalShare,
|
||||
#consultancyModalAssign {
|
||||
.share-dialog-window,
|
||||
.assign-dialog-window {
|
||||
.share-search-container,
|
||||
.assign-search-container {
|
||||
.share-search-consultants.csq,
|
||||
.assign-search-consultants.csq {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection {
|
||||
display: flex;
|
||||
height: 37px;
|
||||
border: none;
|
||||
background-color: v.$white-1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.select2-selection__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
li.select2-results__option {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.button-modal-size {
|
||||
div {
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-icon-share,
|
||||
.search-icon-assign {
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
bottom: 6px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a.bg-transparent.border-0.consultancy-back-button {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.consultancy-back-button {
|
||||
width: 95px;
|
||||
}
|
||||
|
||||
.consultancy-item-detailed {
|
||||
background-color: #ffffff;
|
||||
padding: 33px 20px 20px 36px;
|
||||
border-radius: 8px;
|
||||
* {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.navigation-text-color {
|
||||
font-size: 1.825rem;
|
||||
}
|
||||
}
|
||||
|
||||
.consultancy-ask-question-container {
|
||||
padding: 15px 38px 45px 43px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
a.consultancy-anchor {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.consultancy-question-item {
|
||||
$hoverSpace: 1rem;
|
||||
margin: 2rem $hoverSpace;
|
||||
z-index: 1;
|
||||
.question-asked-time {
|
||||
padding-top: 2px;
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
* {
|
||||
z-index: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// background-color: #ffffff;
|
||||
// border-radius: 8px;
|
||||
// padding: 18px 24px 22px;
|
||||
|
||||
.hovered {
|
||||
visibility: visible;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
// padding: 18px 24px 22px;
|
||||
left: -1 * $hoverSpace;
|
||||
right: -1 * $hoverSpace;
|
||||
top: -16px;
|
||||
bottom: -16px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.row.btn-group {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.row.btn-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.consultancy-description-text {
|
||||
line-height: 16px;
|
||||
word-wrap: normal;
|
||||
|
||||
* {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-wrap: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
background-color: v.$gray-2;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-large) {
|
||||
.consultancy-padding-admin {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
// .admin-nav-mobile {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.consultancy-padding-main {
|
||||
// padding: 0 17%;
|
||||
}
|
||||
|
||||
.consultancy-padding-admin {
|
||||
margin-left: sf.$sfPanelWidth;
|
||||
padding-left: 1rem; // error correction
|
||||
.admin-nav {
|
||||
nav {
|
||||
.slidable {
|
||||
padding-left: 1rem;
|
||||
// width: 240px;
|
||||
padding-right: 1rem;
|
||||
|
||||
> * {
|
||||
padding: 8px 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#export-consultancy-info {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.consultancy-as {
|
||||
top: -2px !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.consultancy-padding-main {
|
||||
width: 60rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
.consultancy-padding-main {
|
||||
// padding: 0 18%;
|
||||
}
|
||||
|
||||
.consultancy-padding-admin {
|
||||
}
|
||||
|
||||
#export-consultancy-info {
|
||||
position: relative;
|
||||
left: 18%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
@use "../variables/variables" as v;
|
||||
@use "search-filter/search-filter-navigation" as sf;
|
||||
@use "content-side-menu" as csm;
|
||||
|
||||
.side-menu-offset {
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
#offset-padding {
|
||||
top: 160px;
|
||||
}
|
||||
|
||||
.content-page-header {
|
||||
left: csm.$content-nav-content-width-medium + 4rem; // 2rem xl padding not incl.
|
||||
}
|
||||
|
||||
// #status-overview {
|
||||
// min-width: 135px;
|
||||
// }
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.content-page-header {
|
||||
left: csm.$content-nav-content-width + 6rem; // 2 rem right margin and 4rem right margin
|
||||
}
|
||||
|
||||
.cont-header-section-root {
|
||||
right: 2rem !important;
|
||||
margin-left: 0rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.classic-search-container {
|
||||
.classic-search {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
padding: 8px 16px;
|
||||
background-color: v.$full-white;
|
||||
align-content: center;
|
||||
border-radius: 4px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-small) {
|
||||
#offset-padding {
|
||||
// left: 380px;
|
||||
top: 64px;
|
||||
}
|
||||
|
||||
.content-page-header {
|
||||
margin-left: 22rem;
|
||||
}
|
||||
|
||||
.cont-header-section-root {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.no-side-menu {
|
||||
left: 35px;
|
||||
}
|
||||
*/
|
||||
|
||||
.cont-header-section-root {
|
||||
/*background-color: v.$nav-white;*/
|
||||
// background-color: v.$nav-white;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
flex-wrap: wrap;
|
||||
background-color: #f5f5f5;
|
||||
/*left: 35px;*/
|
||||
// right: 35px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
|
||||
// padding-top: v.$panel-split-padding-vertical + 5px;
|
||||
// padding-bottom: v.$panel-split-padding-vertical + 5px;
|
||||
/*padding-left: 64px;*/ /* bootstrapped*/
|
||||
/*padding-right: 28px;*/
|
||||
|
||||
.header-container-divider-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// min-width: 75%;
|
||||
// padding-right: 18px;
|
||||
align-items: flex-end;
|
||||
padding-top: 20px;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 1.125rem;
|
||||
color: v.$header-title-gray;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
font-size: 1.5rem;
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container-divider-right {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
margin-top: 17px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
.header-container-divider-left-special {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// min-width: %;
|
||||
// padding-right: 18px;
|
||||
align-items: flex-end;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 1.125rem;
|
||||
color: v.$header-title-gray;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
font-size: 1.5rem;
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container-divider-right {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .btn {
|
||||
/*margin-bottom: 10px;*/
|
||||
margin-right: 6px;
|
||||
height: 40px;
|
||||
// width: 40%;
|
||||
// border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1.125rem;
|
||||
white-space: nowrap;
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.content-fixed-top {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
.cont-header-section-root {
|
||||
flex-wrap: nowrap;
|
||||
position: fixed;
|
||||
margin-left: 2rem;
|
||||
margin-right: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.header-container-divider-right {
|
||||
> .btn {
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-list-pager {
|
||||
> * {
|
||||
padding: 8px 12px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: v.$gray-1 !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
text-decoration: none;
|
||||
|
||||
&.selected {
|
||||
background-color: v.$gray-2;
|
||||
color: v.$nav-white !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offset-header {
|
||||
background-color: #f5f5f5;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.cont-header-container-left-side {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.collapsable-entry-btn:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.entry-uncollapsed {
|
||||
transform: matrix(0, -1, -1, 0, 0, 0);
|
||||
}
|
||||
|
||||
.entry-collapsed {
|
||||
transform: matrix(0, 1, 1, 0, 0, 0);
|
||||
}
|
||||
|
||||
.white-background {
|
||||
background: #ffffff;
|
||||
border: 1px solid #848c91;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.border-header {
|
||||
border-color: #b6bec3;
|
||||
}
|
||||
|
||||
.border-header:active {
|
||||
box-shadow: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.btn.disabled,
|
||||
.btn:disabled,
|
||||
fieldset:disabled .btn {
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
h1#site-heading {
|
||||
font-size: 1.5rem;
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 300;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
.profile-menu-button {
|
||||
display: block;
|
||||
background: none;
|
||||
border: none;
|
||||
div {
|
||||
div {
|
||||
span {
|
||||
min-width: 80px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,561 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
$content-nav-content-width: 32rem;
|
||||
$content-nav-content-width-medium: 22rem;
|
||||
|
||||
.filter-select {
|
||||
color: v.$navigation-maincolor;
|
||||
background-color: #f5f5f5;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-position: right 0.2rem center;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.filter-select option {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.content-nav-mobile {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
padding: v.$panel-split-padding-vertical 0;
|
||||
|
||||
.nav-button {
|
||||
z-index: 10;
|
||||
background: none;
|
||||
border: none;
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.term-button {
|
||||
max-width: 445px;
|
||||
font-size: 1rem;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.term-good-btn {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-padding-1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.btn-check:focus + .terms-label {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.content-nav-content {
|
||||
list-style: none;
|
||||
box-shadow: 9px 4px 33px rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
left: -420px;
|
||||
top: 61px;
|
||||
z-index: 3;
|
||||
transition: 0.3s;
|
||||
max-height: calc(100vh - 80px);
|
||||
max-width: 301px;
|
||||
overflow-y: auto;
|
||||
|
||||
.hold-side-menu-items {
|
||||
box-shadow: 9px 4px 33px rgb(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
.filter-search-settings {
|
||||
border-bottom: solid #848c91;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
|
||||
.filter-search-section {
|
||||
background-color: v.$nav-white;
|
||||
padding: 15px 20px 20px 20px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
#img-chevron-content {
|
||||
transform: rotate(90deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#img-chevron-content-filtered {
|
||||
transform: rotate(90deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.termin-list {
|
||||
background-color: white;
|
||||
padding-top: 12px;
|
||||
// padding-bottom: 25px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
// height: calc(100% - 174px);
|
||||
// height: calc(100% - 24.5%);
|
||||
// height: fit-content;
|
||||
|
||||
> button:hover {
|
||||
background: #f5f5f5;
|
||||
opacity: 0.5;
|
||||
border-radius: 6px;
|
||||
// width: 100%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
color: #46535b;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #46535b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> li {
|
||||
border-radius: 6px;
|
||||
line-height: 0rem;
|
||||
|
||||
> a {
|
||||
p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 8px 0 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-links {
|
||||
list-style: none;
|
||||
display: block;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
a {
|
||||
margin-left: 24px;
|
||||
line-height: 1.8rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #ffffff;
|
||||
opacity: 0.5;
|
||||
border-radius: 6px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.disabled-li-hover:hover {
|
||||
background: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused-menu {
|
||||
background-color: #ffffff;
|
||||
.active {
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.closed {
|
||||
left: -420px;
|
||||
}
|
||||
|
||||
.opened {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
#burger-menu-img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
#chevrons-back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-nav {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 40px rgb(0 0 0 / 25%);
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
#content-cancel-btn {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
#disabled-submit-btn {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.content-main-page {
|
||||
// margin-left: $content-nav-content-width-medium;
|
||||
margin-left: 26rem;
|
||||
}
|
||||
|
||||
.content-nav {
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.root-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content-nav-mobile {
|
||||
background-color: v.$nav-white;
|
||||
position: fixed;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0;
|
||||
.nav-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content-nav-content {
|
||||
position: fixed;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
left: 34px;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
top: 121px;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
bottom: 60px;
|
||||
max-height: calc(100vh - 100px - 45px);
|
||||
height: min-content;
|
||||
min-width: 339px;
|
||||
|
||||
.filter-search-section {
|
||||
background-color: v.$nav-white;
|
||||
padding: 15px 20px 20px 20px;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
> li {
|
||||
&.focused-menu {
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
.active {
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 700;
|
||||
}
|
||||
.disabled-menu {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 880px) {
|
||||
.content-nav-content {
|
||||
max-height: calc(100% - 15%);
|
||||
height: min-content;
|
||||
}
|
||||
}
|
||||
|
||||
#chevrons-back {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
#content-cancel-btn {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
#disabled-submit-btn {
|
||||
width: unset;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-column-width {
|
||||
max-width: 210px;
|
||||
min-width: 210px;
|
||||
max-height: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.content-page-header {
|
||||
margin-left: $content-nav-content-width + 2rem;
|
||||
// margin-left: 500px;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.content-page-header {
|
||||
left: $content-nav-content-width;
|
||||
// margin-left: 500px;
|
||||
}
|
||||
|
||||
.content-nav-content {
|
||||
width: $content-nav-content-width;
|
||||
min-width: 32rem;
|
||||
}
|
||||
|
||||
.content-main-page {
|
||||
margin-left: $content-nav-content-width + (6rem - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.selected-term-btn {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
color: v.$navigation-maincolor !important;
|
||||
}
|
||||
|
||||
.input-search:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.not-valid-not-published {
|
||||
color: #8f96a3;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.saved-entry-btn {
|
||||
background-color: #88b52f;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.saved-entry-btn:hover {
|
||||
background-color: #add55d;
|
||||
}
|
||||
|
||||
.saved-entry-btn:active {
|
||||
background-color: #add55d;
|
||||
}
|
||||
|
||||
.saved-entry-btn:focus {
|
||||
background-color: #add55d;
|
||||
}
|
||||
|
||||
#pagination-content {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
// Spinner
|
||||
.lds-default {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lds-default div {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #d9d9d9;
|
||||
border-radius: 50%;
|
||||
animation: lds-default 1.2s linear infinite;
|
||||
}
|
||||
.lds-default div:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
top: 37px;
|
||||
left: 66px;
|
||||
}
|
||||
.lds-default div:nth-child(2) {
|
||||
animation-delay: -0.1s;
|
||||
top: 22px;
|
||||
left: 62px;
|
||||
}
|
||||
.lds-default div:nth-child(3) {
|
||||
animation-delay: -0.2s;
|
||||
top: 11px;
|
||||
left: 52px;
|
||||
}
|
||||
.lds-default div:nth-child(4) {
|
||||
animation-delay: -0.3s;
|
||||
top: 7px;
|
||||
left: 37px;
|
||||
}
|
||||
.lds-default div:nth-child(5) {
|
||||
animation-delay: -0.4s;
|
||||
top: 11px;
|
||||
left: 22px;
|
||||
}
|
||||
.lds-default div:nth-child(6) {
|
||||
animation-delay: -0.5s;
|
||||
top: 22px;
|
||||
left: 11px;
|
||||
}
|
||||
.lds-default div:nth-child(7) {
|
||||
animation-delay: -0.6s;
|
||||
top: 37px;
|
||||
left: 7px;
|
||||
}
|
||||
.lds-default div:nth-child(8) {
|
||||
animation-delay: -0.7s;
|
||||
top: 52px;
|
||||
left: 11px;
|
||||
}
|
||||
.lds-default div:nth-child(9) {
|
||||
animation-delay: -0.8s;
|
||||
top: 62px;
|
||||
left: 22px;
|
||||
}
|
||||
.lds-default div:nth-child(10) {
|
||||
animation-delay: -0.9s;
|
||||
top: 66px;
|
||||
left: 37px;
|
||||
}
|
||||
.lds-default div:nth-child(11) {
|
||||
animation-delay: -1s;
|
||||
top: 62px;
|
||||
left: 52px;
|
||||
}
|
||||
.lds-default div:nth-child(12) {
|
||||
animation-delay: -1.1s;
|
||||
top: 52px;
|
||||
left: 62px;
|
||||
}
|
||||
@keyframes lds-default {
|
||||
0%,
|
||||
20%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollbar style
|
||||
|
||||
// Firefox
|
||||
.scroller-style {
|
||||
// overflow-y: scroll;
|
||||
scrollbar-color: #006cb7 #e0e6ea;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-width: 7px;
|
||||
}
|
||||
|
||||
// Other browsers
|
||||
.scroller-style::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 7px;
|
||||
background-color: #e0e6ea;
|
||||
}
|
||||
|
||||
.scroller-style::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #e0e6ea;
|
||||
}
|
||||
|
||||
.scroller-style::-webkit-scrollbar-thumb {
|
||||
border-radius: 7px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #006cb7;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
|
||||
/*
|
||||
// use if upgrade to bootstrap 5.2.x
|
||||
.gray-tooltip {
|
||||
--bs-tooltip-bg: #b6bec4;
|
||||
}
|
||||
*/
|
||||
|
||||
.gray-tooltip.tooltip > .tooltip-inner {
|
||||
background-color: #b6bec4;
|
||||
max-width: 500px;
|
||||
padding: 8px 17px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.blue-tooltip.tooltip > .tooltip-inner {
|
||||
background-color: v.$navigation-maincolor;
|
||||
max-width: 500px;
|
||||
padding: 8px 17px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.red-tooltip.tooltip > .tooltip-inner {
|
||||
background-color: #ac7171;
|
||||
max-width: 500px;
|
||||
padding: 8px 17px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dark-gray-tooltip.tooltip > .tooltip-inner {
|
||||
background-color: #46535b;
|
||||
max-width: 500px;
|
||||
padding: 8px 17px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.label-tooltip.tooltip > .tooltip-inner {
|
||||
// background-color: #f5f5f5;
|
||||
background-color: white;
|
||||
color: #212529;
|
||||
max-width: 500px;
|
||||
padding: 8px 17px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #46535b;
|
||||
}
|
||||
|
||||
.tooltip.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-top .tooltip-arrow::before {
|
||||
border-top-color: #b6bec4;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
|
||||
border-bottom-color: #b6bec4;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-start .tooltip-arrow::before {
|
||||
border-left-color: #b6bec4;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-end .tooltip-arrow::before {
|
||||
border-right-color: #b6bec4;
|
||||
}
|
||||
|
||||
.terms-label {
|
||||
max-width: 445px;
|
||||
font-size: 1rem;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.terms-label:focus {
|
||||
outline: 1px;
|
||||
}
|
||||
@@ -0,0 +1,910 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
body {
|
||||
background-color: v.$nav-white;
|
||||
}
|
||||
|
||||
.side-nav-title {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
color: #848c91;
|
||||
}
|
||||
|
||||
.dictionary-content {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dictionary-title {
|
||||
font-size: 1.375rem;
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dictionary-attributes {
|
||||
font-size: 1rem;
|
||||
line-height: 18.75px;
|
||||
color: #46535b;
|
||||
font-weight: 400;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.dictionary-value {
|
||||
font-size: 1.5rem;
|
||||
color: #46535b;
|
||||
line-height: 18.75px;
|
||||
}
|
||||
|
||||
.dictionary-list-button {
|
||||
font-size: 1.125rem;
|
||||
color: #46535b;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
border-width: 1px;
|
||||
border-color: rgb(185, 181, 181);
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media screen and(min-width:500px) {
|
||||
.dictionary-value {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.optional-floating-grey-action-button {
|
||||
background-color: inherit;
|
||||
color: #46535b;
|
||||
border-color: #c0c2c4;
|
||||
border-width: 1px;
|
||||
}
|
||||
.optional-floating-action-button {
|
||||
background-color: v.$navigation-maincolor;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.input-name-txt {
|
||||
color: #46535b;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.input[type="text"] {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.multiple {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name-info-txt {
|
||||
color: #848c90;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.name-input {
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
border: 1px solid #b6bec3;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#input-new-author {
|
||||
background: #e0e6ea;
|
||||
border: 1px dashed #848c91;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.input-new-btn {
|
||||
background: #e0e6ea;
|
||||
border: 1px dashed #848c91;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-new-btn:focus {
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
}
|
||||
|
||||
.new-author-text-btn {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
|
||||
/* identical to box height */
|
||||
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.p-squeeze-lg {
|
||||
}
|
||||
|
||||
.delete-author {
|
||||
background-color: white;
|
||||
// border: 1px solid #ced4da;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.delete-author-btn {
|
||||
border: 1px solid #b6bec3;
|
||||
border-left: none;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-trash {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#input-new-area {
|
||||
background: #e0e6ea;
|
||||
border: 1px dashed #848c91;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
// cursor: pointer;
|
||||
// background-color: v.$side-nav-mobile-color;
|
||||
}
|
||||
|
||||
.area-input {
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.input-group
|
||||
> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.delete-area-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// .language-subgroups {
|
||||
// margin-left: 5px;
|
||||
// }
|
||||
#termin-subgroup-label {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#definition-subgroup-label {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#synonym-subgroup-label {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.language-code {
|
||||
height: 20px;
|
||||
width: 17px;
|
||||
text-align: center;
|
||||
background-color: #b6bec3;
|
||||
}
|
||||
|
||||
.code {
|
||||
vertical-align: middle;
|
||||
font-family: Roboto;
|
||||
font-size: 0.625rem;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dictionary-element-definition {
|
||||
font-family: Roboto;
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.key-word-name {
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 19px;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.language-translation {
|
||||
font-family: Roboto;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
color: #3a464e;
|
||||
}
|
||||
|
||||
.definition-subtitle {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
line-height: 16px;
|
||||
color: #3a464e;
|
||||
}
|
||||
|
||||
.definition {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 0.875rem;
|
||||
line-height: 16px;
|
||||
max-width: 750px;
|
||||
color: #3a464e;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-size: 1rem;
|
||||
margin-left: 7px;
|
||||
margin-top: 2px;
|
||||
// line-height: 18.75px;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input {
|
||||
height: 20px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.definition-text {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.info-text-for-button {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.white-border-background {
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.btn-advanced {
|
||||
background: v.$navigation-maincolor;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.visible-th {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
// Users page
|
||||
|
||||
.users-subtitle-txt {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.user-rights-column-title {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
|
||||
/* identical to box height */
|
||||
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.user-data {
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.user-name-last-name {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
line-height: 19px;
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
line-height: 19px;
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.horizontal-row-table {
|
||||
background-color: white;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.new-user-info {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 0.75rem;
|
||||
line-height: 14px;
|
||||
|
||||
/* identical to box height */
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.btn-color {
|
||||
background-color: v.$navigation-maincolor;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon-trash-delete {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hidden-text {
|
||||
display: none;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
// Table style
|
||||
|
||||
.table-users {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-users td,
|
||||
.table-users th {
|
||||
padding: 12px 15px;
|
||||
// border: 1px solid #ddd;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.new-row {
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
|
||||
/*responsive*/
|
||||
|
||||
@media (max-width: 1192px) {
|
||||
.table-users thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-users,
|
||||
.table-users tbody,
|
||||
.table-users tr,
|
||||
.table-users td {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.table-users tr {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.table-users td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
// padding-right: 50%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
.table-users td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
margin-left: 35px;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Import a file
|
||||
|
||||
.file-import {
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: v.$navigation-maincolor;
|
||||
border-color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.header-table-wrapper {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 0.75rem;
|
||||
line-height: 14px;
|
||||
|
||||
/* identical to box height */
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
// Terminology canididates
|
||||
|
||||
.terminology-input {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
// Dictionary export
|
||||
|
||||
.radio-button-labels {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
line-height: 164.69%;
|
||||
|
||||
/* or 26px */
|
||||
|
||||
color: #46535b;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// Dictionary content
|
||||
|
||||
.site-link {
|
||||
padding: 11px;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active-site-link {
|
||||
color: v.$navigation-maincolor;
|
||||
border-bottom: 6px solid v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.date-scroller {
|
||||
background: #ffffff;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
height: 65px;
|
||||
// overflow: auto;
|
||||
}
|
||||
|
||||
.date-list {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.latest-version-el {
|
||||
border: 2px solid lightblue !important;
|
||||
}
|
||||
|
||||
.date-element {
|
||||
border: 1px solid #b6bec4;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: #46535b;
|
||||
cursor: pointer;
|
||||
margin: 0px 10px;
|
||||
padding: 4px 8px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
#go-left {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#go-right {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#hide-dates {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.btn-dates-group {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.explanation-field {
|
||||
font-size: 1.063rem;
|
||||
flex: 1 1 0;
|
||||
background: #ffffff;
|
||||
min-height: 40px;
|
||||
height: 42px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
resize: none;
|
||||
max-height: 200px;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.languages-group-white {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.multimedia-section {
|
||||
background: #e4e7e8;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hr-languages {
|
||||
width: 98%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: #7a7a7a;
|
||||
}
|
||||
|
||||
.select-content-state option:disabled {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
.hide-preview {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.green-button {
|
||||
background: #88b52f;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.advanced-blue-btn {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.options-width-box {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.options-another-box {
|
||||
min-width: 122px;
|
||||
}
|
||||
|
||||
.opened-row-data {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.homonym-field {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
#modal-spinner {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 80%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.modal-spinner-center {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
// Media queries
|
||||
@media screen and (min-width: 756px) {
|
||||
.dictionary-element-definition {
|
||||
margin-left: 180px;
|
||||
}
|
||||
|
||||
.definition-text {
|
||||
margin-left: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-input {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// Adjust select2 styles
|
||||
|
||||
.select2 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.select2-selection {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice__remove {
|
||||
border: none;
|
||||
right: 0;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
left: inherit;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice {
|
||||
padding-left: 6px;
|
||||
padding-bottom: 3px;
|
||||
padding-right: 4px;
|
||||
margin-top: 4px;
|
||||
margin-left: 8px;
|
||||
padding-top: 5px;
|
||||
white-space: unset;
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-search--inline .select2-search__field {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.select2-container .select2-search--inline .select2-search__field {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice__display {
|
||||
color: v.$navigation-maincolor;
|
||||
font-family: Roboto;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0em;
|
||||
text-align: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
background-color: white;
|
||||
// border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
// li {
|
||||
// list-style: none;
|
||||
// }
|
||||
|
||||
.hide-dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Select2 validation
|
||||
|
||||
.select2-validation {
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
background-image: url("/images/exclamation-triangle-red.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
border: 1px solid #dc3545 !important;
|
||||
}
|
||||
|
||||
.select2-validation:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
|
||||
}
|
||||
|
||||
.invalid-feedback-selection {
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
color: #dc3545;
|
||||
}
|
||||
.hidden-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Validation
|
||||
|
||||
.was-validated .form-check-input:valid ~ .form-check-label {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input:valid {
|
||||
border-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.was-validated .form-check-input:valid:checked {
|
||||
background-color: v.$navigation-maincolor;
|
||||
border-color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.was-validated .form-control:valid {
|
||||
border-color: #ced4da;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.was-validated .form-control:valid:focus {
|
||||
border-color: #ced4da;
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
.was-validated .form-control:invalid {
|
||||
background-image: url("/images/exclamation-triangle-red.svg");
|
||||
}
|
||||
|
||||
// Summernote
|
||||
|
||||
.note-editing-area {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.note-editor .dropdown-toggle::after {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.note-editor .note-dropdown-menu {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.note-editor .note-modal-footer {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
// Adjust bootstrap styles
|
||||
|
||||
.btn-outline-dates {
|
||||
// color: v.$navigation-maincolor;
|
||||
border: 1px solid #b6bec4;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.btn-outline-dates:hover {
|
||||
color: #fff;
|
||||
background-color: v.$navigation-maincolor;
|
||||
border-color: v.$navigation-maincolor;
|
||||
}
|
||||
.btn-check:checked + .btn-outline-dates,
|
||||
.btn-check:active + .btn-outline-dates,
|
||||
.btn-outline-dates:active,
|
||||
.btn-outline-dates.active,
|
||||
.btn-outline-dates.dropdown-toggle.show {
|
||||
color: #fff;
|
||||
background: v.$navigation-maincolor;
|
||||
border: 1px solid v.$navigation-maincolor;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.form-check-input[type="checkbox"]:indeterminate {
|
||||
background-color: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
// background-image: url("/images/white-checkbox.svg");
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.indeterminate-cbox[type="checkbox"] {
|
||||
background-image: url("/images/x-checkbox.svg");
|
||||
}
|
||||
|
||||
.indeterminate-cbox[type="checkbox"]:not(:checked) + .form-check-label {
|
||||
color: #848c91;
|
||||
}
|
||||
|
||||
.indeterminate-cbox[type="checkbox"]:indeterminate + .form-check-label {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/*
|
||||
@media (min-width: 1400px) {
|
||||
.p-squeeze-lg {
|
||||
width: 60rem;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.table-dict-list {
|
||||
border-radius: 6px;
|
||||
|
||||
.th {
|
||||
font-weight: 300;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.table-dict-content {
|
||||
border-bottom: 1px solid v.$gray-3;
|
||||
background-color: #ffffff;
|
||||
|
||||
&:nth-child(2) {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.dpr {
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-small) {
|
||||
.table-dict-list {
|
||||
border-radius: 6px;
|
||||
|
||||
.table-dict-content {
|
||||
.dpr {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.p-squeeze-lg {
|
||||
// padding: 0 17%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.p-squeeze-lg {
|
||||
width: 60rem;
|
||||
display: block;
|
||||
margin: auto;
|
||||
// padding: 1rem;
|
||||
}
|
||||
|
||||
.errc {
|
||||
padding-top: 169px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
.edit-task {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete-task {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.double-task {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-a-file-field {
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
}
|
||||
|
||||
.upload-inner-border {
|
||||
background: v.$side-nav-mobile-color;
|
||||
border: 2px dashed #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.delete-btn-table {
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.white-background-btn {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.button-edit {
|
||||
font-size: 0.875rem;
|
||||
padding-left: 8px;
|
||||
padding-top: 12px;
|
||||
padding-right: 8px;
|
||||
padding-bottom: 12px;
|
||||
width: 57px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
// List
|
||||
|
||||
.task {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
}
|
||||
|
||||
.task-new {
|
||||
border-left: 4px solid#057ed1;
|
||||
border-radius: 6px 8px 8px 6px;
|
||||
}
|
||||
|
||||
.task-in-progress {
|
||||
border-left: 4px solid #fba728;
|
||||
border-radius: 6px 8px 8px 6px;
|
||||
}
|
||||
|
||||
.task-cancelled {
|
||||
border-left: 4px solid #fb6f28;
|
||||
border-radius: 6px 8px 8px 6px;
|
||||
}
|
||||
|
||||
.task-declined {
|
||||
border-left: 4px solid #d12525;
|
||||
border-radius: 6px 8px 8px 6px;
|
||||
}
|
||||
|
||||
.task-completed {
|
||||
border-radius: 6px 8px 8px 6px;
|
||||
}
|
||||
|
||||
.white-border-background {
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.extraction-btn {
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
.without-arrows::-webkit-outer-spin-button,
|
||||
.without-arrows::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Select2 styles
|
||||
|
||||
.select2-selection {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice__remove {
|
||||
border: none;
|
||||
right: 0;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
left: inherit;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice {
|
||||
padding-left: 6px;
|
||||
padding-bottom: 3px;
|
||||
padding-right: 4px;
|
||||
margin-top: 4px;
|
||||
margin-left: 8px;
|
||||
padding-top: 5px;
|
||||
white-space: unset;
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-search--inline .select2-search__field {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.select2-container .select2-search--inline .select2-search__field {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice__display {
|
||||
color: v.$navigation-maincolor;
|
||||
font-family: Roboto;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0em;
|
||||
text-align: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
// li {
|
||||
// list-style: none;
|
||||
// }
|
||||
|
||||
#terminology-candidates {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#user-corpus-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#kas-corpus-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: v.$layout-breakpoint-large) {
|
||||
#terminology-candidates {
|
||||
width: unset;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
#user-corpus-btn {
|
||||
width: unset;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
#kas-corpus-btn {
|
||||
width: unset;
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: v.$layout-breakpoint-x-large) {
|
||||
.extraction-margin-left {
|
||||
margin-left: 1.6rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.footer {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@@ -0,0 +1,547 @@
|
||||
@use "../variables/variables" as v;
|
||||
@use "search-filter/search-filter-navigation" as sf;
|
||||
|
||||
.index-footer {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-hold-prerequisites {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
background-color: #f5f5f5;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.header-section-root-scroll {
|
||||
/*background-color: v.$nav-white;*/
|
||||
// background-color: v.$nav-white;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
flex-wrap: wrap;
|
||||
// z-index: 1030;
|
||||
|
||||
// padding-top: v.$panel-split-padding-vertical + 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.header-container-divider-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
min-width: 60%;
|
||||
// padding-right: 18px;
|
||||
align-items: flex-end;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 1.125rem;
|
||||
color: v.$header-title-gray;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
font-size: 1.5rem;
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container-divider-right {
|
||||
min-width: 40%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
width: unset;
|
||||
|
||||
// > button {
|
||||
// /*margin-bottom: 10px;*/
|
||||
// margin-right: 6px;
|
||||
// height: 40px;
|
||||
// // width: 25%;
|
||||
// // border: none;
|
||||
// border-radius: 6px;
|
||||
// font-size: 1.125rem;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.side-menu-offset {
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
#offset-padding {
|
||||
top: 160px;
|
||||
}
|
||||
|
||||
.classic-search-container {
|
||||
.classic-search {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
padding: 8px 16px;
|
||||
background-color: v.$full-white;
|
||||
align-content: center;
|
||||
border-radius: 4px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-hold-prerequisites {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
#offset-padding {
|
||||
// left: 380px;
|
||||
top: 64px;
|
||||
}
|
||||
|
||||
.offset-padding {
|
||||
left: sf.$sfPanelWidth + 1rem + 2rem; // 380px;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: sf.$sfPanelWidth + 1rem; // 2 rem alreay included due to prerequisites offset
|
||||
}
|
||||
|
||||
.offset-correction {
|
||||
margin-left: sf.$sfPanelWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.no-side-menu {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
.header-section-root {
|
||||
/*background-color: v.$nav-white;*/
|
||||
// background-color: v.$nav-white;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
flex-wrap: wrap;
|
||||
background-color: #f5f5f5;
|
||||
/*left: 35px;*/
|
||||
right: 35px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
|
||||
// padding-top: v.$panel-split-padding-vertical + 5px;
|
||||
// padding-bottom: v.$panel-split-padding-vertical + 5px;
|
||||
/*padding-left: 64px;*/ /* bootstrapped*/
|
||||
/*padding-right: 28px;*/
|
||||
|
||||
.header-container-divider-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// min-width: 75%;
|
||||
// padding-right: 18px;
|
||||
align-items: flex-end;
|
||||
padding-top: 20px;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 1.125rem;
|
||||
color: v.$header-title-gray;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
font-size: 1.5rem;
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container-divider-right {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
margin-top: 17px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
// > button {
|
||||
// /*margin-bottom: 10px;*/
|
||||
// margin-right: 6px;
|
||||
// height: 40px;
|
||||
// width: 40%;
|
||||
// // border: none;
|
||||
// border-radius: 6px;
|
||||
// font-size: 1.125rem;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.header-consultancy-admin {
|
||||
@extend .header-section-root;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.header-container-divider-left-special {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// min-width: %;
|
||||
// padding-right: 18px;
|
||||
align-items: flex-end;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 1.125rem;
|
||||
color: v.$header-title-gray;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
font-size: 1.5rem;
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container-divider-right {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .btn {
|
||||
/*margin-bottom: 10px;*/
|
||||
margin-right: 6px;
|
||||
height: 40px;
|
||||
// width: 40%;
|
||||
// border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1.125rem;
|
||||
white-space: nowrap;
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
.styled-table {
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
/*border: 1px solid #dddddd;*/
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
tr {
|
||||
color: v.$header-description-gray;
|
||||
|
||||
td:last-child {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: v.$full-white;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: v.$white-1;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
background-color: v.$nav-white;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: 32px;
|
||||
background-color: v.$navigation-maincolor;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
color: v.$full-white;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
#fixed-top-section {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
.header-section-root {
|
||||
flex-wrap: nowrap;
|
||||
position: fixed;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.header-consultancy-admin {
|
||||
margin-left: sf.$sfPanelWidth + 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.header-container-divider-right {
|
||||
> .btn {
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
.styled-table-left-header {
|
||||
width: 35%;
|
||||
|
||||
td,
|
||||
th {
|
||||
/*border: 1px solid #dddddd;*/
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tr {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: v.$full-white;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: v.$white-1;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
background-color: v.$white-1;
|
||||
}
|
||||
|
||||
// button {
|
||||
// width: 64px;
|
||||
// height: 32px;
|
||||
// background-color: v.$navigation-maincolor;
|
||||
// border-radius: 6px;
|
||||
// border: none;
|
||||
// color: v.$full-white;
|
||||
// }
|
||||
}
|
||||
|
||||
.content-list-pager {
|
||||
> * {
|
||||
padding: 8px 12px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: v.$gray-1 !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
text-decoration: none;
|
||||
|
||||
&.selected {
|
||||
background-color: v.$gray-2;
|
||||
color: v.$nav-white !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-header {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
|
||||
/* identical to box height */
|
||||
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.offset-header {
|
||||
background-color: #f5f5f5;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.small-header-btn {
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
// Primary button style
|
||||
|
||||
.btn {
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
width: -moz-fit-content;
|
||||
}
|
||||
|
||||
.header-container-left-side {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.btn {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: v.$button-primary-color;
|
||||
border: none;
|
||||
height: 49px;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
color: #fff;
|
||||
background: v.$button-primary-color;
|
||||
opacity: 0.8;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.btn-check:focus + .btn-primary,
|
||||
.btn-primary:focus {
|
||||
color: #fff;
|
||||
background-color: v.$button-primary-color;
|
||||
border-color: v.$button-primary-color;
|
||||
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
|
||||
}
|
||||
.btn-check:checked + .btn-primary,
|
||||
.btn-check:active + .btn-primary,
|
||||
.btn-primary:active,
|
||||
.btn-primary.active,
|
||||
.show > .btn-primary.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: v.$button-primary-color;
|
||||
border-color: v.$button-primary-color;
|
||||
}
|
||||
.btn-check:checked + .btn-primary:focus,
|
||||
.btn-check:active + .btn-primary:focus,
|
||||
.btn-primary:active:focus,
|
||||
.btn-primary.active:focus,
|
||||
.show > .btn-primary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
|
||||
}
|
||||
.btn-primary:disabled,
|
||||
.btn-primary.disabled {
|
||||
color: #fff;
|
||||
background-color: v.$button-primary-color;
|
||||
border-color: v.$button-primary-color;
|
||||
}
|
||||
|
||||
// Secondary button style
|
||||
.btn-secondary {
|
||||
color: v.$header-description-gray;
|
||||
background-color: inherit;
|
||||
border-color: v.$button-secondary-color;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
color: v.$header-description-gray;
|
||||
background-color: inherit;
|
||||
border-color: #565e64;
|
||||
}
|
||||
.btn-check:focus + .btn-secondary,
|
||||
.btn-secondary:focus {
|
||||
color: #fff;
|
||||
background-color: #b6bec3;
|
||||
border-color: #b6bec3;
|
||||
box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
|
||||
}
|
||||
.btn-check:checked + .btn-secondary,
|
||||
.btn-check:active + .btn-secondary,
|
||||
.btn-secondary:active,
|
||||
.btn-secondary.active,
|
||||
.show > .btn-secondary.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #b6bec3;
|
||||
border-color: #b6bec3;
|
||||
}
|
||||
.btn-check:checked + .btn-secondary:focus,
|
||||
.btn-check:active + .btn-secondary:focus,
|
||||
.btn-secondary:active:focus,
|
||||
.btn-secondary.active:focus,
|
||||
.show > .btn-secondary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
|
||||
}
|
||||
|
||||
.btn-secondary:disabled,
|
||||
.btn-secondary.disabled {
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.btn-chevrons-left {
|
||||
margin-top: 15px;
|
||||
margin-right: 6px;
|
||||
// height: 20px;
|
||||
}
|
||||
|
||||
.chevrons-left-margin {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.image-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
background-color: v.$nav-white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.help-nav-mobile {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
padding: v.$panel-split-padding-vertical 0;
|
||||
|
||||
.nav-button {
|
||||
z-index: 10;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-nav-content {
|
||||
list-style: none;
|
||||
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
|
||||
/* MOBILE PROPERTIES */
|
||||
// position: absolute;
|
||||
width: 320px;
|
||||
left: -420px;
|
||||
top: 61px;
|
||||
padding-top: 30px;
|
||||
|
||||
z-index: 3;
|
||||
|
||||
padding-right: 16px;
|
||||
// bottom: 32px;
|
||||
padding-bottom: 32px;
|
||||
transition: 0.3s;
|
||||
// max-height: calc(100vh - 80px);
|
||||
height: 100vh;
|
||||
max-height: calc(100vh - 130px - 75px);
|
||||
overflow-y: auto;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
color: #46535b;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #46535b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> li {
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
line-height: 0rem;
|
||||
|
||||
> a {
|
||||
p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 8px 0 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-links {
|
||||
list-style: none;
|
||||
display: block;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
a {
|
||||
margin-left: 24px;
|
||||
line-height: 1.8rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #ffffff;
|
||||
opacity: 0.5;
|
||||
border-radius: 6px;
|
||||
// width: 100%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.disabled-li-hover:hover {
|
||||
background: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused-menu {
|
||||
background-color: #ffffff;
|
||||
.active {
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-nav {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 40px rgb(0 0 0 / 25%);
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.help-nav-title {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.help-nav {
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
top: 65px;
|
||||
}
|
||||
|
||||
.root-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.help-nav-mobile {
|
||||
background-color: v.$nav-white;
|
||||
position: fixed;
|
||||
padding-bottom: 0;
|
||||
.nav-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.help-nav-content {
|
||||
position: fixed;
|
||||
box-shadow: none;
|
||||
left: 20px;
|
||||
background-color: v.$nav-white;
|
||||
padding-top: 0;
|
||||
top: 130px;
|
||||
> li {
|
||||
&.focused-menu {
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
.active {
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 700;
|
||||
}
|
||||
.disabled-menu {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-padding-top {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.help-page-elements {
|
||||
> img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
> h3 {
|
||||
scroll-margin-top: 70px;
|
||||
}
|
||||
> h2 {
|
||||
scroll-margin-top: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active {
|
||||
background-color: transparent;
|
||||
color: #006cb7;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.help-subheader-title {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 42px;
|
||||
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.help-nav-title {
|
||||
display: none;
|
||||
font-weight: 300;
|
||||
margin-top: 4rem;
|
||||
margin-left: 2rem;
|
||||
font-size: 1.5rem;
|
||||
color: #848c91;
|
||||
}
|
||||
|
||||
.anchor-margin {
|
||||
padding-top: 130px;
|
||||
}
|
||||
|
||||
.smaller-field {
|
||||
max-height: 350px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.help-main-container:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.active-subgroup {
|
||||
background: #e0e6ea;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.subarea-link.nav-link {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
#help-nav-small-font {
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
.subarea-link.nav-link.active {
|
||||
color: v.$navigation-maincolor !important;
|
||||
background-color: unset;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-link.ms-2.active {
|
||||
color: v.$navigation-maincolor !important;
|
||||
background-color: unset;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-pills .show > .nav-link {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.collapsed-content {
|
||||
max-height: 0;
|
||||
transition: max-height 0.4s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
.mc-button {
|
||||
border: 1px solid #b6bec4;
|
||||
border-radius: 4px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: center;
|
||||
background: #ffffff;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.mc-button:focus {
|
||||
box-shadow: 0 0 0 0.25rem #b6bec4;
|
||||
border: gray;
|
||||
}
|
||||
|
||||
.mc-button:focus-visible {
|
||||
box-shadow: 0 0 0 0.25rem #b6bec4;
|
||||
border: gray;
|
||||
}
|
||||
|
||||
.mc-buttons-group {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mc-center-img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: auto;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@use "../variables/variables" as v;
|
||||
@@ -0,0 +1,80 @@
|
||||
@use "../variables/variables" as v;
|
||||
@use "search-filter/search-filter-navigation" as sf;
|
||||
|
||||
// current footer size: 80px
|
||||
$navbarSize: calc(100vh - 130px - 72px); // 130px from top minus footer size
|
||||
|
||||
.slidable {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
// box-shadow: 9px 4px 33px rgba(0, 0, 0, 0.25);
|
||||
|
||||
/* MOBILE PROPERTIES */
|
||||
position: absolute;
|
||||
// width: 320px;
|
||||
width: sf.$sfPanelWidth;
|
||||
left: -420px;
|
||||
top: 61px;
|
||||
bottom: 0;
|
||||
padding-top: 30px;
|
||||
padding-right: 1rem;
|
||||
|
||||
z-index: 3;
|
||||
|
||||
// padding-right: 16px;
|
||||
// bottom: 32px;
|
||||
//padding-bottom: 32px;
|
||||
transition: 0.3s;
|
||||
height: 100vh;
|
||||
// max-height: calc(100vh - 80px);
|
||||
max-height: $navbarSize;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.slidable {
|
||||
position: fixed;
|
||||
box-shadow: none;
|
||||
left: 0;
|
||||
background-color: v.$nav-white;
|
||||
padding-top: 0;
|
||||
top: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.sel-anchr {
|
||||
> div {
|
||||
> img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: inline-block;
|
||||
align-self: start;
|
||||
margin-top: 0.33rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sel-anchr:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.advanced-input-label {
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
.min-content-height {
|
||||
height: min-content !important;
|
||||
}
|
||||
|
||||
.sf-correct {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.slidable-list {
|
||||
padding-right: 1rem;
|
||||
height: $navbarSize; // 1 rem offset to list it better
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
@use "../variables/variables" as v;
|
||||
@use "../common/common";
|
||||
|
||||
.search-root {
|
||||
/* not seen in mobile screens */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.search-root {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* DEVELOPMENT NOTE: CODE BELOW IS COPY PASTED FROM THE HOME PAGE, THIS CAN BE OTIMIZED */
|
||||
|
||||
/* GLOBAL DEFINITIONS */
|
||||
|
||||
/*
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.125rem;
|
||||
font-family: "Roboto", "Helvetica";
|
||||
}
|
||||
*/
|
||||
|
||||
a {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
html {
|
||||
/* rem definition 1rem = 16px */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* END GLOBAL DEFINITIONS */
|
||||
|
||||
/* MOBILE DEFINITIONS */
|
||||
|
||||
.logo-small {
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 48px;
|
||||
left: 29px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* END MOBILE ONLY DEFINITIONS */
|
||||
|
||||
.top-container {
|
||||
position: relative;
|
||||
background: v.$navigation-maincolor;
|
||||
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
|
||||
z-index: 600;
|
||||
}
|
||||
|
||||
.top-container-mobile-search {
|
||||
display: block;
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* END HERO TEXT */
|
||||
|
||||
/* NAVIGATION */
|
||||
|
||||
.main-nav-no-search {
|
||||
padding: 8px 0 8px 16px;
|
||||
|
||||
/* all links should not have standard decorations */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-search-section {
|
||||
flex-grow: 4;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
/*.nav {*/
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.nav-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: auto;
|
||||
min-width: min-content;
|
||||
max-width: max-content;
|
||||
margin: 0 0.625rem;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.threedots {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> button > *:first-child {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
a.dropodown-item {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.nav-entry > *:first-child {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* END NAVIGATION */
|
||||
|
||||
/* SEARCH BAR */
|
||||
|
||||
.search-root {
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background-color: v.$nav-white;
|
||||
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 6px;
|
||||
|
||||
> span {
|
||||
height: 100%;
|
||||
/*padding: 1.25rem 0;*/
|
||||
}
|
||||
|
||||
.searchbar-icon-container {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
margin: 0 18px;
|
||||
align-items: center;
|
||||
|
||||
.search_icon {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 100%;
|
||||
/*width: 55%;*/
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.search-button-keyboard {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin: 0 20px;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
line-height: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.dropdown-btn {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
/*margin-right: 1.25rem;*/
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* END MOBILE DEFINITIONS */
|
||||
|
||||
/****************** UTILS *******************/
|
||||
|
||||
/************ END UTILS ************************/
|
||||
|
||||
/************************************** AREA TO ADD TO THE HOME (PATCHES) **********************************/
|
||||
@@ -0,0 +1,31 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
.author-list-tooltip {
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: 0.75rem !important;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
> .tooltip-inner {
|
||||
max-width: 450px;
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
color: v.$header-description-gray;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 6px;
|
||||
}
|
||||
> .tooltip-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
margin-right: 20px;
|
||||
padding: 10px;
|
||||
list-style-type: none;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
@use "../../variables/variables" as v;
|
||||
|
||||
.text-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.results-secton-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.result-item-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bgmsg {
|
||||
padding: 0.25rem;
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
border-radius: 2px;
|
||||
height: 1.375rem;
|
||||
width: 1.375rem;
|
||||
}
|
||||
|
||||
#res-panel {
|
||||
div {
|
||||
span {
|
||||
a {
|
||||
// color: black;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
a.selected {
|
||||
padding: 0 12px;
|
||||
color: v.$navigation-maincolor;
|
||||
border-bottom: 3px solid v.$navigation-maincolor;
|
||||
/*text-decoration: underline;
|
||||
text-decoration-thickness: 3px;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rl {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
padding-top: 6px;
|
||||
padding-left: 6px;
|
||||
|
||||
// * {
|
||||
// word-break: normal;
|
||||
// }
|
||||
|
||||
&:visited {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
$padding-rsl-height: 2px;
|
||||
|
||||
.anchor {
|
||||
position: absolute;
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
// margin-bottom: 1rem;
|
||||
|
||||
li:not(li:first-child) {
|
||||
margin-top: 6px;
|
||||
line-height: 18px;
|
||||
|
||||
p {
|
||||
// height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.rsfs {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
$rfl-width: 28px;
|
||||
$rfl-height: 18px;
|
||||
|
||||
li {
|
||||
// height: $rfl-height + 2px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.results-item-language {
|
||||
text-align: end;
|
||||
.ex-span {
|
||||
height: 1.375rem;
|
||||
width: 1.375rem;
|
||||
display: inline-block;
|
||||
// width: 28px;
|
||||
// max-width: 48px;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
padding: 0 0.1rem;
|
||||
background-color: v.$gray-2;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
font-weight: 500;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
.results-foreign-languages {
|
||||
display: flex;
|
||||
width: $rfl-width;
|
||||
height: $rfl-height;
|
||||
}
|
||||
|
||||
.rsl-ph {
|
||||
height: 18px + 2 * $padding-rsl-height; // font size + 2* padding
|
||||
}
|
||||
}
|
||||
|
||||
.results-foreign-terms {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
// display: block;
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
> ul {
|
||||
@media (max-width: v.$layout-breakpoint-large) {
|
||||
padding-top: 0.3rem !important;
|
||||
margin-left: 1.5rem !important;
|
||||
}
|
||||
> li {
|
||||
display: block;
|
||||
|
||||
@media (max-width: v.$layout-breakpoint-large) {
|
||||
padding-top: 0.3rem !important;
|
||||
}
|
||||
|
||||
* {
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.language-icon-seperator {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.lang-h {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
height: 1.25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.term-h {
|
||||
justify-content: start;
|
||||
display: flex;
|
||||
// height: 18px;
|
||||
align-items: center;
|
||||
|
||||
b {
|
||||
// text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.syn-h {
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
font-size: 1rem;
|
||||
justify-content: start;
|
||||
display: flex;
|
||||
height: 18px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lh-18px {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.vw-18px {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.rihw {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
color: v.$navigation-maincolor;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hspcf {
|
||||
// height: 22px;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
.risy {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
}
|
||||
|
||||
.results-sources {
|
||||
height: 1.375rem;
|
||||
|
||||
$rssColor: v.$gray-2;
|
||||
.results-dict {
|
||||
height: 1.375rem;
|
||||
word-break: keep-all;
|
||||
padding: 0 4px;
|
||||
background-color: $rssColor;
|
||||
border: 2px solid $rssColor;
|
||||
color: #fff;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.results-portal {
|
||||
height: 1.375rem;
|
||||
word-break: keep-all;
|
||||
padding: 0 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
border-radius: 2px;
|
||||
|
||||
&.te {
|
||||
color: v.$gray-1;
|
||||
border: 2px solid $rssColor;
|
||||
// color: #fb6f28;
|
||||
// border: 2px solid #fb6f28;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: v.$layout-breakpoint-large) {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
}
|
||||
.res-domain {
|
||||
color: v.$header-title-gray;
|
||||
font-size: 0.875rem;
|
||||
|
||||
@media (max-width: v.$layout-breakpoint-large) {
|
||||
margin-top: 0.6rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ls {
|
||||
margin: 0 !important;
|
||||
.rsc {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
.results-comments {
|
||||
@media (max-width: v.$layout-breakpoint-large) {
|
||||
display: flex !important;
|
||||
flex-grow: 1;
|
||||
margin-right: 0 !important;
|
||||
padding-right: 0;
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@use "../../variables/variables" as v;
|
||||
|
||||
.rdsm {
|
||||
list-style: none;
|
||||
//box-shadow: 9px 4px 33px rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
left: -420px;
|
||||
top: 61px;
|
||||
z-index: 3;
|
||||
|
||||
li {
|
||||
&:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
margin-top: 24px;
|
||||
font-size: 0.85rem;
|
||||
|
||||
> * {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.portal-info {
|
||||
margin-top: 5px;
|
||||
.portal-code {
|
||||
border: 2px solid #fb6f28;
|
||||
color: #fb6f28;
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.portal-name {
|
||||
color: #fb6f28;
|
||||
}
|
||||
}
|
||||
|
||||
.dict-name {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
> * {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.result-detail-main {
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.rdsm {
|
||||
position: fixed;
|
||||
//box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
left: 34px;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
// top: 130px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
@use "../../variables/variables" as v;
|
||||
|
||||
.search-suggestion-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.advanced-search-root {
|
||||
/*display: flex;*/
|
||||
flex-direction: column;
|
||||
/*position: absolute;*/
|
||||
/*top: 64px + 83px;*/
|
||||
left: 0;
|
||||
right: 0;
|
||||
/*bottom: 0;*/
|
||||
|
||||
padding: 2rem;
|
||||
z-index: 1000;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
> * {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.advanced-search-options {
|
||||
display: flex;
|
||||
max-width: 500px;
|
||||
|
||||
div {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-content: center;
|
||||
|
||||
> span {
|
||||
:nth-child(2) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-search-filter-section {
|
||||
> span:not(.advanced-search-filter-division) {
|
||||
margin: 16px 0;
|
||||
/*border-bottom: 4px solid v.$gray-2;*/
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* SELECT 2 LIBRARY OPTIMIZATIONS */
|
||||
.select2-selection {
|
||||
border: none; /* disable previous border */
|
||||
border-bottom: 3px solid v.$gray-2;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.advanced-input-label {
|
||||
position: absolute;
|
||||
transition-duration: 0.3s;
|
||||
|
||||
&.jumped {
|
||||
bottom: 44px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.resizable {
|
||||
display: block;
|
||||
width: 100%;
|
||||
input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
background: none;
|
||||
/*outline: none;*/
|
||||
}
|
||||
|
||||
&.selected {
|
||||
}
|
||||
}
|
||||
|
||||
span#area,
|
||||
span#dict,
|
||||
span#source,
|
||||
span#consultant {
|
||||
position: relative; /* combination with right 0 on button*/
|
||||
}
|
||||
|
||||
.advanced-search-filter-division {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 12px;
|
||||
|
||||
> span {
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
//border-bottom: 4px solid v.$gray-2;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
span.sf-label {
|
||||
span {
|
||||
display: block;
|
||||
width: 300px;
|
||||
top: 0px;
|
||||
color: v.$gray-1;
|
||||
z-index: -10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
> span {
|
||||
> span {
|
||||
> {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.omrs-input-group {
|
||||
border-bottom: 0.125rem solid v.$border-bottom-inputs;
|
||||
.tags-root {
|
||||
/*border-bottom: 0.125rem solid v.$border-bottom-inputs;*/
|
||||
align-self: flex-end;
|
||||
.search-filter-keyword-item {
|
||||
display: inline-flex;
|
||||
min-width: 20px;
|
||||
background-color: v.$side-nav-mobile-color;
|
||||
flex-grow: 10;
|
||||
|
||||
span {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
button {
|
||||
&:hover {
|
||||
background-color: v.$gray-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-search-final-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> * {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
|
||||
> button {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
text-align: center;
|
||||
justify-content: center; /* for the flex buttons*/
|
||||
align-items: center;
|
||||
color: #848c90;
|
||||
//border: 1px solid #848c90;
|
||||
border-radius: 6px;
|
||||
background-color: v.$nav-white;
|
||||
|
||||
&.clear-f {
|
||||
border: 1px solid #dadada;
|
||||
}
|
||||
|
||||
&.search-btn-a {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
background-color: v.$navigation-maincolor;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* MEDIA SCREEN */
|
||||
/*
|
||||
|
||||
Note that you have a home page of advanced screen popup and a navigation screen with a popup
|
||||
|
||||
*/
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.advanced-search-root {
|
||||
/*top: 350px;*/
|
||||
// height: 500px;
|
||||
// width: 39rem;
|
||||
// margin: 0 auto;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
|
||||
.advanced-search-final-options {
|
||||
button {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-search-filter-section {
|
||||
.advanced-search-filter-division {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
> span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
@use "../../variables/variables" as v;
|
||||
@use "sass:math";
|
||||
|
||||
@mixin scrollbars(
|
||||
$size,
|
||||
$foreground-color,
|
||||
$background-color: mix(v.$foreground-color, white, 50%)
|
||||
) {
|
||||
// For Google Chrome
|
||||
&::-webkit-scrollbar {
|
||||
width: math.div($size, 1.3);
|
||||
// Jure at one point changed previous line to:
|
||||
// width: math.floor($size / 1.3);
|
||||
// However this sintax is deprecated.
|
||||
// Reenable with good reason or better yet, find a better (non-deprecated) alternative.
|
||||
height: $size;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $foreground-color;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $background-color;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// For Internet Explorer
|
||||
& {
|
||||
scrollbar-face-color: $foreground-color;
|
||||
scrollbar-track-color: $background-color;
|
||||
}
|
||||
|
||||
scrollbar-color: $background-color $foreground-color;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#modal-filter-label {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.maincolor-text {
|
||||
color: v.$navigation-maincolor !important;
|
||||
}
|
||||
|
||||
.clear-filter-modal-section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-modal-filter {
|
||||
display: flex;
|
||||
background-color: #ecf0f3;
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
margin: 25px 0;
|
||||
|
||||
* {
|
||||
display: flex;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 100;
|
||||
flex-grow: fill;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.nav-modal-section-content {
|
||||
@include scrollbars(10px, v.$navigation-maincolor, #e6e6e6);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
// height: 364px;
|
||||
overflow-y: scroll;
|
||||
|
||||
* {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
line-height: 1.7rem;
|
||||
|
||||
.nav-modal-content-desc {
|
||||
padding-left: 14px;
|
||||
flex: 100;
|
||||
color: #848c90;
|
||||
}
|
||||
|
||||
.nav-modal-content-desc.checked {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
//padding-top: 0.4rem;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* only the last child of a */
|
||||
> :last-child {
|
||||
margin-right: 32px;
|
||||
color: #848c90;
|
||||
}
|
||||
|
||||
> div {
|
||||
max-width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
margin-left: 12px;
|
||||
flex-grow: 100;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.search-modal-header-root {
|
||||
margin-top: 14px;
|
||||
flex-direction: row-reverse;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
|
||||
.clear-filter-modal-root {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.nav-modal-section-content {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
|
||||
.clear-filter-section {
|
||||
}
|
||||
|
||||
|
||||
*/
|
||||
|
||||
.search-modal-filter {
|
||||
max-width: 342px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
* {
|
||||
}
|
||||
|
||||
input {
|
||||
}
|
||||
|
||||
img {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-large) {
|
||||
.search-modal-filter {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
@use "../../variables/variables" as v;
|
||||
|
||||
$sfPanelWidth: 24rem;
|
||||
/* UPDATES TO THE SIDE MENU */
|
||||
|
||||
.search-filter-nav-mobile {
|
||||
}
|
||||
|
||||
.search-filter-nav-content {
|
||||
padding-right: 2rem;
|
||||
position: absolute;
|
||||
//padding-top: 38px;
|
||||
padding-left: 0; // !important;
|
||||
max-width: $sfPanelWidth;
|
||||
box-shadow: none;
|
||||
left: 0;
|
||||
background-color: v.$nav-white;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.search-filter-nav-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-filter-nav-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ******************* */
|
||||
|
||||
v.$padding-left-nav: 1rem;
|
||||
|
||||
.clear-filter-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-top: 16px;
|
||||
// padding-left: v.$padding-left-nav;
|
||||
color: v.$navigation-maincolor !important;
|
||||
align-content: center;
|
||||
font-weight: 200;
|
||||
|
||||
img {
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
// padding-left: v.$padding-left-nav;
|
||||
/*padding-top: 28px;*/
|
||||
padding-top: 0;
|
||||
//padding-right: 24px;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-section-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
color: v.$navigation-maincolor;
|
||||
padding-bottom: 10px;
|
||||
|
||||
* {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
display: inline-block;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
span.btn-area {
|
||||
display: flex;
|
||||
border: none;
|
||||
background: none;
|
||||
padding-right: 0;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
||||
.select-more-text,
|
||||
div {
|
||||
font-size: 0.75rem;
|
||||
/*padding-right: 10px;*/
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select-more-text {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 10px;
|
||||
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showall {
|
||||
color: v.$navigation-maincolor;
|
||||
margin-top: 0.6rem;
|
||||
img {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
align-self: center;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: v.$navigation-maincolor;
|
||||
font-size: 0.9rem;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
|
||||
* {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
line-height: 1.7rem;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
|
||||
:first-child {
|
||||
// padding-top: 0.2rem;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
margin-left: 12px;
|
||||
flex-grow: 100;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 108px;
|
||||
background-color: #fff;
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.use {
|
||||
width: 164px;
|
||||
}
|
||||
}
|
||||
|
||||
.optional-floating-action-button {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.sf-min-h {
|
||||
min-height: 600px;
|
||||
background-color: v.$nav-white;
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
/*.nav-section {
|
||||
padding-top: 28px;
|
||||
}*/
|
||||
|
||||
//.search-filter-nav-content {
|
||||
//position: fixed;
|
||||
//}
|
||||
|
||||
.clear-filter-section {
|
||||
// margin-top: 43px;
|
||||
// padding-left: v.$padding-left-nav;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
/*$gray: #c4c4c4;
|
||||
$gray-stronger: #848c90;
|
||||
$gray-darker: #46535b;
|
||||
*/
|
||||
$modal-padding: 48px;
|
||||
.color-primary-text {
|
||||
color: v.$navigation-maincolor !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: v.$navigation-maincolor !important;
|
||||
}
|
||||
|
||||
.dark-gray-text {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
.h41 {
|
||||
height: 41px !important;
|
||||
}
|
||||
|
||||
.w151 {
|
||||
width: 151px !important;
|
||||
}
|
||||
|
||||
.no-bg-and-borders {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* fade effect - Note structure must be consistent!!! */
|
||||
body.modal-open .no-modal {
|
||||
-webkit-filter: blur(3px);
|
||||
-moz-filter: blur(3px);
|
||||
-o-filter: blur(3px);
|
||||
-ms-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 20px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.padding-right-25 {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.padding-left-25 {
|
||||
padding-left: 25px !important;
|
||||
}
|
||||
|
||||
/* FORM */
|
||||
|
||||
.input-floor {
|
||||
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.6);
|
||||
}
|
||||
|
||||
.register-login-form {
|
||||
/*padding: 0 $modal-padding;*/
|
||||
|
||||
input {
|
||||
font-size: 1.6rem;
|
||||
height: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-login-signup {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid v.$gray-C4;
|
||||
padding-left: 0;
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
.form-icon-data-seperator {
|
||||
display: flex;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-data {
|
||||
display: block;
|
||||
flex: 1 0;
|
||||
}
|
||||
|
||||
.login-register-btn {
|
||||
margin: 10px 64px 0;
|
||||
border-radius: 29px;
|
||||
width: 150px;
|
||||
/*background-color: $primary-color1;*/
|
||||
}
|
||||
|
||||
.registration {
|
||||
width: 100%;
|
||||
|
||||
h6 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
font-weight: 300;
|
||||
color: v.$header-title-gray;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.font-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
form#login-form,
|
||||
form#register-form {
|
||||
.row {
|
||||
.error-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-bottom: 0.6rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: v.$error-red;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
padding-top: 4px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logintitle,
|
||||
.regtitle {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#staticBackdrop {
|
||||
* {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.loginregisterlabel {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.rememberloginlabel {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 41px;
|
||||
border-radius: 29px;
|
||||
}
|
||||
|
||||
.forgotten-password {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.loginregisterlabel {
|
||||
-webkit-transition: 0.4s ease-in-out;
|
||||
-moz-transition: 0.4s ease-in-out;
|
||||
-o-transition: 0.4s ease-in-out;
|
||||
transition: 0.4s ease-in-out;
|
||||
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
top: 1.1rem;
|
||||
font-size: 1rem;
|
||||
color: rgba($color: #000000, $alpha: 0.6);
|
||||
}
|
||||
|
||||
#login-form,
|
||||
#register-form {
|
||||
.row {
|
||||
}
|
||||
|
||||
input {
|
||||
z-index: 2;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pspelogsig-5 {
|
||||
}
|
||||
|
||||
.input-lr:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 756px) {
|
||||
#logreg-mb {
|
||||
#login-form,
|
||||
#register-form {
|
||||
.row {
|
||||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
#logreg-mb {
|
||||
.pspelogsig-5 {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
#login-form,
|
||||
#register-form {
|
||||
.d-flex-and-align-end {
|
||||
display: flex !important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@use "variables/variables" as v;
|
||||
@use "common/basic-includes";
|
||||
@use "common/common";
|
||||
@use "common/comments-includes";
|
||||
@use "common/dictionaries-includes";
|
||||
@use "common/index-definitions";
|
||||
@use "common/keyboard";
|
||||
@use "common/material-input";
|
||||
@use "common/mixins";
|
||||
@use "components/search-filter/search-filter-advanced-popup";
|
||||
@use "components/search-filter/search-filter-modal";
|
||||
@use "components/search-filter/search-filter-navigation";
|
||||
@use "components/search-filter/res-panel";
|
||||
@use "components/search-filter/result-detail";
|
||||
@use "components/admin-main";
|
||||
@use "components/admin-side-menu";
|
||||
@use "components/comments-main";
|
||||
@use "components/content-main";
|
||||
@use "components/content-side-menu";
|
||||
@use "components/consultancy-main";
|
||||
@use "components/dictionaries-main";
|
||||
@use "components/extraction-main";
|
||||
@use "components/footer";
|
||||
@use "components/header-section";
|
||||
@use "components/notification";
|
||||
@use "components/side-menu";
|
||||
@use "components/toolbar";
|
||||
@use "components/tooltips";
|
||||
@use "text/text-styles";
|
||||
@use "login-signup/login-signup";
|
||||
@use "components/help";
|
||||
@use "components/mixed-content";
|
||||
@use "components/content-header-section";
|
||||
@@ -0,0 +1,183 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
.page-description {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 0.875rem;
|
||||
line-height: 150%;
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
.gray-info {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 0.875rem;
|
||||
line-height: 150%;
|
||||
color: v.$header-title-gray;
|
||||
}
|
||||
|
||||
.bold-weight-black {
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
.normal-gray {
|
||||
font: Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 19px;
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
.smaller-gray-uppercase {
|
||||
font-size: 0.75rem;
|
||||
line-height: 14px;
|
||||
/* identical to box height */
|
||||
text-transform: uppercase;
|
||||
color: v.$header-title-gray;
|
||||
}
|
||||
|
||||
.smaller-black-uppercase {
|
||||
font-size: 0.875rem;
|
||||
line-height: 14px;
|
||||
color: v.$header-description-gray;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.smaller-gray-info {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 0.875rem;
|
||||
line-height: 150%;
|
||||
color: v.$header-title-gray;
|
||||
}
|
||||
|
||||
.smaller-blue-subheading {
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.normal-gray-label {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
line-height: 19px;
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
.table-left-header {
|
||||
font-size: 1.125rem;
|
||||
line-height: 27px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.side-menu-heading {
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
line-height: 28px;
|
||||
color: #848c91;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.small-blue-text {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
line-height: 19px;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.bold-blue-text {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 19px;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.heavy-black-text {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
line-height: 16px;
|
||||
color: #3a464e;
|
||||
}
|
||||
|
||||
.modal-title-blue {
|
||||
font-size: 1.5rem;
|
||||
line-height: 28px;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.bold-blue-subheading {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.smaller-black-info {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: #3a464e;
|
||||
}
|
||||
|
||||
.normal-red-note {
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
line-height: 21px;
|
||||
color: #d12525;
|
||||
}
|
||||
|
||||
.heavy-gray-text {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.no-text-decoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.text-p625rem {
|
||||
font-size: 0.625rem !important;
|
||||
}
|
||||
|
||||
.text-p875rem {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
/*
|
||||
.text-1p1rem {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
*/
|
||||
|
||||
.text-1p125rem {
|
||||
font-size: 1.125rem !important;
|
||||
}
|
||||
|
||||
.text-1p3rem {
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
|
||||
.text-1p5rem {
|
||||
/* font size 24 in initial screen*/
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.gray1-text {
|
||||
color: v.$gray-1;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/* MAIN DEFINITIONS */
|
||||
|
||||
$root-em: 16px;
|
||||
|
||||
/* COLORS */
|
||||
$navigation-maincolor: #006cb7;
|
||||
|
||||
$nav-white: #f5f5f5;
|
||||
$full-white: #ffffff;
|
||||
$white-1: #ecf0f3;
|
||||
$side-nav-mobile-color: #e0e6ea;
|
||||
|
||||
$nav-gray: #ebebeb;
|
||||
$header-title-gray: #848c91;
|
||||
$header-description-gray: #46535b;
|
||||
$gray-1: #848c90;
|
||||
$gray-2: #b6bec3;
|
||||
$gray-3: #d9d9d9;
|
||||
$gray-C4: #c4c4c4;
|
||||
$error-red: #d12525;
|
||||
|
||||
$logged-in-green: #6cf3ab;
|
||||
$dark-gray-1: #3a464e;
|
||||
|
||||
$border-bottom-inputs: rgba(19, 19, 21, 0.6);
|
||||
|
||||
/* BREAKPOINT */
|
||||
|
||||
$layout-breakpoint-small: 576px;
|
||||
$layout-breakpoint-medium: 768px;
|
||||
$layout-breakpoint-large: 992px;
|
||||
$layout-breakpoint-x-large: 1200px;
|
||||
|
||||
/* BUTTONS AND TEXTS */
|
||||
|
||||
$text-primary-color: $nav-white;
|
||||
$button-maincolor: $navigation-maincolor;
|
||||
|
||||
$button-primary-color: $navigation-maincolor;
|
||||
$button-secondary-color: $gray-2;
|
||||
|
||||
/* CUSTOM RULES */
|
||||
|
||||
$panel-split-padding-vertical: 16px;
|
||||
$padding-left-nav: 32px;
|
||||
|
||||
/* WORK LINE */
|
||||
Reference in New Issue
Block a user