.cc-window {
opacity: 1; -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease;
}
.cc-window.cc-invisible {
opacity: 0;
}
/* only animate ifhas class 'cc-animate' */ .cc-animate.cc-revoke {
-webkit-transition: transform 1s ease; -moz-transition: transform 1s ease; -ms-transition: transform 1s ease; -o-transition: transform 1s ease; transition: transform 1s ease;
} .cc-animate.cc-revoke.cc-top {
transform: translateY(-2em);
} .cc-animate.cc-revoke.cc-bottom {
transform: translateY(2em);
} .cc-animate.cc-revoke.cc-active.cc-top {
transform: translateY(0);
} .cc-animate.cc-revoke.cc-active.cc-bottom {
transform: translateY(0);
} .cc-revoke:hover {
transform: translateY(0);
}
.cc-grower {
/* Initially we don't want any height, and we want the contents to be hidden */ max-height: 0; overflow: hidden; /* Set our transitions up. */ -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; transition: max-height 1s;
}
/* the popup window */ .cc-window, .cc-revoke {
position: fixed; overflow: hidden; box-sizing: border-box; /* exclude padding when dealing with width */ font-family: Helvetica, Calibri, Arial, sans-serif; font-size: 16px; /* by setting the base font here, we can size the rest of the popup using CSS `em` */ line-height: 1.5em; display: flex; flex-wrap: nowrap; /* the following are random unjustified styles - just because - should probably be removed */ z-index: 9998;
}
.cc-revoke {
z-index: 9999;
}
.cc-window.cc-static {
position: static;
}
/* 2 basic types of window - floating / banner */ .cc-window.cc-floating {
padding: 2em; max-width: 24em; /* 1em == 16px therefore 24em == 384px */ flex-direction: column;
} .cc-window.cc-banner {
padding: 1em 1.8em; width: 100%; flex-direction: row;
}
.cc-revoke {
padding: 0.5em;
} .cc-revoke:hover {
text-decoration: underline;
}
.cc-header {
font-size: 18px; font-weight: bold;
}
/* clickable things */ .cc-btn, .cc-link, .cc-close, .cc-revoke {
cursor: pointer;
}
.cc-link {
opacity: 0.8; display: inline-block; border: none; padding: 0.2em; text-decoration: underline;
} .cc-hover {
opacity: 1;
color: initial;
}
.cc-btn {
display: block; padding: 0.4em 0.8em; font-size: 0.9em; font-weight: bold; border-width: 2px; border-style: solid; text-align: center; white-space: nowrap;
}
.cc-highlight .cc-btn:first-child {
background-color: transparent; border-color: transparent;
}
.cc-highlight .cc-btn:first-child:hover, .cc-highlight .cc-btn:first-child:focus {
background-color: transparent; text-decoration: underline;
}
.cc-close {
display: block; position: absolute; top: 0.5em; right: 0.5em; font-size: 1.6em; opacity: 0.9; /* seeing as this contains text and not an image, the element taller than it is wide (because it is text) */ /* - we want it to be a square, because it's acting as an icon */ /* - setting the line height normalizes the height */ line-height: 0.75;
} .cc-close:hover, .cc-close:focus {
opacity: 1;
}
/* This file should contain styles that modifies the popup layout. */ /* By layout, we mean the physical position of the elements on the popup window, and the margin / padding around those elements. */
.cc-revoke.cc-top {
top: 0; left: 3em; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em;
} .cc-revoke.cc-bottom {
bottom: 0; left: 3em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em;
} .cc-revoke.cc-left {
left: 3em; right: unset;
} .cc-revoke.cc-right {
right: 3em; left: unset;
}
/**************************************** FLOATING ****************************************/
/* these classes position the floating element */ .cc-top {
top: 1em;
} .cc-left {
left: 1em;
} .cc-right {
right: 1em;
} .cc-bottom {
bottom: 1em;
}
/* links that are direct decendants should be displayed as block */ .cc-floating > .cc-link {
margin-bottom: 1em;
}
.cc-floating .cc-message {
display: block; margin-bottom: 1em;
}
.cc-window.cc-floating .cc-compliance {
flex: 1 0 auto;
}
/**************************************** BANNER ****************************************/
.cc-window.cc-banner {
align-items: center;
}
.cc-banner.cc-top {
left: 0; right: 0; top: 0;
} .cc-banner.cc-bottom {
left: 0; right: 0; bottom: 0;
}
.cc-banner .cc-message {
display: block; flex: 1 1 auto; max-width: 100%; margin-right: 1em;
}
/* COMPLIANCE BOX */
.cc-compliance {
display: flex; align-items: center; justify-content: space-between;
} .cc-floating .cc-compliance > .cc-btn {
flex: 1;
}
.cc-btn + .cc-btn {
margin-left: 0.5em;
}
/* Categories Layout */ .cc-window.cc-type-categories {
display : inline-flex; flex-direction: column; overflow : visible; .form{ text-align: right; } .cc-btn { margin: 0; &.cc-save { margin : 0; display : inline-block; } }
} .cc-categories {
display: inline-flex; .cc-category{ display : flex; max-width: 100%; margin : 0 2px; position : relative; } .cc-btn { border-right: none; outline : none; input[type=checkbox]{ float: left; height: 26px; width: calc( 100% - 22px ); display: block; position: absolute; top: 0; left: 2px; cursor: pointer; } &:not(.cc-info):not(.cc-save){ padding-left: 26px; } } .cc-info { border-left : none; border-right: 2px solid lightgrey; padding : 4px; font-variant: all-small-caps; &:focus + .cc-tooltip{ display: block; } } .cc-tooltip{ display : none; position : absolute; z-index : 3; width : 190px; bottom : 46px; padding : 8px; border : thin solid lightgrey; box-shadow: 1px 1px 4px rgba( 150, 150, 150, .7 ); &:after{ content : ""; width : 10px; height : 10px; transform : rotate(45deg); position : absolute; bottom : -7px; left : 10px; box-shadow: 2px 1px 1px rgba( 200, 200, 200, .5 ); } p { margin: 0; } }
}
@media print {
.cc-window, .cc-revoke { display: none; }
}
@media screen and (max-width: 900px) {
.cc-btn { white-space: normal; }
}
/* dimensions for 'iPhone6 Plus' and lower */ @media screen and (max-width: 414px) and (orientation: portrait),
screen and (max-width: 736px) and (orientation: landscape) { .cc-window { &.cc-top { top: 0; } &.cc-bottom { bottom: 0; } &.cc-banner, &.cc-floating, &.cc-right, &.cc-left { left: 0; right: 0; } &.cc-banner { flex-direction: column; align-items: unset; .cc-compliance { flex: 1 1 auto; } .cc-message { margin-right: 0; margin-bottom: 1em; } } &.cc-floating { max-width: none; } &.cc-type-categories { flex-direction: column; } .cc-message { margin-bottom: 1em; } .cc-categories{ flex-direction: column; width: 100%; margin-right: 8px; } .cc-category { margin: 4px 0; .cc-btn:not(.cc-info){ width: calc( 100% - 16px); min-width: 140px; } } }
} @media screen and (max-width: 854px) {
.cc-window.cc-type-categories .cc-btn.cc-save { margin: 8px 0; }
}