Skip to content

E
etersoft.com
Commit 6a7fcf41 authored by Davyd Dobryakov's avatar Davyd Dobryakov
Browse files
Options

Separate main.scss

parent 3711ecf7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 821 additions and 0 deletions
src/scss/utils/buttons.scss 0 → 100644
View file @ 6a7fcf41
.btn {
padding: 0.5rem 1rem;
border-radius: 5px;
}
.btn-default {
color: $default-color;
background-color: $neutral-primary;
}
.btn-default:hover {
color: $neutral-primary;
background-color: $default-color;
border: 1px solid $neutral-primary;
}
.btn-primary {
color: $default-color;
background-color: $primary-color;
}
.btn-primary:hover {
color: $primary-color;
background-color: $default-color;
border: 1px solid $primary-color;
}
.btn-success {
color: $default-color;
background-color: $success-color;
}
.btn-success:hover {
color: $success-color;
background-color: $default-color;
border: 1px solid $success-color;
}
.btn-danger {
color: $default-color;
background-color: $danger-color;
}
.btn-danger:hover {
color: $danger-color;
background-color: $default-color;
border: 1px solid $danger-color;
}
.btn-warning {
color: $default-color;
background-color: $warning-color;
}
.btn-warning:hover {
color: $warning-color;
background-color: $default-color;
border: 1px solid $warning-color;
}
\ No newline at end of file
src/scss/utils/card.scss 0 → 100644
View file @ 6a7fcf41
@import "vars";
.card {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0;
width: 300px;
height: 300px;
text-align: center;
background: #fff;
color: #fff;
border: 1px solid #d7d7d7;
border-radius: 5px;
position: relative;
box-sizing: border-box;
margin: 0.1rem;
}
.card__image,
.card__image img {
width: 300px;
height: 300px;
}
.card__image,
.card__image img {
z-index: 1;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border-radius: 5px;
}
.card__overlay {
background: #000;
opacity: 0.7;
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
box-sizing: border-box;
border-radius: 5px;
}
.card__body {
padding: 0.5rem 1rem;
display: flex;
flex-direction: column;
}
.card__heading,
.card__text {
z-index: 3;
}
.card__text {
text-align: center;
}
.card__heading--animated,
.card__text--animated {
z-index: 3;
}
.card__text--animated {
font-size: rem(14);
transform: translateY(10%);
position: absolute;
visibility: hidden;
}
.card:hover .card__heading--animated {
transition: 0.3s ease;
}
.card:hover .card__text--animated {
transition: 0.3s ease;
transform: translateY(-10%);
position: static;
margin-top: 0.75rem;
visibility: visible;
}
.card-deck {
display: grid;
grid-template-columns: repeat(3, auto);
margin: auto;
padding: 1rem 0.5rem;
}
@media screen and (max-width: 1281px) {
.card-deck {
grid-template-columns: repeat(2, auto);
}
.card-deck .card,
.card-deck .card__overlay,
.card-deck .card__image,
.card-deck .card__image img {
width: 350px;
height: 350px;
}
}
@media screen and (max-width: $smDesktopWidth) {
.flex-column {
margin: 0;
}
}
@media screen and (max-width: $smTableWidth) {
.card-deck .card,
.card-deck .card__overlay,
.card-deck .card__image,
.card-deck .card__image img {
width: 280px;
height: 280px;
}
}
@media screen and (max-width: $phoneWidth) {
.card-deck {
grid-template-columns: repeat(1, auto);
margin: auto;
}
}
src/scss/utils/columns.scss 0 → 100644
View file @ 6a7fcf41
section {
margin: 0 20%;
display: grid;
grid-template-columns: repeat(2, 1fr);
background: $default-color;
border-bottom: 1px solid;
border-right: 1px solid;
border-left: 1px solid;
border-color: $border-base;
box-sizing: border-box;
}
section .left-column {
width: 100%;
height: 100%;
padding: 1rem 0.5rem;
}
section .right-column {
width: 100%;
height: 100%;
}
.flex-column {
display: flex;
flex-flow: column wrap;
margin: 0 20%;
padding: 1rem 0;
}
.flex-column h2 {
padding: 0 0.5rem;
}
.right-column .banner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.description {
padding: 0.5rem 0;
text-align: justify;
}
@media (min-width: $smDesktopWidth) and (max-width: $desktopWidth) {
section,
section.flex-column {
margin: 0 10%;
}
nav {
padding: 0.5rem 10%;
}
.hello-banner__text {
padding: 3rem 10%;
}
}
@media screen and (max-width: $smDesktopWidth) {
section {
display: flex;
flex-flow: column wrap;
margin: 0;
}
section .left-column {
order: 1;
}
.right-column,
.banner {
max-height: min-content;
}
nav {
padding: 0.5rem;
}
section.flex-column {
margin: 0;
}
section.card-deck {
margin: 0;
}
}
@media screen and (max-width: $smTableWidth) {
section.card-deck {
margin: 0;
}
section.card-deck .card-group {
flex-flow: column wrap;
}
}
src/scss/utils/common.scss 0 → 100644
View file @ 6a7fcf41
html {
line-height: $mainLineHeight;
font-size: $mainFontSize;
color: $mainFontColor;
height: 100%;
scroll-behavior: smooth;
@media screen and (max-width: $desktopWidth) {
font-size: 16px;
}
@media screen and (max-width: $tableWidth) {
font-size: 15px;
}
@media screen and (max-width: $phoneWidth) {
font-size: 14px;
}
}
body {
margin: 0;
padding: 0;
font-family: $mainFont;
font-size: $mainFontSize;
font-weight: $mainFontWeight;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: $default-color;
background: rgba(84.7, 91, 100, 0.1);
// background: #f7f7f7;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
a {
text-decoration: none;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
.wrapper {
display: flex;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
min-width: 100vh;
}
.content-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
width: 100%;
flex: 0 0 auto;
position: relative;
margin: 0 auto;
max-width: $desktopWidth;
@media screen and (max-width: $smDesktopWidth) {
max-width: $tableWidth;
}
@media screen and (max-width: $tableWidth) {
max-width: $phoneWidth;
}
@media screen and (max-width: $phoneWidth) {
max-width: $smPhoneWidth;
}
}
h1 {
font-size: rem(24);
font-weight: 600;
}
h2 {
font-size: rem(22);
font-weight: 600;
}
header {
z-index: 4;
position: sticky;
display: block;
background: $default-color;
transition: top 1s ease-out 0.5s;
}
.top-0 {
top: 0;
}
nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0.5rem 1rem;
box-shadow: 3px 0 3px rgba(0, 0, 0, 0.3);
padding: 0.5rem 20%;
}
nav a {
padding: 0 0.5rem;
}
ul.menu-right {
margin-top: auto;
margin-bottom: auto;
display: flex;
margin-left: auto;
order: 2;
flex-flow: row wrap;
}
ul.menu-right > * {
margin: auto 0;
margin-left: 0.25rem;
}
footer {
background: $default-color;
padding: 1rem 0.5rem;
text-align: center;
border: 1px solid $border-base;
}
.logo img {
@include size(60px);
}
a {
font-size: rem(18);
color: $neutral-primary;
}
a:hover {
color: $light-color;
}
.menu-button {
display: inline-block;
padding: 0.5em;
background-color: #fafafa;
border: 1px solid #ccc;
cursor: pointer;
}
.burger-icon {
@include burger(25px, 3px, 5px, #444);
}
.menu-button.is-active .burger-icon {
@include burger-to-cross;
}
.visually-hidden {
display: none;
visibility: hidden;
}
.visually-visible {
visibility: visible !important;
display: inherit !important;
}
@media screen and (min-width: $smDesktopWidth) {
.menu-button {
display: none;
visibility: hidden;
}
menu#menu {
display: none;
visibility: hidden;
}
}
@media screen and (max-width: $smDesktopWidth) {
.menu-right > li {
display: none;
visibility: hidden;
}
menu#menu {
border-top: 1px solid $border-base;
border-bottom: 1px solid $border-base;
display: none;
visibility: hidden;
flex-flow: column wrap;
width: 100%;
text-align: center;
z-index: 4;
position: sticky;
background: $default-color;
top: 76px;
}
menu#menu > a {
display: flex;
width: 100%;
border: inherit;
height: 40px;
}
menu#menu > a > span {
width: inherit;
text-align: center;
line-height: rem(40);
}
}
ol.default-list {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
ol.default-list > li {
display: list-item;
list-style-type: inherit !important;
}
select {
padding: 0.25rem;
border: 1px solid $border-base;
border-radius: 5px;
background: $default-color;
}
.pt-2 {
padding-top: 2rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.mb-3 {
margin-bottom: 1.5rem !important;
}
.map-iframe {
width: 100%;
height: 300px;
margin: 0 auto;
}
src/scss/utils/hello-banner.scss 0 → 100644
View file @ 6a7fcf41
.hello-banner {
width: 100%;
min-height: 500px;
max-height: 500px;
position: relative;
margin: 0 auto;
}
.hello-banner__text {
color: #fff;
padding: 3rem 2rem;
position: relative;
width: 100%;
padding: 3rem 20%;
z-index: 3;
height: 100%;
}
.hello-banner__text h1 {
font-size: rem(48);
font-weight: bold;
}
.hello-banner__text p {
font-size: rem(24);
}
.hello-banner__gradient {
background: #000;
opacity: 0.8;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.hello-banner__img {
filter: blur(2px);
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
background-image: url("../images/banner.jpg");
background-size: cover;
}
@media (min-width: $desktopWidth) and (max-width: $lgDesktopWidth) {
.hello-banner__text {
padding: 3rem 5%;
}
}
@media screen and (max-width: $smDesktopWidth) {
.hello-banner__text {
padding: 3rem 1rem;
}
}
@media screen and (min-width: $lgDesktopWidth) {
.hello-banner__text h1 {
font-size: rem(47);
}
.hello-banner__text p {
font-size: rem(22);
}
}
@media (min-width: $tableWidth) and (max-width: $smDesktopWidth) {
.hello-banner__text h1 {
font-size: rem(42);
}
.hello-banner__text p {
font-size: rem(21);
}
}
@media (min-width: $phoneWidth) and (max-width: $smTableWidth) {
.hello-banner__text h1 {
font-size: rem(40);
}
.hello-banner__text p {
font-size: rem(20);
}
}
@media (min-width: $smPhoneWidth) and (max-width: $phoneWidth) {
.hello-banner__text h1 {
font-size: rem(32);
}
.hello-banner__text p {
font-size: rem(18);
}
}
@media screen and (max-width: $smPhoneWidth) {
.hello-banner__text h1 {
font-size: rem(26);
}
.hello-banner__text p {
font-size: rem(14);
}
}
src/scss/utils/slider.scss 0 → 100644
View file @ 6a7fcf41
.slider {
position: relative;
overflow: hidden;
}
.slider__wrapper {
display: flex;
transition: transform 0.6s ease;
}
.slider__item {
flex: 0 0 25%;
max-width: 25%;
}
.slider__control {
position: absolute;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
height: 50px;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: 0.9;
}
.slider__control_left {
left: 0;
}
.slider__control_right {
right: 0;
}
.slider__control::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.slider__control_left::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.slider__control_right::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.slider__item .card {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0;
width: 100%;
height: 300px;
text-align: center;
background: #fff;
color: #fff;
border: 1px solid #d7d7d7;
border-radius: 5px;
position: relative;
box-sizing: border-box;
}
.slider__item .card .card__body .card__image img,
.slider__item .card .card__body .card__image {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
}
.slider__item .card .card__body .card__overlay {
background: #000;
opacity: 0.5;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
border-radius: 5px;
}
.slider__item .card .card__body {
padding: 0.5rem 1rem;
display: flex;
flex-direction: column;
}
.slider__item .card .card__body .card__heading,
.slider__item .card .card__body .card__text {
z-index: 3;
}
a:focus,
.slider:focus,
.slider__control:focus {
outline: 3px solid #529dec;
}
@media (min-width: $tableWidth) and (max-width: $smDesktopWidth) {
.slider {
width: 100%;
max-width: $smDesktopWidth;
}
.slider__item {
width: calc(100% / 3);
max-width: calc(#{$smDesktopWidth} / 3);
flex: 0 0 calc(100% / 3);
}
}
@media (min-width: $phoneWidth) and (max-width: $tableWidth) {
.slider {
width: 100%;
max-width: $tableWidth;
}
.slider__item {
width: calc(100% / 2);
max-width: calc(#{$tableWidth}/ 2);
flex: 0 0 calc(100% / 2);
}
}
@media screen and (max-width: $phoneWidth) {
.slider {
width: 100%;
max-width: $phoneWidth;
}
.slider__item {
width: 100%;
max-width: $phoneWidth;
flex: 0 0 100%;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment