dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

booking section finished

Browse Source
This commit is contained in:
dqnid committed 2024-02-07 15:58:02 +01:00
1 parent 1a7706f2a2
commit 70cd6973d1
7 files changed
+304 -156
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Natours/starter/sass/abstracts/_variables.scss
+2
View File
@@ -13,6 +13,8 @@ $color-grey-light-1: #f7f7f7;
$color-grey-light-2: #eee;
$color-gray-dark: #777;
$color-gray-dark-2: #999;
$color-white: #fff;
$color-black: #000;
Natours/starter/sass/base/_utilities.scss
+6 -6
View File
@@ -1,23 +1,23 @@
.u-center-text {
text-align: center;
text-align: center !important;
}
.u-margin-bottom-small {
margin-bottom: 2rem;
margin-bottom: 2rem !important;
}
.u-margin-bottom-medium {
margin-bottom: 4rem;
margin-bottom: 4rem !important;
}
.u-margin-bottom-big {
margin-bottom: 8rem;
margin-bottom: 8rem !important;
}
.u-margin-top-big {
margin-top: 8rem;
margin-top: 8rem !important;
}
.u-margin-top-huge {
margin-top: 10rem;
margin-top: 10rem !important;
}
Natours/starter/sass/components/_button.scss
+80 -75
View File
@@ -1,87 +1,92 @@
.btn {
&:link,
&:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all 0.2s;
position: relative;
font-size: $default-font-size;
}
&,
&:link,
&:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all 0.2s;
position: relative;
font-size: $default-font-size;
&--animated {
animation: slideBottom 0.7s ease-out .75s;
animation-fill-mode: backwards;
}
// Changes to allow usage this class in <button>
border: none;
cursor: pointer;
}
&:hover {
transform: translateY(-0.4rem);
box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
&::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
}
&:active {
transform: translateY(-0.1rem);
box-shadow: 0 .5rem 1rem rgba($color-black, 0.2);
}
&--white {
background-color: $color-white;
color: $color-gray-dark;
&::after{
background-color: $color-white;
}
}
&--green {
background-color: $color-primary;
color: $color-white;
&::after{
background-color: $color-primary;
}
}
&--animated {
animation: slideBottom 0.7s ease-out 0.75s;
animation-fill-mode: backwards;
}
&:hover {
transform: translateY(-0.4rem);
box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
&::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.4s;
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
}
&:active,
&:focus {
transform: translateY(-0.1rem);
box-shadow: 0 0.5rem 1rem rgba($color-black, 0.2);
}
&--white {
background-color: $color-white;
color: $color-gray-dark;
&::after {
background-color: $color-white;
}
}
&--green {
background-color: $color-primary;
color: $color-white;
&::after {
background-color: $color-primary;
}
}
&::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.4s;
}
}
.btn-text {
&:link,
&:visited {
font-size: $default-font-size;
color: $color-primary;
display: inline-block;
text-decoration: none;
border-bottom: 1px solid $color-primary;
padding: 3px;
transition: all .2s;
}
&:link,
&:visited {
font-size: $default-font-size;
color: $color-primary;
display: inline-block;
text-decoration: none;
border-bottom: 1px solid $color-primary;
padding: 3px;
transition: all 0.2s;
}
&:hover {
background-color: $color-primary;
color: $color-white;
box-shadow: 0 1rem 2reem rgba($color-black, .15);
transform: translateY(-2px);
}
&:hover {
background-color: $color-primary;
color: $color-white;
box-shadow: 0 1rem 2reem rgba($color-black, 0.15);
transform: translateY(-2px);
}
&:active {
box-shadow: 0 .5rem 1reem rgba($color-black, .15);
transform: translateY(0px);
}
&:active {
box-shadow: 0 0.5rem 1reem rgba($color-black, 0.15);
transform: translateY(0px);
}
}
Natours/starter/sass/components/_form.scss
+95
View File
@@ -0,0 +1,95 @@
.form {
&__group:not(:last-child) {
margin-bottom: 2rem;
}
&__input {
font-size: 1.5rem;
font-family: inherit;
color: inherit;
padding: 1.5rem 2rem;
border-radius: 2px;
background-color: rgba($color-white, 0.5);
border: none;
border-bottom: 3px solid transparent;
width: 90%;
display: block;
transition: all 0.3s;
&:focus {
outline: none;
box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
border-bottom: 3px solid $color-primary;
}
&:focus:invalid {
border-bottom: 3px solid $color-secondary-dark;
}
&::placeholder {
color: $color-gray-dark-2;
}
}
&__label {
font-size: 1.2rem;
font-weight: 700;
margin-left: 2rem;
margin-top: 0.7rem;
display: block;
transition: all 0.3s;
}
&__input:placeholder-shown + &__label {
opacity: 0;
visibility: hidden;
transform: translateY(-4rem);
}
&__radio-group {
width: 49%;
display: inline-block;
}
&__radio-input {
display: none;
}
&__radio-label {
font-size: $default-font-size;
cursor: pointer;
position: relative;
padding-left: 4.5rem;
}
&__radio-button {
height: 3rem;
width: 3rem;
border: 5px solid $color-primary;
border-radius: 50%;
display: inline-block;
position: absolute;
left: 0;
top: -0.4rem;
&::after {
content: "";
display: block;
height: 1.3rem;
width: 1.3rem;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $color-primary;
opacity: 0;
transition: opacity 0.2s;
}
}
&__radio-input:checked ~ &__radio-label &__radio-button::after {
opacity: 1;
}
}
Natours/starter/sass/main.scss
+1
View File
@@ -13,6 +13,7 @@
@import "components/card";
@import "components/story";
@import "components/bg-video";
@import "components/form";
@import "layout/header";
@import "layout/grid";