diff --git a/css/cwv3.css b/css/cwv3.css index c3e285c..2c7d231 100644 --- a/css/cwv3.css +++ b/css/cwv3.css @@ -1,27 +1,42 @@ -/* Undocumented cBox colors */ -#cboxLoadingOverlay, #cboxContent, #cboxLoadedContent { - background-color: #FFF !important; +.cwv3.dialog-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 99998; } /* Main CWV3 Dialog */ .cwv3_dialog { - border: 3px solid #ccc; - background: #FFF; -} -.cwv3_dialog.js .auth { - display: none; -} -.cwv3_dialog.js .denied { - display: none; + border: 3px solid #cccccc; + background: white; + width: 50%; + height: 50%; + position: fixed; + top: 25%; + left: 25%; + -webkit-box-shadow: 2px 11px 48px black; + -moz-box-shadow: 2px 11px 48px black; + box-shadow: 2px 11px 48px black; + overflow: hidden; + z-index: 99999; } .cwv3_dialog div { padding: 0.25em; } +.cwv3_dialog .cwv3.auth, .cwv3_dialog .cwv3.denied { + height: 100%; +} .cwv3_dialog .cwv3_title { - color: #FFF; + color: white; font-weight: bold; text-align: center; - background: #f00; + background: red; +} +.cwv3_dialog .cwv3_content { + height: 84%; + overflow-y: scroll; } .cwv3_dialog .cwv3_btns { overflow: hidden; @@ -30,7 +45,7 @@ display: block; width: 100%; text-align: center; - color: #FFF; + color: white; font-weight: bold; text-decoration: none; } @@ -39,12 +54,12 @@ width: 40%; } .cwv3_dialog .cwv3_btns .cwv3_exit a { - background-color: #F00; + background-color: red; } .cwv3_dialog .cwv3_btns .cwv3_enter { float: left; width: 40%; } .cwv3_dialog .cwv3_btns .cwv3_enter a { - background-color: #0C3; + background-color: #00cc33; } diff --git a/css/cwv3.min.css b/css/cwv3.min.css index c2865ff..869eed6 100644 --- a/css/cwv3.min.css +++ b/css/cwv3.min.css @@ -1 +1 @@ -#cboxContent,#cboxLoadedContent,#cboxLoadingOverlay{background-color:#FFF!important}.cwv3_dialog{border:3px solid #ccc;background:#FFF}.cwv3_dialog.js .auth,.cwv3_dialog.js .denied{display:none}.cwv3_dialog div{padding:.25em}.cwv3_dialog .cwv3_title{color:#FFF;font-weight:700;text-align:center;background:red}.cwv3_dialog .cwv3_btns{overflow:hidden}.cwv3_dialog .cwv3_btns a{display:block;width:100%;text-align:center;color:#FFF;font-weight:700;text-decoration:none}.cwv3_dialog .cwv3_btns .cwv3_exit{float:right;width:40%}.cwv3_dialog .cwv3_btns .cwv3_exit a{background-color:red}.cwv3_dialog .cwv3_btns .cwv3_enter{float:left;width:40%}.cwv3_dialog .cwv3_btns .cwv3_enter a{background-color:#0C3} \ No newline at end of file +.cwv3.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99998}.cwv3_dialog{border:3px solid #ccc;background:#fff;width:50%;height:50%;position:fixed;top:25%;left:25%;-webkit-box-shadow:2px 11px 48px #000;-moz-box-shadow:2px 11px 48px #000;box-shadow:2px 11px 48px #000;overflow:hidden;z-index:99999}.cwv3_dialog div{padding:.25em}.cwv3_dialog .cwv3.auth,.cwv3_dialog .cwv3.denied{height:100%}.cwv3_dialog .cwv3_title{color:#fff;font-weight:700;text-align:center;background:red}.cwv3_dialog .cwv3_content{height:84%;overflow-y:scroll}.cwv3_dialog .cwv3_btns{overflow:hidden}.cwv3_dialog .cwv3_btns a{display:block;width:100%;text-align:center;color:#fff;font-weight:700;text-decoration:none}.cwv3_dialog .cwv3_btns .cwv3_exit{float:right;width:40%}.cwv3_dialog .cwv3_btns .cwv3_exit a{background-color:red}.cwv3_dialog .cwv3_btns .cwv3_enter{float:left;width:40%}.cwv3_dialog .cwv3_btns .cwv3_enter a{background-color:#0c3} \ No newline at end of file diff --git a/css/sass/cwv3.scss b/css/sass/cwv3.scss index e004355..b854994 100644 --- a/css/sass/cwv3.scss +++ b/css/sass/cwv3.scss @@ -1,64 +1,3 @@ -/* Undocumented cBox colors */ -#cboxLoadingOverlay, #cboxContent, #cboxLoadedContent { - background-color: #FFF !important; -} - -/* Main CWV3 Dialog */ -.cwv3_dialog{ - - &.js{ - - .auth{ - display: none; - } - - .denied{ - display: none; - } - - } - - border: 3px solid #ccc; - background: #FFF; - - div{ - padding: 0.25em; - } - - - .cwv3_title { - color: #FFF; - font-weight: bold; - text-align: center; - background: #f00; - } - - .cwv3_btns{ - overflow: hidden; - a{ - display: block; - width: 100%; - text-align: center; - color: #FFF; - font-weight: bold; - text-decoration: none; - } - - .cwv3_exit{ - float: right; - width: 40%; - a{ - background-color: #F00; - } - } - - .cwv3_enter{ - float: left; - width: 40%; - a{ - background-color: #0C3; - } - } - } - -} \ No newline at end of file +@import "partials/mixins"; +@import "partials/variables"; +@import "partials/cwv3"; \ No newline at end of file diff --git a/css/sass/partials/_cwv3.scss b/css/sass/partials/_cwv3.scss new file mode 100644 index 0000000..c408877 --- /dev/null +++ b/css/sass/partials/_cwv3.scss @@ -0,0 +1,73 @@ +.cwv3{ + &.dialog-overlay{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 99998; + } +} + +/* Main CWV3 Dialog */ +.cwv3_dialog{ + border: 3px solid $dialog-border-color; + background: $dialog-background; + width: 50%; + height: 50%; + position: fixed; + top: 25%; + left: 25%; + @include box-shadow( 2px 11px 48px #000 ); + overflow: hidden; + z-index: 99999; + + div{ + padding: 0.25em; + } + + .cwv3.auth, .cwv3.denied{ + height: 100%; + } + + .cwv3_title { + color: $title-font-color; + font-weight: bold; + text-align: center; + background: $title-background; + } + + .cwv3_content{ + height: 84%; + overflow-y: scroll; + } + + .cwv3_btns{ + overflow: hidden; + a{ + display: block; + width: 100%; + text-align: center; + color: $button-txt-color; + font-weight: bold; + text-decoration: none; + } + + .cwv3_exit{ + float: right; + width: 40%; + a{ + background-color: $exit-button-color; + } + } + + .cwv3_enter{ + float: left; + width: 40%; + a{ + background-color: $enter-button-color; + } + } + } + +} \ No newline at end of file diff --git a/css/sass/partials/_mixins.scss b/css/sass/partials/_mixins.scss new file mode 100644 index 0000000..600eaaa --- /dev/null +++ b/css/sass/partials/_mixins.scss @@ -0,0 +1,242 @@ +// +// Mixins +// -------------------------------------------------- + + +// Create REM values with PX fall back +// +// Generate a REM with PX fallback from +// $baseFontSize. Enter the desired size based +// on pixels in numerical form. Supports shorthand. +// +// Forked from: http://codepen.io/thejameskyle/pen/JmBjc +// +// @author Greg Rickaby +// @since 1.0 +// +// Usage: @include rem($property, $values); +// Example Usage: +// @include rem(font-size, 16px); +// @include rem(margin, 0 24px 0 12px); +// +// Outputs: +// font-size: 16px; +// font-size: 1.6rem; +// margin: 0 24px 0 12px; +// margin: 0 2.4rem 0 1.2rem; +// ---------------------------------- +$baseFontSize: 10; // Based on HTML reset html { font-size: 62.5%; } + +@function parseInt($n) { + @return $n / ($n * 0 + 1); +} + +@mixin rem($property, $values) { + $px : (); + $rem: (); + + $root: $baseFontSize; + + @each $value in $values { + @if $value == 0 or $value == auto { + $px : append($px , $value); + $rem: append($rem, $value); + } + + @else if type-of($value) == number { + $unit: unit($value); + $val: parseInt($value); + + @if $unit == "px" { + $px : append($px, $value); + $rem: append($rem, ($val / $root + rem)); + } + + @if $unit == "rem" { + $px : append($px, ($val * $root + px)); + $rem: append($rem, $value); + } + } + + @else { + $px : append($px, $value); + $rem: append($rem, $value); + } + } + + @if $px == $rem { + #{$property}: $px; + } @else { + #{$property}: $px; + #{$property}: $rem; + } +} + +@function rem($value) { + $root: $baseFontSize; + $val: parseInt($value); + $return: (); + + @if unit($value) == "px" { + $return: append($return, ($val / $root + rem)); + } @else { + $return: append($return, ($val * $root + px)); + } + + @return $return; +} + +// Responsive Breakpoints +// ---------------------------------- + +@mixin breakpoint($point) { + @if $point == smallscreen { + @media screen and (max-width: 1380px) { @content; } + } + + @else if $point == desktop { + @media screen and (max-width: 1140px) { @content; } + } + + @else if $point == tablet { + @media screen and (max-width: 800px) { @content; } + } + + @else if $point == tablet-small { + @media screen and (max-width: 700px) { @content; } + } + + @else if $point == mobilelandscape { + @media screen and (max-width: 600px) { @content; } + } + + @else if $point == mobile { + @media screen and (max-width: 480px) { @content; } + } +} + + +// Border Radius +// ---------------------------------- +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +// Single Corner Border Radius +// ---------------------------------- +@mixin border-top-left-radius($radius) { + -webkit-border-top-left-radius: $radius; + -moz-border-radius-topleft: $radius; + border-top-left-radius: $radius; +} +@mixin border-top-right-radius($radius) { + -webkit-border-top-right-radius: $radius; + -moz-border-radius-topright: $radius; + border-top-right-radius: $radius; +} +@mixin border-bottom-right-radius($radius) { + -webkit-border-bottom-right-radius: $radius; + -moz-border-radius-bottomright: $radius; + border-bottom-right-radius: $radius; +} +@mixin border-bottom-left-radius($radius) { + -webkit-border-bottom-left-radius: $radius; + -moz-border-radius-bottomleft: $radius; + border-bottom-left-radius: $radius; +} + +// Single Side Border Radius +// ---------------------------------- +@mixin border-top-radius($radius) { + @include border-top-right-radius($radius); + @include border-top-left-radius($radius); +} +@mixin border-right-radius($radius) { + @include border-top-right-radius($radius); + @include border-bottom-right-radius($radius); +} +@mixin border-bottom-radius($radius) { + @include border-bottom-right-radius($radius); + @include border-bottom-left-radius($radius); +} +@mixin border-left-radius($radius) { + @include border-top-left-radius($radius); + @include border-bottom-left-radius($radius); +} + +// Drop shadows +// ---------------------------------- +@mixin box-shadow($shadow...) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + +// Box Sizing +// ---------------------------------- +@mixin box-sizing($sizing...) { + -webkit-box-sizing: $sizing; + -moz-box-sizing: $sizing; + box-sizing: $sizing; +} + +// Transitions +// ---------------------------------- +@mixin transition($transition...) { + -webkit-transition: $transition; + -moz-transition: $transition; + -o-transition: $transition; + transition: $transition; +} +@mixin transition-delay($transition-delay) { + -webkit-transition-delay: $transition-delay; + -moz-transition-delay: $transition-delay; + -o-transition-delay: $transition-delay; + transition-delay: $transition-delay; +} +@mixin transition-duration($transition-duration) { + -webkit-transition-duration: $transition-duration; + -moz-transition-duration: $transition-duration; + -o-transition-duration: $transition-duration; + transition-duration: $transition-duration; +} + +// Transformations +// ---------------------------------- +@mixin rotate($degrees) { + -webkit-transform: rotate($degrees); + -moz-transform: rotate($degrees); + -ms-transform: rotate($degrees); + -o-transform: rotate($degrees); + transform: rotate($degrees); +} +@mixin scale($ratio) { + -webkit-transform: scale($ratio); + -moz-transform: scale($ratio); + -ms-transform: scale($ratio); + -o-transform: scale($ratio); + transform: scale($ratio); +} +@mixin translate($x, $y) { + -webkit-transform: translate($x, $y); + -moz-transform: translate($x, $y); + -ms-transform: translate($x, $y); + -o-transform: translate($x, $y); + transform: translate($x, $y); +} +@mixin skew($x, $y) { + -webkit-transform: skew($x, $y); + -moz-transform: skew($x, $y); + -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885 + -o-transform: skew($x, $y); + transform: skew($x, $y); + -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 +} +@mixin translate3d($x, $y, $z) { + -webkit-transform: translate3d($x, $y, $z); + -moz-transform: translate3d($x, $y, $z); + -o-transform: translate3d($x, $y, $z); + transform: translate3d($x, $y, $z); +} diff --git a/css/sass/partials/_variables.scss b/css/sass/partials/_variables.scss new file mode 100644 index 0000000..bd12aa6 --- /dev/null +++ b/css/sass/partials/_variables.scss @@ -0,0 +1,13 @@ +/// +// General Variables for CWv3 +/// + +$button-txt-color : #FFFFFF; +$exit-button-color : #FF0000; +$enter-button-color : #00CC33; + +$title-background : #FF0000; +$title-font-color : #FFFFFF; + +$dialog-background : #FFFFFF; +$dialog-border-color : #CCCCCC; \ No newline at end of file diff --git a/js/cwv3.js b/js/cwv3.js index 3e54797..cb899b2 100644 --- a/js/cwv3.js +++ b/js/cwv3.js @@ -11,8 +11,6 @@ window.cwv3 = ( function( window, document, $ ){ app.$enter = app.$dialog.find( '.cwv3_enter' ); app.cookie_name = ( '' !== cwv3_params.cookie_name ) ? 'cwv3_cookie_' + cwv3_params.cookie_name : false; app.redirect_url = ( '' === cwv3_params.redirect_url || '#' === cwv3_params.redirect_url ) ? 'http://google.com' : cwv3_params.redirect_url; - - $.colorbox.resize(); }; app.init = function(){ @@ -56,7 +54,7 @@ window.cwv3 = ( function( window, document, $ ){ window.location.replace( app.redirect_url ); } } else if( undefined === cookie_data ){ - // app.$denial.remove(); // Remove the denied box instead. + app.$denial.remove(); // Remove the denied box instead. } }; diff --git a/js/cwv3.min.js b/js/cwv3.min.js index 9fcbf75..85bb422 100644 --- a/js/cwv3.min.js +++ b/js/cwv3.min.js @@ -1 +1 @@ -window.cwv3=function(window,document,$){var app={};return app.cache=function(){app.$dialog=$(".cwv3_dialog"),app.$auth=app.$dialog.find(".cwv3.auth"),app.$denial=app.$dialog.find(".cwv3.denied"),app.$exit=app.$dialog.find(".cwv3_exit"),app.$enter=app.$dialog.find(".cwv3_enter"),app.cookie_name=""!==cwv3_params.cookie_name?"cwv3_cookie_"+cwv3_params.cookie_name:!1,app.redirect_url=""===cwv3_params.redirect_url||"#"===cwv3_params.redirect_url?"http://google.com":cwv3_params.redirect_url,$.colorbox.resize()},app.init=function(){app.cache(),$("body").on("click",".cwv3_enter",app.enter_handler),$("body").on("click",".cwv3_exit",app.exit_handler),app.cookie_name&&app.show_popup()},app.enter_handler=function(evt){evt.preventDefault()},app.exit_handler=function(evt){evt.preventDefault()},app.set_cookie=function(){},app.show_popup=function(){},app.dialog_switch=function(){var cookie_data=$.cookie(app.cookie_name);"denied"===cookie_data&&"redirect"===cwv3_params.denial_method&&window.location.replace(app.redirect_url)},$(document).ready(app.init),app}(window,document,jQuery); \ No newline at end of file +window.cwv3=function(window,document,$){var app={};return app.cache=function(){app.$dialog=$(".cwv3_dialog"),app.$auth=app.$dialog.find(".cwv3.auth"),app.$denial=app.$dialog.find(".cwv3.denied"),app.$exit=app.$dialog.find(".cwv3_exit"),app.$enter=app.$dialog.find(".cwv3_enter"),app.cookie_name=""!==cwv3_params.cookie_name?"cwv3_cookie_"+cwv3_params.cookie_name:!1,app.redirect_url=""===cwv3_params.redirect_url||"#"===cwv3_params.redirect_url?"http://google.com":cwv3_params.redirect_url},app.init=function(){app.cache(),$("body").on("click",".cwv3_enter",app.enter_handler),$("body").on("click",".cwv3_exit",app.exit_handler),app.cookie_name&&app.show_popup()},app.enter_handler=function(evt){evt.preventDefault()},app.exit_handler=function(evt){evt.preventDefault()},app.set_cookie=function(){},app.show_popup=function(){},app.dialog_switch=function(){var cookie_data=$.cookie(app.cookie_name);"denied"===cookie_data?"redirect"===cwv3_params.denial_method&&window.location.replace(app.redirect_url):void 0===cookie_data&&app.$denial.remove()},$(document).ready(app.init),app}(window,document,jQuery); \ No newline at end of file