ih-portal/css/Brand.less

A project for connecting interaction hub services with catalyst-ui components

/////////////////////// Global Vars //////////////////////////

@uc-staff-header: UCI_CUSTOM_BRANDING_HEADER;
@uc-student-header: UCI_NO_MENU_HEADER;
@menu-text-color: white;

img{border:0px;}

/*add correct font and remove 2px left margin*/
.PSPAGE {
  font-family: Roboto Regular, sans-serif !important;
  margin-left: 0px !important;
}

/* main content gutter */
.big-row{max-width:100em;margin: 0 auto; position: relative; padding-left: 2em; padding-top: 20px;}
/*///////////////////// Global Nav //////////////////////////*/

/*global nav hides on mobile view */
#ptdropdownmenu {
  display: none;
}
li.pthpli {
  margin:0px;
}
/* min width so unified navigation menu is usable */
.pthbcprevshow { display:none }
div#pthbcScroll{ left:1em }

//this is a fix for the icon drop down menu
.brandbar-nav-fix + span > div {
  width: 400px;
}

#@{uc-staff-header}, #@{uc-student-header} {
  background-color: #FAFAFA;
}

#@{uc-staff-header} .pthnavbcanchor, #@{uc-student-header} .pthnavbcanchor {
  color: @menu-text-color;
}

#@{uc-staff-header} .pthnavbcanchor:hover, #@{uc-student-header} .pthnavbcanchor:hover {
  color: @menu-text-color;
}

#@{uc-staff-header}.pthnavbaropen , #@{uc-student-header}.pthnavbaropen {
  background-color: transparent;
  border: none;
}

/*adding new arrow for dropdown icons */
#@{uc-staff-header} .pthnavbarfldr:after, #@{uc-student-header} .pthnavbarfldr:after {
  content: "\e5c5";
  font-family: 'Material Icons';
  color: @menu-text-color;
  padding-left: 6px;
}

/*Remove both background image from global nav*/
#@{uc-staff-header} #pthnavcontainer, #@{uc-student-header} #pthnavcontainer {
  background-image: none;
  z-index:auto;
}


/*separator between favorites and main menu*/
#@{uc-staff-header} #ptdropdownmenu li#pthnavfavsep, #@{uc-student-header} #ptdropdownmenu li#pthnavfavsep {
  background: none;
}


/*theme override giving top header menu correct height and color*/
#@{uc-staff-header} #ptdropdownmenu {
  display: block;
  background: #000;
  height: 35px;
  padding-top: 5px;
  padding-left: 10px;
}

/*//////////////////// Branding Bar ////////////////////////*/

/*theme Override for fixed width*/
#ptbr_header_container #pthdr2container {
  min-width: 200px;
  height: inherit;
}

/*theme override top menu broad background removal*/
#ptbr_header_container #pthdr2container {
  background: none;
  border-bottom: none;
  z-index: 0;
}

/*theme override removing addTo, notifications, and navbar*/
#pthdr2navbarlinks {
  display: none;
}

/*Search hidden for smaller devices */
#ptsearchbox {
  display: none !important;
}

/*1000px for search box*/
/* display above mobile */
@media (min-width: 768px) {

  /* added uc logo inside of href */
  #uc_custom_brand_logo:after {
    content: url('https://www.uc.edu/content/dam/designs/logos/logowhitealt.png');
    margin-left: 22px;
  }

  .hamburger {
    display: none;
  }

  /* Hiding hamburger via css*/
  #pthdr2container:after {
    content: "";
  }

  #ptsearchbox {
    display: inline-block !important;
  }

}

#@{uc-staff-header} #pthdr2container.pthdr2container, #@{uc-student-header} #pthdr2container.pthdr2container {
  white-space: normal;
}

/* Give padding to bottom of header. Pushes down all body*/
div.ptprtlcontainer > header#ptbr_header_container{
  margin-bottom: 0px
}


/*tabs and tab bar*/
#pthdr2perslinks.pthdr2perslinks {
  display: none;
}

#@{uc-staff-header} #pthomepagetabs,
#@{uc-student-header} #pthomepagetabs {
  display: none;
}

@media (max-width: 768px) {
  #pthomepagetabline, #@{uc-staff-header} .ptdropdownmenu #pthnavcontainer .pthnav li.pthnavbcltr, #@{uc-student-header} .ptdropdownmenu #pthnavcontainer .pthnav li.pthnavbcltr {
    display: none;
  }
}

/* display above mobile */
@media (min-width: 769px) {

  #pthomepagetabline {
    display: block;
  }
}

@media(max-width: 1000px){
  .header__logo{
    text-align: center;
  }
}
@media (min-width: 1000px){
  .header__logo{
    text-align: left;
  }
}


/*///////////////////////////// personalization /////////////////////*/
/*removes personalization icons from subnav*/
#ptpersonalizetablinks {
  display: none;
}

#ptbr_personalize_icon {
  display: none;
}

/* This will overide the personalization content | layout features*/


#pttabpercontent, #ptpersonalizetablinks, #pttabhelplink {
  display: none;
}

