Initial commit
This commit is contained in:
Luka Romih
@@ -0,0 +1,8 @@
|
||||
@use "../components/toolbar";
|
||||
@use "../components/header-section";
|
||||
@use "../components/admin-side-menu";
|
||||
@use "../components/admin-main";
|
||||
@use "../components/extraction-main";
|
||||
@use "../components/dictionaries-main";
|
||||
@use "../text/text-styles.scss";
|
||||
@use "../components/footer";
|
||||
@@ -0,0 +1,6 @@
|
||||
@use "../components/toolbar";
|
||||
@use "../components/header-section";
|
||||
@use "../components/admin-side-menu";
|
||||
@use "../components/comments-main";
|
||||
@use "../components/footer";
|
||||
@use "../text/text-styles";
|
||||
@@ -0,0 +1,519 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
* {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// input:focus-visible,
|
||||
// button:focus-visible,
|
||||
// button:focus {
|
||||
// outline: none !important;
|
||||
// box-shadow: none !important;
|
||||
// }
|
||||
|
||||
.outline {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.index-font-size {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: v.$error-red;
|
||||
}
|
||||
|
||||
.text-header-title-gray {
|
||||
color: v.$header-title-gray;
|
||||
}
|
||||
|
||||
.text-header-description-gray {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
|
||||
.text-gray-1 {
|
||||
color: v.$gray-1;
|
||||
}
|
||||
|
||||
.text-gray-2 {
|
||||
color: v.$gray-2;
|
||||
}
|
||||
|
||||
.text-blue-info-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.long-text-strip {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.px-10-large {
|
||||
padding: 0 10rem;
|
||||
}
|
||||
|
||||
.px-20-large {
|
||||
@media (min-width: 1200px) {
|
||||
padding: 0 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.fs-075rem {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.toperr {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.h-41 {
|
||||
display: block;
|
||||
height: 41px !important;
|
||||
}
|
||||
|
||||
.navigation-text-color {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
.height50 {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
.pl-12px {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.i1rx1r {
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
}
|
||||
|
||||
.i1p5rx1p5r {
|
||||
height: 1.5rem !important;
|
||||
width: 1.5rem !important;
|
||||
}
|
||||
|
||||
.i16x16 {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
.i18x18 {
|
||||
height: 18px !important;
|
||||
width: 18px !important;
|
||||
}
|
||||
|
||||
.i24x24 {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
}
|
||||
|
||||
.i32x32 {
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
}
|
||||
|
||||
.height60 {
|
||||
height: 60px !important;
|
||||
}
|
||||
|
||||
.width350 {
|
||||
width: 350px !important;
|
||||
}
|
||||
|
||||
.w24rem {
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
.w30rem {
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
.search-bar-navigation-container {
|
||||
width: 30rem !important;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
width: 40rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.strength500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: list-item !important;
|
||||
}
|
||||
|
||||
.nav-bg {
|
||||
background-color: v.$nav-white !important;
|
||||
}
|
||||
|
||||
.d-none-weak {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-2 {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.z-20 {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.fit-content {
|
||||
width: fit-content !important;
|
||||
}
|
||||
|
||||
.text-1p5rem {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.fw-300 {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.fw-400 {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.fw-500 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.text-break {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.placeholder-gray {
|
||||
&::placeholder {
|
||||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: v.$gray-1;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: v.$gray-1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: v.$gray-1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::-ms-input-placeholder {
|
||||
/* Microsoft Edge */
|
||||
color: v.$gray-1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.children-pspe-4 {
|
||||
> * {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
> li:hover {
|
||||
color: #1e2125;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
}
|
||||
|
||||
.children-pt-pb-1 {
|
||||
> * {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ul-children-hover {
|
||||
> li:hover {
|
||||
color: #1e2125;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
}
|
||||
|
||||
.noHoverBGEffect {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.jumped-common {
|
||||
-webkit-transition: 0.4s ease-in-out;
|
||||
-moz-transition: 0.4s ease-in-out;
|
||||
-o-transition: 0.4s ease-in-out;
|
||||
transition: 0.4s ease-in-out;
|
||||
|
||||
-webkit-transform: translateY(-0.4rem) scale(0.6);
|
||||
transform: translateY(-0.4rem) scale(0.6); // 0.75 is on google
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.text-header-description-gray {
|
||||
color: v.$header-description-gray;
|
||||
}
|
||||
*/
|
||||
|
||||
.border1px-gray-2 {
|
||||
border: 1px solid v.$gray-2;
|
||||
}
|
||||
|
||||
.ps-2rem {
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
|
||||
.noScrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resizeNone {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.min-height-0 {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.no-flex {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
.d-flex-and-align-end {
|
||||
display: flex !important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.green-dot {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 25px;
|
||||
bottom: 15px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: v.$logged-in-green;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.no-bg {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.pager {
|
||||
white-space: nowrap;
|
||||
|
||||
* {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 25%;
|
||||
}
|
||||
|
||||
.pager-input {
|
||||
width: 54px;
|
||||
height: 38px;
|
||||
border: 2px solid v.$gray-2;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.long-hr-gray-3 {
|
||||
background-color: v.$gray-3;
|
||||
height: 2px !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.short-hr-gray-3 {
|
||||
background-color: v.$gray-3;
|
||||
height: 1px !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.disabled-opacity {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
///// RESPONSIVE
|
||||
|
||||
.w-90 {
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.long-text-wrap-r {
|
||||
display: block;
|
||||
// width: 8ch;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
word-wrap: normal;
|
||||
|
||||
/*
|
||||
@media (min-width: 420px) {
|
||||
width: 12ch;
|
||||
}
|
||||
@media (min-width: 750px) {
|
||||
width: 25ch;
|
||||
}
|
||||
@media (min-width: 990px) {
|
||||
width: 12ch;
|
||||
}
|
||||
@media (min-width: 1750px) {
|
||||
width: 100%;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.margin-md-minus-1-rem {
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.long-text-strip-r {
|
||||
display: block;
|
||||
// width: 8ch;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/*
|
||||
@media (min-width: 420px) {
|
||||
width: 12ch;
|
||||
}
|
||||
@media (min-width: 750px) {
|
||||
width: 25ch;
|
||||
}
|
||||
@media (min-width: 990px) {
|
||||
width: 12ch;
|
||||
}
|
||||
@media (min-width: 1750px) {
|
||||
width: 100%;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.d-none-on-big {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.termin-offset-up-wide {
|
||||
top: 85px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-2rem {
|
||||
margin-left: 2rem !important;
|
||||
margin-right: 2rem !important;
|
||||
}
|
||||
|
||||
.mx-max-md-2rem {
|
||||
@media (max-width: v.$layout-breakpoint-medium) {
|
||||
margin-left: 2rem !important;
|
||||
margin-right: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-max-lg-2rem {
|
||||
@media (max-width: v.$layout-breakpoint-large) {
|
||||
margin-left: 2rem !important;
|
||||
margin-right: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-max-xl-2rem {
|
||||
@media (max-width: v.$layout-breakpoint-x-large) {
|
||||
margin-left: 2rem !important;
|
||||
margin-right: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bg {
|
||||
background-color: v.$header-description-gray !important;
|
||||
}
|
||||
|
||||
@mixin common-footer {
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.wide-footer {
|
||||
display: flex;
|
||||
@include common-footer;
|
||||
.txt {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
$padding-wide: 3rem;
|
||||
img.rsmzk {
|
||||
height: 30px;
|
||||
padding-left: $padding-wide;
|
||||
}
|
||||
|
||||
img.ekp {
|
||||
height: 56px;
|
||||
padding-right: $padding-wide;
|
||||
}
|
||||
}
|
||||
.narrow-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: v.$layout-breakpoint-x-large) {
|
||||
.narrow-footer {
|
||||
@include common-footer;
|
||||
.txt {
|
||||
font-size: 0.625rem !important;
|
||||
}
|
||||
|
||||
$padding-narrow: 1.5rem;
|
||||
.padding-for-mobile-footer {
|
||||
padding: 0 $padding-narrow;
|
||||
}
|
||||
|
||||
img.rsmzk {
|
||||
height: 24px;
|
||||
padding-left: $padding-narrow;
|
||||
}
|
||||
|
||||
img.ekp {
|
||||
height: 42px;
|
||||
padding-right: $padding-narrow;
|
||||
}
|
||||
}
|
||||
.wide-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@use "../components/toolbar";
|
||||
@use "../components/header-section";
|
||||
@use "../components/admin-side-menu";
|
||||
@use "../components/dictionaries-main";
|
||||
@use "../components/footer";
|
||||
@@ -0,0 +1,458 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
/* GLOBAL DEFINITIONS */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-family: "Roboto", "Helvetica";
|
||||
}
|
||||
|
||||
a {
|
||||
color: v.$navigation-maincolor;
|
||||
}
|
||||
|
||||
html {
|
||||
/* rem definition 1rem = 16px */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* END GLOBAL DEFINITIONS */
|
||||
|
||||
.w-39rem {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.w-650px {
|
||||
width: 650px !important;
|
||||
}
|
||||
|
||||
.tlr-0 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.calibrate-homepage-sr {
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
.calibrate-navigation-sr {
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
.calibrate-consultancy-sr {
|
||||
top: -5px;
|
||||
left: 0px;
|
||||
right: -24px;
|
||||
}
|
||||
|
||||
.bigsearch {
|
||||
top: -4px !important;
|
||||
}
|
||||
|
||||
/* MOBILE DEFINITIONS */
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 48px;
|
||||
left: 29px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* MOBILE ONLY DEFINITIONS */
|
||||
.gray-responsive-bg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
min-height: 83px;
|
||||
width: 100%;
|
||||
background: #46535b;
|
||||
* {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.signintxt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menutxt {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.language-desktop-entry {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* END MOBILE ONLY DEFINITIONS */
|
||||
|
||||
.topContainer {
|
||||
display: inline-block; /* TODO */
|
||||
|
||||
width: 100%;
|
||||
background: v.$navigation-maincolor;
|
||||
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* HERO TEXT */
|
||||
|
||||
.hero-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* END HERO TEXT */
|
||||
|
||||
/* NAVIGATION */
|
||||
|
||||
.index-nav {
|
||||
padding: 8px 0 8px 16px;
|
||||
|
||||
/* all links should not have standard decorations */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
/* display: block; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
|
||||
&:first-child {
|
||||
width: 30%;
|
||||
}
|
||||
&:last-child {
|
||||
width: 68%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
/*.nav {*/
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.nav-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: auto;
|
||||
min-width: min-content;
|
||||
max-width: max-content;
|
||||
margin: 0 0.625rem;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.threedots {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> button > *:first-child {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.nav-entry > *:first-child {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
/*
|
||||
#dropdownMenuButton1 > img {
|
||||
margin-right: 0.625rem;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* END NAVIGATION */
|
||||
|
||||
/* SEARCH BAR */
|
||||
|
||||
@mixin search-root-mobile {
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background-color: v.$nav-white;
|
||||
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 6px;
|
||||
|
||||
> span {
|
||||
height: 100%;
|
||||
/*padding: 1.25rem 0;*/
|
||||
}
|
||||
|
||||
.searchbar-icon-container {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
margin: 0 1rem;
|
||||
align-items: center;
|
||||
|
||||
.search_icon {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 100%;
|
||||
/*width: 55%;*/
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.search-button-keyboard {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin: 0 20px;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
line-height: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.dropdown-btn {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20px;
|
||||
align-items: center;
|
||||
/*margin-right: 1.25rem;*/
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* This one has widescreen special options */
|
||||
.search-root-main {
|
||||
@include search-root-mobile;
|
||||
}
|
||||
|
||||
/* This one is for always mobile size, even widescreen */
|
||||
.search-root-mobile-only {
|
||||
@include search-root-mobile;
|
||||
}
|
||||
|
||||
/* END SEARCH BAR */
|
||||
|
||||
.descriptionArea {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* END MOBILE DEFINITIONS */
|
||||
|
||||
/* medium break */
|
||||
@media (min-width: v.$layout-breakpoint-medium) {
|
||||
.hero-text {
|
||||
display: block;
|
||||
font-size: 3.875rem;
|
||||
font-weight: 100;
|
||||
color: #d9d9d9;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calibrate-homepage-sr {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.signintxt {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menutxt {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.language-desktop-entry {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.topContainer {
|
||||
min-height: 419px;
|
||||
height: auto;
|
||||
/*background: v.$navigation-maincolor;*/
|
||||
/*box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);*/
|
||||
}
|
||||
|
||||
/* MOBILE ONLY DEFINITIONS */
|
||||
.gray-responsive-bg {
|
||||
//display: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* END MOBILE ONLY DEFINITIONS */
|
||||
|
||||
/* LOGO ICON */
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 84px;
|
||||
left: 40px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.index-nav {
|
||||
padding: 35px 24px 35px 40px;
|
||||
|
||||
* {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
.container {
|
||||
.nav-entry {
|
||||
display: flex;
|
||||
min-width: 1.875rem;
|
||||
/* min-height: 5rem; /* DON'T UNCOMMENT, THIS KILLS THE LAYOUT */
|
||||
font-size: 1rem;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
min-height: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* END NAVIGATION */
|
||||
|
||||
/* SEARCH BAR */
|
||||
.search-root-main {
|
||||
margin: 40px auto;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
/*width: 100%;
|
||||
max-width: 40.625rem;
|
||||
min-width: 21.875rem;*/
|
||||
width: 39rem;
|
||||
height: 80px;
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 6px;
|
||||
|
||||
/*
|
||||
&:focus {
|
||||
outline: #46535b solid 10px;
|
||||
}
|
||||
*/
|
||||
|
||||
> span {
|
||||
height: 100%;
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.searchbar-icon-container {
|
||||
width: 1.25rem;
|
||||
margin: 0 1.25rem;
|
||||
}*/
|
||||
|
||||
.search-input {
|
||||
width: 440px;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.search-button-keyboard {
|
||||
margin: 0 20px;
|
||||
width: 25px;
|
||||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.descriptionArea {
|
||||
width: 48rem;
|
||||
padding: 5rem 2rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.w-39rem {
|
||||
width: 39rem !important;
|
||||
}
|
||||
|
||||
.bigsearch {
|
||||
top: -6px !important;
|
||||
}
|
||||
|
||||
/*.search-bar * {
|
||||
/*text-align: center;*/ /*
|
||||
vertical-align: middle;
|
||||
}*/
|
||||
}
|
||||
|
||||
@media (min-width: v.$layout-breakpoint-x-large) {
|
||||
.mobile-left-holder {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/****************** UTILS *******************/
|
||||
|
||||
/************ END UTILS ************************/
|
||||
@@ -0,0 +1,72 @@
|
||||
@use "../variables/variables" as v;
|
||||
|
||||
/* POP UP KEYBOARD WITH SPECIAL CHARACTERS AND THE SUGGESTIONS STYLING FILE */
|
||||
|
||||
.kbd-root {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
.keyboard-popup {
|
||||
background-color: v.$nav-white;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0 0 6px 6px;
|
||||
padding: 1rem 2rem;
|
||||
/*width: 100%;*/
|
||||
z-index: 1000;
|
||||
/*position: fixed;*/
|
||||
height: auto;
|
||||
|
||||
span {
|
||||
min-height: 40px;
|
||||
button {
|
||||
display: block;
|
||||
margin-top: auto;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
background-color: #ddd;
|
||||
/*box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);*/
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
&:active {
|
||||
/* on click if required */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-popup {
|
||||
/*position: absolute;*/
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: v.$nav-white;
|
||||
|
||||
&:hover {
|
||||
background-color: v.$gray-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggs {
|
||||
position: absolute;
|
||||
/*top: 150px;*/
|
||||
> div {
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
background-color: #fff;
|
||||
> button.button-sugg {
|
||||
background-color: v.$nav-white;
|
||||
|
||||
&:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
.box-sizing-content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
div.material-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
margin-top: 30px;
|
||||
border: 1px solid whitesmoke;
|
||||
padding: 21px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
h4.title {
|
||||
text-align: center;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
:root {
|
||||
--omrs-color-ink-lowest-contrast: rgba(47, 60, 85, 0.18);
|
||||
--omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
|
||||
--omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
|
||||
--omrs-color-interaction: rgba(19, 19, 21, 0.6);
|
||||
--omrs-color-interaction-minus-two: rgba(73, 133, 224, 0.12);
|
||||
--omrs-color-danger: #b50706;
|
||||
--omrs-color-bg-low-contrast: #eff1f2;
|
||||
--omrs-color-ink-high-contrast: rgba(19, 19, 21, 0.6);
|
||||
--omrs-color-bg-high-contrast: #ffffff;
|
||||
}
|
||||
/** END: Non Openmrs CSS **/
|
||||
div.omrs-input-group {
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
width: 20.4375rem;
|
||||
}
|
||||
|
||||
/* Input*/
|
||||
.omrs-input-underlined > input,
|
||||
.omrs-input-filled > input {
|
||||
border: none;
|
||||
/*border-bottom: 0.125rem solid var(--omrs-color-ink-medium-contrast);*/
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
font-size: 1.0625rem;
|
||||
padding-left: 0.875rem;
|
||||
line-height: 147.6%;
|
||||
padding-top: 0.825rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > input:focus,
|
||||
.omrs-input-filled > input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > .omrs-input-label,
|
||||
.omrs-input-filled > .omrs-input-label {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 0.875rem;
|
||||
line-height: 147.6%;
|
||||
color: var(--omrs-color-ink-medium-contrast);
|
||||
transition: top 0.2s;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > svg,
|
||||
.omrs-input-filled > svg {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0.875rem;
|
||||
fill: var(--omrs-color-ink-medium-contrast);
|
||||
}
|
||||
|
||||
.omrs-input-underlined > .omrs-input-helper,
|
||||
.omrs-input-filled > .omrs-input-helper {
|
||||
font-size: 1rem;
|
||||
color: var(--omrs-color-ink-medium-contrast);
|
||||
letter-spacing: 0.0275rem;
|
||||
margin: 0.125rem 0.875rem;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > input:hover,
|
||||
.omrs-input-filled > input:hover {
|
||||
background: var(--omrs-color-interaction-minus-two);
|
||||
border-color: var(--omrs-color-ink-high-contrast);
|
||||
}
|
||||
|
||||
/* TODO WILL NEED TO DO THIS PROGRAMATICALLY */
|
||||
/*
|
||||
.omrs-input-underlined > input:focus + .omrs-input-label,
|
||||
.omrs-input-underlined > input:valid + .omrs-input-label,
|
||||
.omrs-input-filled
|
||||
> input:focus
|
||||
+ .omrs-input-label
|
||||
.omrs-input-filled
|
||||
> input:valid
|
||||
+ .omrs-input-label {
|
||||
top: 0;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Programmed version above */
|
||||
.omrs-input-underlined > .jumped {
|
||||
transition: transform 0.2s ease-out, color 0.2s ease-out,
|
||||
-webkit-transform 0.2s ease-out;
|
||||
top: -0.6rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.omrs-input-underlined:not(.omrs-input-danger)
|
||||
> input:focus
|
||||
+ .omrs-input-label,
|
||||
.omrs-input-filled:not(.omrs-input-danger) > input:focus + .omrs-input-label {
|
||||
color: var(--omrs-color-interaction);
|
||||
}
|
||||
|
||||
.omrs-input-underlined:not(.omrs-input-danger) > input:focus,
|
||||
.omrs-input-filled:not(.omrs-input-danger) > input:focus {
|
||||
border-color: var(--omrs-color-interaction);
|
||||
}
|
||||
|
||||
.omrs-input-underlined:not(.omrs-input-danger) > input:focus ~ svg,
|
||||
.omrs-input-filled:not(.omrs-input-danger) > input:focus ~ svg {
|
||||
fill: var(--omrs-color-ink-high-contrast);
|
||||
}
|
||||
|
||||
/** DISABLED **/
|
||||
|
||||
.omrs-input-underlined > input:disabled {
|
||||
background: var(--omrs-color-bg-low-contrast);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.omrs-input-underlined > input:disabled + .omrs-input-label,
|
||||
.omrs-input-underlined > input:disabled ~ .omrs-input-helper {
|
||||
color: var(--omrs-color-ink-low-contrast);
|
||||
}
|
||||
|
||||
.omrs-input-underlined > input:disabled ~ svg {
|
||||
fill: var(--omrs-color-ink-low-contrast);
|
||||
}
|
||||
|
||||
/** DANGER **/
|
||||
|
||||
.omrs-input-underlined.omrs-input-danger > .omrs-input-label,
|
||||
.omrs-input-underlined.omrs-input-danger > .omrs-input-helper,
|
||||
.omrs-input-filled.omrs-input-danger > .omrs-input-label,
|
||||
.omrs-input-filled.omrs-input-danger > .omrs-input-helper {
|
||||
color: var(--omrs-color-danger);
|
||||
}
|
||||
Reference in New Issue
Block a user