Difference between revisions of "Team:Cornell NY/sidebarCSS"

Line 253: Line 253:
 
     transition: transform 0.4s;
 
     transition: transform 0.4s;
 
   }
 
   }
−
   .no-touch .cd-vertical-nav:hover::before, .cd-vertical-nav::before {
+
   .no-touch .cd-vertical-nav:focus::before, .touch .cd-vertical-nav::before {
 
     -webkit-transform: translateX(0);
 
     -webkit-transform: translateX(0);
 
     -moz-transform: translateX(0);
 
     -moz-transform: translateX(0);
Line 323: Line 323:
 
     transition: transform 0.4s 0s, opacity 0.1s 0.3s;
 
     transition: transform 0.4s 0s, opacity 0.1s 0.3s;
 
   }
 
   }
−
   .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:hover::before {
+
   .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:focus::before {
 
     background-color: #47b475;
 
     background-color: #47b475;
 
   }
 
   }
Line 407: Line 407:
 
     transition: transform 0.4s;
 
     transition: transform 0.4s;
 
   }
 
   }
−
   .no-touch .cd-vertical-nav:hover a::before, .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after {
+
   .no-touch .cd-vertical-nav:focus a::before, .no-touch .cd-vertical-nav:focus a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after {
 
     -webkit-transform: translateX(-50%) scale(1);
 
     -webkit-transform: translateX(-50%) scale(1);
 
     -moz-transform: translateX(-50%) scale(1);
 
     -moz-transform: translateX(-50%) scale(1);
Line 416: Line 416:
 
     -moz-transform: translateX(-50%) scale(1) rotate(0.02deg);
 
     -moz-transform: translateX(-50%) scale(1) rotate(0.02deg);
 
   }
 
   }
−
   .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav a::after {
+
   .no-touch .cd-vertical-nav:focus a::after, .touch .cd-vertical-nav a::after {
 
     opacity: 1;
 
     opacity: 1;
 
     -webkit-transition: -webkit-transform 0.4s, opacity 0s;
 
     -webkit-transition: -webkit-transform 0.4s, opacity 0s;
Line 422: Line 422:
 
     transition: transform 0.4s, opacity 0s;
 
     transition: transform 0.4s, opacity 0s;
 
   }
 
   }
−
   .no-touch .cd-vertical-nav:hover .label, .touch .cd-vertical-nav .label {
+
   .no-touch .cd-vertical-nav:focus .label, .touch .cd-vertical-nav .label {
 
     -webkit-transform: translateX(0);
 
     -webkit-transform: translateX(0);
 
     -moz-transform: translateX(0);
 
     -moz-transform: translateX(0);

Revision as of 04:25, 18 October 2016

/* http://meyerweb.com/eric/tools/css/reset/ 

  v2.0 | 20110126
  License: none (public domain)
  • /

/* html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } */ /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } /* body { line-height: 1; } */ ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/* --------------------------------

Primary style

*/
  • , *::after, *::before {
 box-sizing: border-box;

}

/* html { 

 font-size: 62.5%;

} */

/* a { 

 color: #47b475;
 text-decoration: none;

} */

.cd-image-replace { 

 /* replace text with image */
 display: inline-block;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 color: transparent;

}

/* --------------------------------

Navigation trigger - visible on small devices only

*/

.cd-nav-trigger { 

 display: block;
 position: fixed;
 z-index: 2;
 bottom: 30px;
 right: 5%;
 height: 44px;
 width: 44px;
 border-radius: 0.25em;
 background: #47b475;
 /* reset button style */
 cursor: pointer;
 -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
 -o-appearance: none;
 appearance: none;
 border: none;
 outline: none;

} .cd-nav-trigger span { 

 /* central dot */
 position: absolute;
 height: 4px;
 width: 4px;
 background-color: #3a2c41;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 bottom: auto;
 right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);

} .cd-nav-trigger span::before, .cd-nav-trigger span::after { 

 /* bottom and top dots */
 content: ;
 position: absolute;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: #3a2c41;
 border-radius: inherit;

} .cd-nav-trigger span::before { 

 top: -9px;

} .cd-nav-trigger span::after { 

 bottom: -9px;

} @media only screen and (min-width: 800px) { 

 .cd-nav-trigger {
   display: none;
 }

}

