Skip to content

Commit

Permalink
Merge pull request unl#920 from skoolbus39/4.1
Browse files Browse the repository at this point in the history 
IDM and Search layout updates
  • Loading branch information
@kabel
kabel committed Dec 8, 2015
2 parents 35e7a05 + ab8a35c commit e308df9
Show file tree
Hide file tree
Showing 7 changed files with 211 additions and 157 deletions.
9 changes: 7 additions & 2 deletions wdn/templates_4.1/includes/idm.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<div class="wdn-resource-label wdn-resource-login-trigger" id="wdn_identity_management" role="navigation" aria-labelledby="wdn_idm_username">
<a class="wdn-icon-user wdn-idm-login" href="https://login.unl.edu/cas/login" id="wdn_idm_username" title="Log in to UNL" accesskey="l">Login</a>
<div class="wdn-idm-options">
<a href="https://login.unl.edu/cas/logout?url=http%3A//www.unl.edu/" id="wdn_idm_logout">Logout</a>
<div id="wdn_idm_notice_container">
<input type="checkbox" id="wdn_idm_toggle" class="wdn_idm_toggle wdn-input-driver wdn-dropdown-widget-toggle" aria-controls="wdn_idm_options" value="Show user profile options" />
<label for="wdn_idm_toggle" id="wdn_idm_toggle_label"></label>
<div id="wdn_idm_options" class="wdn-idm-options">
<a id="wdn_idm_profile">View Profile</a>
<a href="https://login.unl.edu/cas/logout?url=http%3A//www.unl.edu/" id="wdn_idm_logout">Logout</a>
</div>
</div>
</div>
76 changes: 69 additions & 7 deletions wdn/templates_4.1/less/layouts/breadcrumbs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}

.selected-arrow() {
left: 50%;
left: ~'calc(50% - 6px)';
bottom: -2px;
width: 0;
height: 0;
Expand All @@ -22,21 +22,46 @@
border-bottom: 6px solid #fff;
}

.breadcrumb-loop(@i) when (@i > 0) {
.breadcrumb-loop((@i - 1)); // next iteration
li:nth-child(@{i}) {
margin-left: (12px * @i);
}
}



#breadcrumbs {
.sans-serif-font();
font-size: 0;

@media @bp-nav-hidden {
.breadcrumb-loop(9); // add margin
}

ul {
@media @bp-nav-hidden {
margin-left: -12px;
}
}

