com.phloxui/styles/lib/component/page/main/MenuTopLayout.less

PhloxUI Ng2+ Framework

.phx-menu-top-layout {
  .navbar();
  .navbar-default();
  .navbar-fixed-top();
  background-color: extract(@CLR_1, 9);
  .phlox-box-shadow(0, @MENU_TOP_SHADOW_VLEN, @MENU_TOP_SHADOW_BLUR);
  @barHeight: @APP_PANE_HEIGHT + @MENU_TOP_LAYOUT_PADDING_TOP + @MENU_TOP_LAYOUT_PADDING_BOTTOM;
  // Clear paddings
  padding: 0;
  margin: 0;
  width: 100%;
  height: @barHeight;
  min-height: @barHeight;
  // This should be a container (.container-fluid)
  & > :first-child {
    height: @barHeight;
    min-height: @barHeight;
    padding: @MENU_TOP_LAYOUT_PADDING_TOP @MENU_TOP_LAYOUT_PADDING_RIGHT @MENU_TOP_LAYOUT_PADDING_BOTTOM @MENU_TOP_LAYOUT_PADDING_LEFT;

    & > .phx-addon-drawer-wrapper {
      & > .bg-border {
        position: absolute;
        width: 100%;
        height: 60%;
        border-left: @MENU_TOP_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
        margin-top: @MENU_TOP_BG_BORDER_MARGIN_TOP;
      }
    }
  }

  .phx-app-switcher {
    .phlox-layout-menu-top-btn();
    height: @APP_PANE_HEIGHT - @DEFAULT_SHADOW_VLEN + 1pt;

    // -wrapper
  	&-wrapper {
  		left: @APP_PANE_WIDTH;
  	}

    & + .popover {

      &.bottom > .arrow {
  			left: @MENU_TOP_NAV_APP_SWITCHER_ARROW_LEFT_POSITION;
  		}
    }
  }
}

.phlox-app-pane {
  position: relative;
  width: @APP_PANE_WIDTH;
  height: @APP_PANE_HEIGHT;
  padding: @APP_PANE_PADDING_Y @APP_PANE_PADDING_X;
  border: 0;
  border-right: @MENU_TOP_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
  // -wrapper
  &-wrapper {
    position: absolute;
  }
  // Logo
  & > .logo {
    background-color: extract(@CLR_1, 7);
    .phlox-rounded-corner-elliptic(@APP_LOGO_SIZE);
    position: absolute;
    width: @APP_LOGO_SIZE;
    height: @APP_LOGO_SIZE;
  }
  // App name
  & > .label {
    color: extract(@CLR_0, 2);
    .FH2();
    position: absolute;
    width: @APP_PANE_LABEL_WIDTH;
    padding: 0;
    margin: 0 0 0 (@APP_LOGO_SIZE + @APP_PANE_PADDING_X);
    padding-top: @APP_LABEL_PADDING_TOP;
    text-align: center;
  }

  & > .label > small {
    color: extract(@CLR_1, 1);
    .FH0();
    padding-top: 2pt;
    display: block;
  }
}

.phlox-main-nav {
  .nav();
  .navbar-nav();
  position: relative;
  height: @APP_PANE_HEIGHT;
  background: none;
  // -wrapper
  &-wrapper {
    position: absolute;
    left: @APP_PANE_WIDTH + @MENU_TOP_BTN_WIDTH;
  }

  & > .phx-menu-top-item {
    .phlox-transition();
    .phlox-ripple();
    float: left;
    cursor: pointer;
    position: relative;

    &.active,
    &:active,
    &:focus,
    &:focus,
    &:hover,
    &:hover {
      background-color: @MENU_TOP_NAV_ITEM_HOVER_BG_COLOR;
    }

    & > .meun-item-wrapper {
      padding-left: @MENU_TOP_NAV_ITEM_PADDING;
      padding-right: @MENU_TOP_NAV_ITEM_PADDING;

      a {
        .FH1();
        color: extract(@CLR_S, 6);
        // Margin for shadaws
        margin: 0;
        padding: 0;
        cursor: pointer;

        &:active,
        &:hover,
        &:link,
        &:visited {
          text-decoration: none;
        }
        // use this if u want to hover and change font color
        &.active,
        &:active,
        &:focus,
        &:focus,
        &:hover,
        &:hover {
          color: extract(@CLR_BRAND_HUE, 4);
        }
      }
    }
    // remove if u want to use default ripple effect
    & .phlox-ripple-effect {
      background-color: extract(@CLR_1, 8);
    }
  }
}

phx-notifier {
	.phlox-ripple();

	display: block;
}

