diff --git a/app/assets/images/arrow-select.svg b/app/assets/images/arrow-select.svg new file mode 100644 index 000000000..a2ce79556 --- /dev/null +++ b/app/assets/images/arrow-select.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/card.svg b/app/assets/images/card.svg new file mode 100644 index 000000000..30fac8336 --- /dev/null +++ b/app/assets/images/card.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/close.svg b/app/assets/images/close.svg new file mode 100644 index 000000000..91846f5fc --- /dev/null +++ b/app/assets/images/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/copy.svg b/app/assets/images/copy.svg new file mode 100644 index 000000000..7f5873333 --- /dev/null +++ b/app/assets/images/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/delete.svg b/app/assets/images/delete.svg new file mode 100644 index 000000000..904173ab0 --- /dev/null +++ b/app/assets/images/delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/edit.svg b/app/assets/images/edit.svg new file mode 100644 index 000000000..ae6bf2708 --- /dev/null +++ b/app/assets/images/edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/gift.svg b/app/assets/images/gift.svg new file mode 100644 index 000000000..97be86056 --- /dev/null +++ b/app/assets/images/gift.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/hammer.svg b/app/assets/images/hammer.svg new file mode 100644 index 000000000..6c0e2ec07 --- /dev/null +++ b/app/assets/images/hammer.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/hero.png b/app/assets/images/hero.png new file mode 100644 index 000000000..5aa88c554 Binary files /dev/null and b/app/assets/images/hero.png differ diff --git a/app/assets/images/info.svg b/app/assets/images/info.svg new file mode 100644 index 000000000..cfceb6d8b --- /dev/null +++ b/app/assets/images/info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/images/io-icon.svg b/app/assets/images/io-icon.svg new file mode 100644 index 000000000..8fb364488 --- /dev/null +++ b/app/assets/images/io-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/notification.svg b/app/assets/images/notification.svg new file mode 100644 index 000000000..f6d129328 --- /dev/null +++ b/app/assets/images/notification.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/po-icon.svg b/app/assets/images/po-icon.svg new file mode 100644 index 000000000..f4d34b24f --- /dev/null +++ b/app/assets/images/po-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/search.svg b/app/assets/images/search.svg new file mode 100644 index 000000000..185115d9c --- /dev/null +++ b/app/assets/images/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/timer.svg b/app/assets/images/timer.svg new file mode 100644 index 000000000..291a71d6b --- /dev/null +++ b/app/assets/images/timer.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/assets/images/trophy.svg b/app/assets/images/trophy.svg new file mode 100644 index 000000000..83a62aaa1 --- /dev/null +++ b/app/assets/images/trophy.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/assets/images/user.svg b/app/assets/images/user.svg new file mode 100644 index 000000000..ed541ad24 --- /dev/null +++ b/app/assets/images/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss index c6e328504..54244df1d 100644 --- a/app/assets/stylesheets/application.sass.scss +++ b/app/assets/stylesheets/application.sass.scss @@ -1,2 +1,13 @@ // Entry point for your Sass build -@import url(styles.css); \ No newline at end of file +@import url(styles.scss); + +@import "generics/normalize"; +@import "settings/settings"; +@import "mixins/mixins"; + +@import "elements/elements"; +@import "tools/tools"; +@import "objects/objects"; +@import "elements/elements"; +@import "components/components"; +@import "utilities/utilities"; diff --git a/app/assets/stylesheets/components/_auctions.scss b/app/assets/stylesheets/components/_auctions.scss new file mode 100644 index 000000000..5989ae69e --- /dev/null +++ b/app/assets/stylesheets/components/_auctions.scss @@ -0,0 +1,138 @@ +.c-auctions { + +} + +.c-auctions__title { + font-weight: 900; + font-size: rem(22px); + line-height: rem(22px); + margin: 0 0 rem(20px); + + @include mq(tablet) { + font-size: rem(30px); + line-height: rem(30px); + } +} +.c-auctions__desc { + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + margin: 0 0 rem(32px); +} + +.c-auctions__list { + list-style: none; + border-top: 1px solid $grey-200-color; + display: flex; + flex-wrap: wrap; + position: relative; + padding: 0; + margin: 0; + + &::after { + content: ''; + width: 100%; + height: 1px; + background-color: $grey-200-color; + position: absolute; + bottom: 0; + display: block; + left: 0; + } + + li { + flex: 100%; + max-width: 100%; + border-bottom: 1px solid $grey-200-color; + + @media (min-width: 567px) { + border-right: 1px solid $grey-200-color; + flex: 50%; + max-width: 50%; + + &:nth-child(2n) { + border-right: 0; + } + } + + @include mq(laptop) { + border-right: 1px solid $grey-200-color; + flex: 33.33%; + max-width: 33.33%; + + &:nth-child(2n) { + border-right: 1px solid $grey-200-color; + } + + &:nth-child(3n) { + border-right: 0; + } + } + + span { + margin-right: rem(8px); + } + } + + strong { + font-weight: 800; + font-size: rem(14px); + line-height: rem(20px); + } + + li { + padding: rem(13px 17px); + } +} + +.c-auctions__footer { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: rem(32px); + + @include mq(tablet) { + flex-wrap: nowrap; + } +} + +.c-auctions__legend { + font-weight: 500; + font-size: rem(14px); + line-height: rem(20px); + display: flex; + gap: rem(16px); + align-items: center; +} + +.c-auctions__info { + gap: rem(16px); + display: flex; + align-items: center; +} + +.c-auctions__all-count { + font-weight: 500; + font-size: rem(14px); + line-height: rem(20px); +} + +.c-auctions-wrap { + position: relative; + padding-bottom: rem(48px); + + @include mq(tablet) { + padding-bottom: rem(64px); + } + + &::after { + content: ''; + width: 100%; + height: rem(134px); + position: absolute; + left: 0; + bottom: 0; + background: linear-gradient(0deg, #EEEEF0 0%, #FFFFFF 100%); + z-index: -1; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_badge.scss b/app/assets/stylesheets/components/_badge.scss new file mode 100644 index 000000000..e3d2b1eee --- /dev/null +++ b/app/assets/stylesheets/components/_badge.scss @@ -0,0 +1,77 @@ +.c-badge { + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + padding: 0 rem(16px); + display: inline-flex; + gap: rem(8px); + border-radius: rem(12px); + align-items: center; + cursor: default; + + &::before { + content: ''; + width: rem(8px); + height: rem(8px); + display: block; + border: 2px solid transparent; + border-radius: rem(4px); + } +} + +.c-badge--green { + background-color: $green-light; + color: $primary-green-color; + + &::before { + background-color: $primary-green-color; + border-color: $primary-green-color; + } +} + +.c-badge--yellow { + background-color: $yellow-light; + color: $primary-yellow-color; + + &::before { + background-color: $primary-yellow-color; + border-color: $primary-yellow-color; + } +} + +.c-badge--red { + background-color: #f8d8db; + color: #ff2040; + + &::before { + background-color: #ff2040; + border-color: #ff2040; + } +} + +.c-badge--blue { + background-color: #dfeff9; + color: $primary-blue-color; + + &::before { + background-color: $primary-blue-color; + border-color: $primary-blue-color; + } +} + + +.c-badge--gray { + background-color: $grey-100-color; + color: $grey-400-color; + + &::before { + background-color: $grey-400-color; + border-color: $grey-400-color; + } +} + +.c-badge--circle { + &::before { + background-color: transparent; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_block.scss b/app/assets/stylesheets/components/_block.scss new file mode 100644 index 000000000..7698eead2 --- /dev/null +++ b/app/assets/stylesheets/components/_block.scss @@ -0,0 +1,7 @@ +.c-block { + margin-bottom: rem(48px); +} + +.c-block__title { + margin: 0 0 rem(32px); +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_btn.scss b/app/assets/stylesheets/components/_btn.scss new file mode 100644 index 000000000..e84a1950d --- /dev/null +++ b/app/assets/stylesheets/components/_btn.scss @@ -0,0 +1,74 @@ +.c-btn--orange { + @include btn-orange +} + +.c-btn--blue { + @include btn-blue +} + +.c-btn--black { + @include btn-black +} + +.c-btn--green { + @include btn-green +} + +.c-btn--red { + @include btn-red +} + +.c-btn--blue-secondary { + @include btn-blue-secondary +} + +.c-btn--ghost { + @include btn-black; + color: $black-color; + background-color: transparent; + border: 1px solid $grey-400-color; + + &:hover { + border-color: $black-color; + background-color: transparent; + } +} + +.c-btn--icon { + @include btn-black; + color: $black-color; + background-color: transparent; + border: 1px solid $grey-400-color; +} + +table { + .c-btn { + font-weight: 500; + font-size: rem(14px); + line-height: rem(20px); + padding: rem(6px 16px); + } + + .c-btn--icon { + padding: 0 !important; + } +} + +.c-btn--icon { + width: rem(32px); + height: rem(32px); + padding: 0 !important; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.c-btn-group { + display: flex; + justify-content: flex-start; + gap: rem(16px); + + @include mq(laptop) { + justify-content: center; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_components.scss b/app/assets/stylesheets/components/_components.scss new file mode 100644 index 000000000..2e42fa0fc --- /dev/null +++ b/app/assets/stylesheets/components/_components.scss @@ -0,0 +1,19 @@ +@import "toolbar"; +@import "header"; +@import "socials"; +@import "dropdown"; +@import "search"; +@import "hero"; +@import "domain-search"; +@import "cta"; +@import "btn"; +@import "auctions"; +@import "news"; +@import "footer"; +@import "block"; +@import "tabs"; +@import "badge"; +@import "notifications"; +@import "table"; +@import "modal"; +@import "notices"; diff --git a/app/assets/stylesheets/components/_cta.scss b/app/assets/stylesheets/components/_cta.scss new file mode 100644 index 000000000..e354ca793 --- /dev/null +++ b/app/assets/stylesheets/components/_cta.scss @@ -0,0 +1,267 @@ +.c-cta { + display: flex; + flex-direction: column; + justify-content: center; + padding: rem(20px); + position: relative; + border-radius: rem(8px); + + &:before { + content: ' '; + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.25; + background: url("../assets/spider-bg.svg") right center/contain no-repeat; + z-index: 0; + } +} + +.c-cta--primary { + background-color: $secondary-blue-color; + min-height: rem(290px); + + @include mq(desktop) { + min-height: rem(390px); + } + + .c-cta__btn { + a { + @include btn-orange; + } + } +} + +.c-cta--secondary { + background-color: $primary-blue-color; + min-height: rem(275px); + + &::before { + filter: brightness(0.25); + background-size: 45%; + } + + .c-cta__btn { + a { + @include btn-black; + min-width: rem(153px); + } + } +} + +.c-cta__title { + font-weight: 900; + font-size: rem(22px); + line-height: rem(22px); + margin: 0; + color: $white-color; + position: relative; + z-index: 1; + + @include mq(tablet) { + font-size: rem(30px); + line-height: rem(30px); + } +} + +.c-cta__desc { + font-weight: 800; + font-size: rem(14px); + line-height: rem(18px); + margin: rem(15px 0); + color: $white-color; + position: relative; + z-index: 1; + + @include mq(tablet) { + font-size: rem(16px); + line-height: rem(20px); + } +} + +.c-cta__btn { + position: relative; + z-index: 1; +} + +.c-cta--two-col { + padding: rem(48px 0 0); + + @include mq(tablet) { + padding: rem(64px 0 0); + } +} + +.c-cta--horizontal { + display: flex; + flex-direction: column; + background: center center/cover no-repeat; + justify-content: space-between; + align-items: center; + padding: rem(48px 42px); + border-radius: rem(8px); + overflow: hidden; + + &::before { + content: ' '; + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.5; + background: $black-color; + z-index: 0; + } + + @include mq(tablet) { + padding: rem(62px 56px); + flex-direction: row; + } + + .c-cta__title { + margin: 0 0 rem(20px); + } + + .c-cta__desc { + margin: 0; + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + } + + .c-cta__btn { + a { + @include btn-blue; + } + } +} + +.c-cta--three-col { + padding: rem(48px 0); + + @include mq(tablet) { + padding: rem(64px 0); + } +} + +.c-cta--card { + padding: rem(24px 16px 30px); + color: $black-color; + @include box-shadow-light; + border-radius: rem(4px 4px 8px 8px); + position: relative; + + &::before { + content: ''; + width: 100%; + height: rem(4px); + border-radius: rem(2px); + position: absolute; + top: 0; + left: 0; + } + + @include mq(laptop) { + padding: rem(32px 18px 38px); + } + + @include mq(desktop) { + padding: rem(34px 20px 42px); + } + + + @include mq(ultra) { + padding: rem(37px 24px 44px); + } + + .c-cta__title { + color: $black-color; + margin: 0 0 rem(20px); + } + + .c-cta__desc { + color: $black-color; + margin: 0; + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + } + + .c-cta__grid { + display: flex; + gap: rem(16px); + justify-content: space-between; + } +} + +.c-cta--orange { + + &::before { + background-color: $primary-orange-color; + } + + .c-cta__btn { + a { + @include btn-orange; + } + } +} + +.c-cta--sec-blue { + + &::before { + background-color: $secondary-blue-color; + } + + .c-cta__btn { + a { + @include btn-blue-secondary; + } + } +} + +.c-cta--black { + + &::before { + background-color: $black-color; + } + + .c-cta__btn { + a { + @include btn-black; + } + } +} + +.c-cta--green { + &::before { + background-color: $primary-green-color; + } + + .c-cta__btn { + a { + @include btn-green; + } + } +} + +.c-cta--card-icon { + + .c-cta__title { + display: flex; + gap: rem(12px); + + svg { + min-width: rem(32px); + } + } +} + +.c-cta--inline { + padding: 0; +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_domain-search.scss b/app/assets/stylesheets/components/_domain-search.scss new file mode 100644 index 000000000..567922dbe --- /dev/null +++ b/app/assets/stylesheets/components/_domain-search.scss @@ -0,0 +1,54 @@ +.c-domain-search { + flex-grow: 1; + border-radius: rem(8px 0 0 8px); + overflow: hidden; +} + +.c-domain-search__wrap { + display: flex; + align-items: center; + gap: rem(16px); + padding: rem(0 16px 0 0); + + @include mq(tablet) { + gap: rem(24px); + padding: rem(0 24px 0 0); + } +} + +.s-domain-search { + + input { + border: none; + background-color: transparent; + flex-grow: 1; + font-weight: 500; + font-size: rem(18px); + line-height: rem(21px); + padding: rem(24px 16px 24px 32px); + + @include mq(desktop) { + padding: rem(48px 24px 48px 48px); + } + + &::placeholder { + color: #051729; + opacity: 1; + } + } + + button { + background-color: $primary-blue-color; + border: none; + width: rem(48px); + height: rem(48px); + border-radius: rem(24px); + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: $secondary-blue-color; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_dropdown.scss b/app/assets/stylesheets/components/_dropdown.scss new file mode 100644 index 000000000..f2a16ee3f --- /dev/null +++ b/app/assets/stylesheets/components/_dropdown.scss @@ -0,0 +1,73 @@ +.c-dropdown { + position: relative; + cursor: pointer; +} + +.c-dropdown__label { + font-weight: 500; + font-size: rem(14px); + line-height: rem(16px); + color: $white-color; + display: flex; + align-items: center; + + svg { + margin-left: rem(3.5px); + } +} + +.c-dropdown__label__lang { + width: rem(30px); + overflow: hidden; + text-transform: uppercase; +} + +.c-dropdown__list { + position: absolute; + right: 0; + top: rem(24px); + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: 0.25s; +} + +.s-dropdown-list { + padding: rem(8px); + margin: 0; + list-style: none; + @include box-shadow; + border-radius: rem(8px); + z-index: 99; + + li { + display: flex; + } + + a { + padding: rem(4px 8px); + color: $black-color; + font-weight: 500; + font-size: rem(14px); + line-height: rem(16px); + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &:hover { + color: $primary-blue-color; + } + } + + li.active { + font-weight: 800; + } +} + +.c-dropdown.is-open { + .c-dropdown__list { + opacity: 1; + visibility: visible; + transform: translateX(0); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_footer.scss b/app/assets/stylesheets/components/_footer.scss new file mode 100644 index 000000000..f96cad010 --- /dev/null +++ b/app/assets/stylesheets/components/_footer.scss @@ -0,0 +1,227 @@ +.c-footer { + background: linear-gradient(90deg, #003D63 1.35%, #064F7C 98.65%); + margin-top: rem(70px); + + @include mq(tablet) { + margin-top: rem(185px); + } + + + @include mq(desktop) { + margin-top: rem(105px); + } +} + +.c-footer__grid { + display: flex; + flex-wrap: wrap; + gap: rem(32px); + position: relative; + + @include mq(desktop) { + gap: rem(85px); + flex-wrap: nowrap; + } +} + +.c-footer__highlight { + width: 100%; + background: $gradient-blue-secondary; + box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2); + border-radius: rem(8px); + display: flex; + gap: rem(20px); + align-items: center; + padding: rem(20px 18px); + transform-origin: bottom left; + flex-direction: row; + justify-content: space-evenly; + transform: translateY(-20px); + + @include mq(tablet) { + padding: rem(22px 20px); + top: -22%; + position: absolute; + } + + @include mq(laptop) { + top: -50%; + } + + @media (min-width: 992px) and (max-width: 1044px) { + top: -28%; + } + + @include mq(desktop) { + width: rem(290px); + flex-direction: column; + border-radius: rem(8px 8px 0 0); + transform: scale(1.1); + position: initial; + } + + @include mq(wide) { + padding: rem(40px 32px); + width: rem(340px); + } +} + +.c-footer__highlight__grid { + display: flex; + flex-direction: column; + gap: rem(20px); + text-align: left !important; + + @include mq(tablet) { + gap: rem(12px); + } + + @include mq(desktop) { + text-align: center !important; + gap: rem(20px); + } +} + +.c-footer__highlight__grid--row-t { + @include mq(tablet) { + width: 45%; + flex-direction: row; + justify-content: space-between; + } + + @include mq(desktop) { + width: auto; + flex-direction: column; + } +} + +.c-footer__highlight__title { + font-weight: 900; + font-size: rem(14px); + line-height: rem(18px); + text-align: left; + color: $white-color; + margin: 0; + + @include mq(desktop) { + text-align: center; + } +} + +.c-footer__highlight__info, .c-footer__highlight__contact { + font-weight: 500; + font-size: rem(14px); + line-height: rem(22px); + text-align: left; + color: $white-color; + + @include mq(desktop) { + text-align: center; + } + + a { + color: $white-color; + text-decoration: none; + + &:hover { + color: $secondary-blue-color; + } + } +} + +.c-footer__highlight__contact { + span { + display: flex; + align-items: center; + gap: rem(12px); + + @include mq(desktop) { + justify-content: center; + } + } +} + +.c-footer__grid__row { + display: flex; + flex-wrap: wrap; + position: relative; + gap: rem(32px); + flex-grow: 1; + padding-top: rem(10px); + padding-bottom: rem(38px); + + @include mq(tablet) { + padding-bottom: rem(10px); + gap: rem(72px); + padding-top: rem(72px); + } + + @include mq(desktop) { + gap: rem(32px); + padding-bottom: 0; + flex-wrap: nowrap; + justify-content: space-between; + padding-top: rem(64px); + } +} + +.s-footer-col { + color: $white-color; + line-height: rem(24px); + + p { + color: $white-color; + } + + a { + color: $grey-300-color; + text-decoration: none; + margin-bottom: rem(2px); + display: inline-block; + + &:hover { + color: $primary-blue-color !important; + } + } + + .c-socials { + gap: rem(8px); + + a { + width: rem(24px); + height: rem(24px); + + svg { + width: rem(24px); + height: rem(24px); + fill: $white-color; + } + } + } +} + +.c-footer__sviiter { + position: absolute; + bottom: rem(38px); + right: 0; + + @include mq(laptop) { + bottom: rem(10px); + } + + svg, svg path { + transition: $transition; + } + + &:hover { + svg, svg path { + fill: $white-color; + } + } + + a:hover { + svg, svg path { + fill: $primary-blue-color; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_header.scss b/app/assets/stylesheets/components/_header.scss new file mode 100644 index 000000000..b8da32ec8 --- /dev/null +++ b/app/assets/stylesheets/components/_header.scss @@ -0,0 +1,74 @@ +.c-header { + background-color: $black-color; + color: $white-color; + display: flex; + align-items: center; + z-index: 99; + position: relative; +} + +.c-header__menu { + display: block; + + @include mq(desktop) { + display: none; + } +} + +.c-header__lang { + margin-left: auto; + margin-right: rem(20px); + @include mq(desktop) { + margin-right: rem(32px); + } + + @include mq(ultra) { + margin-left: 0; + margin-right: rem(50px); + } +} + +.c-header__toggle { + display: flex; + align-items: center; + gap: rem(16px); + padding: rem(16px 25px); + background-color: $gradient-blue; + color: $white-color; + border-radius: 0; + border: none; +} + +.c-header__search__toggle { + padding: rem(8px); + margin-left: rem(10px); + margin-right: rem(18px); + background-color: transparent; + border: none; + display: block; + + @include mq(desktop) { + display: none; + } +} + +.c-header__user { + display: flex; + gap: rem(9px); + color: $white-color; + align-items: center; + white-space: nowrap; + text-decoration: none; + font-weight: 500; + font-size: rem(14px); + line-height: rem(20px); + + &:hover { + color: $grey-200-color; + text-decoration: underline; + + svg { + fill: $grey-200-color; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_hero.scss b/app/assets/stylesheets/components/_hero.scss new file mode 100644 index 000000000..00c4d6c36 --- /dev/null +++ b/app/assets/stylesheets/components/_hero.scss @@ -0,0 +1,114 @@ +.c-hero { + margin-bottom: rem(50px); +} + +.c-hero__content { + color: $white-color; + background: url("hero.png") center center/cover no-repeat; + border-radius: 0 0 rem(8px 8px); + display: flex; + flex-direction: column; + align-items: center; + padding: rem(32px 0 72px); + + @include mq(desktop) { + padding: rem(70px 0 64px); + } +} + +.c-hero__content__title { + font-weight: 900; + font-size: 8vw; + line-height: 1.2; + margin: rem(20px 0 16px); + + @include mq(tablet) { + font-size: rem(40px); + line-height: rem(40px); + } +} +.c-hero__content__desc { + font-weight: 500; + font-size: 4vw; + line-height: 1.2; + margin: 0 0 rem(24px); + + @include mq(tablet) { + font-size: rem(18px); + line-height: rem(20px); + } +} + +.c-hero__content__action { + + a { + @include btn-orange; + } +} + +.c-hero__search { + background-color: transparent; + transform: translateY(rem(-60px)); + + padding: rem(0 16px); + + @include mq(tablet) { + padding: rem(0 24px); + } + + @include mq(desktop) { + padding: rem(0 40px); + } +} + +.c-hero__search__form { + background-color: $white-color; + border-radius: rem(8px 0 0 8px); + overflow: hidden; + display: flex; + align-items: center; + flex-grow: 1; +} + +.c-hero__search__grid { + @include box-shadow; + display: flex; + flex-wrap: wrap; + background-color: transparent !important; + border-radius: rem(8px); + overflow: hidden; + + @include mq(tablet) { + flex-wrap: nowrap; + } +} + +.c-hero__search__info { + background-color: $secondary-blue-color; + color: $white-color; + font-size: rem(14px); + line-height: rem(25px); + width: 100%; + padding: rem(20px 18px 20px 24px); + + @include mq(tablet) { + width: 40%; + } + + @include mq(desktop) { + width: 32%; + } + + @include mq(wide) { + width: 28%; + } + + a { + color: $white-color; + text-decoration: underline; + + &:hover { + color: $primary-orange-color; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss new file mode 100644 index 000000000..e8920bd2c --- /dev/null +++ b/app/assets/stylesheets/components/_modal.scss @@ -0,0 +1,317 @@ +.c-modal { + background-color: $white-color; + opacity: 1; + border-radius: rem(8px); + position: fixed; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + width: 96%; + max-height: 98vh; + overflow: hidden; + + @include mq(tablet) { + width: rem(600px); + } + + @include mq(desktop) { + width: rem(780px); + } +} + +.c-modal--sm { + width: auto; + min-width: rem(320px); + max-width: 98%; +} + +.c-modal__scroll { + overflow-x: hidden; + overflow-y: auto; + scroll-behavior: smooth; + scrollbar-width: thin; + scrollbar-color: $grey-400-color $grey-100-color; + /* width */ + ::-webkit-scrollbar { + width: 20px; + border-radius: 12px; + } + /* Track */ + ::-webkit-scrollbar-track { + background: $grey-100-color; + border-radius: rem(20px); + } + /* Handle */ + ::-webkit-scrollbar-thumb { + background: $grey-400-color; + } + max-height: calc(98vh - 2.5rem); + + @include mq(tablet) { + padding-right: rem(16px); + max-height: calc(98vh - 3rem); + } + + @include mq(desktop) { + padding-right: rem(36px); + max-height: calc(98vh - 4.5rem); + } +} + +.c-modal__scroll__content { + padding: rem(20px 16px); + position: relative; + + @include mq(tablet) { + padding: rem( 24px 20px); + width: rem(600px); + } + + @include mq(desktop) { + padding: rem(36px 40px); + width: rem(780px); + } +} + +.c-modal__header { + padding-bottom: rem(30px); + border-bottom: 1px solid $grey-200-color; +} + +.c-modal__header__title { + color: $primary-green-color; + display: flex; + gap: rem(8px); + align-items: center; + margin-bottom: rem(16px); + font-weight: 800; + font-size: rem(14px); + line-height: rem(24px); +} + +.c-modal__header__subject { + display: flex; + gap: rem(16px); + align-items: center; + margin-bottom: rem(20px); + +} + +.c-modal__header__subject__title { + font-weight: 900; + font-size: 6vw; + line-height: 1.25; + + @include mq(tablet) { + font-size: rem(30px); + line-height: rem(30px); + } +} + +.c-modal__header__desc { + display: flex; + gap: rem(8px); + align-items: center; + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); +} + +.c-modal__close-btn { + position: absolute; + padding: 0; + border: none; + border-radius: 50%; + background: transparent; + right: rem(16px); + top: rem(16px); + display: flex; + align-items: center; + justify-content: center; + + &:hover { + opacity: 0.7; + } + + @include mq(tablet) { + right: rem(20px); + top: rem(20px); + } + + @include mq(desktop) { + right: rem(36px); + top: rem(36px); + } +} + +.c-modal__grid { + display: flex; + gap: rem(12px); + + @include mq(tablet) { + gap: rem(0 20px); + } + + @include mq(laptop) { + gap: rem(0 30px); + } + + @include mq(desktop) { + gap: rem(0 40px); + } +} + +.c-modal__main { + padding: rem(40px 0); +} + +.c-modal__main__info { + background-color: $grey-100-color; + display: flex; + flex-direction: column; + gap: rem(16px); + padding: rem(16px); + border-radius: rem(8px); + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + width: calc(50% - 0.375rem); + align-items: center; + text-align: center; + + @include mq(tablet) { + padding: rem(24px); + width: calc(50% - 0.75rem); + } + + @include mq(laptop) { + padding: rem(24px); + width: calc(50% - 0.9375rem); + } + + @include mq(desktop) { + padding: rem(24px); + width: calc(50% - 1.25rem); + } +} + +.c-modal__main__info--black { + background-color: $black-color; + color: $white-color; +} + +.c-modal__col { + width: calc(50% - 0.375rem); + + @include mq(tablet) { + width: calc(50% - 0.75rem); + } + + @include mq(laptop) { + width: calc(50% - 0.9375rem); + } + + @include mq(desktop) { + width: calc(50% - 1.25rem); + } +} + +.c-modal-overlay { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(21, 21, 21, 0.5); + z-index: 9999; + visibility: hidden; + opacity: 0; + transition: $transition; + + &.is-open { + visibility: visible; + opacity: 1; + } +} + +.c-modal { + label:not(.o-checkbox) { + width: 100%; + display: block; + padding-left: rem(16px); + margin-bottom: rem(8px); + font-weight: 800; + font-size: rem(14px); + line-height: rem(24px); + } + + .c-modal__col:nth-child(2) { + label { + padding-left: 0; + } + } +} + +.c-modal__calculation { + padding: rem(12px 0); + display: block; +} + +.c-modal__input-desc { + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + color: $grey-400-color; + padding-left: rem(16px); + margin-top: rem(16px); + display: block; +} + +.c-modal__link { + font-weight: 500; + font-size: rem(14px); + line-height: rem(14px); + text-decoration: underline; + color: $primary-blue-color; + &:hover { + color: $black-color; + } +} + +.c-modal__link--first-col { + display: inline-block; + margin-top: rem(24px); + margin-left: rem(16px); +} + +.c-modal__footer { + display: flex; + justify-content: space-between; +} + +.c-modal__footer__col { + display: flex; + gap: rem(24px); +} + +.c-modal--error { + padding: rem(24px); + + .c-modal__header__title { + color: $error-color + } + + .c-modal__header__subject__title { + font-size: rem(24px); + word-break: break-word; + + } + + .c-modal__header { + padding: rem(0 0 8px); + } + + .c-modal__main { + padding: rem(8px 0); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_news.scss b/app/assets/stylesheets/components/_news.scss new file mode 100644 index 000000000..f3d007f71 --- /dev/null +++ b/app/assets/stylesheets/components/_news.scss @@ -0,0 +1,164 @@ +.c-news { + padding: rem(40px 0 48px); + + @include mq(tablet) { + padding: rem(50px 0 64px); + } +} + +.c-news__header { + display: flex; + justify-content: space-between; + margin-bottom: rem(48px); + + @include mq(tablet) { + margin-bottom: 54px; + } +} + +.c-news__title { + margin: 0; +} + +.c-news__item__img { + display: flex; + height: rem(275px); + + img { + max-width: 100%; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } +} + +.c-news__item { + background-color: $white-color; + @include box-shadow; + border-radius: rem(8px); + overflow: hidden; +} + +.c-news__item__content { + padding: rem(20px 16px); + + @include mq(tablet) { + padding: rem(24px 20px); + } + @include mq(desktop) { + padding: rem(34px 32px); + } +} + +.c-news__item__meta { + display: flex; + justify-content: space-between; + margin: 0 0 rem(24px); + color: $grey-400-color; + + .article--type { + font-weight: 800; + font-size: rem(14px); + line-height: rem(20px); + text-transform: uppercase; + margin: 0; + + @include mq(tablet) { + font-size: rem(13px); + } + + @include mq(laptop) { + font-size: rem(14px); + } + } + + .article--topic { + font-weight: 500; + font-size: rem(14px); + line-height: rem(20px); + margin: 0; + + &::before { + content: '#'; + } + + @include mq(tablet) { + font-size: rem(13px); + } + @include mq(laptop) { + font-size: rem(14px); + } + } +} + +.c-news__item__title { + margin: 0 0 rem(24px); + + @include mq(tablet) { + font-size: rem(16px); + } + + @include mq(laptop) { + font-size: rem(24px); + } + + + a { + text-decoration: none; + color: $black-color; + + &:hover { + color: $primary-blue-color; + } + } +} + +.c-news__item__excerpt { + margin: 0 0 rem(24px); + font-weight: 500; + line-height: rem(25px); + + & > div { + text-align: left !important; + } + + @include mq(tablet) { + font-size: rem(13px); + } + + @include mq(laptop) { + font-size: rem(14px); + } + + b { + font-weight: 500; + } + + a { + color: $black-color; + + &:hover { + color: $grey-400-color; + } + } +} + +.c-news__item__footer { + display: flex; + justify-content: space-between; + + @include mq(tablet) { + font-size: rem(13px); + } + + @include mq(laptop) { + font-size: rem(14px); + } + + .article--date { + display: flex; + align-items: center; + gap: rem(9px); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_notices.scss b/app/assets/stylesheets/components/_notices.scss new file mode 100644 index 000000000..4d369fd4e --- /dev/null +++ b/app/assets/stylesheets/components/_notices.scss @@ -0,0 +1,51 @@ +.c-notices { + background-color: $white-color; + @include box-shadow; + position: absolute; + top: rem(24px); + right: 0; + width: rem(340px); + z-index: 999; + padding: rem(0 16px); + border-radius: rem(8px); + opacity: 1; + visibility: visible; + transition: $transition; + color: $black-color; + font-size: rem(14px); + line-height: 1.2; + + a { + padding: 0 !important; + } + + @include mq(laptop) { + top: rem(48px); + right: rem(32px); + } + + &.is-hidden { + visibility: hidden; + opacity: 0; + } +} + +.c-notices__footer { + padding: rem(10px 0 12px); +} + +.c-notice { + border-bottom: 1px solid $grey-200-color; + padding: rem(16px 0); +} + +.c-notice__header { + display: flex; + gap: rem(8px); + align-items: center; + font-weight: 800; +} + +.c-notice__main { + margin: rem(8px 0); +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_notifications.scss b/app/assets/stylesheets/components/_notifications.scss new file mode 100644 index 000000000..c4832f45a --- /dev/null +++ b/app/assets/stylesheets/components/_notifications.scss @@ -0,0 +1,99 @@ +.c-notifications { + margin: rem(20px 0 40px); + display: block; +} + +.c-notification { + padding: rem(24px) 0; + border-bottom: 1px solid $grey-200-color; + + &:last-child { + border-bottom: 0; + } +} + +.c-notification__header { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: rem(8px); + margin-bottom: rem(8px); + + @include mq(tablet) { + flex-wrap: nowrap; + } +} + +.c-notification__header__title { + margin: 0; + line-height: 1.5; + margin-top: rem(2px); +} + +.c-notification__header__date { + color: $grey-400-color; + font-size: rem(12px); + line-height: rem(20px); + width: 100%; + + @media (min-width: 450px) { + width: auto; + margin-left: auto; + } + + @include mq(tablet) { + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + } +} + +.c-notification__main { + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + + + @include mq(tablet) { + max-width: 90%; + } + + @include mq(desktop) { + max-width: 80%; + } + + @include mq(wide) { + max-width: 70%; + } +} + +.c-notification--read { + .c-notification__header { + .c-notification__header__title { + filter: opacity(0.55); + } + + .c-notification__header__icon { + filter: brightness(1) grayscale(1) opacity(0.9); + } + + .o-new { + display: none; + } + } +} + +.c-notification__heading { + display: flex; + align-items: flex-start; + gap: rem(8px); +} + +.c-notifications--ajax { + .c-notification { + + &:last-child { + border-bottom: 1px solid $grey-200-color; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_search.scss b/app/assets/stylesheets/components/_search.scss new file mode 100644 index 000000000..a9bf7038c --- /dev/null +++ b/app/assets/stylesheets/components/_search.scss @@ -0,0 +1,62 @@ +.c-search { + width: 100%; + background: $primary-blue-color; + position: absolute; + top: rem(-15px); + right: 0; + padding: rem(15px 24px 15px 0); + display: flex; + justify-content: flex-end; + transition: $transition; + + &.is-open { + top: rem(50px); + } + + @include mq(tablet) { + width: rem(240px); + padding: rem(15px 24px 15px 0); + } + + @include mq(desktop) { + width: rem(240px); + padding: rem(15px 32px 15px 0); + } +} + +.c-search__form { + display: flex; + position: relative; +} + +.c-search__form__btn { + position: absolute; + right: 0; + top: 0; + height: rem(32px); + border: none; + background: transparent; + padding: 0 rem(16px) 0 rem(4px); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.c-search__form__input { + color: $white-color; + border: 1px solid $white-color; + background: transparent; + height: rem(32px); + line-height: rem(32px); + padding: 0 rem(16px); + border-radius: rem(16px); + font-weight: 500; + font-size: rem(14px); + width: rem(240px); + + &::placeholder { + color: $white-color; + opacity: 1; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_socials.scss b/app/assets/stylesheets/components/_socials.scss new file mode 100644 index 000000000..c9c61fd6f --- /dev/null +++ b/app/assets/stylesheets/components/_socials.scss @@ -0,0 +1,26 @@ +.c-socials { + display: flex; + gap: rem(24px); + align-items: center; +} + +.c-socials__link { + display: flex; + align-items: center; + justify-content: center; + + svg { + transition: 0.25s; + fill: $black-color; + + @include mq(desktop) { + fill: $white-color; + } + } + + &:hover { + svg { + fill: $primary-blue-color; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss new file mode 100644 index 000000000..1b7290190 --- /dev/null +++ b/app/assets/stylesheets/components/_table.scss @@ -0,0 +1,250 @@ +.c-table--sortable .dataTables_wrapper { + th, td { + @include mq(laptop) { + height: rem(30px) !important; + } + } + + .dataTables_filter { + display: none; + } + + .dataTables_paginate { + display: flex; + justify-content: center; + width: 100%; + margin-top: rem(48px); + gap: rem(24px); + + span { + display: flex; + gap: rem(8px); + } + + .paginate_button { + width: rem(32px); + height: rem(32px); + border-radius: rem(16px) !important; + border: 1px solid $grey-200-color !important; + display: flex !important; + justify-content: center; + align-items: center; + padding: 0 !important; + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + + &.current { + background-color: $primary-green-color !important; + border-color: $primary-green-color !important; + color: $white-color !important; + } + + &:hover { + color: $black-color !important; + background: $grey-200-color !important; + } + + &.next, &.previous { + border: none !important; + padding: rem(4px 4px) !important; + width: rem(80px); + } + } + } + + table.dataTable.no-footer, table.dataTable thead th, table.dataTable thead td { + border-bottom: 0; + } +} + + +.c-table__filters { + background-color: $white-color; + border-radius: rem(4px 4px 0 0); + @include box-shadow; + padding: rem(16px); + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: rem(24px); + + @include mq(tablet) { + flex-wrap: nowrap; + } + + .c-auctions__legend { + order: 4; + + @include mq(tablet) { + display: none; + } + } +} + +.c-table__filters__btns { + display: flex; + gap: rem(8px); + flex-wrap: wrap; + + @include mq(tablet) { + gap: rem(16px); + } +} + +.c-table__filters__btn { + @include btn; + background-color: transparent; + color: $black-color; + display: inline-flex; + gap: rem(8px); + border: 1px solid $black-color; + align-items: center; + + &:hover { + background-color: $black-color; + color: $white-color; + } + + &.is-active { + background-color: $black-color; + color: $white-color; + } +} + +.c-table__filters__search { + flex-grow: 1; + order: 2; + + @include mq(tablet) { + text-align: center; + order: 0; + } +} + +.c-table__search__input { + background: 96% center/16px no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.34779 12.0569C3.39471 12.0569 0.992188 9.58191 0.992188 6.5397C0.992188 3.4975 3.39471 1.02246 6.34779 1.02246C9.30087 1.02246 11.7034 3.4975 11.7034 6.5397C11.7034 9.58191 9.30087 12.0569 6.34779 12.0569ZM6.34779 2.12591C3.98543 2.12591 2.06331 4.10605 2.06331 6.5397C2.06331 8.97336 3.98543 10.9535 6.34779 10.9535C8.71015 10.9535 10.6323 8.97336 10.6323 6.5397C10.6323 4.10605 8.71068 2.12591 6.34779 2.12591Z' fill='%23212224'/%3E%3Cpath d='M14.0037 14.9771C13.9334 14.9772 13.8637 14.9629 13.7988 14.9352C13.7338 14.9075 13.6748 14.8668 13.6251 14.8155L9.5045 10.5705C9.45477 10.5193 9.41533 10.4585 9.38842 10.3915C9.36151 10.3246 9.34766 10.2529 9.34766 10.1804C9.34766 10.108 9.36151 10.0362 9.38842 9.96932C9.41533 9.90239 9.45477 9.84158 9.5045 9.79036C9.55422 9.73913 9.61325 9.6985 9.67822 9.67078C9.74318 9.64305 9.81282 9.62878 9.88314 9.62878C9.95346 9.62878 10.0231 9.64305 10.0881 9.67078C10.153 9.6985 10.2121 9.73913 10.2618 9.79036L14.3824 14.0353C14.4575 14.1124 14.5087 14.2107 14.5295 14.3178C14.5503 14.4249 14.5398 14.5359 14.4992 14.6369C14.4587 14.7378 14.3899 14.824 14.3017 14.8846C14.2135 14.9451 14.1098 14.9774 14.0037 14.9771Z' fill='%23212224'/%3E%3C/svg%3E%0A"); + line-height: rem(32px); + height: rem(32px); + padding: rem(0 16px); + border: 1px solid $grey-200-color; + border-radius: rem(16px); + transition: $transition; + max-width: calc(100%); + width: 100%; + + @include mq(laptop) { + width: rem(300px); + } + + &:focus { + border-color: $black-color; + } +} + +.c-table__filters__more { + text-align: right; + width: 40%; + max-width: 100%; + + @include mq(tablet) { + width: auto; + } + + @include mq(desktop) { + width: rem(392px); + } +} + +.c-table--sortable, .c-table--responsive { + + table { + display: flex; + + @include mq(laptop) { + display: table; + } + + thead { + display: none; + + @include mq(laptop) { + display: table-row-group; + } + } + } + + tbody { + display: flex; + flex-wrap: wrap; + margin-top: rem(40px); + gap: rem(20px); + + @include mq(tablet) { + gap: rem(40px 32px); + } + + @include mq(laptop) { + display: table-row-group; + } + } + + tbody tr { + display: flex; + width: 100%; + flex-wrap: wrap; + background: $white-color; + border-radius: rem(8px); + @include box-shadow-light; + padding: rem(12px 16px 16px); + + @media (min-width: 568px) { + width: calc(50% - 0.65rem); + } + + @include mq(tablet) { + width: calc(50% - 1rem); + } + + @include mq(laptop) { + display: table-row; + width: auto; + box-shadow: none; + } + + td, th { + border: none; + padding: rem(2px 0) !important; + height: auto !important; + + @include mq(laptop) { + height: rem(50px) !important; + padding: rem(8px 16px) !important; + + border-right: 1px solid $grey-200-color; + border-bottom: 1px solid $grey-200-color; + + &:last-child { + border-right: 0; + } + } + } + + td:nth-child(2) { + margin-left: auto; + } + + td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(6) { + width: 100%; + + @include mq(laptop) { + width: auto; + } + } + + td:nth-child(6) { + margin-top: rem(8px); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_tabs.scss b/app/assets/stylesheets/components/_tabs.scss new file mode 100644 index 000000000..1ffc8d567 --- /dev/null +++ b/app/assets/stylesheets/components/_tabs.scss @@ -0,0 +1,97 @@ +.c-tabs { + +} + +.c-tabs__nav { + display: flex; +} + +.c-tabs__nav__btn { + font-weight: 500; + font-size: 14px; + line-height: 24px; + border: none; + border-top: 1px solid $grey-100-color; + border-right: 1px solid $grey-100-color; + padding: rem(4px 9px 4px 13px); + background: $white-color; + border-radius: 0 rem(8px) 0 0; + position: relative; + transition: z-index 0s, all $transition; + + @include mq(tablet) { + padding: rem(16px 20px 16px 26px); + } + + &:hover { + background: $green-light; + } + + &.is-active { + background: $gradient-green; + border:none; + //font-weight: 800; + color: $white-color; + + sup { + font-weight: 500; + } + } + + &:nth-child(1) { + padding: rem(4px 9px); + z-index: 8; + } + + &:nth-child(2) { + transform: translateX(rem(-6px)); + z-index: 7; + } + + &:nth-child(3) { + transform: translateX(rem(-12px)); + z-index: 6; + } + + &:nth-child(4) { + transform: translateX(rem(-18px)); + z-index: 5; + } + + &:nth-child(5) { + transform: translateX(rem(-24px)); + z-index: 4; + } + + &:nth-child(6) { + transform: translateX(rem(-30px)); + z-index: 3; + } + + &:nth-child(7) { + transform: translateX(rem(-36px)); + z-index: 2; + } +} + +.c-tabs__nav__btn--ind { + margin-left: auto; + @include btn-black; + padding: rem(6px 16px); + font-weight: 500; + font-size: rem(14px); + line-height: rem(20px); + align-self: center; +} + +.c-tabs__content { + +} + +.c-tabs__content__tab { + display: none; + + &.is-active { + display: block; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_toolbar.scss b/app/assets/stylesheets/components/_toolbar.scss new file mode 100644 index 000000000..e44acf22e --- /dev/null +++ b/app/assets/stylesheets/components/_toolbar.scss @@ -0,0 +1,359 @@ +.c-toolbar { + color: $white-color; + display: none; + min-width: rem(280px); + width: auto; + border-radius: rem(0 0 8px 8px); + overflow: hidden; + @include box-shadow-light; + background-color: $black-color; + position: absolute; + top: rem(50.4px); + left: 0; + flex-grow: 1; + z-index: 99; + + @include mq(desktop) { + position: initial; + border-radius: 0; + max-width: 100%; + min-width: unset; + display: block; + padding-right: 0; + } +} + +.c-toolbar__grid { + display: flex; + align-items: center; + flex-direction: column; + + @include mq(desktop) { + flex-direction: row; + } +} + +.c-toolbar__nav { + width: 100%; + max-width: rem(280px); + + @include mq(tablet) { + max-width: rem(320px); + } + + @include mq(desktop) { + max-width: unset; + } +} + +.s-toolbar-nav { + margin: 0; + padding: 0 0 0 0; + display: flex; + list-style: none; + flex-direction: column; + background: $primary-blue-color; + + @include mq(desktop) { + background: transparent; + padding: 0; + flex-direction: row; + } + + & > li a { + font-weight: 800; + + @include mq(desktop) { + font-weight: 500; + } + } + + li { + display: flex; + gap: rem(6px); + flex-wrap: wrap; + align-items: center; + + &:nth-child(1) a:hover { + background-color: $primary-blue-color; + color: $white-color; + } + &:nth-child(2) a:hover { + background-color: $primary-green-color; + color: $white-color; + } + &:nth-child(3) a:hover { + background-color: $primary-orange-color; + color: $white-color; + } + &:nth-child(4) a:hover { + background-color: $secondary-blue-color; + color: $white-color; + } + &:nth-child(n+5) a:hover { + background-color: #000000; + color: $white-color; + } + + @include mq(desktop) { + flex-wrap: nowrap; + } + } + + a { + display: block; + padding: rem(4px 0px 4px 24px); + text-decoration: none; + color: $white-color; + font-weight: 500; + font-size: rem(14px); + line-height: rem(20px); + transition: $transition; + text-transform: uppercase; + white-space: nowrap; + + &:hover { + + @include mq(desktop) { + color: $primary-blue-color; + } + } + + @include mq(desktop) { + padding: rem(20px 32px); + text-transform: initial; + } + } + + li.is-active { + + & > a { + box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2); + } + + a { + font-weight: 800; + + @include mq(desktop) { + background: $gradient-blue; + } + + &:hover { + color: $white-color; + } + } + + &:nth-child(2) { + a { + background: $gradient-green; + } + + .submenu { + background: $primary-green-color; + } + } + + .submenu { + + @include mq(desktop) { + background-color: $primary-blue-color; + display: flex; + position: absolute; + top: rem(60px); + left: 0; + padding: 0 0 0 rem(32px); + gap: rem(32px); + } + + @include mq(wide) { + gap: rem(48px); + } + + li { + position: relative; + } + } + + .submenu a, .submenu button { + text-transform: uppercase; + font-weight: 500; + background: transparent; + border: none; + + @include mq(desktop) { + padding: rem(20px) 0; + } + } + } + + li.hidden { + display: none; + } + + .submenu { + width: 100%; + list-style: none; + padding: rem(0 0 8px 24px); + margin: 0; + display: none; + + a { + font-weight: 500; + padding: rem(8px 0); + } + } + + & > li { + padding: rem(16px 0); + + @include mq(desktop) { + padding: 0; + } + + &:nth-child(2) { + background: $primary-green-color; + + @include mq(desktop) { + background: transparent; + } + } + &:nth-child(3) { + background: $primary-orange-color; + + @include mq(desktop) { + background: transparent; + } + } + &:nth-child(4) { + background: $secondary-blue-color; + + @include mq(desktop) { + background: transparent; + } + } + &:nth-child(5) { + background: $black-color; + + @include mq(desktop) { + background: transparent; + } + } + } + + .submenu .submenu { + display: none; + padding: rem(0 0 4px 12px) !important; + + @include mq(desktop) { + display: flex; + width: auto; + padding: rem(4px 0) !important; + gap: rem(4px) !important; + position: absolute; + top: 100%; + left: 0; + flex-direction: column; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: $transition; + + a { + padding: rem(8px 14px) !important; + max-width: rem(320px); + } + } + + a { + word-break: break-word; + white-space: initial; + max-width: rem(230px); + + @include mq(tablet) { + max-width: rem(250px); + } + + @include mq(tablet) { + word-break: normal; + white-space: initial; + max-width: rem(350px); + min-width: rem(200px); + } + + &:hover { + color: $secondary-blue-color; + } + } + } + + .submenu li:hover { + .o-arrow { + transform: rotate(180deg); + } + + .submenu { + opacity: 1; + visibility: visible; + transform: unset; + } + } +} + +.c-toolbar__socials { + margin-left: auto; + margin-right: rem(24px); + width: 100%; + background: $white-color; + padding: rem(16px 25px); + + @include mq(desktop) { + margin-right: 0; + width: auto; + background: transparent; + } +} + +.c-toolbar__search { + margin-left: auto; + position: relative; + + .c-search { + position: initial; + top: unset; + right: unset; + } +} + +.c-toolbar__notice { + display: flex !important; + gap: rem(9px); + color: $white-color; + align-items: center; + white-space: nowrap; + text-decoration: none; + font-weight: 500; + font-size: rem(14px); + line-height: rem(20px); + padding: rem(0 24px 0 0) !important; + + span { + display: flex; + gap: rem(4px); + } + + sup { + top: 0.65em; + } + + @include mq(desktop) { + padding: rem(0 32px 0 0) !important; + } + + &:hover { + color: $black-color !important; + + svg { + fill: $black-color !important; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/elements/_body.scss b/app/assets/stylesheets/elements/_body.scss new file mode 100644 index 000000000..c22644874 --- /dev/null +++ b/app/assets/stylesheets/elements/_body.scss @@ -0,0 +1,6 @@ +body { + font-size: 16px; + font-family: $font-family; + color: $black-color; +} + diff --git a/app/assets/stylesheets/elements/_button.scss b/app/assets/stylesheets/elements/_button.scss new file mode 100644 index 000000000..85b0b7eb6 --- /dev/null +++ b/app/assets/stylesheets/elements/_button.scss @@ -0,0 +1,4 @@ +button { + transition: $transition; + cursor: pointer; +} \ No newline at end of file diff --git a/app/assets/stylesheets/elements/_elements.scss b/app/assets/stylesheets/elements/_elements.scss new file mode 100644 index 000000000..9625425f6 --- /dev/null +++ b/app/assets/stylesheets/elements/_elements.scss @@ -0,0 +1,8 @@ +@import "body"; +@import "html"; +@import "link"; +@import "button"; +@import "strong"; +@import "svg"; +@import "table"; +@import "form"; \ No newline at end of file diff --git a/app/assets/stylesheets/elements/_form.scss b/app/assets/stylesheets/elements/_form.scss new file mode 100644 index 000000000..538f5b34a --- /dev/null +++ b/app/assets/stylesheets/elements/_form.scss @@ -0,0 +1,99 @@ +input { + font-weight: 500; + font-size: rem(14px); + height: rem(48px); + line-height: rem(24px); + padding: rem(12px 16px); + border: 1px solid $grey-200-color; + border-radius: rem(8px); + transition: $transition; + width: 100%; + max-width: 100%; + + &:focus { + border-color: $black-color; + } + + &:disabled { + color: $grey-400-color; + border-color: $grey-200-color; + + &::placeholder { + color: $grey-400-color; + } + } +} + +textarea { + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + padding: rem(12px 16px); + border: 1px solid $grey-200-color; + border-radius: rem(8px); + transition: $transition; + width: 100%; + max-width: 100%; + + &:focus { + border-color: $black-color; + } + + &:disabled { + color: $grey-400-color; + border-color: $grey-200-color; + + &::placeholder { + color: $grey-400-color; + } + } +} + +select { + font-weight: 500; + font-size: rem(14px); + height: rem(48px); + line-height: rem(24px); + padding: rem(12px 16px); + border: 1px solid $grey-200-color; + border-radius: rem(8px); + transition: $transition; + width: 100%; + max-width: 100%; + appearance: none; + background: transparent 97.5% center/10px 6px no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.47343 5.77219L0.218112 1.32775C-0.072704 1.02401 -0.072704 0.531547 0.218112 0.227806C0.508928 -0.0759353 0.980434 -0.0759353 1.27125 0.227806L5 4.12228L8.72875 0.227806C9.01957 -0.0759353 9.49107 -0.0759353 9.78189 0.227806C10.0727 0.531547 10.0727 1.02401 9.78189 1.32775L5.52657 5.77219C5.23575 6.07594 4.76425 6.07594 4.47343 5.77219Z' fill='%23212224'/%3E%3C/svg%3E%0A"); + + &:focus { + border-color: $black-color; + } + + &:disabled { + color: $grey-400-color; + border-color: $grey-200-color; + background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.47343 5.77219L0.218112 1.32775C-0.072704 1.02401 -0.072704 0.531547 0.218112 0.227806C0.508928 -0.0759353 0.980434 -0.0759353 1.27125 0.227806L5 4.12228L8.72875 0.227806C9.01957 -0.0759353 9.49107 -0.0759353 9.78189 0.227806C10.0727 0.531547 10.0727 1.02401 9.78189 1.32775L5.52657 5.77219C5.23575 6.07594 4.76425 6.07594 4.47343 5.77219Z' fill='%23E2E2E2'/%3E%3C/svg%3E%0A"); + + &::placeholder { + color: $grey-400-color; + } + } +} + +label { + padding-left: rem(16px); + margin-bottom: rem(8px); + display: block; + font-weight: 800; + font-size: rem(14px); + line-height: rem(24px); +} + +input:not([type="checkbox"]):not([type="radio"]).is-invalid, select.is-invalid, textarea.is-invalid { + border-color: $primary-orange-color; + background-color: $orange-light; + + & + span { + color: $primary-orange-color; + } +} + diff --git a/app/assets/stylesheets/elements/_html.scss b/app/assets/stylesheets/elements/_html.scss new file mode 100644 index 000000000..807237a4f --- /dev/null +++ b/app/assets/stylesheets/elements/_html.scss @@ -0,0 +1,3 @@ +html { + font-family: $font-family; +} \ No newline at end of file diff --git a/app/assets/stylesheets/elements/_link.scss b/app/assets/stylesheets/elements/_link.scss new file mode 100644 index 000000000..85fe52c10 --- /dev/null +++ b/app/assets/stylesheets/elements/_link.scss @@ -0,0 +1,4 @@ +a { + cursor: pointer; + transition: $transition; +} \ No newline at end of file diff --git a/app/assets/stylesheets/elements/_strong.scss b/app/assets/stylesheets/elements/_strong.scss new file mode 100644 index 000000000..c0d54083f --- /dev/null +++ b/app/assets/stylesheets/elements/_strong.scss @@ -0,0 +1,3 @@ +strong { + font-weight: 800; +} \ No newline at end of file diff --git a/app/assets/stylesheets/elements/_svg.scss b/app/assets/stylesheets/elements/_svg.scss new file mode 100644 index 000000000..b685bd108 --- /dev/null +++ b/app/assets/stylesheets/elements/_svg.scss @@ -0,0 +1,3 @@ +svg { + transition: $transition; +} \ No newline at end of file diff --git a/app/assets/stylesheets/elements/_table.scss b/app/assets/stylesheets/elements/_table.scss new file mode 100644 index 000000000..7891ed1e0 --- /dev/null +++ b/app/assets/stylesheets/elements/_table.scss @@ -0,0 +1,39 @@ +table { + border-collapse: collapse; + width: 100%; +} + +th, td { + height: rem(50px); + padding: rem(8px 16px); + font-weight: 500; + font-size: 14px; + line-height: rem(24px); + text-align: left; + + * { + vertical-align: middle; + } +} + +td { + border-right: 1px solid $grey-200-color; + border-bottom: 1px solid $grey-200-color; + + &:last-child { + border-right: 0; + } +} + +th { + background: $primary-green-color; + color: $white-color; + font-weight: 800; +} + +.table--black { + + th { + background: $black-color; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/generics/_normalize.scss b/app/assets/stylesheets/generics/_normalize.scss new file mode 100644 index 000000000..9454728b3 --- /dev/null +++ b/app/assets/stylesheets/generics/_normalize.scss @@ -0,0 +1,449 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} + +@import "reset"; \ No newline at end of file diff --git a/app/assets/stylesheets/generics/_reset.scss b/app/assets/stylesheets/generics/_reset.scss new file mode 100644 index 000000000..a527bb50b --- /dev/null +++ b/app/assets/stylesheets/generics/_reset.scss @@ -0,0 +1,81 @@ +/* ========================================================================== + #RESET + ========================================================================== */ + +/** + * A very simple reset that sits on top of Normalize.css. + */ + +body, +h1, h2, h3, h4, h5, h6, +blockquote, p, pre, +dl, dd, ol, ul, +figure, +hr, +fieldset, legend { + //margin: 0; + //padding: 0; +} + + + +/** + * Remove trailing margins from nested lists. + */ + +li > { + + ol, + ul { + margin-bottom: 0; + } + +} + + + +/** + * Remove default table spacing. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + + + +/** + * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;` + * on fieldsets. + */ + +fieldset { + min-width: 0; /* [1] */ + border: 0; +} + +/* ========================================================================== + #BOX-SIZING + ========================================================================== */ + +html { + box-sizing: border-box; +} + +* { + + &, + &:before, + &:after { + box-sizing: inherit; + } + +} + + +input, textarea, select, button { + &:focus { + outline: none; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/mixins/_btn.scss b/app/assets/stylesheets/mixins/_btn.scss new file mode 100644 index 000000000..0e5d80af0 --- /dev/null +++ b/app/assets/stylesheets/mixins/_btn.scss @@ -0,0 +1,77 @@ +@mixin btn { + font-weight: 500; + font-size: rem(16px); + line-height: rem(32px); + text-align: center; + display: inline-block; + border-radius: rem(32px); + padding: rem(0 16px); + text-decoration: none; + white-space: nowrap; + color: $white-color; + border: none; + + &:disabled { + pointer-events: none; + filter: grayscale(1) opacity(0.4); + } +} + +@mixin btn-orange { + @include btn; + background: $primary-orange-color; + + &:hover { + background: $white-color; + color: $primary-orange-color; + } +} + +@mixin btn-blue { + @include btn; + background: $primary-blue-color; + + &:hover { + background: $white-color; + color: $primary-blue-color; + } +} + +@mixin btn-blue-secondary { + @include btn; + background: $secondary-blue-color; + + &:hover { + background: $primary-blue-color; + } +} + +@mixin btn-black { + @include btn; + background: $black-color; + + &:hover { + background: $white-color; + color: $black-color; + } +} + +@mixin btn-green { + @include btn; + background: $primary-green-color; + + &:hover { + background: $white-color; + color: $primary-green-color; + } +} + + +@mixin btn-red { + @include btn; + background: $error-color; + + &:hover { + background: $black-color; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/mixins/_container.scss b/app/assets/stylesheets/mixins/_container.scss new file mode 100644 index 000000000..bde810eeb --- /dev/null +++ b/app/assets/stylesheets/mixins/_container.scss @@ -0,0 +1,74 @@ +@mixin min($bp, $max: "null", $device: "screen") { + @if $max == "null" { + @media only #{$device} and (min-width: #{$bp}) { + @content; + } + } @else { + @media only #{$device} and (min-width: #{$bp}) and (max-width: #{$max}) { + @content; + } + } +} + +@function bp($bp) { + @return map-get($breakpoints, $bp); +} + +$breakpoints: ( + na: 0px, + // For BS grid + xs: 320px, + // Smartphone + sm: 1140px, + // Tablets + md: 1250px, + // Tablets Landscape and small desktops + lg: 1410px, + // Desktops + xl: 1800px, + // Large Desktop +); + +@function container($container-size, $true-val: false) { + @return map-get($container-sizes, $container-size); +} + +$container-sizes: ( + sm: map-get($breakpoints, sm) - 30px, + md: map-get($breakpoints, md) - 40px, + lg: map-get($breakpoints, lg) - 50px, + xl: map-get($breakpoints, xl) - 400px +); + +.o-container { + padding-right: 1rem; + padding-left: 1rem; + + &:not(.is-fluid) { + margin: 0 auto; + + @each $bp, $container-size in $container-sizes { + @include min(#{bp(#{$bp})}) { + width: 100%; + max-width: container(#{$bp}); + } + } + } +} + +@each $bp, $container-size in $container-sizes { + .o-container-#{$bp} { + margin: 0 auto; + padding-right: 1rem; + padding-left: 1rem; + width: 100%; + + $i: index($container-sizes, $bp $container-size); + + @for $j from $i through length($container-sizes) { + @include min(#{bp(nth(nth($container-sizes, $j), 1))}) { + max-width: container(#{nth(nth($container-sizes, $j), 1)}); + } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/mixins/_mixins.scss b/app/assets/stylesheets/mixins/_mixins.scss new file mode 100644 index 000000000..08e7107d8 --- /dev/null +++ b/app/assets/stylesheets/mixins/_mixins.scss @@ -0,0 +1,12 @@ +@import "container"; +@import "btn"; + +@mixin box-shadow { + background-color: $white-color; + box-shadow: 0 0 48px rgba(0, 0, 0, 0.12); +} + +@mixin box-shadow-light { + background-color: $white-color; + box-shadow: 0 0 48px rgba(0, 0, 0, 0.06); +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_arrow.scss b/app/assets/stylesheets/objects/_arrow.scss new file mode 100644 index 000000000..5662e8eac --- /dev/null +++ b/app/assets/stylesheets/objects/_arrow.scss @@ -0,0 +1,22 @@ +.o-arrow { + width: 1.2rem; + height: 1.2rem; + background: url("../assets/arrow-dwn.svg") center center/11px 7px no-repeat; + cursor: pointer; + display: inline-block; + transition: $transition; + + @include mq(desktop) { + display: none; + } + + &.is-active { + transform: rotate(180deg); + } +} + +.o-arrow--visible-on-desktop { + @include mq(desktop) { + display: inline-block; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_container.scss b/app/assets/stylesheets/objects/_container.scss new file mode 100644 index 000000000..e69de29bb diff --git a/app/assets/stylesheets/objects/_form.scss b/app/assets/stylesheets/objects/_form.scss new file mode 100644 index 000000000..f9a2b90bd --- /dev/null +++ b/app/assets/stylesheets/objects/_form.scss @@ -0,0 +1,85 @@ +.o-input-desc { + font-weight: 500; + font-size: rem(14px); + line-height: rem(24px); + margin-top: rem(8px); + padding-left: rem(16px); + color: $grey-400-color; + display: inline-block; +} + +// Custom Checkbox +.o-checkbox { + display: inline-block; + height: rem(16px); + position: relative; + width: rem(30px); + + &.u-disabled { + opacity: 0.6; + } +} + +.o-checkbox input { + display:none; +} + +.o-checkbox__slider { + background-color: $grey-400-color; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; +} + +.o-checkbox__slider:before { + background: $gradient-grey; + bottom: 2px; + content: ""; + height: rem(12px); + left: 2px; + position: absolute; + transition: .4s; + width: rem(12px); +} + +input:checked + .o-checkbox__slider { + background-color: $primary-green-color; +} + +input:checked + .o-checkbox__slider:before { + transform: translateX(14px); +} + +.o-checkbox__slider.round { + border-radius: 34px; +} + +.o-checkbox__slider.round:before { + border-radius: 50%; +} +// <-- Custom checkbox + +.o-input { + position: relative; +} + +.o-input-copy { + position: absolute; + right: rem(16px); + top: 50%; + transform: translateY(-50%); + width: rem(24px); + height: rem(24px); + background: transparent center center/75% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='17' height='20' viewBox='0 0 17 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3337 0.833313H2.33366C1.41283 0.833313 0.666992 1.57915 0.666992 2.49998V14.1666H2.33366V2.49998H12.3337V0.833313ZM14.8337 4.16665H5.66699C4.74616 4.16665 4.00033 4.91248 4.00033 5.83331V17.5C4.00033 18.4208 4.74616 19.1666 5.66699 19.1666H14.8337C15.7545 19.1666 16.5003 18.4208 16.5003 17.5V5.83331C16.5003 4.91248 15.7545 4.16665 14.8337 4.16665ZM14.8337 17.5H5.66699V5.83331H14.8337V17.5Z' fill='%2348A23F'/%3E%3C/svg%3E%0A"); + transition: $transition; + border: none; + + &:hover { + filter: grayscale(1) opacity(0.9); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_grid.scss b/app/assets/stylesheets/objects/_grid.scss new file mode 100644 index 000000000..e59ad0f6d --- /dev/null +++ b/app/assets/stylesheets/objects/_grid.scss @@ -0,0 +1,43 @@ +.o-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); + row-gap: rem(24px); + column-gap: rem(20px); + + @include mq(desktop) { + column-gap: rem(32px); + row-gap: rem(32px); + } + + @include mq(wide) { + column-gap: rem(40px); + row-gap: rem(40px); + } + + @include mq(ultra) { + column-gap: rem(48px); + row-gap: rem(48px); + } +} + +.o-grid--two-col { + @include mq(tablet) { + grid-template-columns: repeat(2, 1fr); + } +} + +.o-grid--two-col-desktop { + @include mq(desktop) { + grid-template-columns: repeat(2, 1fr); + } +} + +.o-grid--three-col { + @include mq(tablet) { + grid-template-columns: repeat(3, 1fr); + } +} + +.o-grid--sep { + row-gap: rem(48px); +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_icons.scss b/app/assets/stylesheets/objects/_icons.scss new file mode 100644 index 000000000..d2df279ea --- /dev/null +++ b/app/assets/stylesheets/objects/_icons.scss @@ -0,0 +1,186 @@ +.o-io-icon { + display: inline-block; + vertical-align: middle; + width: rem(15px); + height: rem(15px); + background: center center/100% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.72869 0.772727V9.5H0.883523V0.772727H2.72869ZM12.2667 5.13636C12.2667 6.08807 12.0863 6.89773 11.7255 7.56534C11.3675 8.23295 10.8789 8.7429 10.2596 9.09517C9.64311 9.4446 8.94993 9.61932 8.18004 9.61932C7.40447 9.61932 6.70845 9.44318 6.09197 9.09091C5.4755 8.73864 4.98828 8.22869 4.63033 7.56108C4.27237 6.89347 4.09339 6.08523 4.09339 5.13636C4.09339 4.18466 4.27237 3.375 4.63033 2.70739C4.98828 2.03977 5.4755 1.53125 6.09197 1.18182C6.70845 0.829545 7.40447 0.653409 8.18004 0.653409C8.94993 0.653409 9.64311 0.829545 10.2596 1.18182C10.8789 1.53125 11.3675 2.03977 11.7255 2.70739C12.0863 3.375 12.2667 4.18466 12.2667 5.13636ZM10.396 5.13636C10.396 4.51989 10.3036 4 10.119 3.5767C9.93714 3.15341 9.68004 2.83239 9.34766 2.61364C9.01527 2.39489 8.62607 2.28551 8.18004 2.28551C7.73402 2.28551 7.34482 2.39489 7.01243 2.61364C6.68004 2.83239 6.42152 3.15341 6.23686 3.5767C6.05504 4 5.96413 4.51989 5.96413 5.13636C5.96413 5.75284 6.05504 6.27273 6.23686 6.69602C6.42152 7.11932 6.68004 7.44034 7.01243 7.65909C7.34482 7.87784 7.73402 7.98722 8.18004 7.98722C8.62607 7.98722 9.01527 7.87784 9.34766 7.65909C9.68004 7.44034 9.93714 7.11932 10.119 6.69602C10.3036 6.27273 10.396 5.75284 10.396 5.13636Z' fill='%230085CA'/%3E%3C/svg%3E%0A"); +} + +.o-po-icon { + display: inline-block; + vertical-align: middle; + width: rem(18px); + height: rem(15px); + background: center center/100% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.180398 9.5V0.772727H3.62358C4.28551 0.772727 4.84943 0.899148 5.31534 1.15199C5.78125 1.40199 6.13636 1.75 6.38068 2.19602C6.62784 2.6392 6.75142 3.15057 6.75142 3.73011C6.75142 4.30966 6.62642 4.82102 6.37642 5.2642C6.12642 5.70739 5.7642 6.05256 5.28977 6.29972C4.81818 6.54687 4.24716 6.67045 3.5767 6.67045H1.3821V5.19176H3.27841C3.63352 5.19176 3.92614 5.13068 4.15625 5.00852C4.3892 4.88352 4.5625 4.71165 4.67614 4.4929C4.79261 4.27131 4.85085 4.01705 4.85085 3.73011C4.85085 3.44034 4.79261 3.1875 4.67614 2.97159C4.5625 2.75284 4.3892 2.58381 4.15625 2.46449C3.9233 2.34233 3.62784 2.28125 3.26989 2.28125H2.02557V9.5H0.180398ZM15.9698 5.13636C15.9698 6.08807 15.7894 6.89773 15.4286 7.56534C15.0707 8.23295 14.582 8.7429 13.9627 9.09517C13.3462 9.4446 12.6531 9.61932 11.8832 9.61932C11.1076 9.61932 10.4116 9.44318 9.7951 9.09091C9.17862 8.73864 8.69141 8.22869 8.33345 7.56108C7.9755 6.89347 7.79652 6.08523 7.79652 5.13636C7.79652 4.18466 7.9755 3.375 8.33345 2.70739C8.69141 2.03977 9.17862 1.53125 9.7951 1.18182C10.4116 0.829545 11.1076 0.653409 11.8832 0.653409C12.6531 0.653409 13.3462 0.829545 13.9627 1.18182C14.582 1.53125 15.0707 2.03977 15.4286 2.70739C15.7894 3.375 15.9698 4.18466 15.9698 5.13636ZM14.0991 5.13636C14.0991 4.51989 14.0067 4 13.8221 3.5767C13.6403 3.15341 13.3832 2.83239 13.0508 2.61364C12.7184 2.39489 12.3292 2.28551 11.8832 2.28551C11.4371 2.28551 11.0479 2.39489 10.7156 2.61364C10.3832 2.83239 10.1246 3.15341 9.93999 3.5767C9.75817 4 9.66726 4.51989 9.66726 5.13636C9.66726 5.75284 9.75817 6.27273 9.93999 6.69602C10.1246 7.11932 10.3832 7.44034 10.7156 7.65909C11.0479 7.87784 11.4371 7.98722 11.8832 7.98722C12.3292 7.98722 12.7184 7.87784 13.0508 7.65909C13.3832 7.44034 13.6403 7.11932 13.8221 6.69602C14.0067 6.27273 14.0991 5.75284 14.0991 5.13636Z' fill='%23FF6E00'/%3E%3C/svg%3E%0A"); +} + +.o-io-icon--bg-blue { + background-color: $blue-light; + width: rem(32px); + min-width: rem(32px); + height: rem(32px); + display: flex; + align-items: center; + justify-content: center; + border-radius: rem(16px); + background-size: rem(15px); +} + +.o-io-icon--bg-orange { + background-color: $orange-light; + width: rem(32px); + min-width: rem(32px); + height: rem(32px); + display: flex; + align-items: center; + justify-content: center; + border-radius: rem(16px); + background-size: rem(15px); +} + +.o-icon--sm { + height: rem(20px); +} + +.o-trophy-icon { + display: inline-block; + vertical-align: middle; + width: rem(24px); + height: rem(24px); + min-width: rem(24px); + min-height: rem(24px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_657_13218)'%3E%3Cpath d='M9.9987 15.25C6.8737 15.25 4.33203 12.7083 4.33203 9.62498V1.04165C4.33203 0.583313 4.70703 0.208313 5.16536 0.208313H14.832C15.2904 0.208313 15.6654 0.583313 15.6654 1.04165V9.62498C15.6654 12.75 13.1237 15.25 9.9987 15.25ZM5.9987 1.83331V9.62498C5.9987 11.8333 7.79036 13.625 9.9987 13.625C12.207 13.625 13.9987 11.8333 13.9987 9.62498V1.83331H5.9987Z' fill='%2348A23F'/%3E%3Cpath d='M10.0013 19.7917C9.54297 19.7917 9.16797 19.4167 9.16797 18.9583V14.4583C9.16797 14 9.54297 13.625 10.0013 13.625C10.4596 13.625 10.8346 14 10.8346 14.4583V19C10.8346 19.4167 10.4596 19.7917 10.0013 19.7917Z' fill='%2348A23F'/%3E%3Cpath d='M13.5417 19.7917H6.45833C6 19.7917 5.625 19.4167 5.625 18.9583C5.625 18.5 6 18.125 6.45833 18.125H13.5417C14 18.125 14.375 18.5 14.375 18.9583C14.375 19.4167 14 19.7917 13.5417 19.7917Z' fill='%2348A23F'/%3E%3Cpath d='M16.2904 9.16669C15.6237 9.16669 14.957 8.95835 14.3737 8.58335C14.1237 8.41669 13.9987 8.16669 13.9987 7.91669V3.41669C13.9987 3.12502 14.1237 2.87502 14.3737 2.75002C14.957 2.37502 15.582 2.16669 16.2904 2.16669C18.207 2.16669 19.7904 3.75002 19.7904 5.66669C19.7904 7.58335 18.207 9.16669 16.2904 9.16669ZM15.6654 7.41669C15.8737 7.50002 16.082 7.54169 16.2904 7.54169C17.332 7.54169 18.1654 6.70835 18.1654 5.66669C18.1654 4.62502 17.332 3.79169 16.2904 3.79169C16.082 3.79169 15.832 3.83335 15.6654 3.91669V7.41669ZM3.70703 9.16669C1.79036 9.16669 0.207031 7.58335 0.207031 5.66669C0.207031 3.75002 1.79036 2.16669 3.70703 2.16669C4.3737 2.16669 5.04036 2.37502 5.6237 2.75002C5.8737 2.91669 5.9987 3.16669 5.9987 3.41669V7.91669C5.9987 8.20835 5.8737 8.45835 5.6237 8.58335C5.04036 8.95835 4.3737 9.16669 3.70703 9.16669ZM3.70703 3.79169C2.66536 3.79169 1.83203 4.62502 1.83203 5.66669C1.83203 6.70835 2.66536 7.54169 3.70703 7.54169C3.91536 7.54169 4.16536 7.50002 4.33203 7.41669V3.91669C4.16536 3.83335 3.91536 3.79169 3.70703 3.79169Z' fill='%2348A23F'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_657_13218'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); +} + +.o-hammer-icon { + display: inline-block; + vertical-align: middle; + width: rem(24px); + height: rem(24px); + min-width: rem(24px); + min-height: rem(24px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.7 16.3L11.9 9.50001L14.7 6.70001C15.5 5.90001 15.5 4.50001 14.7 3.70001L12.3 1.30001C11.5 0.500012 10.1 0.500012 9.3 1.30001L2.8 7.80001C2 8.60001 2 10 2.8 10.8L5.2 13.2C5.6 13.6 6.2 13.8 6.7 13.8C7.2 13.8 7.8 13.6 8.2 13.2L10.5 10.9L17.3 17.7C17.5 17.9 17.8 18 18 18C18.2 18 18.5 17.9 18.7 17.7C19.1 17.3 19.1 16.7 18.7 16.3ZM6.8 11.8C6.8 11.8 6.7 11.8 6.6 11.8L4.2 9.40001C4.2 9.40001 4.2 9.30001 4.2 9.20001L10.7 2.70001H10.8H10.9L13.3 5.10001C13.3 5.10001 13.3 5.20001 13.3 5.30001L6.8 11.8ZM13 19H1C0.4 19 0 18.6 0 18C0 17.4 0.4 17 1 17H13C13.6 17 14 17.4 14 18C14 18.6 13.6 19 13 19Z' fill='%23FF6E00'/%3E%3C/svg%3E%0A"); +} + +.o-edit-icon { + display: inline-block; + vertical-align: middle; + width: rem(16px); + height: rem(16px); + min-width: rem(16px); + min-height: rem(16px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9335 2.89333L9.10686 1.06666C8.86846 0.842727 8.55606 0.714236 8.22908 0.705632C7.90211 0.697027 7.58338 0.80891 7.33353 1.02L1.33353 7.02C1.11804 7.23731 0.983867 7.52213 0.953531 7.82666L0.666864 10.6067C0.657884 10.7043 0.670554 10.8027 0.703972 10.8949C0.73739 10.9871 0.790733 11.0708 0.860198 11.14C0.922491 11.2018 0.996369 11.2507 1.07759 11.2838C1.15882 11.317 1.24579 11.3338 1.33353 11.3333H1.39353L4.17353 11.08C4.47806 11.0497 4.76289 10.9155 4.9802 10.7L10.9802 4.7C11.2131 4.45397 11.3389 4.12567 11.3302 3.78702C11.3214 3.44837 11.1788 3.127 10.9335 2.89333ZM4.05353 9.74666L2.05353 9.93333L2.23353 7.93333L6.0002 4.21333L7.8002 6.01333L4.05353 9.74666ZM8.66686 5.12L6.8802 3.33333L8.1802 2L10.0002 3.82L8.66686 5.12Z' fill='black'/%3E%3C/svg%3E%0A"); +} + +.c-btn--icon:hover .o-edit-icon { + background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9335 2.89333L9.10686 1.06666C8.86846 0.842727 8.55606 0.714236 8.22908 0.705632C7.90211 0.697027 7.58338 0.80891 7.33353 1.02L1.33353 7.02C1.11804 7.23731 0.983867 7.52213 0.953531 7.82666L0.666864 10.6067C0.657884 10.7043 0.670554 10.8027 0.703972 10.8949C0.73739 10.9871 0.790733 11.0708 0.860198 11.14C0.922491 11.2018 0.996369 11.2507 1.07759 11.2838C1.15882 11.317 1.24579 11.3338 1.33353 11.3333H1.39353L4.17353 11.08C4.47806 11.0497 4.76289 10.9155 4.9802 10.7L10.9802 4.7C11.2131 4.45397 11.3389 4.12567 11.3302 3.78702C11.3214 3.44837 11.1788 3.127 10.9335 2.89333ZM4.05353 9.74666L2.05353 9.93333L2.23353 7.93333L6.0002 4.21333L7.8002 6.01333L4.05353 9.74666ZM8.66686 5.12L6.8802 3.33333L8.1802 2L10.0002 3.82L8.66686 5.12Z' fill='%2348A23F'/%3E%3C/svg%3E%0A"); +} + +.o-edit-icon--green { + display: inline-block; + vertical-align: middle; + width: rem(18px); + height: rem(18px); + min-width: rem(18px); + min-height: rem(18px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9335 2.89333L9.10686 1.06666C8.86846 0.842727 8.55606 0.714236 8.22908 0.705632C7.90211 0.697027 7.58338 0.80891 7.33353 1.02L1.33353 7.02C1.11804 7.23731 0.983867 7.52213 0.953531 7.82666L0.666864 10.6067C0.657884 10.7043 0.670554 10.8027 0.703972 10.8949C0.73739 10.9871 0.790733 11.0708 0.860198 11.14C0.922491 11.2018 0.996369 11.2507 1.07759 11.2838C1.15882 11.317 1.24579 11.3338 1.33353 11.3333H1.39353L4.17353 11.08C4.47806 11.0497 4.76289 10.9155 4.9802 10.7L10.9802 4.7C11.2131 4.45397 11.3389 4.12567 11.3302 3.78702C11.3214 3.44837 11.1788 3.127 10.9335 2.89333ZM4.05353 9.74666L2.05353 9.93333L2.23353 7.93333L6.0002 4.21333L7.8002 6.01333L4.05353 9.74666ZM8.66686 5.12L6.8802 3.33333L8.1802 2L10.0002 3.82L8.66686 5.12Z' fill='%2348A23F'/%3E%3C/svg%3E%0A"); +} + +.o-delete-icon { + display: inline-block; + vertical-align: middle; + width: rem(16px); + height: rem(16px); + min-width: rem(16px); + min-height: rem(16px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='10' height='12' viewBox='0 0 10 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.54351C0 2.69147 0.0587754 2.83337 0.163396 2.93799C0.268017 3.04261 0.409914 3.10138 0.55787 3.10138H0.8554V9.69354C0.855892 10.1803 1.04945 10.647 1.3936 10.9912C1.73776 11.3354 2.20441 11.5291 2.69116 11.5297H7.30884C7.79559 11.5291 8.26224 11.3354 8.6064 10.9912C8.95055 10.647 9.14411 10.1803 9.1446 9.69354V3.10138H9.44213C9.59009 3.10138 9.73198 3.04261 9.8366 2.93799C9.94122 2.83337 10 2.69147 10 2.54351C10 2.39556 9.94122 2.25366 9.8366 2.14904C9.73198 2.04442 9.59009 1.98564 9.44213 1.98564H7.48959V1.40992C7.48959 0.632624 6.85733 0 6.08004 0H3.91996C3.14267 0 2.51041 0.632252 2.51041 1.40992V1.98527H0.55787C0.409914 1.98527 0.268017 2.04405 0.163396 2.14867C0.0587754 2.25329 0 2.39556 0 2.54351ZM3.62615 1.41029C3.62615 1.24777 3.75781 1.11611 3.91996 1.11611H6.08004C6.24219 1.11611 6.37385 1.24777 6.37385 1.41029V1.98564H3.62578V1.40992L3.62615 1.41029ZM1.97114 3.10138H8.02886V9.69354C8.02866 9.88448 7.95275 10.0675 7.81778 10.2026C7.6828 10.3376 7.49977 10.4136 7.30884 10.4139H2.69116C2.50023 10.4136 2.3172 10.3376 2.18222 10.2026C2.04725 10.0675 1.97134 9.88448 1.97114 9.69354V3.10138Z' fill='black'/%3E%3Cpath d='M3.61256 9.38725C3.76051 9.38725 3.90241 9.32847 4.00703 9.22385C4.11165 9.11923 4.17043 8.97733 4.17043 8.82938V4.68775C4.17043 4.5398 4.11165 4.3979 4.00703 4.29328C3.90241 4.18866 3.76051 4.12988 3.61256 4.12988C3.4646 4.12988 3.3227 4.18866 3.21808 4.29328C3.11346 4.3979 3.05469 4.5398 3.05469 4.68775V8.82938C3.05469 8.97733 3.11346 9.11923 3.21808 9.22385C3.3227 9.32847 3.4646 9.38725 3.61256 9.38725ZM6.38554 9.38725C6.5335 9.38725 6.67539 9.32847 6.78001 9.22385C6.88463 9.11923 6.94341 8.97733 6.94341 8.82938V4.68775C6.94341 4.5398 6.88463 4.3979 6.78001 4.29328C6.67539 4.18866 6.5335 4.12988 6.38554 4.12988C6.23758 4.12988 6.09569 4.18866 5.99107 4.29328C5.88645 4.3979 5.82767 4.5398 5.82767 4.68775V8.82938C5.82767 8.97733 5.88645 9.11923 5.99107 9.22385C6.09569 9.32847 6.23758 9.38725 6.38554 9.38725Z' fill='black'/%3E%3C/svg%3E%0A"); +} + +.c-btn--icon:hover .o-delete-icon { + background-image: url("data:image/svg+xml,%3Csvg width='10' height='12' viewBox='0 0 10 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.54351C0 2.69147 0.0587754 2.83337 0.163396 2.93799C0.268017 3.04261 0.409914 3.10138 0.55787 3.10138H0.8554V9.69354C0.855892 10.1803 1.04945 10.647 1.3936 10.9912C1.73776 11.3354 2.20441 11.5291 2.69116 11.5297H7.30884C7.79559 11.5291 8.26224 11.3354 8.6064 10.9912C8.95055 10.647 9.14411 10.1803 9.1446 9.69354V3.10138H9.44213C9.59009 3.10138 9.73198 3.04261 9.8366 2.93799C9.94122 2.83337 10 2.69147 10 2.54351C10 2.39556 9.94122 2.25366 9.8366 2.14904C9.73198 2.04442 9.59009 1.98564 9.44213 1.98564H7.48959V1.40992C7.48959 0.632624 6.85733 0 6.08004 0H3.91996C3.14267 0 2.51041 0.632252 2.51041 1.40992V1.98527H0.55787C0.409914 1.98527 0.268017 2.04405 0.163396 2.14867C0.0587754 2.25329 0 2.39556 0 2.54351ZM3.62615 1.41029C3.62615 1.24777 3.75781 1.11611 3.91996 1.11611H6.08004C6.24219 1.11611 6.37385 1.24777 6.37385 1.41029V1.98564H3.62578V1.40992L3.62615 1.41029ZM1.97114 3.10138H8.02886V9.69354C8.02866 9.88448 7.95275 10.0675 7.81778 10.2026C7.6828 10.3376 7.49977 10.4136 7.30884 10.4139H2.69116C2.50023 10.4136 2.3172 10.3376 2.18222 10.2026C2.04725 10.0675 1.97134 9.88448 1.97114 9.69354V3.10138Z' fill='%2348A23F'/%3E%3Cpath d='M3.61256 9.38725C3.76051 9.38725 3.90241 9.32847 4.00703 9.22385C4.11165 9.11923 4.17043 8.97733 4.17043 8.82938V4.68775C4.17043 4.5398 4.11165 4.3979 4.00703 4.29328C3.90241 4.18866 3.76051 4.12988 3.61256 4.12988C3.4646 4.12988 3.3227 4.18866 3.21808 4.29328C3.11346 4.3979 3.05469 4.5398 3.05469 4.68775V8.82938C3.05469 8.97733 3.11346 9.11923 3.21808 9.22385C3.3227 9.32847 3.4646 9.38725 3.61256 9.38725ZM6.38554 9.38725C6.5335 9.38725 6.67539 9.32847 6.78001 9.22385C6.88463 9.11923 6.94341 8.97733 6.94341 8.82938V4.68775C6.94341 4.5398 6.88463 4.3979 6.78001 4.29328C6.67539 4.18866 6.5335 4.12988 6.38554 4.12988C6.23758 4.12988 6.09569 4.18866 5.99107 4.29328C5.88645 4.3979 5.82767 4.5398 5.82767 4.68775V8.82938C5.82767 8.97733 5.88645 9.11923 5.99107 9.22385C6.09569 9.32847 6.23758 9.38725 6.38554 9.38725Z' fill='%2348A23F'/%3E%3C/svg%3E%0A"); +} + +.o-delete-icon--red { + display: inline-block; + vertical-align: middle; + width: rem(16px); + height: rem(16px); + min-width: rem(16px); + min-height: rem(16px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='10' height='12' viewBox='0 0 10 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.54351C0 2.69147 0.0587754 2.83337 0.163396 2.93799C0.268017 3.04261 0.409914 3.10138 0.55787 3.10138H0.8554V9.69354C0.855892 10.1803 1.04945 10.647 1.3936 10.9912C1.73776 11.3354 2.20441 11.5291 2.69116 11.5297H7.30884C7.79559 11.5291 8.26224 11.3354 8.6064 10.9912C8.95055 10.647 9.14411 10.1803 9.1446 9.69354V3.10138H9.44213C9.59009 3.10138 9.73198 3.04261 9.8366 2.93799C9.94122 2.83337 10 2.69147 10 2.54351C10 2.39556 9.94122 2.25366 9.8366 2.14904C9.73198 2.04442 9.59009 1.98564 9.44213 1.98564H7.48959V1.40992C7.48959 0.632624 6.85733 0 6.08004 0H3.91996C3.14267 0 2.51041 0.632252 2.51041 1.40992V1.98527H0.55787C0.409914 1.98527 0.268017 2.04405 0.163396 2.14867C0.0587754 2.25329 0 2.39556 0 2.54351ZM3.62615 1.41029C3.62615 1.24777 3.75781 1.11611 3.91996 1.11611H6.08004C6.24219 1.11611 6.37385 1.24777 6.37385 1.41029V1.98564H3.62578V1.40992L3.62615 1.41029ZM1.97114 3.10138H8.02886V9.69354C8.02866 9.88448 7.95275 10.0675 7.81778 10.2026C7.6828 10.3376 7.49977 10.4136 7.30884 10.4139H2.69116C2.50023 10.4136 2.3172 10.3376 2.18222 10.2026C2.04725 10.0675 1.97134 9.88448 1.97114 9.69354V3.10138Z' fill='%23fc2043'/%3E%3Cpath d='M3.61256 9.38725C3.76051 9.38725 3.90241 9.32847 4.00703 9.22385C4.11165 9.11923 4.17043 8.97733 4.17043 8.82938V4.68775C4.17043 4.5398 4.11165 4.3979 4.00703 4.29328C3.90241 4.18866 3.76051 4.12988 3.61256 4.12988C3.4646 4.12988 3.3227 4.18866 3.21808 4.29328C3.11346 4.3979 3.05469 4.5398 3.05469 4.68775V8.82938C3.05469 8.97733 3.11346 9.11923 3.21808 9.22385C3.3227 9.32847 3.4646 9.38725 3.61256 9.38725ZM6.38554 9.38725C6.5335 9.38725 6.67539 9.32847 6.78001 9.22385C6.88463 9.11923 6.94341 8.97733 6.94341 8.82938V4.68775C6.94341 4.5398 6.88463 4.3979 6.78001 4.29328C6.67539 4.18866 6.5335 4.12988 6.38554 4.12988C6.23758 4.12988 6.09569 4.18866 5.99107 4.29328C5.88645 4.3979 5.82767 4.5398 5.82767 4.68775V8.82938C5.82767 8.97733 5.88645 9.11923 5.99107 9.22385C6.09569 9.32847 6.23758 9.38725 6.38554 9.38725Z' fill='%23fc2043'/%3E%3C/svg%3E%0A"); +} + +.o-info-icon { + display: inline-block; + vertical-align: middle; + width: rem(16px); + height: rem(16px); + min-width: rem(16px); + min-height: rem(16px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.9987 0.333252C5.68016 0.333252 4.39123 0.724245 3.2949 1.45679C2.19857 2.18933 1.34409 3.23052 0.839504 4.4487C0.33492 5.66687 0.202898 7.00731 0.460132 8.30052C0.717367 9.59373 1.35231 10.7816 2.28466 11.714C3.21701 12.6463 4.40489 13.2813 5.6981 13.5385C6.99131 13.7957 8.33175 13.6637 9.54992 13.1591C10.7681 12.6545 11.8093 11.8 12.5418 10.7037C13.2744 9.60739 13.6654 8.31846 13.6654 6.99992C13.6654 6.12444 13.4929 5.25753 13.1579 4.4487C12.8229 3.63986 12.3318 2.90493 11.7127 2.28587C11.0937 1.66682 10.3588 1.17575 9.54992 0.840722C8.74109 0.50569 7.87418 0.333252 6.9987 0.333252ZM6.9987 12.3333C5.94387 12.3333 4.91272 12.0205 4.03566 11.4344C3.1586 10.8484 2.47501 10.0154 2.07134 9.0409C1.66768 8.06636 1.56206 6.994 1.76785 5.95944C1.97363 4.92487 2.48158 3.97456 3.22746 3.22868C3.97334 2.4828 4.92365 1.97485 5.95822 1.76906C6.99278 1.56328 8.06514 1.66889 9.03968 2.07256C10.0142 2.47623 10.8472 3.15982 11.4332 4.03688C12.0192 4.91394 12.332 5.94508 12.332 6.99992C12.332 8.41441 11.7701 9.77096 10.7699 10.7712C9.76974 11.7713 8.41319 12.3333 6.9987 12.3333Z' fill='%23A7A8AA'/%3E%3Cpath d='M6.9987 4.99996C7.36689 4.99996 7.66536 4.70148 7.66536 4.33329C7.66536 3.9651 7.36689 3.66663 6.9987 3.66663C6.63051 3.66663 6.33203 3.9651 6.33203 4.33329C6.33203 4.70148 6.63051 4.99996 6.9987 4.99996Z' fill='%23A7A8AA'/%3E%3Cpath d='M6.9987 5.66663C6.82189 5.66663 6.65232 5.73686 6.52729 5.86189C6.40227 5.98691 6.33203 6.15648 6.33203 6.33329V9.66663C6.33203 9.84344 6.40227 10.013 6.52729 10.138C6.65232 10.2631 6.82189 10.3333 6.9987 10.3333C7.17551 10.3333 7.34508 10.2631 7.4701 10.138C7.59513 10.013 7.66536 9.84344 7.66536 9.66663V6.33329C7.66536 6.15648 7.59513 5.98691 7.4701 5.86189C7.34508 5.73686 7.17551 5.66663 6.9987 5.66663Z' fill='%23A7A8AA'/%3E%3C/svg%3E%0A"); + cursor: help; +} + +.o-info-icon--green { + display: inline-block; + vertical-align: middle; + width: rem(16px); + height: rem(16px); + min-width: rem(16px); + min-height: rem(16px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.9987 0.333252C5.68016 0.333252 4.39123 0.724245 3.2949 1.45679C2.19857 2.18933 1.34409 3.23052 0.839504 4.4487C0.33492 5.66687 0.202898 7.00731 0.460132 8.30052C0.717367 9.59373 1.35231 10.7816 2.28466 11.714C3.21701 12.6463 4.40489 13.2813 5.6981 13.5385C6.99131 13.7957 8.33175 13.6637 9.54992 13.1591C10.7681 12.6545 11.8093 11.8 12.5418 10.7037C13.2744 9.60739 13.6654 8.31846 13.6654 6.99992C13.6654 6.12444 13.4929 5.25753 13.1579 4.4487C12.8229 3.63986 12.3318 2.90493 11.7127 2.28587C11.0937 1.66682 10.3588 1.17575 9.54992 0.840722C8.74109 0.50569 7.87418 0.333252 6.9987 0.333252ZM6.9987 12.3333C5.94387 12.3333 4.91272 12.0205 4.03566 11.4344C3.1586 10.8484 2.47501 10.0154 2.07134 9.0409C1.66768 8.06636 1.56206 6.994 1.76785 5.95944C1.97363 4.92487 2.48158 3.97456 3.22746 3.22868C3.97334 2.4828 4.92365 1.97485 5.95822 1.76906C6.99278 1.56328 8.06514 1.66889 9.03968 2.07256C10.0142 2.47623 10.8472 3.15982 11.4332 4.03688C12.0192 4.91394 12.332 5.94508 12.332 6.99992C12.332 8.41441 11.7701 9.77096 10.7699 10.7712C9.76974 11.7713 8.41319 12.3333 6.9987 12.3333Z' fill='%2348A23F'/%3E%3Cpath d='M6.9987 4.99996C7.36689 4.99996 7.66536 4.70148 7.66536 4.33329C7.66536 3.9651 7.36689 3.66663 6.9987 3.66663C6.63051 3.66663 6.33203 3.9651 6.33203 4.33329C6.33203 4.70148 6.63051 4.99996 6.9987 4.99996Z' fill='%2348A23F'/%3E%3Cpath d='M6.9987 5.66663C6.82189 5.66663 6.65232 5.73686 6.52729 5.86189C6.40227 5.98691 6.33203 6.15648 6.33203 6.33329V9.66663C6.33203 9.84344 6.40227 10.013 6.52729 10.138C6.65232 10.2631 6.82189 10.3333 6.9987 10.3333C7.17551 10.3333 7.34508 10.2631 7.4701 10.138C7.59513 10.013 7.66536 9.84344 7.66536 9.66663V6.33329C7.66536 6.15648 7.59513 5.98691 7.4701 5.86189C7.34508 5.73686 7.17551 5.66663 6.9987 5.66663Z' fill='%2348A23F'/%3E%3C/svg%3E%0A"); + cursor: help; +} + +.o-info-icon--yellow { + display: inline-block; + vertical-align: middle; + width: rem(16px); + height: rem(16px); + min-width: rem(16px); + min-height: rem(16px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.9987 0.333252C5.68016 0.333252 4.39123 0.724245 3.2949 1.45679C2.19857 2.18933 1.34409 3.23052 0.839504 4.4487C0.33492 5.66687 0.202898 7.00731 0.460132 8.30052C0.717367 9.59373 1.35231 10.7816 2.28466 11.714C3.21701 12.6463 4.40489 13.2813 5.6981 13.5385C6.99131 13.7957 8.33175 13.6637 9.54992 13.1591C10.7681 12.6545 11.8093 11.8 12.5418 10.7037C13.2744 9.60739 13.6654 8.31846 13.6654 6.99992C13.6654 6.12444 13.4929 5.25753 13.1579 4.4487C12.8229 3.63986 12.3318 2.90493 11.7127 2.28587C11.0937 1.66682 10.3588 1.17575 9.54992 0.840722C8.74109 0.50569 7.87418 0.333252 6.9987 0.333252ZM6.9987 12.3333C5.94387 12.3333 4.91272 12.0205 4.03566 11.4344C3.1586 10.8484 2.47501 10.0154 2.07134 9.0409C1.66768 8.06636 1.56206 6.994 1.76785 5.95944C1.97363 4.92487 2.48158 3.97456 3.22746 3.22868C3.97334 2.4828 4.92365 1.97485 5.95822 1.76906C6.99278 1.56328 8.06514 1.66889 9.03968 2.07256C10.0142 2.47623 10.8472 3.15982 11.4332 4.03688C12.0192 4.91394 12.332 5.94508 12.332 6.99992C12.332 8.41441 11.7701 9.77096 10.7699 10.7712C9.76974 11.7713 8.41319 12.3333 6.9987 12.3333Z' fill='%23FBAA19'/%3E%3Cpath d='M6.9987 4.99996C7.36689 4.99996 7.66536 4.70148 7.66536 4.33329C7.66536 3.9651 7.36689 3.66663 6.9987 3.66663C6.63051 3.66663 6.33203 3.9651 6.33203 4.33329C6.33203 4.70148 6.63051 4.99996 6.9987 4.99996Z' fill='%23FBAA19'/%3E%3Cpath d='M6.9987 5.66663C6.82189 5.66663 6.65232 5.73686 6.52729 5.86189C6.40227 5.98691 6.33203 6.15648 6.33203 6.33329V9.66663C6.33203 9.84344 6.40227 10.013 6.52729 10.138C6.65232 10.2631 6.82189 10.3333 6.9987 10.3333C7.17551 10.3333 7.34508 10.2631 7.4701 10.138C7.59513 10.013 7.66536 9.84344 7.66536 9.66663V6.33329C7.66536 6.15648 7.59513 5.98691 7.4701 5.86189C7.34508 5.73686 7.17551 5.66663 6.9987 5.66663Z' fill='%23FBAA19'/%3E%3C/svg%3E%0A"); + cursor: help; +} + +.o-close-icon { + display: inline-block; + vertical-align: middle; + width: rem(30px); + height: rem(30px); + min-width: rem(30px); + min-height: rem(30px); + background: center center/85% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0158 0.671877C6.65487 0.667483 0.684084 6.63111 0.67969 13.992C0.675295 21.3529 6.63892 27.3237 13.9998 27.3281C17.5362 27.3339 20.9292 25.9305 23.4282 23.4284C25.9282 20.9305 27.3338 17.542 27.3359 14.008C27.3403 6.64706 21.3767 0.676272 14.0158 0.671877ZM14.0162 25.9948C7.3916 25.9993 2.01774 20.6327 2.01319 14.0081C2.00871 7.38363 7.37533 2.00969 13.9998 2.00521C17.1826 1.99951 20.2364 3.26237 22.4855 5.51433C24.7354 7.76213 26.0007 10.8114 26.0028 13.9919C26.0073 20.6164 20.6407 25.9902 14.0162 25.9948ZM14.9425 14L19.1847 9.75782C19.4387 9.49862 19.4387 9.08382 19.1847 8.82463C18.927 8.56169 18.505 8.55746 18.242 8.81511L13.9998 13.0573L9.75765 8.81519C9.49846 8.5612 9.08366 8.5612 8.82447 8.81519C8.56153 9.07284 8.55729 9.49488 8.81494 9.75782L13.0571 14L8.81494 18.2422C8.68994 18.3672 8.61979 18.5367 8.61971 18.7135C8.61971 19.0816 8.91813 19.3801 9.2863 19.3802C9.46314 19.3805 9.63282 19.3101 9.75765 19.1849L13.9998 14.9427L18.242 19.1849C18.3669 19.3101 18.5365 19.3805 18.7134 19.3802C18.8901 19.3801 19.0596 19.31 19.1846 19.1851C19.445 18.9247 19.445 18.5026 19.1847 18.2422L14.9425 14Z' fill='%23A7A8AA'/%3E%3C/svg%3E%0A"); +} + +.o-icon--md { + background-size: 75%; +} + +.o-user-icon { + display: inline-block; + vertical-align: middle; + width: rem(16px); + min-width: rem(16px); + height: rem(16px); + background: center center/80% no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1113_12583)'%3E%3Cpath d='M6 7.5C7.65685 7.5 9 6.15685 9 4.5C9 2.84315 7.65685 1.5 6 1.5C4.34315 1.5 3 2.84315 3 4.5C3 6.15685 4.34315 7.5 6 7.5Z' stroke='%2348A23F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.45215 10.1246C1.91319 9.32654 2.57612 8.6639 3.37434 8.20321C4.17256 7.74251 5.07797 7.49999 5.99959 7.5C6.92122 7.50001 7.82661 7.74255 8.62483 8.20326C9.42304 8.66397 10.086 9.32663 10.547 10.1247' stroke='%2348A23F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1113_12583'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); + transition: $transition; + cursor: pointer; + + &:hover { + filter: grayscale(1); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_link.scss b/app/assets/stylesheets/objects/_link.scss new file mode 100644 index 000000000..9e0a7be8b --- /dev/null +++ b/app/assets/stylesheets/objects/_link.scss @@ -0,0 +1,24 @@ +.o-link { + font-weight: 500; + font-size: rem(14px); + line-height: rem(14px); + text-decoration: underline !important; + color: $primary-blue-color !important; + + &:hover { + color: $secondary-blue-color !important; + } + + &:visited { + color: $primary-blue-color !important; + + &:hover { + color: $secondary-blue-color !important; + } + } + + &:disabled, &.u-disabled { + color: $grey-300-color !important; + pointer-events: none; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_new.scss b/app/assets/stylesheets/objects/_new.scss new file mode 100644 index 000000000..8b7af51fd --- /dev/null +++ b/app/assets/stylesheets/objects/_new.scss @@ -0,0 +1,9 @@ +.o-new { + display: inline-block; + vertical-align: middle; + width: rem(4px); + height: rem(4px); + border-radius: rem(2px); + background-color: $primary-orange-color; + margin-left: rem(8px); +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_objects.scss b/app/assets/stylesheets/objects/_objects.scss new file mode 100644 index 000000000..fdedd2056 --- /dev/null +++ b/app/assets/stylesheets/objects/_objects.scss @@ -0,0 +1,10 @@ +@import "container"; +@import "hamburger/hamburgers"; +@import "arrow"; +@import "spacer"; +@import "grid"; +@import "icons"; +@import "new"; +@import "link"; +@import "tooltip"; +@import "form"; \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_spacer.scss b/app/assets/stylesheets/objects/_spacer.scss new file mode 100644 index 000000000..805f44b9c --- /dev/null +++ b/app/assets/stylesheets/objects/_spacer.scss @@ -0,0 +1,11 @@ +.o-spacer { + +} + +.o-spacer--header { + margin-top: 0; + + @include mq(desktop) { + margin-top: rem(60px); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_tooltip.scss b/app/assets/stylesheets/objects/_tooltip.scss new file mode 100644 index 000000000..b5a1eb65c --- /dev/null +++ b/app/assets/stylesheets/objects/_tooltip.scss @@ -0,0 +1,21 @@ +.tippy-tooltip.eis-theme, .tippy-box[data-theme="eis"] .tippy-content { + background-color: $black-color !important; + color: $white-color !important; + text-align: center; + font-size: rem(12px); + line-height: rem(20px); + border-radius: rem(8px) !important; + + @include mq(laptop) { + font-size: rem(14px); + line-height: rem(24px); + } +} + +.tippy-box[data-theme="eis"] { + border-radius: rem(8px) !important; + + @include mq(laptop) { + max-width: rem(385px) !important; + } +} diff --git a/app/assets/stylesheets/objects/hamburger/_base.scss b/app/assets/stylesheets/objects/hamburger/_base.scss new file mode 100644 index 000000000..82cd36a9b --- /dev/null +++ b/app/assets/stylesheets/objects/hamburger/_base.scss @@ -0,0 +1,95 @@ +// Hamburger +// ================================================== +.hamburger { + padding: $hamburger-padding-y $hamburger-padding-x; + display: inline-block; + cursor: pointer; + + transition-property: opacity, filter; + transition-duration: 0.15s; + transition-timing-function: linear; + + // Normalize ( - - - -
- -
-
- Telli teavitused + + <%= form_with url: auctions_path, + method: :get, data: { controller: 'form--debounce form--filter', + form__debounce_target: 'form', + form__filter_target: 'form', + turbo_action: "advance", + turbo_frame: "auction_list", + action: 'input->form--debounce#search' + } do |f| %> + +
+
+ <%= f.radio_button :type, 'all', class: "js-table-filter-btn", checked: true, style: 'visibility: hidden; position: absolute;', id: 'filter_all_button', data: { form__filter_target: 'button' } %> + <%= f.label :type_all, "kõik", class: "c-table__filters__btn is-active js-table-filter-btn", style: 'cursor: pointer;', for: 'filter_all_button', data: { form__filter_target: 'label', action: "click->form--filter#click" } %> + + <%= f.radio_button :type, 'english', class: "js-table-filter-btn", style: 'visibility: hidden; position: absolute;', id: 'filter_IO_button', data: { form__filter_target: 'button' } %> + <%= f.label :type_english, class: "c-table__filters__btn js-table-filter-btn", style: 'cursor: pointer;', for: 'filter_IO_button', data: { form__filter_target: 'label', action: "click->form--filter#click" } do %> + + inglise oksjon + <% end %> + + <%= f.radio_button :type, 'blind', class: "js-table-filter-btn", style: 'visibility: hidden; position: absolute;', id: 'filter_PO_button', data: { form__filter_target: 'button' } %> + <%= f.label :type_blind, class: "c-table__filters__btn js-table-filter-btn", style: 'cursor: pointer;', for: 'filter_PO_button', data: { form__filter_target: 'label', action: "click->form--filter#click" } do %> + + pime oksjon + <% end %> +
+ + +
+ <%= f.search_field :domain_name, value: params[:domain_name], placeholder: t('search_by_domain_name'), class: 'c-table__search__input js-table-search-dt' %> +
+ +
+ Telli teavitused +
+
+ inglise oksjon +
+ pime oksjon +
+
-
- inglise oksjon -
- pime oksjon -
-
+ <% end %> + + <%= turbo_frame_tag "auction_list" do %> @@ -134,286 +157,13 @@ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + <%= render @auctions %>
Pakkumustegevused
lumememm.eeIO25-01-2023 | 17:08:3412 000 €RavynTheMan - -
meekarud.eePO25-01-2023 | 23:59:59 - -
auto25.eePO25-01-2023 | 23:59:59150 €Sinu pakkumus -
- - -
-
värskevesi.eeIO25-01-2023 | 23:59:592 000 €RavynTheManEsita pakkumus
lumememm.eeIO25-01-2023 | 17:08:3412 000 €RavynTheManEsita pakkumus
meekarud.eePO25-01-2023 | 23:59:59Esita pakkumus
auto25.eePO25-01-2023 | 23:59:59150 €Sinu pakkumus -
- - -
-
värskevesi.eeIO25-01-2023 | 23:59:592 000 €RavynTheManEsita pakkumus
lumememm.eeIO25-01-2023 | 17:08:3412 000 €RavynTheManEsita pakkumus
meekarud.eePO25-01-2023 | 23:59:59Esita pakkumus
auto25.eePO25-01-2023 | 23:59:59150 €Sinu pakkumus -
- - -
-
värskevesi.eeIO25-01-2023 | 23:59:592 000 €RavynTheManEsita pakkumus
lumememm.eeIO25-01-2023 | 17:08:3412 000 €RavynTheManEsita pakkumus
meekarud.eePO25-01-2023 | 23:59:59Esita pakkumus
auto25.eePO25-01-2023 | 23:59:59150 €Sinu pakkumus -
- - -
-
värskevesi.eeIO25-01-2023 | 23:59:592 000 €RavynTheManEsita pakkumus
lumememm.eeIO25-01-2023 | 17:08:3412 000 €RavynTheManEsita pakkumus
meekarud.eePO25-01-2023 | 23:59:59Esita pakkumus
auto25.eePO25-01-2023 | 23:59:59150 €Sinu pakkumus -
- - -
-
värskevesi.eeIO25-01-2023 | 23:59:592 000 €RavynTheManEsita pakkumus
lumememm.eeIO25-01-2023 | 17:08:3412 000 €RavynTheManEsita pakkumus
meekarud.eePO25-01-2023 | 23:59:59Esita pakkumus
auto25.eePO25-01-2023 | 23:59:59150 €Sinu pakkumus -
- - -
-
värskevesi.eeIO25-01-2023 | 23:59:592 000 €RavynTheManEsita pakkumus
lumememm.eeIO25-01-2023 | 17:08:3412 000 €RavynTheManEsita pakkumus
meekarud.eePO25-01-2023 | 23:59:59Esita pakkumus
auto25.eePO25-01-2023 | 23:59:59150 €Sinu pakkumus -
- - -
-
värskevesi.eeIO25-01-2023 | 23:59:592 000 €RavynTheManEsita pakkumus
+ <% end %> +
Näita kõiki