pip-webui/pip-webui-nav/src/sidenav/sidenav.less

HTML5 UI for LOB applications

// @file CSS styles for application Side Nav component
// @copyright Digital Living Software Corp. 2014-2016

// Party Name under Avatar
//------------------------------------------

@sidenav-party-font-size:            22px;
@sidenav-party-color:                rgb(255, 255, 255);
//@sidenav-party-font-family:          @font-family;
@sidenav-party-font-letter-spacing:  0.005em;

// Relationship and Privacy
//-------------------------------------------

@sidenav-party-info-font-size:           @font-size-body1;
@sidenav-party-info-color:               rgb(255, 255, 255);
//@sidenav-party-info-font-family:         @font-family;
@sidenav-party-info-font-letter-spacing: 0.01em;

// Section
//-------------------------------------------

// @sidenav-section-font-size:              @font-size-body1;
// @sidenav-section-color:                  @color-secondary;
// @sidenav-section-font-family:            @font-family;
// @sidenav-section-line-height:            1em;

// Link // Kate add
//-------------------------------------------

// @sidenav-link-font-size:                 @font-size-body2;
// @sidenav-link-color:                     @color-primary;
// @sidenav-link-font-family:               @font-family;
// @sidenav-link-line-height:               1em;


// Sizes
//-----------

@sidenav-width: 320px;
@sidenav-padding: 24px;
@sidenav-party-size: 80px;
@sidenav-user-size: 50px;

@sidenav-width-sm: 300px;
@sidenav-padding-sm: 16px;


.pip-sidenav {

  md-list-item .md-button {
	.md-list-item-inner {
	  line-height: 48px;
	}
  }

  md-list {
	.md-subheader {
	  line-height: 48px;
	  .md-subheader-inner {
		padding: 24px;
		padding-top: 0px;
		padding-bottom: 0px;
	  }
	}

	.pip-section {
	  padding-bottom: 8px;
	  md-divider {
		margin-bottom: 8px;
	  }
	}
  }

  .pip-sidenav-header {
        position: relative;
		padding-top: 102px;
	  	min-height: 164px !important;
		padding-bottom: @sidenav-padding-sm;
		padding-left: @sidenav-padding;
		padding-right: @sidenav-padding;

	  	&.pip-sidenav-owner {
		  min-height: 144px !important;
		}

		.pip-sidenav-party {
			display: inline-block;
			position: absolute;
			top: @sidenav-padding-sm;
			left: @sidenav-padding;
			min-width: initial;
			width: @sidenav-party-size;
			height: @sidenav-party-size;
			margin: 0px;
			padding: 0px;
	
			pip-avatar {
				.circle(@sidenav-party-size);
			}
		}
	
		.pip-sidenav-user {
			display: inline-block;
			position: absolute;
			top: @sidenav-padding-sm;
			right: @sidenav-padding;
			width: @sidenav-user-size;
			min-width: initial;
			height: @sidenav-user-size;
			margin: 0px;
			padding: 0px;
	
			pip-avatar {
				.circle(@sidenav-user-size);
			}
		}
    }

    .pip-sidenav-party-text {
        .pip-sidenav-party-pri {
            display: block;
            font-size: @sidenav-party-font-size;
            text-decoration: none;
            color: @sidenav-party-color;
            letter-spacing: @sidenav-party-font-letter-spacing;
            //font-family: @sidenav-party-font-family;
		  	word-wrap: break-word;

            &:hover, &:focus {
				color: @sidenav-party-color;
				text-decoration: none;
			}
        }

        .pip-sidenav-party-sec {
            font-size: @sidenav-party-info-font-size;
            .text-overflow();
            //font-family: @sidenav-party-info-font-family;
        }
    }
    

	md-list-item .md-button {
		padding-left: @sidenav-padding;
		padding-right: @sidenav-padding;
		.border-radius(0px);
	}	
}

@media (max-width: 768px) {
   .pip-sidenav {
		.pip-sidenav-header {
			padding-left: @sidenav-padding-sm;
			padding-right: @sidenav-padding-sm;
		}

		md-list-item .md-button {
			padding-left: @sidenav-padding-sm;
			padding-right: @sidenav-padding-sm;
		}	

		.pip-sidenav-party {
			left: @sidenav-padding-sm;
		}
	
		.pip-sidenav-user {
			right: @sidenav-padding-sm;
		}
   }
}