422 lines
9.5 KiB
CSS
422 lines
9.5 KiB
CSS
/*
|
|
* Style twaks
|
|
* --------------------------------------------------
|
|
*/
|
|
body {
|
|
padding-top: 70px;
|
|
}
|
|
footer {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
/*
|
|
* Off Canvas
|
|
* --------------------------------------------------
|
|
*/
|
|
@media screen and (max-width: 768px) {
|
|
.row-offcanvas {
|
|
position: relative;
|
|
-webkit-transition: all 0.25s ease-out;
|
|
-moz-transition: all 0.25s ease-out;
|
|
transition: all 0.25s ease-out;
|
|
}
|
|
|
|
.row-offcanvas-right
|
|
.sidebar-offcanvas {
|
|
right: -50%; /* 6 columns */
|
|
}
|
|
|
|
.row-offcanvas-left
|
|
.sidebar-offcanvas {
|
|
left: -50%; /* 6 columns */
|
|
}
|
|
|
|
.row-offcanvas-right.active {
|
|
right: 50%; /* 6 columns */
|
|
}
|
|
|
|
.row-offcanvas-left.active {
|
|
left: 50%; /* 6 columns */
|
|
}
|
|
|
|
.sidebar-offcanvas {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 50%; /* 6 columns */
|
|
}
|
|
.margin{
|
|
margin-right: 100%;
|
|
}
|
|
.alignment {
|
|
vertical-align: 50%
|
|
}
|
|
}
|
|
|
|
.navbar-menu {
|
|
position: relative;
|
|
float: left;
|
|
padding: 9px 9px;
|
|
/*margin-top: 8px;*/
|
|
margin-right: 15px;
|
|
/*margin-bottom: 6px;*/
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.navbar-menu .icon-bar {
|
|
display: block;
|
|
width: 22px;
|
|
height: 1px;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.navbar-menu .icon-bar + .icon-bar {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.navbar-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.navbar-magbanua {
|
|
background-color: #0000FF;
|
|
/*border-color: #0000FF;*/
|
|
border: 1px solid #0000FF;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-brand {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-brand:hover,
|
|
.navbar-magbanua .navbar-brand:focus {
|
|
color: #000000;
|
|
/*background-color: #ffffff;*/
|
|
}
|
|
|
|
.navbar-magbanua .navbar-text {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-nav > li > a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-nav > li > a:hover,
|
|
.navbar-magbanua .navbar-nav > li > a:focus {
|
|
color: #000000;
|
|
background-color: #2d52f2;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-nav > .active > a,
|
|
.navbar-magbanua .navbar-nav > .active > a:hover,
|
|
.navbar-magbanua .navbar-nav > .active > a:focus {
|
|
color: #000000;
|
|
background-color: #2d52f2;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-nav > .disabled > a,
|
|
.navbar-magbanua .navbar-nav > .disabled > a:hover,
|
|
.navbar-magbanua .navbar-nav > .disabled > a:focus {
|
|
color: #444444;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-toggle {
|
|
border-color: #0000FF;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-toggle:hover,
|
|
.navbar-magbanua .navbar-toggle:focus {
|
|
background-color: #2d52f2;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-toggle .icon-bar {
|
|
background-color: #ffffff;
|
|
}
|
|
.navbar-magbanua .navbar-menu {
|
|
border-color: #0000FF;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-collapse,
|
|
.navbar-magbanua .navbar-form {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-nav > .open > a,
|
|
.navbar-magbanua .navbar-nav > .open > a:hover,
|
|
.navbar-magbanua .navbar-nav > .open > a:focus {
|
|
color: #000000;
|
|
background-color: #2d52f2;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-nav > .dropdown > a:hover .caret {
|
|
border-top-color: #ffffff;
|
|
border-bottom-color: #ffffff;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-nav > .dropdown > a .caret {
|
|
border-top-color: #ffffff;
|
|
border-bottom-color: #ffffff;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-nav > .open > a .caret,
|
|
.navbar-magbanua .navbar-nav > .open > a:hover .caret,
|
|
.navbar-magbanua .navbar-nav > .open > a:focus .caret {
|
|
border-top-color: #ffffff;
|
|
border-bottom-color: #ffffff;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > .dropdown-header {
|
|
border-color: #ffffff;
|
|
}
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > li > a {
|
|
color: #ffffff;
|
|
}
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > li > a:hover,
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > li > a:focus {
|
|
color: #000000;
|
|
background-color: #2d52f2;
|
|
}
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > .active > a,
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > .active > a:hover,
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > .active > a:focus {
|
|
color: #000000;
|
|
background-color: #2d52f2;
|
|
}
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > .disabled > a,
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > .disabled > a:hover,
|
|
.navbar-magbanua .navbar-nav .open .dropdown-menu > .disabled > a:focus {
|
|
color: #000000;
|
|
background-color: #2d52f2;
|
|
}
|
|
}
|
|
|
|
.navbar-magbanua .navbar-link {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.navbar-magbanua .navbar-link:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/*.navbar {
|
|
position: relative;
|
|
z-index: 1000;
|
|
min-height: 50px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid transparent;
|
|
}
|
|
*/
|
|
|
|
|
|
.navbar-TOPsm {
|
|
background-color: #0000FF;
|
|
border: 1px solid #0000FF;
|
|
color: white;
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-brand {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-brand:hover,
|
|
.navbar-TOPsm .navbar-brand:focus {
|
|
color: #000000;
|
|
/*background-color: #ffffff;*/
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-text {
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
list-style: none;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-nav > li > a {
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
list-style: none;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-nav > li > a:hover,
|
|
.navbar-TOPsm .navbar-nav > li > a:focus {
|
|
color: #000000;
|
|
/*background-color: #2d52f2; */
|
|
text-decoration: none;
|
|
list-style: none;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-nav > .active > a,
|
|
.navbar-TOPsm .navbar-nav > .active > a:hover,
|
|
.navbar-TOPsm .navbar-nav > .active > a:focus {
|
|
color: #000000;
|
|
/*background-color: #2d52f2;*/
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-nav > .disabled > a,
|
|
.navbar-TOPsm .navbar-nav > .disabled > a:hover,
|
|
.navbar-TOPsm .navbar-nav > .disabled > a:focus {
|
|
color: #444444;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-toggle {
|
|
border-color: #0000FF;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-toggle:hover,
|
|
.navbar-TOPsm .navbar-toggle:focus {
|
|
/*background-color: #2d52f2;*/
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-toggle .icon-bar {
|
|
background-color: #ffffff;
|
|
/*background-color: transparent;*/
|
|
}
|
|
|
|
|
|
.navbar-TOPsm .navbar-menu {
|
|
border-color: #0000FF;
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
|
|
.navbar-TOPsm .navbar-collapse,
|
|
.navbar-TOPsm .navbar-form {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-nav > .open > a,
|
|
.navbar-TOPsm .navbar-nav > .open > a:hover,
|
|
.navbar-TOPsm .navbar-nav > .open > a:focus {
|
|
color: #000000;
|
|
/*background-color: #2d52f2;*/
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-nav > .dropdown > a:hover .caret {
|
|
border-top-color: #ffffff;
|
|
border-bottom-color: #ffffff;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-nav > .dropdown > a .caret {
|
|
border-top-color: #ffffff;
|
|
border-bottom-color: #ffffff;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-nav > .open > a .caret,
|
|
.navbar-TOPsm .navbar-nav > .open > a:hover .caret,
|
|
.navbar-TOPsm .navbar-nav > .open > a:focus .caret {
|
|
border-top-color: #ffffff;
|
|
border-bottom-color: #ffffff;
|
|
}
|
|
.navbar-TOPsm .dropdown-acnt {
|
|
margin-left:-30px;
|
|
}
|
|
.navbar-TOPsm .dropdown-msg {
|
|
margin-left: -130px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > .dropdown-header {
|
|
border-color: #0000FF;
|
|
}
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > li > a {
|
|
color: #ffffff;
|
|
|
|
}
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > li > a:hover,
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > li > a:focus {
|
|
color: #000000;
|
|
/*background-color: #2d52f2;*/
|
|
background-color: transparent;
|
|
}
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > .active > a,
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > .active > a:hover,
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > .active > a:focus {
|
|
color: #000000;
|
|
/*background-color: #2d52f2;*/
|
|
background-color: transparent;
|
|
}
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > .disabled > a,
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > .disabled > a:hover,
|
|
.navbar-TOPsm .navbar-nav .open .dropdown-menu > .disabled > a:focus {
|
|
color: #000000;
|
|
/*background-color: #2d52f2;*/
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-link {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.navbar-TOPsm .navbar-link:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
@mixin angle-edge($pos-top:null, $angle-top:null, $pos-btm:null, $angle-btm:null){
|
|
width: 100%;
|
|
position: relative;
|
|
background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
|
|
&::before,
|
|
&::after{
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background: inherit;
|
|
z-index: -1;
|
|
transition: ease all .5s;
|
|
}
|
|
|
|
@if $pos-top{
|
|
&::before{
|
|
@if $pos-top == 'topleft'{
|
|
top: 0;
|
|
transform-origin: right top;
|
|
transform: skewY($angle-top);
|
|
}
|
|
@if $pos-top == 'topright' {
|
|
top: 0;
|
|
transform-origin: left top;
|
|
transform: skewY(-$angle-top);
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $pos-btm{
|
|
&::after{
|
|
@if $pos-btm == 'bottomleft' {
|
|
bottom: 0;
|
|
transform-origin: right bottom;
|
|
transform: skewY(-$angle-btm);
|
|
|
|
}
|
|
|
|
@if $pos-btm == 'bottomright' {
|
|
bottom: 0;
|
|
transform-origin: left bottom;
|
|
transform: skewY($angle-btm);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|