CSS and JS Additions/fixes
This commit is contained in:
Jay Wood
73
css/sass/partials/_cwv3.scss
Normal file
73
css/sass/partials/_cwv3.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
242
css/sass/partials/_mixins.scss
Normal file
242
css/sass/partials/_mixins.scss
Normal file
@ -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);
|
||||
}
|
||||
13
css/sass/partials/_variables.scss
Normal file
13
css/sass/partials/_variables.scss
Normal file
@ -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;
|
||||
Reference in New Issue
Block a user