@salaxy/ng1
Version:
AngularJS libraries for Salaxy platform (Palkkaus.fi)
356 lines (327 loc) • 9.74 kB
text/less
/**
* Salaxy-navi is the styling for easy creation of responsive sample sites.
* It is designed to work together with Navi-part of the Angular framework:
* NaviService, NaviController and components on top of them.
*
* NOTE: This is just an optional helper to make creating simple demo sites easier.
* You can use something completely different.
*
* @example
* This is the basic structure:
*
* .salaxy-navi-page-container -
* - .salaxy-navi-sm-opened -
*
* nav.salaxy-navi-sidebar
*
* header.salaxy-navi-header
*
* main.salaxy-navi-main
*/
.salaxy-navi-page-container {
h1, h2, h3, h4, h5 {
// TODO: Consider is this too agressive. Should use @headings-font-weight for easier customization
font-weight: @headings-font-weight;
}
h1 {
// TODO: These are now too agressive. Should be restricted to main header only, but that probably needs HTML changes.
font-size: 42px;
}
.salaxy-navi-header-default {
color: @salaxy-header-text;
background: @salaxy-navi-header-bg;
.dropdown-menu{
left:unset;
right:0;
}
}
.salaxy-navi-header-horizontal {
color: @navbar-horizontal-navbar-color;
background: @navbar-horizontal-navbar-bg;
//color: @navbar-horizontal-link-color;
//background: @navbar-horizontal-link-bg;
.navbar-nav > {
>li{
> a, a.visited{
color: @navbar-horizontal-link-color;
background-color: @navbar-horizontal-link-bg;
&:hover, &:focus{
background-color: @navbar-horizontal-link-hover-bg;
color:@navbar-horizontal-link-hover-color;
}
}
.dropdown-menu{
background-color:@navbar-dropdown-menu-bg;
>li{
> a, >a:focus, >a:visited{
color: @navbar-dropdown-menu-color;
background-color:@navbar-dropdown-menu-bg;
&:hover{
color: @navbar-dropdown-menu-hover-color;
background-color:@navbar-dropdown-menu-hover-bg;
}
}
}
}
&.active{
> a{
text-decoration:underline;
}
}
}
li.dropdown.open{
> a, >a:focus{
color: @navbar-dropdown-open-color;
background-color:@navbar-dropdown-open-bg;
}
}
}
.navbar-collapse{
clear: both;
}
.navbar-toggle{
margin-right: 0;
}
.page-title-sm{
margin-top:15px;
font-size:13px;
}
}
.breadcrumb-container{
padding-left:40px;
margin-top:15px;
}
.page-header {
font-size: 52px;
font-weight: 300;
color: @brand-primary;
}
.mobile-login-container{
padding-bottom:10px;
}
}
/**
* Main container that defines the responsive area.
* Tested in either body or div element
*/
.salaxy-navi-page-container {
padding-left: @salaxy-navi-sidebar-width;
&.iframe-container{
padding:0;
}
/*
* Sidebar that typically contains the navigation
* By default, it is on the left, hidden in small screens.
* By click of a "hamburger"-button it then toggles visible also on small screens.
*/
.salaxy-navi-sidebar {
position: fixed;
z-index: 1010;
top: 0;
left: 0;
width: @salaxy-navi-sidebar-width;
height: 100%;
overflow-y: auto;
background: @salaxy-navi-sidebar-bg;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
.salaxy-logo-container{
height: @salaxy-navi-header-height;
background-color: @salaxy-navi-logo-bg;
padding:5px 10px;
a{
background-color:transparent;
background-image:url("@{salaxy-navi-logo}");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
height: calc(~'@{salaxy-navi-header-height} - 10px');
display: block;
width: 100%;
margin: auto;
}
img {
display: block;
max-width: calc(~"100% - 20px");
margin:auto;
max-height:@salaxy-navi-header-height;
padding:5px 10px;
}
}
.list-group{
position:relative;
z-index:100;
}
li {
list-style: none;
a {
display: block;
text-decoration: none;
color: #666;
&.active{
font-weight:bold;
}
}
a:hover, a:active, a:focus {
text-decoration: none;
color: @brand-primary;
}
}
.dropdown-menu{
max-width:230px;
li{
padding:0;
max-width:calc(~'@{salaxy-navi-sidebar-width} - 20px');
}
.btn{
max-width:calc(~'@{salaxy-navi-sidebar-width} - 20px');
overflow:hidden;
border:none;
padding:10px 10px;
text-overflow:ellipsis;
.salaxy-login-button-text{
font-size:13px;
text-overflow:ellipsis;
}
}
}
li.list-group-item {
padding: 0px 0px;
> a {
padding: 10px 15px;
}
> a:hover {
color: #fff;
background: #666;
}
ul {
padding-bottom: 10px;
}
}
.poweredby{
text-align:center;
position: absolute;
bottom: 6px;
visibility:@poweredby-visibility;
width: 90%;
margin:auto;
z-index:90;
.poweredby-image{
text-align:center;
width: 60%;
height: 18px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url("@{poweredby-logo-path}");
display: block;
margin:auto;
}
}
}
.salaxy-navi-header-default {
width: 100%;
height: @salaxy-navi-header-height;
line-height: @salaxy-navi-header-height;
.page-title{
max-width:calc(~"100% - 150px");
margin-bottom:0px;
line-height:1.2;
margin-top:0;
display: inline-block;
vertical-align: middle;
}
}
.salaxy-navi-header-mobile {
display: none;
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
z-index: 1009;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 15px;
background: #FFF;
h1 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 28px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media screen and (max-width:@screen-xs-max){
font-size: 25px;
}
@media screen and (max-width:480px){
font-size:21px;
}
}
.hamburger {
z-index: 1100;
}
}
/* Main container for the page */
.salaxy-navi-main-container {
width: 100%;
position: relative;
padding-bottom:70px;
.container {
width: calc(~'100% - @{grid-gutter-width}');
@media screen and (max-width:768px){
width: calc(~'100% - 18px');
}
@media screen and (max-width:480px){
width: calc(~'100% - 0px');
}
@media (min-width: @screen-lg-min) {
width: calc(~'@{container-lg} - @{salaxy-navi-sidebar-width}');
}
}
}
}
.salaxy-navi-sitemap, .salaxy-navi-sidebar{
.salaxy-navi-3-level ul {
padding-inline-start: 26px;
}
}
/* Mobile layout */
@media(max-width: @screen-sm-max) {
.salaxy-navi-page-container {
padding-left: 0;
.salaxy-navi-header-mobile {
display: block;
}
.salaxy-navi-header-default {
display: none;
}
.salaxy-navi-sidebar {
width: @salaxy-navi-sidebar-width;
margin-left:-@salaxy-navi-sidebar-width;
}
.salaxy-navi-main-container {
margin-top: 65px;
}
/** This class should be present in the salaxy-navi-page-container if the sidebar is open in small screens */
&.salaxy-navi-sm-opened {
.salaxy-navi-sidebar {
width: @salaxy-navi-sidebar-width;
margin-left:0;
}
}
&.iframe-container{
.salaxy-navi-header-default {
display: block;
.page-title{
max-width:calc(~"100% - 30px");
}
}
.salaxy-navi-main-container {
margin-top: 0px;
}
}
}
}