Commit 013318d6 authored by m26lebla's avatar m26lebla

adding css to make expand collapse presentation as per wcms2

parent 7d012b8f
......@@ -484,6 +484,183 @@
font-weight: normal;
src: url("/fonts/fdsu-rwd.eot"), url("/fonts/fdsu-rwd.eot?#iefix") format("embedded-opentype"), url("/fonts/fdsu-rwd.ttf") format("truetype"), url("/fonts/fdsu-rwd.woff") format("woff"), url("/fonts/fdsu-rwd.svg?#fdsu-rwd") format("svg"); }
.fdsu-vimeo::after {
content: ""; }
.fdsu-vimeo-box::after {
content: ""; }
.fdsu-add-to-calendar::after {
content: "★"; }
.fdsu-envelope::after {
content: ""; }
.fdsu-bubble::after {
content: ""; }
.fdsu-binoculars::after {
content: ""; }
.fdsu-search::after {
content: ""; }
.fdsu-search-2::after {
content: ""; }
.fdsu-search-shade::after {
content: ""; }
.fdsu-arrow-right::after {
content: ""; }
.fdsu-googleplus-box::after {
content: ""; }
.fdsu-github::after {
content: ""; }
.fdsu-github-box::after {
content: ""; }
.fdsu-yahoo::after {
content: ""; }
.fdsu-tux::after {
content: ""; }
.fdsu-apple::after {
content: ""; }
.fdsu-finder::after {
content: ""; }
.fdsu-android::after {
content: ""; }
.fdsu-windows::after {
content: ""; }
.fdsu-windows8::after {
content: ""; }
.fdsu-skype::after {
content: ""; }
.fdsu-html5::after {
content: ""; }
.fdsu-css3::after {
content: ""; }
.fdsu-chrome::after {
content: ""; }
.fdsu-firefox::after {
content: ""; }
.fdsu-ie::after {
content: ""; }
.fdsu-opera::after {
content: ""; }
.fdsu-safari::after {
content: ""; }
.fdsu-close::after {
content: ""; }
.fdsu-si-comm::after {
content: ""; }
.fdsu-info::after {
content: ""; }
.fdsu-info-2::after {
content: ""; }
.fdsu-chevron::after {
content: ""; }
.fdsu-ical::after {
content: ""; }
.fdsu-arrow::after {
content: ""; }
.fdsu-comment::after {
content: ""; }
.fdsu-share::after {
content: ""; }
.fdsu-facebook::after {
content: ""; }
.fdsu-facebook-box::after {
content: ""; }
.fdsu-instagram-box::after {
content: ""; }
.fdsu-instagram::after {
content: ""; }
.fdsu-linkedin::after {
content: ""; }
.fdsu-linkedin-box::after {
content: ""; }
.fdsu-twitter::after {
content: ""; }
.fdsu-twitter-box::after {
content: ""; }
.fdsu-youtube-box::after {
content: ""; }
.fdsu-youtube::after {
content: ""; }
.fdsu-calendar::after {
content: ""; }
.fdsu-cloud::after {
content: ""; }
.fdsu-rss-box::after {
content: ""; }
.fdsu-snapchat::after {
content: ""; }
.fdsu-si-comp::after {
content: ""; }
.fdsu-si-infrastructure::after {
content: ""; }
.fdsu-si-professionals::after {
content: ""; }
.fdsu-si-security::after {
content: ""; }
.fdsu-si-teach::after {
content: ""; }
.fdsu-clock2::after {
content: ""; }
.fdsu-spoon-knife::after {
content: ""; }
.fdsu-location::after {
content: ""; }
article,
aside,
details,
......@@ -1196,7 +1373,7 @@ svg:not(:root) {
letter-spacing: 0.055rem;
line-height: 1.45;
max-width: 18.125rem;
padding: 1rem 1.5rem;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
text-shadow: none;
......@@ -2072,7 +2249,8 @@ ul.toolbar-menu {
.breadcrumb__link:hover, .breadcrumb__link:focus {
text-decoration: underline; }
.button {
.button,
button {
background-color: #757575;
background-image: none;
border: 0;
......@@ -2088,7 +2266,7 @@ ul.toolbar-menu {
letter-spacing: 0.055rem;
line-height: 1.45;
max-width: 18.125rem;
padding: 1rem 1.5rem;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
text-shadow: none;
......@@ -2096,11 +2274,13 @@ ul.toolbar-menu {
transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width: 100%;
margin: 0 0 0.5rem; }
.button:visited {
width: 100%; }
.button:visited,
button:visited {
color: #fff; }
.button:hover, .button:focus {
.button:hover, .button:focus,
button:hover,
button:focus {
background-color: #eee;
background-image: none;
border: 0;
......@@ -2108,19 +2288,24 @@ ul.toolbar-menu {
color: #4e4e4e;
outline: none !important;
text-decoration: none; }
.button:active {
.button:active,
button:active {
background-color: #757575;
background-image: none;
color: #fff;
outline: none !important; }
.button[disabled] {
.button[disabled],
button[disabled] {
background-color: #eee;
background-image: none;
color: #A2A2A2;
cursor: default;
pointer-events: none; }
.layout-builder-form .button,
.form-actions .button {
.form-actions .button, .layout-builder-form
button,
.form-actions
button {
font-size: 0.79rem;
height: 2.5rem;
line-height: 2.75;
......@@ -2128,11 +2313,19 @@ ul.toolbar-menu {
padding: 0.25rem 0.25rem; }
.layout-builder-form .button:hover, .layout-builder-form .button:focus,
.form-actions .button:hover,
.form-actions .button:focus {
.form-actions .button:focus, .layout-builder-form
button:hover, .layout-builder-form
button:focus,
.form-actions
button:hover,
.form-actions
button:focus {
padding: 0.25rem 0.25rem; }
.ui-dialog-buttonset.form-actions .button {
.ui-dialog-buttonset.form-actions .button, .ui-dialog-buttonset.form-actions
button {
max-width: 10rem; }
.user-login-form .form-actions .button {
.user-login-form .form-actions .button, .user-login-form .form-actions
button {
background-color: #757575;
background-image: none;
border: 0;
......@@ -2148,7 +2341,7 @@ ul.toolbar-menu {
letter-spacing: 0.055rem;
line-height: 1.45;
max-width: 18.125rem;
padding: 1rem 1.5rem;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
text-shadow: none;
......@@ -2157,9 +2350,12 @@ ul.toolbar-menu {
vertical-align: top;
white-space: normal;
width: 100%; }
.user-login-form .form-actions .button:visited {
.user-login-form .form-actions .button:visited, .user-login-form .form-actions
button:visited {
color: #fff; }
.user-login-form .form-actions .button:hover, .user-login-form .form-actions .button:focus {
.user-login-form .form-actions .button:hover, .user-login-form .form-actions .button:focus, .user-login-form .form-actions
button:hover, .user-login-form .form-actions
button:focus {
background-color: #eee;
background-image: none;
border: 0;
......@@ -2167,12 +2363,14 @@ ul.toolbar-menu {
color: #4e4e4e;
outline: none !important;
text-decoration: none; }
.user-login-form .form-actions .button:active {
.user-login-form .form-actions .button:active, .user-login-form .form-actions
button:active {
background-color: #757575;
background-image: none;
color: #fff;
outline: none !important; }
.user-login-form .form-actions .button[disabled] {
.user-login-form .form-actions .button[disabled], .user-login-form .form-actions
button[disabled] {
background-color: #eee;
background-image: none;
color: #A2A2A2;
......@@ -2229,6 +2427,15 @@ ul.toolbar-menu {
background-color: #ef6114;
color: #fff; }
.pattern-lab-content .mobile-menu-button,
.pl-c-pattern__extra-toggle {
max-width: inherit;
width: auto; }
.pl-c-pattern .pl-c-demo button,
.pl-c-pattern .pl-c-demo .button {
margin: 0 0 0.5rem; }
.uw-cta .neutral .uw-cta__text--big {
color: #787878; }
......@@ -2762,53 +2969,88 @@ details.details {
.details__description > :last-child {
margin-bottom: 0; }
.uw-expand-collapse__item {
display: block;
width: 100%; }
.uw-expand-collapse__controls {
display: grid;
grid-template-columns: 50% 50%; }
.uw-expand-collapse__button {
background-color: #fafafa;
color: #eee;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 1.125rem;
padding: 0.75rem;
position: relative;
text-align: left;
text-transform: uppercase;
width: 100%; }
.uw-expand-collapse__button:hover {
background-color: #eee;
color: #fafafa; }
.uw-expand-collapse__button--controls {
text-align: center; }
.uw-expand-collapse__button--title:hover::after {
border: solid #fafafa;
border-width: 0 3px 3px 0; }
.uw-expand-collapse__button--title::after {
border: solid #eee;
border-width: 0 3px 3px 0;
content: '';
display: inline-block;
padding: 3px;
position: absolute;
right: 5%;
top: 40%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: 50% 50%;
z-index: 2; }
.uw-expand-collapse__button--title.uw-expanded::after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg); }
.uw-expand-collapse__text {
display: none;
font-size: 1rem;
padding: 1rem 2rem; }
.uw-expand-collapse {
-webkit-font-smoothing: antialiased;
font-weight: 200; }
.uw-expand-collapse__item {
display: block;
margin: 0 0 1rem 0;
width: 100%; }
.uw-expand-collapse__item h2 {
margin: 0; }
.uw-expand-collapse__controls {
display: grid;
grid-template-columns: 50% 50%;
margin-bottom: 1rem; }
.uw-expand-collapse__button {
background: #eee;
font-size: 1.125rem;
font-weight: 400;
margin: 0;
max-width: inherit; }
.uw-expand-collapse__button:hover, .uw-expand-collapse__button:focus {
outline: none; }
.uw-expand-collapse__button:hover[data-type="expand-all"], .uw-expand-collapse__button:focus[data-type="expand-all"] {
background: #4e4e4e;
color: #eee; }
.uw-expand-collapse__button:hover[data-type="collapse-all"], .uw-expand-collapse__button:focus[data-type="collapse-all"] {
background: #4e4e4e;
color: #eee; }
.uw-expand-collapse__button--controls {
text-align: center; }
.uw-expand-collapse__button[data-type="expand-all"] {
background: #eee;
border-right: 1px solid #A2A2A2;
color: #4e4e4e; }
.uw-expand-collapse__button[data-type="collapse-all"] {
background: #eee;
color: #4e4e4e; }
.uw-expand-collapse__button--title {
color: #4e4e4e;
display: table;
font-size: 1.125rem;
font-weight: 400;
height: auto;
margin: 0;
max-width: inherit;
min-height: 3.563rem;
padding: 0.75rem 3rem 0.75rem 0.75rem;
position: relative;
table-layout: fixed;
text-align: left;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
white-space: normal;
width: 100%; }
.uw-expand-collapse__button--title::after {
content: '\e906';
display: block;
font-family: fdsu-rwd;
font-size: 0.79rem;
position: absolute;
right: 5%;
text-align: center;
text-rendering: auto;
top: 40%;
transform: scale(1, 1) rotate(90deg);
transform-origin: 50% 50%;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: transform;
transition-timing-function: linear;
z-index: 2; }
.uw-expand-collapse__button--title.uw-expanded::after {
transform: scale(1, -1) rotate(90deg); }
.uw-expand-collapse__button--title:hover, .uw-expand-collapse__button--title:focus {
background: #4e4e4e;
color: #eee;
outline: none; }
.uw-expand-collapse__text {
display: none;
font-size: 1rem;
padding: 1rem; }
.uw-facebook {
padding: 1rem 0;
......
......@@ -52,7 +52,7 @@ $button-font-size: gesso-font-size(1) !default;
letter-spacing: 0.055rem;
line-height: gesso-line-height(base);
max-width:18.125rem;
padding: rem(gesso-spacing(sm)) rem(gesso-spacing(md));
padding: rem(gesso-spacing(sm)) 2rem;
text-align: center;
text-decoration: none;
text-shadow:$button-text-shadow;
......@@ -120,7 +120,7 @@ $button-font-size: gesso-font-size(1) !default;
letter-spacing: 0.055rem;
line-height: gesso-line-height(base);
max-width:18.125rem;
padding: rem(gesso-spacing(sm)) rem(gesso-spacing(md));
padding: rem(gesso-spacing(sm)) 2rem;
text-align: center;
text-decoration: none;
text-shadow:$button-text-shadow;
......
......@@ -111,4 +111,360 @@
font-style: normal;
font-weight: normal;
src: url("/fonts/fdsu-rwd.eot"), url("/fonts/fdsu-rwd.eot?#iefix") format("embedded-opentype"), url("/fonts/fdsu-rwd.ttf") format("truetype"), url("/fonts/fdsu-rwd.woff") format("woff"), url("/fonts/fdsu-rwd.svg?#fdsu-rwd") format("svg");
}
$fdsu-vimeo: "\e901";
$fdsu-vimeo-box: "\e900";
$fdsu-add-to-calendar: "\2605";
$fdsu-envelope: "\e0eb";
$fdsu-bubble: "\e15f";
$fdsu-binoculars: "\e1b5";
$fdsu-search: "\e1b6";
$fdsu-search-2: "\e1b7";
$fdsu-search-shade: "\e1bb";
$fdsu-arrow-right: "\e3b5";
$fdsu-googleplus-box: "\e495";
$fdsu-github: "\e4ba";
$fdsu-github-box: "\e4bb";
$fdsu-yahoo: "\e4c4";
$fdsu-tux: "\e4c5";
$fdsu-apple: "\e4c6";
$fdsu-finder: "\e4c7";
$fdsu-android: "\e4c8";
$fdsu-windows: "\e4c9";
$fdsu-windows8: "\e4ca";
$fdsu-skype: "\e4cd";
$fdsu-html5: "\e4eb";
$fdsu-css3: "\e4ec";
$fdsu-chrome: "\e4ed";
$fdsu-firefox: "\e4ee";
$fdsu-ie: "\e4ef";
$fdsu-opera: "\e4f0";
$fdsu-safari: "\e4f1";
$fdsu-close: "\e902";
$fdsu-si-comm: "\e903";
$fdsu-info: "\e904";
$fdsu-info-2: "\e905";
$fdsu-chevron: "\e906";
$fdsu-ical: "\e907";
$fdsu-arrow: "\e908";
$fdsu-comment: "\e909";
$fdsu-share: "\e90a";
$fdsu-facebook: "\e90b";
$fdsu-facebook-box: "\e90c";
$fdsu-instagram-box: "\e90d";
$fdsu-instagram: "\e90e";
$fdsu-linkedin: "\e90f";
$fdsu-linkedin-box: "\e910";
$fdsu-twitter: "\e911";
$fdsu-twitter-box: "\e912";
$fdsu-youtube-box: "\e913";
$fdsu-youtube: "\e914";
$fdsu-calendar: "\e915";
$fdsu-cloud: "\e916";
$fdsu-rss-box: "\e917";
$fdsu-snapchat: "\e918";
$fdsu-si-comp: "\e921";
$fdsu-si-infrastructure: "\e927";
$fdsu-si-professionals: "\e928";
$fdsu-si-security: "\e929";
$fdsu-si-teach: "\e92a";
$fdsu-clock2: "\e94f";
$fdsu-spoon-knife: "\e9a3";
$fdsu-location: "\e930";
.fdsu-vimeo {
&::after{
content: $fdsu-vimeo;
}
}
.fdsu-vimeo-box {
&::after{
content: $fdsu-vimeo-box;
}
}
.fdsu-add-to-calendar {
&::after{
content: $fdsu-add-to-calendar;
}
}
.fdsu-envelope {
&::after{
content: $fdsu-envelope;
}
}
.fdsu-bubble {
&::after{
content: $fdsu-bubble;
}
}
.fdsu-binoculars {
&::after{
content: $fdsu-binoculars;
}
}
.fdsu-search {
&::after{
content: $fdsu-search;
}
}
.fdsu-search-2 {
&::after{
content: $fdsu-search-2;
}
}
.fdsu-search-shade {
&::after{
content: $fdsu-search-shade;
}
}
.fdsu-arrow-right {
&::after{
content: $fdsu-arrow-right;
}
}
.fdsu-googleplus-box {
&::after{
content: $fdsu-googleplus-box;
}
}
.fdsu-github {
&::after{
content: $fdsu-github;
}
}
.fdsu-github-box {
&::after{
content: $fdsu-github-box;
}
}
.fdsu-yahoo {
&::after{
content: $fdsu-yahoo;
}
}
.fdsu-tux {
&::after{
content: $fdsu-tux;
}
}
.fdsu-apple {
&::after{
content: $fdsu-apple;
}
}
.fdsu-finder {
&::after{
content: $fdsu-finder;
}
}
.fdsu-android {
&::after{
content: $fdsu-android;
}
}
.fdsu-windows {
&::after{
content: $fdsu-windows;
}
}
.fdsu-windows8 {
&::after{
content: $fdsu-windows8;
}