div#ptpersonalizetablinks.pttablinks{
  visibility: hidden;
}

.ptalPgltAreaHeaderLabel {
  overflow-x:visible !important;
}

/*//////////////////////////// random( for now) ///////////////////////////*/


#@{uc-staff-header} #pthnav a, #@{uc-student-header} #pthnav a,
#@{uc-staff-header} .pthnav span, #@{uc-student-header} .pthnav span,
#@{uc-staff-header} #pthnavbc a, #@{uc-student-header} #pthnavbc a,
#@{uc-staff-header} #pthnavbc span, #@{uc-student-header} #pthnavbc span {
  text-decoration: none;
  padding: 0;
  position: relative;
  font: 9pt Tahoma,Arial;
  color: @menu-text-color;
}


* html #pthnavcontainer {
  float:none;
  background-repeat: repeat-x;
  border-top: none;
  border-bottom: none;
  width:100%;
  height:26px;
  margin:0 0 0 0;
  padding:0;
  display:none;
}

.pthnav, .pthnav ul, #pthnavbc ul {
  margin: 0;
  padding: 0;
  border: 0 none;
  list-style-type: none;
  display: block;
}

.pthnav ul ul {
  position: relative;
}



* html .pthnav li {
  padding-top: 2px;
}

#@{uc-staff-header} .pthnavbarfldr, #@{uc-student-header} .pthnavbarfldr {
  background-image: none  !important ;
}

#@{uc-staff-header} .pthnav li li , #@{uc-student-header} .pthnav li li {
  float: none;
  margin:0;
}

#@{uc-staff-header} li.pthnavhiearchysep:before, #@{uc-student-header} li.pthnavhiearchysep:before {
  content: "\e315";
  font-family: 'Material Icons';
  color: @menu-text-color;
}

#@{uc-staff-header} li.pthnavhiearchysep, #@{uc-student-header} li.pthnavhiearchysep {
  background: none;
}

div#menu-appbar-right > span{
  font-size: .85em;
}
.goTo-Fix{
  width: 100%;
}
#@{uc-staff-header} .ptdropdownmenu .pthnav a, #@{uc-student-header} .ptdropdownmenu .pthnav a,
#@{uc-staff-header} .ptdropdownmenu .pthnav span, #@{uc-student-header} .ptdropdownmenu .pthnav span,
#@{uc-staff-header} .ptdropdownmenu #pthnavbc a, #@{uc-student-header} .ptdropdownmenu #pthnavbc a,
#@{uc-staff-header} .ptdropdownmenu #pthnavbc span, #@{uc-student-header} .ptdropdownmenu #pthnavbc span {
  text-decoration: none;
  position: relative;
  font:9pt Arial,Tahoma,Verdana;
  color:#ffffff;
  vertical-align:middle;
}


#@{uc-staff-header} .ptdropdownmenu .pthnav .pthnavscroll ul a, #@{uc-student-header} .ptdropdownmenu .pthnav .pthnavscroll ul a {
  color:#004b91;
}


#@{uc-staff-header} .ptdropdownmenu .pthnav .pthnavscroll ul li, #@{uc-student-header} .ptdropdownmenu .pthnav .pthnavscroll ul li {
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  float:none;
}


#@{uc-staff-header} .ptdropdownmenu .pthnav li, #@{uc-student-header} .ptdropdownmenu .pthnav li {
  display: block;
  float: left;
  margin: 0 0.2em;
  padding-bottom: 2px;
  padding-left: 0px;
  padding-top: 2px;
  position: relative;
}

#@{uc-staff-header} .ptdropdownmenu li#pthnavbc, #@{uc-staff-header} .ptdropdownmenu li.pthnavbarfldr , #@{uc-student-header} .ptdropdownmenu li#pthnavbc {
  z-index:auto;
  white-space:nowrap;
  padding-right:15px !important;
  padding-top: 4px;
  border:none;
}

#@{uc-staff-header} .ptdropdownmenu #pthnavcontainer .pthnav li.pthnavbcltr, #@{uc-student-header} .ptdropdownmenu #pthnavcontainer .pthnav li.pthnavbcltr {
  position:absolute;
  white-space:nowrap;
  display:inline;
}


#@{uc-staff-header} .ptdropdownmenu .pthnav .pthbcdispiblock, #@{uc-student-header} .ptdropdownmenu .pthnav .pthbcdispiblock {
  display: inline-block;
}


#@{uc-staff-header} .ptdropdownmenu .pthnav li li, #@{uc-student-header} .ptdropdownmenu .pthnav li li {
  margin: 0 0;
  line-height: 1.25em;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 3px;
  padding-left:6px;
  zoom:1;
  position: relative;
  unicode-bidi: inherit;
}


#@{uc-staff-header} li div.pthnavflyout, #@{uc-staff-header} #pthnavbc li div.pthnavflyout, #@{uc-student-header} li div.pthnavflyout, #@{uc-student-header} #pthnavbc li div.pthnavflyout {
  background: none;
  border: none;
  margin: 2px 0 0 2px;
  position: absolute;
  width: 18em;
  z-index: 400;
}