/* --------------------------------

Vertical navigation

*/

.cd-vertical-nav { 

 position: fixed;
 z-index: 1;
 right: 5%;
 bottom: 30px;
 width: 90%;
 max-width: 400px;
 max-height: 90%;
 overflow-y: auto;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 -ms-transform-origin: right bottom;
 -o-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transition: -webkit-transform 0.2s;
 -moz-transition: -moz-transform 0.2s;
 transition: transform 0.2s;
 border-radius: 0.25em;
 background-color: #47b475;

} .cd-vertical-nav a { 

 display: block;
 padding: 1em;
 color: #3a2c41;
 font-weight: bold;
 border-bottom: 1px solid rgba(58, 44, 65, 0.1);

} .cd-vertical-nav a.active { 

 color: #47b475;

} .cd-vertical-nav.open { 

 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
 -webkit-overflow-scrolling: touch;

} .cd-vertical-nav.open + .cd-nav-trigger { 

 background-color: transparent;

} .cd-vertical-nav.open + .cd-nav-trigger span { 

 background-color: rgba(58, 44, 65, 0);

} .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after { 

 /* transform dots in 'X' icon */
 height: 3px;
 width: 20px;
 border-radius: 0;
 left: -8px;

} .cd-vertical-nav.open + .cd-nav-trigger span::before { 

 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 1px;

} .cd-vertical-nav.open + .cd-nav-trigger span::after { 

 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
 bottom: 0;

} @media only screen and (min-width: 800px) { 

 .cd-vertical-nav {
   /* reset style */
   right: 0;
   top: 0;
   bottom: auto;
   height: 100vh;
   width: 90px;
   max-width: none;
   max-height: none;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
   background-color: transparent;
   /* vertically align its content*/
   display: table;
 }
 .cd-vertical-nav::before {
   /* this is the navigation background */
   content: ;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   -o-transform: translateX(100%);
   transform: translateX(100%);
   -webkit-transition: -webkit-transform 0.4s;
   -moz-transition: -moz-transform 0.4s;
   transition: transform 0.4s;
 }
 .no-touch .cd-vertical-nav:focus::before, .touch .cd-vertical-nav::before {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }
 .cd-vertical-nav ul {
/* vertically align
    inside <nav>*/ display: table-cell; vertical-align: middle; text-align: center; } .cd-vertical-nav a { position: relative; padding: 3em 0 0; margin: 1.4em auto; border-bottom: none; font-size: 1.2rem; color: #eaf2e3; } .cd-vertical-nav a.active { color: #eaf2e3; } .cd-vertical-nav a::before, .cd-vertical-nav a::after { /* used to create the filled circle and the background icon */ content: ; position: absolute; left: 50%; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .cd-vertical-nav a::before { /* filled circle */ top: 0; height: 32px; width: 32px; border-radius: 50%; background: #eaf2e3; -webkit-transform: translateX(-50%) scale(0.25); -moz-transform: translateX(-50%) scale(0.25); -ms-transform: translateX(-50%) scale(0.25); -o-transform: translateX(-50%) scale(0.25); transform: translateX(-50%) scale(0.25); -webkit-transition: -webkit-transform 0.4s, background-color 0.2s; -moz-transition: -moz-transform 0.4s, background-color 0.2s; transition: transform 0.4s, background-color 0.2s; } .cd-vertical-nav a::after { /* icon */ opacity: 0; top: 8px; height: 16px; width: 16px; background: url(../img/cd-nav-icons.svg) no-repeat; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s 0s, opacity 0.1s 0.3s; transition: transform 0.4s 0s, opacity 0.1s 0.3s; } .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:focus::before { background-color: #47b475; } .cd-vertical-nav li:first-of-type a::after { /* change icon using image sprites */ background-position: 0px -48px; /* fix bug with transitions - set scale(0.01) rather than scale(0) */ -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(4.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(4.5em) scale(0.01); -o-transform: translateX(-50%) translateY(4.5em) scale(0.01); transform: translateX(-50%) translateY(4.5em) scale(0.01); } .cd-vertical-nav li:first-of-type a::before { -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(4.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(4.5em) scale(0.25); -o-transform: translateX(-50%) translateY(4.5em) scale(0.25); transform: translateX(-50%) translateY(4.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(2) a::after { background-position: 0px -32px; -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(1.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(1.5em) scale(0.01); -o-transform: translateX(-50%) translateY(1.5em) scale(0.01); transform: translateX(-50%) translateY(1.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(2) a::before { -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(1.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(1.5em) scale(0.25); -o-transform: translateX(-50%) translateY(1.5em) scale(0.25); transform: translateX(-50%) translateY(1.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(3) a::after { background-position: 0px -16px; -webkit-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -o-transform: translateX(-50%) translateY(-1.5em) scale(0.01); transform: translateX(-50%) translateY(-1.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(3) a::before { -webkit-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -o-transform: translateX(-50%) translateY(-1.5em) scale(0.25); transform: translateX(-50%) translateY(-1.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(4) a::after { background-position: 0px 0px; -webkit-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -o-transform: translateX(-50%) translateY(-4.5em) scale(0.01); transform: translateX(-50%) translateY(-4.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(4) a::before { -webkit-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -o-transform: translateX(-50%) translateY(-4.5em) scale(0.25); transform: translateX(-50%) translateY(-4.5em) scale(0.25); } .cd-vertical-nav .label { display: block; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .no-touch .cd-vertical-nav:focus a::before, .no-touch .cd-vertical-nav:focus a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); /* set a rotation to fix bug on Firefox - http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ */ -moz-transform: translateX(-50%) scale(1) rotate(0.02deg); } .no-touch .cd-vertical-nav:focus a::after, .touch .cd-vertical-nav a::after { opacity: 1; -webkit-transition: -webkit-transform 0.4s, opacity 0s; -moz-transition: -moz-transform 0.4s, opacity 0s; transition: transform 0.4s, opacity 0s; } .no-touch .cd-vertical-nav:focus .label, .touch .cd-vertical-nav .label { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* -------------------------------- Content Sections - basic style
    */

    .cd-section { 

     /* vertically align its content*/
 display: table;
 width: 100%;
 height: 100vh;
 background: #3a2c41;

    } .cd-section:nth-of-type(even) { 

     background-color: #70557e;

    } .cd-section > div {

    /* vertically align
    inside <section> */ 
     display: table-cell;
 vertical-align: middle;
 text-align: center;

    } .cd-section h1, .cd-section h2 { 

     width: 90%;
 margin: 0 auto;
 text-transform: uppercase;
 font-size: 2.4rem;
 line-height: 1.4;

    } .cd-section h1 b, .cd-section h2 b { 

     color: #584c5e;

    } .cd-section p { 

     margin: 1em auto 0;
 line-height: 1.6;
 width: 90%;
 max-width: 680px;
 color: rgba(234, 242, 227, 0.6);

    } @media only screen and (min-width: 800px) { 

     .cd-section h1, .cd-section h2 {
   font-size: 3rem;
 }
 .cd-section p {
   font-size: 2rem;
 }

    }

    .cd-scroll-down { 

     position: absolute;
 left: 50%;
 right: auto;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -o-transform: translateX(-50%);
 transform: translateX(-50%);
 bottom: 20px;
 width: 44px;
 height: 44px;
 background: url(../img/cd-arrow-bottom.svg) no-repeat center center;

    }

    /* --------------------------------

    no-js

    */

    .no-js .cd-nav-trigger { 

     display: none;

    }

    .no-js .cd-vertical-nav { 

     position: static;
 height: auto;
 width: 100%;
 max-width: none;
 background-color: rgba(0, 0, 0, 0.8);
 border-radius: 0;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);

    } .no-js .cd-vertical-nav::before { 

     display: none;

    } .no-js .cd-vertical-nav ul::after { 

     clear: both;
 content: "";
 display: table;

    } .no-js .cd-vertical-nav li { 

     display: inline-block;
 float: left;

    } .no-js .cd-vertical-nav a { 

     padding: 0 1em;
 margin: 1.5em 1em;
 color: #eaf2e3;

    } .no-js .cd-vertical-nav a.active { 

     color: #47b475;

    } .no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before { 

     display: none;

    } .no-js .cd-vertical-nav .label { 

     -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);
    }