.phx-notifier {
	.phlox-layout-menu-top-btn();
	.phlox-transition();

	position: relative;
	height: @APP_PANE_HEIGHT - @DEFAULT_SHADOW_VLEN + 1pt;
	text-align: center;
  float: right;

	// reset right border
	border-right: 0;
	// -wrapper
	&-wrapper {
		right: 0;
	}

	&:hover {
		background-color: @MENU_TOP_NAV_ITEM_HOVER_BG_COLOR;
	}

	&.active:hover {
		background-color: @APP_ADD_ON_DRAWER_HOVER_BG_COLOR;
	}

	& .box-container {
		.phlox-transition();
		transition-duration: @APP_ADD_ON_DRAWER_TRANSITION_DURATION;

		position: absolute;

		padding: 0;
		margin: 0;
		top: @APP_ADD_ON_DRAWER_BOX_PADDING_TOP;
		left: @APP_ADD_ON_DRAWER_BOX_PADDING_LEFT;
	}

	& .box-container .drawer {
		.phlox-transition();
		transition-duration: @APP_ADD_ON_DRAWER_TRANSITION_DURATION;

		background-color: extract(@CLR_R, 6);
		width: @APP_ADD_ON_DRAWER_BOX_WIDTH;
		height: @APP_ADD_ON_DRAWER_BOX_HEIGHT;
		position: relative;
	}

	& .box-container .drawer:first-child {
		margin-bottom: @APP_ADD_ON_DRAWER_BOX_GAP;
	}

	&.active{
		background-color: extract(@CLR_BRAND_HUE, 4);
	}

	&.active .box-container {
		& .drawer {
			background-color: extract(@CLR_1, 9);
		}
	}

	&.active .box-container .drawer:nth-child(2) {
		.phlox-transition();
		transform: scale(1.5);
		transition-duration: @APP_ADD_ON_DRAWER_TRANSITION_DURATION;
		margin-top: 5px;
	}

	>.wrapper{
		width: 100%;
		height: 100%;
		position: relative;

		>div{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}

		// bell
		.bell{
			.phlox-transition();
			width: @APP_NOTIFIRE_BELL_WIDTH;
			height: @APP_NOTIFIRE_BELL_HEIGHT;
			fill: extract(@CLR_S, 6);

			@-webkit-keyframes bellring {
				0% { -webkit-transform: rotate(5deg); }
				10% { -webkit-transform: rotate(-5deg); }
				20% { -webkit-transform: rotate(2.5deg); }
				30% { -webkit-transform: rotate(-2.5deg); }
				40% { -webkit-transform: rotate(1.25deg); }
				50% { -webkit-transform: rotate(-1.25deg); }
				60% { -webkit-transform: rotate(0deg); }
				100% { -webkit-transform: rotate(0deg); }
			}

			@keyframes bellring {
				0% { -webkit-transform: rotate(5deg); }
				10% { -webkit-transform: rotate(-5deg); }
				20% { -webkit-transform: rotate(2.5deg); }
				30% { -webkit-transform: rotate(-2.5deg); }
				40% { -webkit-transform: rotate(1.25deg); }
				50% { -webkit-transform: rotate(-1.25deg); }
				60% { -webkit-transform: rotate(0deg); }
				100% { -webkit-transform: rotate(0deg); }
			}

			&.ringing{
				fill: extract(@CLR_BRAND_HUE, 4);
				-webkit-transform-origin: center top;

			    animation-name: bellring;
			    animation-duration: 1.5s;
			    animation-iteration-count: infinite;
			    animation-timing-function: ease-in-out;
			    animation-direction: alternate;
			    transform-origin: center top;

			}
		}

		>div:nth-child(2){
			// sub bell
			.bell{
				@-webkit-keyframes bellring {
					0% { -webkit-transform: rotate(0deg); }
					10% { -webkit-transform: rotate(4deg); }
					20% { -webkit-transform: rotate(-4deg); }
					30% { -webkit-transform: rotate(2deg); }
					40% { -webkit-transform: rotate(-2deg); }
					50% { -webkit-transform: rotate(1deg); }
					60% { -webkit-transform: rotate(-1deg); }
					70% { -webkit-transform: rotate(0.5deg); }
					80% { -webkit-transform: rotate(-0.5deg); }
					90% { -webkit-transform: rotate(0deg); }
					100% { -webkit-transform: rotate(0deg); }
				}

				@keyframes bellring {
					0% { -webkit-transform: rotate(0deg); }
					10% { -webkit-transform: rotate(4deg); }
					20% { -webkit-transform: rotate(-4deg); }
					30% { -webkit-transform: rotate(2deg); }
					40% { -webkit-transform: rotate(-2deg); }
					50% { -webkit-transform: rotate(1deg); }
					60% { -webkit-transform: rotate(-1deg); }
					70% { -webkit-transform: rotate(0.5deg); }
					80% { -webkit-transform: rotate(-0.5deg); }
					90% { -webkit-transform: rotate(0deg); }
					100% { -webkit-transform: rotate(0deg); }
				}

				&.ringing{
					fill: extract(@CLR_BRAND_HUE, 4);
					-webkit-transform-origin: center top;

				    animation-name: bellring;
				    animation-duration: 1.5s;
				    animation-delay: 0.15s;
				    animation-iteration-count: infinite;
				    animation-timing-function: ease-in-out;
				    animation-direction: alternate;
				    transform-origin: center top;

				}
			}
		}
	}

	&.active {
		.bell {
			fill: extract(@CLR_1, 9);
		}
	}
}

