PHP Classes

File: theme/sass/style.scss

Recommend this page to a friend!
  Classes of Abed Nego Ragil Putra   Giga CMS   theme/sass/style.scss   Download  
File: theme/sass/style.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Giga CMS
Multi-user content management system
Author: By
Last change:
Date: 7 years ago
Size: 19,668 bytes
 

Contents

Class file image Download
// Fonts $font-monsterrat: 'Montserrat', arial, sans-serif; $font-roboto: 'Roboto', arial, sans-serif; // Overrides $grid-gutter-width: 40px !default; $border-radius-base: 4px !default; $padding-base-vertical: 14px !default; $brand-primary: #FBB040 !default; $brand-white: #fff; $brand-black: #000; $brand-darker: #444; $brand-gray: #ccc; $brand-lighter: #e9e9e9; $brand-body-color: #818892; $brand-selection-color: #f9f6f0; $brand-overlay-color: #000; $input-border-focus: $brand-primary !default; $form-group-margin-bottom: 30px !default; $navbar-height: 60px !default; // Mixin @mixin transition($transition) { -moz-transition: $transition; -o-transition: $transition; -webkit-transition: $transition; -ms-transition: $transition; transition: $transition; } @mixin inline-block() { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot?srf3rx'); src:url('../fonts/icomoon/icomoon.eot?srf3rx#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?srf3rx') format('truetype'), url('../fonts/icomoon/icomoon.woff?srf3rx') format('woff'), url('../fonts/icomoon/icomoon.svg?srf3rx#icomoon') format('svg'); font-weight: normal; font-style: normal; } @mixin icomoon() { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Import Bootstrap @import 'bootstrap'; /* Template Style =========== */ // Template Base body { font-family: $font-roboto; font-weight: 300; font-size: 15px; line-height: 26px; color: $brand-body-color; } a { @include transition(.5s); &:hover, &:active, &:focus { outline: none; } } p { margin-bottom: 1.5em; } h1, h2, h3, h4, h5, h6 { color: $brand-black; font-family: $font-monsterrat; } ::-webkit-selection { color: $brand-body-color; background: $brand-selection-color; } ::-moz-selection { color: $brand-body-color; background: $brand-selection-color; } ::selection { color: $brand-body-color; background: $brand-selection-color; } // Template Layout #fh5co-header { float: left; width: 100%; position :relative; position: absolute; z-index: 99; top: 0; > .navbar { @include border-radius(0px); padding-left: 40px; padding-right: 40px; margin-bottom: 0; background: $brand-white; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 0 9px 0 rgba(0,0,0,.1); -ms-box-shadow: 0 0 9px 0 rgba(0,0,0,.1); box-shadow: 0 0 9px 0 rgba(0,0,0,.1); font-size: 13px; border: transparent; @media screen and (max-width: $screen-xs) { padding-left: 0px; padding-right: 0px; } li { a { text-transform: uppercase; color: $brand-black; font-weight: normal; font-family: $font-monsterrat; > span { .border { display: block; height: 3px; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; &:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: $brand-primary; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } } } &:hover, &:focus { outline: none; > span { outline: none; .border { &:before { -webkit-transform: scaleX(1); transform: scaleX(1); } } } } } &.active { a { background: transparent; > span { .border { background: $brand-primary; } } } } } } .navbar-brand { font-weight: bold; // text-transform: uppercase; letter-spacing: 2px; font-size: 20px; font-family: $font-monsterrat; color: $brand-black; &:hover { color: $brand-gray; } } } #fh5co-hero, .fh5co-bg-section { color: $brand-white; // background: $brand-primary; background-color: $brand-lighter; background-size: cover; background-position: center center; margin-top: 0px; z-index: 10; position: relative; .fh5co-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: $brand-overlay-color; opacity: 1; z-index: 11; } } #fh5co-hero, .fh5co-hero-wrap, .fh5co-bg-section { height: 700px; @media screen and (max-width: $screen-sm) { height: inherit; padding: 3em 0; } } #fh5co-hero, .fh5co-bg-section { .fh5co-hero-wrap { display: table; width: 100%; z-index: 12; position: relative; .fh5co-hero-intro { display: table-cell; vertical-align: middle; .fh5co-lead, .fh5co-sub-lead { color: $brand-white; margin: 0; padding: 0; line-height: 1.5; } .fh5co-lead { margin-bottom: 30px; } } } } .fh5co-bg-section, .fh5co-hero-wrap{ height: 400px; @media screen and (max-width: $screen-sm) { height: inherit; padding: 3em 0; } } .fh5co-bg-section { .fh5co-overlay { background: $brand-overlay-color; opacity: .3; } .author { font-size: 20px; margin-bottom: 0; } } #fh5co-main { // padding-bottom: 5em; } // Section Heading .fh5co-section-lead { font-size: 20px; text-transform: uppercase; letter-spacing: 2px; line-height: 22px; } .fh5co-section-sub-lead { font-size: 22px; font-family: $font-roboto; font-weight: 100; line-height: 32px; } // List Images .fh5co-post { padding: 0; margin: 0; li { padding: 0; margin: 0; display: block; float: left; width: 100%; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid $brand-lighter; } a { display: block; width: 100%; font-family: $font-monsterrat; img { max-width: 100%; float: left; @include border-radius(4px); } .fh5co-post-media { float: left; width: 20%; margin-right: 5%; margin-top: 5px; } .fh5co-post-blurb { float: right; width: 75%; color: $brand-black; line-height: 1.5; } .fh5co-post-meta { font-family: $font-roboto; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: $brand-gray; display: block; } &:hover, &:active, &:focus { text-decoration: none; .fh5co-post-blurb { color: $brand-primary; } .fh5co-post-media, .fh5co-post-blurb, .fh5co-post-meta { text-decoration: none; } } } } pre { background: $brand-lighter; border: 1px solid $brand-gray; } /* Buttons */ .btn { border-bottom: none!important; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding-left: 20px; padding-right: 20px; margin-right: 10px; &:hover, &:focus, &:active { box-shadow: none; outline: none!important; border-color: transparent; } &.fh5co-btn-icon { text-transform: none!important; letter-spacing: normal!important; padding-left: 15px; padding-right: 15px; } } .btn-outline { border: 2px solid $brand-gray!important; background: transparent; color: #2a2e37; &:hover, &:active, &:focus { border: 2px solid $brand-primary!important; background: $brand-primary!important; color: $brand-white; } } .btn-primary { background: $brand-primary; border: 2px solid $brand-primary; } .btn-success { background: $brand-success; border: 2px solid $brand-success; } .btn-danger { background: $brand-danger; border: 2px solid $brand-danger; } .btn-info { background: $brand-info; border: 2px solid $brand-info; } .btn-warning { background: $brand-warning; border: 2px solid $brand-warning; } .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { border-color: transparent; } .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { &:hover, &:active, &:focus { background: $brand-darker; color: $brand-white; } } // Input Text .form-control { box-shadow: none!important; border: 2px solid #ccc; &:hover, &:focus, &:active { outline: none; box-shadow: none!important; border: 2px solid $brand-primary; } } // Burger Menu .fh5co-nav-toggle { width:25px; height:25px; cursor: pointer; text-decoration: none; &.active i { &::before, &::after { background: #000; } } &:hover, &:focus, &:active { outline: none; border-bottom: none!important; } i { position: relative; @include inline-block; width: 25px; height: 3px; color: #000; font:bold 14px/.4 Helvetica; text-transform: uppercase; text-indent:-55px; background: #000; transition: all .2s ease-out; &::before, &::after { content:''; width: 25px; height: 3px; background: #000; position: absolute; left:0; @include transition(.2s); } } } .fh5co-nav-toggle i::before { top: -7px; } .fh5co-nav-toggle i::after { bottom: -7px; } .fh5co-nav-toggle:hover i::before { top: -10px; } .fh5co-nav-toggle:hover i::after { bottom: -10px; } .fh5co-nav-toggle.active i { background: transparent; } .fh5co-nav-toggle.active i::before { top:0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } .fh5co-nav-toggle.active i::after { bottom:0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .fh5co-nav-toggle { position: absolute; top: 7px; right: 0px; z-index: 21; padding: 6px 0 0 0; display: block; margin: 0 auto; display: none; height: 44px; width: 44px; border-bottom: none!important; @media screen and (max-width: $screen-sm) { display: block; } } // Feature #fh5co-features { padding: 5em 0; background: rgba(0,0,0,.02); } .fh5co-feature-border { border-right: 1px solid $brand-lighter; } .fh5co-feature { float: left; width: 100%; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid $brand-lighter; &.no-border { border-bottom: none; @media screen and (max-width: $screen-sm) { border-bottom: 1px solid $brand-lighter; } } .fh5co-feature-icon, .fh5co-feature-text { float: left; } .fh5co-feature-icon { margin-right: 30px; @media screen and (max-width: $screen-sm) { margin-right: 10px; margin-top: 10px; } i { font-size: 100px; color: #FBB040; @media screen and (max-width: $screen-sm) { font-size: 50px; margin-top: 10px; } } } .fh5co-feature-text { width: 50%; @media screen and (max-width: $screen-sm) { width: 70%; } } } // Clients #fh5co-clients { padding: 3em 0; background: $brand-primary; .fh5co-client-logo { text-align: center; margin-bottom: 0; @media screen and (max-width: $screen-md) { margin-bottom: 30px; } } } // Social .fh5co-social { padding: 0; margin: 0; li { padding: 0; margin: 0; list-style: none; display: inline-block; a { display: block; float: left; margin-right: 10px; &:hover, &:active, &:focus { outline: none; text-decoration: none; } i { font-size: 30px; } } } } // Footer #fh5co-footer { padding: 5em 0; border-top: 1px solid $brand-lighter; .fh5co-footer-widget { float: left; width: 100%; &.top-level { margin-top: 70px!important; } .fh5co-footer-lead { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; } } .fh5co-footer-logo { font-family: $font-monsterrat; font-size: 50px; letter-spacing: 2px; color: $brand-gray; } ul { padding: 0; margin: 0; li { list-style: none; padding: 0; margin: 0; } } } // List - Check style .fh5co-list-check { position: relative; padding: 0; margin: 0; clear: both; li { padding-left: 25px!important; position :relative; display: block; margin-bottom: 10px!important; line-height: 20px; &:before { @include icomoon; content: "\e116"; content: "\e042"; position: absolute; top: 0; left: 0; font-size: 18px; color: $brand-gray; } } } .fh5co-page-heading { text-align: center; padding: 100px 0 60px 0; letter-spacing: 2px; text-transform: uppercase; .fh5co-page-heading-lead { position: relative; padding-bottom: 20px; .fh5co-border { width: 50px; height: 3px; background: $brand-black; margin-left: -25px; left: 50%; bottom: 0; position: absolute; } } } .fh5co-sidebox { float: left; width: 100%; .fh5co-sidebox-lead { font-size: 16px; letter-spacing: 1px; margin-bottom: 20px; float: left; width: 100%; display: block; text-transform: uppercase; } } /* Helper Classes */ /* Spacer */ .fh5co-spacer { clear: both; position: relative; border: none; padding: 0; margin: 0; } .fh5co-spacer-xlg { height: 150px; @media screen and (max-width: $screen-sm) { height: 70px; } } .fh5co-spacer-lg { height: 100px; @media screen and (max-width: $screen-sm) { height: 50px; } } .fh5co-spacer-md { height: 80px; @media screen and (max-width: $screen-sm) { height: 30px; } } .fh5co-spacer-sm { height: 50px; @media screen and (max-width: $screen-sm) { height: 20px; } } .fh5co-spacer-xs { height: 30px; @media screen and (max-width: $screen-sm) { height: 20px; } } .fh5co-spacer-xxs { height: 20px; } .col-xxs-12 { @media screen and (max-width: 480px) { float: none; width: 100%; } } .fh5co-mb30 { margin-bottom: 30px; } .fh5co-row-padded { padding: 50px 0; } // Template Components // Owl Carousel .owl-carousel .owl-controls, .owl-carousel-posts .owl-controls, { margin-top: 0; } .owl-carousel .owl-controls .owl-nav { @media screen and (max-width: $screen-sm) { display: none; } } .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel-posts .owl-controls .owl-nav .owl-next, .owl-carousel-posts .owl-controls .owl-nav .owl-prev { top: 50%; margin-top: -29px; z-index: 9999; position: absolute; @include transition(.2s); } .owl-carousel-posts .owl-controls .owl-nav .owl-next, .owl-carousel-posts .owl-controls .owl-nav .owl-prev { top: 24%; } .owl-carousel .owl-controls .owl-nav .owl-next { left: 0; left: -70px; margin-top: -60px; &:hover { margin-top: -65px; i:before { color: $brand-primary; } } } .owl-carousel .owl-controls .owl-nav .owl-prev { left: -70px; margin-top: 0px; &:hover { margin-top: 5px; i:before { color: $brand-primary; } } } .owl-carousel-posts .owl-controls .owl-nav .owl-next, .owl-carousel-posts .owl-controls .owl-nav .owl-prev, .owl-carousel-fullwidth .owl-controls .owl-nav .owl-next, .owl-carousel-fullwidth .owl-controls .owl-nav .owl-prev{ i { color: $brand-darker; } &:hover { i { color: $brand-black; } } } .owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-next, .owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-prev { i { color: $brand-white; } &:hover { i { color: $brand-white; } } } .owl-theme .owl-controls .owl-nav { @media screen and (max-width: $screen-sm) { display: none; } } .owl-theme .owl-controls .owl-nav [class*="owl-"] { background: none!important; i { font-size: 30px; &:hover, &:focus { background: none!important; } } &:hover, &:focus { background: none!important; } } .owl-theme .owl-dots { position: absolute; bottom: 0; width: 100%; text-align: center; } .owl-carousel-fullwidth.owl-theme .owl-dots { bottom: 0; margin-bottom: 2.5em; } .owl-theme .owl-dots .owl-dot span { width:10px; height:10px; background: rgba(255,255,255,.4); @include transition(.2s); border: 2px solid transparent; &:hover { background: none; background: rgba(255,255,255,1); } } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { // background: none; background: rgba(255,255,255,1); border: 2px solid transparent; } .owl-carousel-fullwidth { .item, .fh5co-owl-text-wrap { height: 800px; display: table; width: 100%; } .item { background-repeat: no-repeat; background-size: cover; background-position: top left; position: relative; .fh5co-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: $brand-overlay-color; opacity: .3; z-index: 8; } img { max-width: 100%; } .fh5co-owl-text { display: table-cell; vertical-align: middle; z-index: 10; position: relative; a { color: rgba(255,255,255,1); border-bottom: 1px solid rgba(255,255,255,.5); &:hover { text-decoration: none; color: rgba(255,255,255,1); border-bottom: 1px solid rgba(255,255,255,1); } } .fh5co-lead, .fh5co-sub-lead { color: $brand-white; margin: 0; padding: 0; font-weight: 100; } .fh5co-lead { font-weight: 300; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; font-family: $font-monsterrat; } .fh5co-sub-lead { font-size: 30px; line-height: 42px; font-weight: 100; font-family: $font-roboto; } } } } .js .to-animate { opacity: 0; } // Magnific Popup // Zoom .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; /* ideally, transition speed should match zoom duration */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } /* Image Alignment */ img { &.fh5co-align-right { float:right; margin:0 0 .5em 1em; @media screen and (max-width: $screen-xs) { width: 100%; margin: 0 0 .5em 0; } } &.fh5co-align-left { float:left; margin:0 1em .5em 0; @media screen and (max-width: $screen-xs) { width: 100%; margin: 0 0 .5em 0; } } &.fh5co-align-center { display: block; margin-left: auto; margin-right: auto } } a > img { &.fh5co-align-right { float:right; margin:0 0 .5em 1em; @media screen and (max-width: $screen-xs) { width: 100%; margin: 0 0 .5em 0; } } &.fh5co-align-left { float: left; margin: 0 1em .5em 0; @media screen and (max-width: $screen-xs) { width: 100%; margin: 0 0 .5em 0; } } &.fh5co-align-center { display: block; margin-left: auto; margin-right: auto } }