Initial commit
This commit is contained in:
Luka Romih
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user