.phx-notifier-side-panel {
	.phlox-transition();
	transition-duration: @APP_ADD_ON_DRAWER_TRANSITION_DURATION;
	.phlox-box-shadow(0, @APP_ADD_ON_DRAWER_SHADOW_VLEN, @APP_ADD_ON_DRAWER_SHADOW_BLUR);

	position: fixed;
	top : @APP_PANE_HEIGHT;
	width: @APP_ADD_ON_DRAWER_WIDTH;
	height: 100%;
	border: @APP_ADD_ON_DRAWER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
	background-color: extract(@CLR_1, 9);

	&.left {
		left: -@APP_ADD_ON_DRAWER_WIDTH;
		&.active {
			left: 0;
		}
	}

	&.right {
		right: -@APP_ADD_ON_DRAWER_WIDTH;

		&.active{
			right: 0;
		}
	}

	.row{
		height: 40pt;
		margin: 0;
		border-bottom: @CALENDAR_VIEW_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
	}
}

phx-addon-drawer {
	.phlox-ripple();

	display: block;
}

.phx-addon-drawer {
	.phlox-layout-menu-top-btn();
	.phlox-transition();

	position: relative;
	height: @APP_ADD_ON_DRAWER_HEIGHT;
	border-right: 0;
	text-align: center;
	// -wrapper
	&-wrapper {
		right: @MENU_TOP_BTN_WIDTH;
	}

	&:hover {
		background-color: @MENU_TOP_NAV_ITEM_HOVER_BG_COLOR;
	}

	&.active:hover {
		background-color: @APP_ADD_ON_DRAWER_HOVER_BG_COLOR;
	}

	& .box-container {
		.phlox-transition();
		transition-duration: @APP_ADD_ON_DRAWER_TRANSITION_DURATION;

		position: absolute;

		padding: 0;
		margin: 0;
		top: @APP_ADD_ON_DRAWER_BOX_PADDING_TOP;
		left: @APP_ADD_ON_DRAWER_BOX_PADDING_LEFT;
	}

	& .box-container .drawer {
		.phlox-transition();
		transition-duration: @APP_ADD_ON_DRAWER_TRANSITION_DURATION;

		background-color: extract(@CLR_S, 6);
		width: @APP_ADD_ON_DRAWER_BOX_WIDTH;
		height: @APP_ADD_ON_DRAWER_BOX_HEIGHT;
		position: relative;
	}

	& .box-container .drawer:first-child {
		margin-bottom: @APP_ADD_ON_DRAWER_BOX_GAP;
	}

	& .bottom-square-bracket {
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		margin-top: @APP_ADD_ON_DRAWER_HANDLE_MARGIN_TOP;
		color: extract(@CLR_1, 9);
	}

	& .bottom-square-bracket:before {
		content: "\0023B5";
		font-size: @APP_ADD_ON_DRAWER_HANDLE_SIZE;
	}

	&.active .bottom-square-bracket{
		color: extract(@CLR_BRAND_HUE, 4);
	}

	&.active{
		background-color: extract(@CLR_BRAND_HUE, 4);
	}

	&.active .box-container {
		& .drawer {
			background-color: extract(@CLR_1, 9);
		}
	}

	&.active .box-container .drawer:nth-child(2) {
		.phlox-transition();
		transform: scale(1.5);
		transition-duration: @APP_ADD_ON_DRAWER_TRANSITION_DURATION;
		margin-top: 5px;
		margin-left: 0.5pt;
	}

}

.phx-addon-drawer-side-panel {
	.phlox-transition();
	transition-duration: @APP_ADD_ON_DRAWER_TRANSITION_DURATION;
	.phlox-box-shadow(0, @APP_ADD_ON_DRAWER_SHADOW_VLEN, @APP_ADD_ON_DRAWER_SHADOW_BLUR);

	position: fixed;
	top : @APP_PANE_HEIGHT;
	width: @APP_ADD_ON_DRAWER_WIDTH;
	height: 100%;
	border: @APP_ADD_ON_DRAWER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
	background-color: extract(@CLR_1, 9);

	&.left {
		left: -@APP_ADD_ON_DRAWER_WIDTH;
		&.active {
			left: 0;
		}
	}

	&.right {
		right: -@APP_ADD_ON_DRAWER_WIDTH;

		&.active{
			right: 0;
		}
	}
}