gcg-website/assets/scss/_common.scss

557 lines
7.0 KiB
SCSS
Raw Normal View History

2022-03-18 13:35:57 +01:00
body {
background-color: $body-color;
overflow-x: hidden;
}
::selection {
background: lighten($color: $primary-color, $amount: 10);
color: $white;
}
/* preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffbC3b;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
ol,
ul {
list-style-type: none;
margin: 0px;
}
img {
vertical-align: middle;
border: 0;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
2022-12-31 18:12:51 +01:00
a {
2022-03-18 13:35:57 +01:00
color: inherit;
}
a,
button,
select {
cursor: pointer;
transition: .2s ease;
&:focus {
outline: 0;
}
}
a:hover {
color: $primary-color;
}
a.text-primary:hover {
2022-12-31 18:12:51 +01:00
color: $primary-color !important;
2022-03-18 13:35:57 +01:00
}
a.text-light:hover {
2022-12-31 18:12:51 +01:00
color: $primary-color !important;
2022-03-18 13:35:57 +01:00
}
2022-12-31 18:12:51 +01:00
h4 {
2022-03-18 13:35:57 +01:00
transition: .2s ease;
}
2022-12-31 18:12:51 +01:00
a h4 {
&:hover {
2022-03-18 13:35:57 +01:00
color: $primary-color;
}
}
.slick-slide {
outline: 0;
}
.section {
padding-top: 90px;
padding-bottom: 90px;
&-sm {
padding-top: 40px;
padding-bottom: 40px;
}
&-title {
margin-bottom: 30px;
}
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.border-primary {
border-color: $border-color !important;
}
/* overlay */
.overlay {
position: relative;
&::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background: $secondary-color;
opacity: .8;
}
}
.outline-0 {
outline: 0 !important;
}
.d-unset {
display: unset !important;
}
.bg-primary {
background: $primary-color !important;
}
.bg-secondary {
background: $secondary-color !important;
}
.bg-gray {
background: $gray;
}
.text-primary {
color: $primary-color !important;
}
.text-color {
color: $text-color;
}
.text-light {
color: $text-color-light !important;
}
2022-12-31 18:12:51 +01:00
.text-lighten {
2022-03-18 13:35:57 +01:00
color: #d6d6e0 !important;
}
.text-muted {
color: #b5b5b7 !important;
}
.text-dark {
color: $text-color-dark !important;
}
.font-secondary {
font-family: $secondary-font;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
.mb-60 {
margin-bottom: 60px !important;
}
.mb-70 {
margin-bottom: 70px !important;
}
.mb-80 {
margin-bottom: 80px !important;
}
.mb-90 {
margin-bottom: 90px !important;
}
.mb-100 {
margin-bottom: 100px !important;
}
.pl-150 {
padding-left: 150px;
}
.zindex-1 {
z-index: 1;
}
.overflow-md-hidden {
@include desktop {
overflow: hidden;
}
}
2022-12-31 18:12:51 +01:00
.vertical-align-middle {
2022-03-18 13:35:57 +01:00
vertical-align: middle;
}
2023-02-08 15:49:01 +01:00
.icon-s {
font-size: 28px;
}
2022-12-31 18:12:51 +01:00
.icon-md {
2022-03-18 13:35:57 +01:00
font-size: 36px;
}
/* page title */
.page-title-section {
padding: 200px 0 80px;
}
/* /page title */
2022-12-31 18:12:51 +01:00
.list-styled {
2022-03-18 13:35:57 +01:00
padding-left: 25px;
2022-12-31 18:12:51 +01:00
li {
2022-03-18 13:35:57 +01:00
position: relative;
margin-bottom: 15px;
2022-12-31 18:12:51 +01:00
&::before {
2022-03-18 13:35:57 +01:00
position: absolute;
content: "";
height: 10px;
width: 10px;
border-radius: 50%;
background: $primary-color;
left: -25px;
top: 5px;
}
}
}
2022-12-31 18:12:51 +01:00
textarea.form-control {
2022-03-18 13:35:57 +01:00
height: 200px;
padding: 20px;
}
.post-thumb-sm {
max-width: 100px;
}
/* pagination */
.pagination {
justify-content: center;
2022-12-31 18:12:51 +01:00
2022-03-18 13:35:57 +01:00
.page-item {
margin: 0 10px;
&.active {
.page-link {
background: $primary-color;
color: $white;
border-color: $primary-color;
}
}
&:first-child .page-link,
&:last-child .page-link {
border-radius: 0;
}
.page-link {
color: $text-color;
}
}
}
.content {
* {
margin-bottom: 20px;
}
a {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 10px;
}
ol {
padding-left: 20px;
2023-02-08 15:49:01 +01:00
list-style-type: decimal;
2022-03-18 13:35:57 +01:00
}
ul {
padding-left: 0;
li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
list-style-type: none;
&::before {
position: absolute;
2023-02-08 15:49:01 +01:00
content: "\f0B2A";
font-family: "Material Design Icons";
2022-03-18 13:35:57 +01:00
font-size: 14px;
left: 0;
top: 1px;
color: #ffbc3b;
transition: .3s ease;
}
}
}
2023-02-09 19:58:09 +01:00
img {
max-width: 100%;
}
2022-03-18 13:35:57 +01:00
table {
text-align: left;
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
th,
td {
padding: .75rem;
vertical-align: top;
border: 1px solid #dee2e6
}
thead {
background: darken($color: $light, $amount: 2);
}
tbody {
background: $light;
td {
text-align: left !important;
}
}
}
blockquote {
p {
margin-bottom: 0;
color: $text-color;
font-style: italic !important;
}
}
2023-02-23 16:35:52 +01:00
2022-03-18 13:35:57 +01:00
pre {
padding: 10px 20px;
background: $light;
}
}
2022-12-31 18:12:51 +01:00
.person-thumb-sm {
2022-03-18 13:35:57 +01:00
height: 85px;
width: 85px;
object-fit: cover;
}
summary {
2022-12-31 18:12:51 +01:00
font-weight: 900;
margin: -.5em -.5em 0;
padding: .5em;
font-size: 20px;
color: $secondary-color;
&.hover {
color: $primary-color;
}
2022-03-18 13:35:57 +01:00
}
details[open] {
2022-12-31 18:12:51 +01:00
padding: .5em;
2022-03-18 13:35:57 +01:00
}
details[open] summary {
2022-12-31 18:12:51 +01:00
border-bottom: 1px solid #aaa;
margin-bottom: .5em;
2022-03-18 13:35:57 +01:00
}
2022-10-17 22:29:47 +02:00
@media only screen and (min-width: 768px) {
2022-12-31 18:12:51 +01:00
.termin-tc {
width: 25%;
}
2022-10-17 22:29:47 +02:00
}
2022-12-31 18:12:51 +01:00
#wc-canvas {
width: 100%;
2023-02-28 08:37:51 +01:00
height: 400px;
2023-02-01 20:24:20 +01:00
}
.top-banner {
padding-top: 160px !important;
}
.pts-banner {
padding: 80px 0 80px;
2023-02-23 16:35:52 +01:00
}
.content-justify {
text-align: justify;
2023-02-28 09:33:57 +01:00
}
.fb-tile-color {
display: flex;
justify-content: center;
align-items: center;
height: 195px;
}
.fb-tile-icon {
font-size: 96px;
2023-03-03 17:18:54 +01:00
}
.img-slider{
position: relative;
margin: 10px;
width: 95%;
height: 500px;
background: #1D212B;
}
.img-slider .is-slide{
z-index: 1;
position: absolute;
width: 100%;
clip-path: circle(0% at 0 50%);
}
.img-slider .is-slide.active{
clip-path: circle(150% at 0 50%);
transition: 2s;
transition-property: clip-path;
}
.img-slider .is-slide img{
z-index: 1;
width: 100%;
border-radius: 5px;
}
.img-slider .is-navigation{
z-index: 2;
position: absolute;
display: flex;
bottom: 20px;
left: 50%;
border-radius: 10px;
transform: translateX(-50%);
background-color: #1a1a37;
}
.img-slider .is-navigation .is-btn{
background: rgba(255, 255, 255, 0.5);
width: 12px;
height: 12px;
margin: 10px;
border-radius: 50%;
cursor: pointer;
}
.img-slider .is-navigation .is-btn.active{
background: #2696E9;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
@media (max-width: 820px){
.img-slider{
width: 600px;
height: 375px;
}
.img-slider .is-navigation{
bottom: 25px;
}
.img-slider .is-navigation .is-btn{
width: 10px;
height: 10px;
margin: 8px;
}
}
@media (max-width: 620px){
.img-slider{
width: 400px;
height: 250px;
}
.img-slider .is-navigation{
bottom: 15px;
}
.img-slider .is-navigation .is-btn{
width: 8px;
height: 8px;
margin: 6px;
}
}
@media (max-width: 420px){
.img-slider{
width: 320px;
height: 200px;
}
.img-slider .is-navigation{
bottom: 10px;
}
}