li {
display: inline-block;
position: relative;
.rem(10);
text-transform: none;
line-height: 1;
vertical-align: middle;

@media @bp-nav-hidden {
display: block;
margin-bottom: 1em;
padding-left: 1.333em;
line-height: 1.069;
}

@media @bp-nav-full {
max-width: 20%;
padding: 0 6px 0 23px;
line-height: 1;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5b5b5a+0,474746+100 */
background: #5b5b5a; /* Old browsers */
background: -moz-linear-gradient(left, #5b5b5a 0%, #474746 100%); /* FF3.6+ */
Expand All @@ -46,8 +71,22 @@
background: -ms-linear-gradient(left, #5b5b5a 0%,#474746 100%); /* IE10+ */
background: linear-gradient(to right, #5b5b5a 0%,#474746 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5a', endColorstr='#474746',GradientType=1 ); /* IE6-9 */
transition: max-width 0.5s ease-in-out 0.2s;
}

&:before {

@media @bp-nav-hidden {
.breadcrumb-pseudo();
top: -0.254em;
left: 0.254em;
width: 0.75em;
height: 0.75em;
border-bottom: 1px solid @ui08;
border-left: 1px solid @ui08;
}
}

&:after {
.breadcrumb-pseudo();

Expand All @@ -59,9 +98,29 @@
}
}

&:first-child {

@media @bp-nav-full {
margin-left: -23px;
}

&:before {

@media @bp-nav-hidden {
content: none;
}
}
}

&:last-child {
padding-left: 23px;
background: transparent;

@media @bp-nav-full {
padding-left: 23px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: transparent;
}

&:after {
display: none;
Expand All @@ -76,6 +135,8 @@

@media @bp-nav-full {
background: @cream;
max-width: 100%;
transition: max-width 0.5s ease-in-out 0.5s;
}

&:first-child {
Expand Down Expand Up @@ -120,11 +181,12 @@
a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

@media @bp-nav-full {
padding: 9px 6px 7px 23px;
padding: 9px 0 7px;
color: @ui03;

}
}

Expand Down
193 changes: 100 additions & 93 deletions wdn/templates_4.1/less/layouts/idm.less
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,75 @@
.wdn-resource-login-trigger {
.wdn-resource-login-trigger {
display: inline-block;
position: relative;
overflow: visible;

@media @bp-nav-hidden {
position: absolute;
top: 103px; // position over the nav bar
right: 0;
.inner-wrapper-margin-right();
z-index: (@nav-z-index + 1); // overlay the nav bar
top: 101px; // position over the nav bar
right: @page-offset-default;
text-align: right;
z-index: (@nav-z-index + 1); // overlay the nav bar
}

a {
color: #fae8e8;
background-color: @brand; // make the background match the navigation's background so it passes automated accessibility tests
}
@media @bp480 {
right: @page-offset-480;
}

@media @bp640 {
right: @page-offset-640;
}

@media @bp-nav-full {
font-size: 0; // removes unwanted inline spacing around elements, https://css-tricks.com/fighting-the-space-between-inline-block-elements/

.flexbox & {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
}

a {
display: block;
height: 40px;
.rem(12);
line-height: 1;

@media @bp-nav-full {
display: inline-block;
height: 30px;
padding-top: 1.069em;
.rem(10);

.flexbox & {
display: flex;
flex-flow: row nowrap;
align-items: center;
padding-top: 0.238em;
}
}

@media @bp768 {
height: 40px;
padding-top: 1.333em;
.rem(12);
}
.flexbox & {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-end;
}
}

#wdn_idm_logout {
display: none;
text-align: left;
.wdn-sans-serif();

@media @bp-nav-hidden {
position: absolute;
right: 1em;
padding: 0.802em 1.069em 1.069em;
color: @ui05;
background-color: @ui10;
background-color: fadeout(@ui10, 3%);
border-radius: 3px;
z-index: 1;

&:before {
content: '';
position: absolute;
top: -6px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @ui10;
border-bottom: 6px solid fadeout(@ui10, 3%);
}
#wdn_idm_username,
#wdn_idm_toggle_label {
display: block;
height: 40px;
.rem(12);
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

&:hover {
color: @cream;
}
@media @bp-nav-hidden {
padding-top: 1.333em;
color: #fae8e8;
}

@media @bp-nav-full {
display: inline-block;
height: 30px;
padding-top: 1.069em;
.rem(10);
color: @scarlet;
}




a {
text-decoration: none;
display: block;
padding: 0.5em 1em;
color: #fff;

@media @bp-nav-full {

}

// &:hover {
// background-color: rgba(255, 255, 255, 0.2);
//
// @media @bp-nav-full {
// background-color: darken(@page-background, 2%);
// }
// }
@media @bp768 {
height: 40px;
padding-top: 1.333em;
.rem(12);
}
}

#wdn_idm_username {
.flexbox & {
display: flex;
flex-flow: row nowrap;
align-items: center;
order: 2;
padding-top: 0.238em;

@media @bp-nav-hidden {
padding-top: 1.333em;
@media @bp-nav-hidden {
padding-top: 0.143em;
}
}

&:before {
Expand All @@ -126,3 +82,54 @@
}
}
}

.wdn-idm-options {
display: block;
.is-hidden();
position: absolute;
top: 45px;
right: @page-offset-default;
width: 160px;
padding: 1.069em 2.369em;
border-radius: 3px;
background-color: @ui12;
background-color: fadeout(@ui12, 3%);
text-align: left;
.rem(11,12);
z-index: (@nav-z-index + 1);
transform: scale(0.9);
transform-origin: top;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.1s linear 0.6s;

@media @bp480 {
right: @page-offset-480;
}

@media @bp640 {
right: @page-offset-640;
}

&:before {
content: '';
position: absolute;
top: -6px;
right: 3.375em;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @ui10;
border-bottom: 6px solid fadeout(@ui10, 3%);
}

a {
display: block;
padding: 0.602em 0;
color: @ui05;
border: none;

&:hover {
color: @cream;
}
}
}
Loading

0 comments on commit e308df9

Please sign in to comment.