#@{uc-staff-header} .pthnavshadow, #@{uc-student-header} .pthnavshadow {
  background: none repeat scroll 0 0 #FFFFFF;
  left: -10px;
  position: relative;
  border:1px solid #666666;
  box-shadow: 0 3px 3px #999999;
  top: 3px;
}

#@{uc-staff-header} .pthnavfldrimg, #@{uc-student-header} .pthnavfldrimg {
  background:none;
  margin:2px 0 0 0;
  margin-left:.5em;
  padding: 0;
  position:absolute;
  left:0;
  top:0;
  width:14px;
  line-height:normal;
}

#@{uc-staff-header} .pthnavfldrimg:before, #@{uc-student-header} .pthnavfldrimg:before {
  content : url(/cs/ps/cache/PT_HNAV_FLDR2_1.gif);
}

#@{uc-staff-header} .pthnavcrefimg, #@{uc-student-header} .pthnavcrefimg {
  background: none;
  margin:2px 0 0 0;
  margin-left:.5em;
  padding: 0;
  position:absolute;
  left:0;
  top:0;
  width:13px;
  line-height:normal;
  display:block;
}

#@{uc-staff-header} .pthnavcrefimg:before, #@{uc-student-header} .pthnavcrefimg:before {
  content: none;
}

#@{uc-staff-header} .pthnavcref .pthnavcrefimg:before, #@{uc-student-header} .pthnavcref .pthnavcrefimg:before {
  content: url(/cs/ps/cache/PT_HNAV_CREF_1.GIF);
}

#@{uc-staff-header} .pthnavscroll span.pthnavtitle, #@{uc-student-header} .pthnavscroll span.pthnavtitle {
  font-weight:bold;
  font-size:9pt;
  color:#333333;
  margin:0;
  margin-left:.7em;
  font-family:Arial,Tahoma;
}

#@{uc-staff-header} .ptdropdownmenu #pthnavcontainer .pthnav .pthnavscroll #pthnavmrufavsep, #@{uc-student-header} .ptdropdownmenu #pthnavcontainer .pthnav .pthnavscroll #pthnavmrufavsep {
  display:none;
}

#@{uc-staff-header} .pthnavbaropen, #@{uc-student-header} .pthnavbaropen {
  background-color: #000000;
}


/*///////////////////////// Container ////////////////////////////////////*/

.PSPAGE .ih-row .pthpli {
   padding-bottom: 2em;
}

/*///////////////////////// Pagelets ////////////////////////////////////*/

.PSPAGE .PTPAGELET {
  border: none;
  table-layout: fixed;
  margin-bottom:0px;
}

.PSPAGE .PTPAGELET .PTPAGELETBODY {
  border: none;
}

.PSPAGE .PTPAGELET tr {
  border: none;
}

.PSPAGE .PTPAGELET tr td {
  border-color: lightgrey;
}

// .PSPAGE .PTPAGELET .ptprtlcontainer {
//   padding-bottom: 25px;
// }

.PTPAGELET .PTPAGELETHEADER {
  font-family: Arial,Helvetica;
  font-size: 10pt;
  font-weight: bold;
  color: black;
  background-color: #f5f5f5;
  border-color: lightgrey;
}

.PTPAGELET .PTPAGELETHEADER .PTPGLTLABEL {
  font-weight: bold;
  padding: .6em;
}

.ptPgltcontrolsdropdown {
  z-index: 10;
}

body {background-color: #f1f1f1 !important}

.ih-row #ptcol1 > ul {
  margin-left: 0em !important;
  padding-left: 0px;
}

.ih-row #ptcol2 > ul {
  margin-left: 0em !important;
  padding-left: 0px;
}

.ih-row #ptcol3 > ul {
  margin-left: 0em !important;
  padding-left: 0px;
}

.PSPAGE .PTPAGELET th,td {
    word-wrap: break-word;
}

body > table:nth-child(2), body > table:nth-child(4) { margin:0px; }
body > table:nth-child(2) > tbody { border:none; }
body > table:nth-child(2) > tbody > tr:nth-child(1) > td, body > table:nth-child(2) > tbody > tr:nth-child(2) > td, body > table:nth-child(4) > tbody > tr > td { padding:0px !important }


#@{uc-staff-header} #pthomepagetabs,
#@{uc-student-header} #pthomepagetabs {
  display: none;
}

#@{uc-staff-header} #pthomepagetabline,
#@{uc-student-header} #pthomepagetabline {
  border-bottom: 5px solid darkgrey;
  overflow-x: hidden;
  height: 39px;
  margin-top: auto;
  background-image: none;
}

#pthomepagetabline .ih-tabs ul {
  white-space: nowrap;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#pthomepagetabline .ih-tabs ul li {
  float: left;
  margin: 0 0.15em;
  padding: 0px;
  height: auto;
  display: inline-block;
  border-style: none;
  border-width: 0px;
}
.pthbcprevshow:before, #pthbcStartWall {
  display:none;
}