basketballcantho/-S.I.S-QuaySo_v2
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
hienp
2026-03-26 09:28:14 +07:00
commit fa46a144d8
20180 changed files with 2692766 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/frontend/scss/components/_breadcrumb.scss
+14
View File
@@ -0,0 +1,14 @@
.breadcrumb {
font-size: $breadcrumb-font-size;
.breadcrumb-item {
a {
color: $breadcrumb-link-color;
}
&.active {
color: $breadcrumb-active-color;
}
}
}
public/frontend/scss/components/_button.scss
+3
View File
@@ -0,0 +1,3 @@
.btn-rounded {
border-radius: 100px;
}
public/frontend/scss/components/_card.scss
+297
View File
@@ -0,0 +1,297 @@
.service-card {
position: relative;
min-height: 230px;
border: 1px solid $border-color;
overflow: hidden;
border-radius: 3px;
.body {
padding: 10px;
img.icon {
margin-top: 40px;
width: 55px;
margin-bottom: 25px;
@include transition(all,.3s);
}
.title {
}
.subtitle {
position: absolute;
bottom: -100%;
opacity: 0;
visibility: hidden;
@include transition(all,.3s);
}
}
&:hover {
.body {
img.icon {
margin-top: 5px;
width: 45px;
margin-bottom: 15px;
}
.subtitle {
bottom: 7px;
opacity: 1;
visibility: visible;
}
}
}
}
/*/ portfolio wrapper */
.portfolio-card {
display: block;
position: relative;
overflow: hidden;
.portfolio-card-img {
width: 100%;
}
.portfolio-card-overlay {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
visibility: hidden;
opacity: 0;
background-image: linear-gradient(to top, lighten($primary, 40%) 0%, rgba(lighten($primary, 40%), .7) 99%, rgba(lighten($primary, 40%), .8) 100%);
@include transition(all, .3s);
width: 0;
height: 0;
border-radius: 50%;
overflow: hidden;
.portfolio-card-caption {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 100%;
}
}
&:hover {
.portfolio-card-overlay {
opacity: 1;
visibility: visible;
width: 100%;
height: 100%;
border-radius: 0;
}
}
}
@include media-breakpoint-down(sm){
.portfolio-card {
margin-bottom: 30px;
}
.service-card {
margin-bottom: 30px;
}
}
/* Pricing card */
.pricing-wrapper {
@include flex;
.pricing-card {
display: block;
border: 1px solid $border-color;
padding: 30px 15px;
flex-grow: 1;
flex-basis: 0;
background: $white;
@include transition(all,.3s);
&-header {
.pricing-card-icon {
width: 70px;
margin-bottom: 25px;
}
}
&-footer {
margin: 15px 0;
span {
font-size: calc(18px + (35 - 18) * ((100vw - 300px) / (1300 - 300)));
font-weight: 600;
opacity: .8;
&:first-child {
position: relative;
right: -6px;
top: -6px;
font-size: calc(15px + (25 - 15) * ((100vw - 300px) / (1300 - 300)));
}
}
}
&-title {
margin-bottom: 15px;
font-size: calc(18px + (35 - 18) * ((100vw - 300px) / (1300 - 300)));
}
&-list {
p {
margin-bottom: 12px;
font-weight: 500;
opacity: .6;
i {
color: $red;
}
}
}
&:hover {
transform: translateY(-5px);
border-radius: $card-border-radius !important;
}
&:first-child {
border-radius: $card-border-radius 0 0 $card-border-radius;
}
&:nth-child(2) {
margin-left: -1px;
margin-right: -1px;
}
&:last-child {
border-radius: 0 $card-border-radius $card-border-radius 0;
}
}
}
@include media-breakpoint-down(sm) {
.pricing-wrapper {
flex-direction: column;
}
.pricing-card {
border-radius: $card-border-radius !important;
margin: 0 0 15px 0 !important;
width: 100%;
}
}
/* testmonial card */
.testimonial-card {
@include flex;
align-items: center;
margin-bottom: 30px;
&-img-holder {
min-width: 45px;
max-width: 45px;
z-index: 999;
}
&-img {
background: $white;
padding: 4px;
width: 90px;
height: 90px;
border-radius: 50%;
}
&-body {
text-align: left;
border: 1px solid $border-color;
background: $white;
padding: 20px 20px 20px 60px;
border-radius: $card-border-radius;
}
&-title {
margin-top: 20px;
font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1300 - 300)));
}
}
/* blog wrapper */
.blog-card {
@include flex;
text-align: left;
border: 1px solid $border-color;
margin-bottom: 30px;
border-radius: $card-border-radius;
overflow: hidden;
&-header {
min-width: 350px;
max-width: 350px;
}
&-img {
border-radius: $card-border-radius 0 0 $card-border-radius;
width: 100%;
height: 100%;
object-fit: cover;
}
&-body {
padding: 30px 20px 30px 30px;
}
&-title {
font-weight: 100;
}
&-caption {
margin: 15px 0 15px !important;
i {
display: inline-block;
width: 15px;
}
a {
margin-right: 10px;;
color: #444;
text-decoration: none;
display: inline-block;
font-weight: 600;
opacity: .7;
font-size: 13px;
}
}
&-link {
text-decoration: none;
margin-top: 20px;
display: block;
font-size: 13px;
i {
position: relative;
top: 1px;
}
}
}
@include media-breakpoint-down (md) {
.blog-card {
flex-direction: column;
.blog-card-header {
width: 100%;
max-width: 100%;
min-width: 100%;
}
}
}
public/frontend/scss/components/_code.scss
+11
View File
@@ -0,0 +1,11 @@
pre {
border: 2px solid $border-color;
padding: 15px;
border-radius: $border-radius;
background: $gray-100;
code,
.code {
color: $gray-600;
}
}
public/frontend/scss/components/_dropdown.scss
+3
View File
@@ -0,0 +1,3 @@
.dropdown-menu.form{
width: 300px;
}
public/frontend/scss/components/_hamburger.scss
+131
View File
@@ -0,0 +1,131 @@
/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
// Settings
// ==================================================
$hamburger-layer-width : 30px !default;
$hamburger-layer-height : 3px !default;
$hamburger-layer-spacing : 6px !default;
$hamburger-layer-color : #444 !default;
$hamburger-layer-border-radius : 10px !default;
$hamburger-hover-opacity : 0.7 !default;
$hamburger-hover-transition-duration : 0.9s !default;
$hamburger-hover-transition-timing-function: linear !default;
// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter: false !default;
$hamburger-hover-filter : opacity(50%) !default;
/* hamburger */
/*
* Elastic
*/
.hamburger {
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: $hamburger-hover-transition-duration;
transition-timing-function: $hamburger-hover-transition-timing-function;
// Normalize (<button>)
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
&:hover {
@if $hamburger-hover-use-filter == true {
filter: $hamburger-hover-filter;
}
@else {
opacity: $hamburger-hover-opacity;
}
}
}
.hamburger-box {
width: $hamburger-layer-width;
height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: $hamburger-layer-height / -2;
&,
&::before,
&::after {
width: $hamburger-layer-width;
height: $hamburger-layer-height;
background-color: $hamburger-layer-color;
border-radius: $hamburger-layer-border-radius;
position: absolute;
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
&::before,
&::after {
content: "";
display: block;
}
&::before {
top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
}
&::after {
bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
}
}
.hamburger--elastic {
.hamburger-inner {
top: $hamburger-layer-height / 2;
transition-duration: 0.45s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
&::before {
top: $hamburger-layer-height + $hamburger-layer-spacing;
transition: opacity 0.43s 0.275s ease;
}
&::after {
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
&.is-active {
.hamburger-inner {
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
transform: translate3d(0, $y-offset, 0) rotate(135deg);
transition-delay: 0.075s;
&::before {
transition-delay: 0s;
opacity: 0;
}
&::after {
transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
transition-delay: 0.075s;
}
}
}
}
public/frontend/scss/components/_navbar.scss
+156
View File
@@ -0,0 +1,156 @@
.custom-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
@include flex;
align-items: center;
@include transition(all,.3s);
font-family: 'Baloo Paaji', cursive;
.logo {
font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1300 - 300)));
text-decoration: none;
color: $white;;
}
.container {
flex-grow: 1;
min-height: 100px;
@include flex;
align-items: center;
@include transition(all,.3s);
}
.hamburger {
margin-left: 20px;
padding-top: 5px;
.hamburger-inner {
&,
&::before,
&::after {
background: $white;
}
}
}
.nav {
list-style-type: none;
padding-left: 0;
@include flex;
align-items: center;
margin: 0;
margin-left: auto;
.item {
margin: 0 10px;
.link {
color: $white;
font-weight: 500;
text-decoration: none;
&:hover,
&.active {
color: $primary;
}
}
}
}
&.affix {
background: $white;
border-bottom: 1px solid rgba($border-color,.34);;
.logo {
color: $primary;
}
.container {
min-height: 65px;
}
.nav .item .link {
color: $gray-600;
}
.hamburger-inner {
&,
&::before,
&::after {
background: $gray-600;
}
}
}
@include media-breakpoint-up(md) {
.nav {
.item {
opacity: 0;
visibility: hidden;
transform: translateY(-50px);
transform: translateY(-50px);
&:nth-child(9) { @include transition(all,.1s); transition-delay: 0s }
&:nth-child(8) { @include transition(all,.2s); transition-delay: .05s }
&:nth-child(7) { @include transition(all,.3s); transition-delay: .1s }
&:nth-child(6) { @include transition(all,.4s); transition-delay: .15s }
&:nth-child(5) { @include transition(all,.5s); transition-delay: .2s }
&:nth-child(4) { @include transition(all,.6s); transition-delay: .25s }
&:nth-child(3) { @include transition(all,.7s); transition-delay: .3s }
&:nth-child(2) { @include transition(all,.8s); transition-delay: .35s }
&:nth-child(1) { @include transition(all,.9s); transition-delay: .4s }
}
&.show {
.item {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
}
}
}
@include media-breakpoint-down(md) {
.hamburger {
margin-left: auto;
}
.nav {
position: absolute;
top: calc(100% + 1px);
left: 0;
background: $white;
border-radius: 0 0 $card-border-radius $card-border-radius;
flex-direction: column;
width: 100%;
margin: auto;
display: block;
border-bottom: 1px solid $border-color;
padding: 13px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
@include transition(all,.3s);
&.show {
opacity: 1;
visibility: visible;;
transform: translateY(0);
}
.item .link {
padding: 7px 12px;
display: block;
color: $gray-600;
}
}
}
}
public/frontend/scss/components/_pagination.scss
+51
View File
@@ -0,0 +1,51 @@
// pagination
.pagination {
.page-item {
margin: 0 4px;
border-radius: 0;
&:first-child,
&:last-child {
margin-top: 3px;
a {
border: 0;
width: auto;
height: auto;
font-size: 10px;
}
}
}
&.pagination-sm {
.page-item {
&:first-child,
&:last-child {
margin-top: 5px;
a {
font-size: 9px;
}
}
}
}
&.pagination-lg {
.page-item {
&:first-child,
&:last-child {
margin-top: 9px;
a {
font-size: 14px;
}
}
}
}
}