From f2dc432feac192724376e54008da7c52db7e36ab Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Jun 2014 11:46:00 -0400 Subject: [PATCH] Adds missing tag and modal variables, adds css variables for video --- src/themes/_site/modules/video.overrides | 3 + src/themes/_site/modules/video.variables | 0 .../packages/default/elements/label.variables | 4 +- .../packages/default/modules/modal.variables | 151 +++++++++--------- .../packages/default/modules/video.overrides | 3 + .../packages/default/modules/video.variables | 16 ++ 6 files changed, 102 insertions(+), 75 deletions(-) create mode 100644 src/themes/_site/modules/video.overrides create mode 100644 src/themes/_site/modules/video.variables create mode 100644 src/themes/packages/default/modules/video.overrides create mode 100644 src/themes/packages/default/modules/video.variables diff --git a/src/themes/_site/modules/video.overrides b/src/themes/_site/modules/video.overrides new file mode 100644 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/_site/modules/video.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/_site/modules/video.variables b/src/themes/_site/modules/video.variables new file mode 100644 index 000000000..e69de29bb diff --git a/src/themes/packages/default/elements/label.variables b/src/themes/packages/default/elements/label.variables index b247d3625..b8f2c663d 100755 --- a/src/themes/packages/default/elements/label.variables +++ b/src/themes/packages/default/elements/label.variables @@ -71,8 +71,8 @@ @tagHorizontalPadding: 1.5em; @tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); -@tagTriangleLeftOffset: -0.82em; -@tagTriangleTopOffset: 0.325em; +@tagTriangleRightOffset: 100%; +@tagTriangleTopOffset: 50%; @tagTriangleSize: 1.75em; /* Ribbon */ diff --git a/src/themes/packages/default/modules/modal.variables b/src/themes/packages/default/modules/modal.variables index 0c73b6991..b55b2bd61 100755 --- a/src/themes/packages/default/modules/modal.variables +++ b/src/themes/packages/default/modules/modal.variables @@ -2,72 +2,77 @@ Modal --------------------*/ -@modalBorder: 1px solid #DDDDDD; - -@modalWidth: 90%; -@modalXOffset: -(@modalWidth / 2); -@modalBorderRadius: 0.25em; +@background: transparent; +@border: none; +@width: 90%; +@xOffset: -(@width / 2); +@borderRadius: 0.25rem; +@boxShadow: 0px 0px 8px rgba(0, 0, 0, 0.8); /* Close Icon */ -@modalCloseOpacity: 0.8; -@modalCloseSize: 1.25em; -@modalCloseColor: @white; -@modalCloseHitbox: 2.25em; -@modalCloseDistance: 0.25em; +@closeOpacity: 0.8; +@closeSize: 1.25em; +@closeColor: @white; +@closeHitbox: 2.25em; +@closeDistance: 0.25em; -@modalClosePadding: ( (@modalCloseHitbox - 1em) / 2) 0em 0em 0em; -@modalCloseTop: -(@modalCloseDistance + @modalCloseHitbox); -@modalCloseRight: -(@modalCloseDistance + @modalCloseHitbox); +@closePadding: ( (@closeHitbox - 1em) / 2) 0em 0em 0em; +@closeTop: -(@closeDistance + @closeHitbox); +@closeRight: -(@closeDistance + @closeHitbox); /* Header */ -@modalHeaderMargin: 0em; -@modalHeaderPadding: 1.5rem 2rem; - -@modalHeaderFontSize: 1.6em; -@modalHeaderFontWeight: bold; -@modalHeaderFontFamily: @headerFont; +@headerMargin: 0em; +@headerPadding: 1.5rem 2rem; +@headerBackground: #FFFFFF; +@headerFontSize: 1.6em; +@headerFontWeight: bold; +@headerFontFamily: @headerFont; +@headerBottomBorder: none; /* Content */ -@modalContentFontSize: 1em; -@modalContentPadding: 2rem; -@modalContentLineHeight: 1.4; -@modalContentBackground: #F4F4F4; +@contentFontSize: 1em; +@contentPadding: 2rem; +@contentLineHeight: 1.4; +@contentBackground: #F4F4F4; /* Left / Right */ -@modalImageMinWidth: 25%; -@modalImagePadding: 1em; +@imageMinWidth: 25%; +@imagePadding: 1em; -@modalImageIconSize: 8rem; +@imageIconSize: 8rem; -@modalDescriptionPadding: 1em; -@modalDescriptionMinWidth: ''; +@descriptionPadding: 1em; +@descriptionMinWidth: ''; /* Modal Actions */ -@modalActionPadding: 1rem 2rem; -@modalButtonDistance: 0.75em; +@actionPadding: 1rem 2rem; +@buttonDistance: 0.75em; /* Mobile Positions */ -@modalMobileImagePadding: 0em 0em 1em; -@modalMobileDescriptionPadding: 0em 0em 1em; -@modalMobileButtonDistance: 1em; +@mobileImagePadding: 0em 0em 1em; +@mobileDescriptionPadding: 0em 0em 1em; +@mobileButtonDistance: 1em; /* Inner Close Position (Responsive) */ -@modalInnerCloseTop: 1.5rem; -@modalInnerCloseRight: 1rem; -@modalInnerCloseColor: @textColor; +@innerCloseTop: 1.5rem; +@innerCloseRight: 1rem; +@innerCloseColor: @textColor; /* Responsive Widths */ -@modalMobileWidth: 95%; -@modalTabletWidth: 88%; -@modalComputerWidth: 74%; -@modalLargeMonitorWidth: 56%; -@modalWidescreenMonitorWidth: 42%; +@mobileWidth: 95%; +@tabletWidth: 88%; +@computerWidth: 74%; +@largeMonitorWidth: 56%; +@widescreenMonitorWidth: 42%; + +@mobileMargin: 0em 0em 0em -(@mobileWidth / 2); +@tabletMargin: 0em 0em 0em -(@tabletWidth / 2); +@computerMargin: 0em 0em 0em -(@computerWidth / 2); +@largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2); +@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2); -@modalMobileMargin: 0em 0em 0em -(@modalMobileWidth / 2); -@modalTabletMargin: 0em 0em 0em -(@modalTabletWidth / 2); -@modalComputerMargin: 0em 0em 0em -(@modalComputerWidth / 2); -@modalLargeMonitorMargin: 0em 0em 0em -(@modalLargeMonitorWidth / 2); -@modalWidescreenMonitorMargin: 0em 0em 0em -(@modalWidescreenMonitorWidth / 2); +@fullScreenWidth: 99%; +@fullScreenMargin: 0em 0em 0em -(@fullScreenWidth / 2); /*------------------- @@ -88,32 +93,32 @@ --------------------*/ /* Sizes */ -@modalSmallRatio: 0.6; -@modalLargeRatio: 1.2; +@smallRatio: 0.6; +@largeRatio: 1.2; /* Derived Responsive Sizes */ -@modalSmallHeaderSize: 1.3em; -@modalSmallMobileWidth: @modalMobileWidth; -@modalSmallTabletWidth: (@modalTabletWidth * @modalSmallRatio); -@modalSmallComputerWidth: (@modalComputerWidth * @modalSmallRatio); -@modalSmallLargeMonitorWidth: (@modalLargeMonitorWidth * @modalSmallRatio); -@modalSmallWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalSmallRatio); - -@modalSmallMobileMargin: 0em 0em 0em -(@modalSmallMobileWidth / 2); -@modalSmallTabletMargin: 0em 0em 0em -(@modalSmallTabletWidth / 2); -@modalSmallComputerMargin: 0em 0em 0em -(@modalSmallComputerWidth / 2); -@modalSmallLargeMonitorMargin: 0em 0em 0em -(@modalSmallLargeMonitorWidth / 2); -@modalSmallWidescreenMonitorMargin: 0em 0em 0em -(@modalSmallWidescreenMonitorWidth / 2); - -@modalLargeHeaderSize: 1.6em; -@modalLargeMobileWidth: @modalMobileWidth; -@modalLargeTabletWidth: @modalTabletWidth; -@modalLargeComputerWidth: (@modalComputerWidth * @modalLargeRatio); -@modalLargeLargeMonitorWidth: (@modalLargeMonitorWidth * @modalLargeRatio); -@modalLargeWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalLargeRatio); - -@modalLargeMobileMargin: 0em 0em 0em -(@modalLargeMobileWidth / 2); -@modalLargeTabletMargin: 0em 0em 0em -(@modalLargeTabletWidth / 2); -@modalLargeComputerMargin: 0em 0em 0em -(@modalLargeComputerWidth / 2); -@modalLargeLargeMonitorMargin: 0em 0em 0em -(@modalLargeLargeMonitorWidth / 2); -@modalLargeWidescreenMonitorMargin: 0em 0em 0em -(@modalLargeWidescreenMonitorWidth / 2); \ No newline at end of file +@smallHeaderSize: 1.3em; +@smallMobileWidth: @mobileWidth; +@smallTabletWidth: (@tabletWidth * @smallRatio); +@smallComputerWidth: (@computerWidth * @smallRatio); +@smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio); +@smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio); + +@smallMobileMargin: 0em 0em 0em -(@smallMobileWidth / 2); +@smallTabletMargin: 0em 0em 0em -(@smallTabletWidth / 2); +@smallComputerMargin: 0em 0em 0em -(@smallComputerWidth / 2); +@smallLargeMonitorMargin: 0em 0em 0em -(@smallLargeMonitorWidth / 2); +@smallWidescreenMonitorMargin: 0em 0em 0em -(@smallWidescreenMonitorWidth / 2); + +@largeHeaderSize: 1.6em; +@largeMobileWidth: @mobileWidth; +@largeTabletWidth: @tabletWidth; +@largeComputerWidth: (@computerWidth * @largeRatio); +@largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio); +@largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio); + +@largeMobileMargin: 0em 0em 0em -(@largeMobileWidth / 2); +@largeTabletMargin: 0em 0em 0em -(@largeTabletWidth / 2); +@largeComputerMargin: 0em 0em 0em -(@largeComputerWidth / 2); +@largeLargeMonitorMargin: 0em 0em 0em -(@largeLargeMonitorWidth / 2); +@largeWidescreenMonitorMargin: 0em 0em 0em -(@largeWidescreenMonitorWidth / 2); \ No newline at end of file diff --git a/src/themes/packages/default/modules/video.overrides b/src/themes/packages/default/modules/video.overrides new file mode 100644 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/packages/default/modules/video.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/packages/default/modules/video.variables b/src/themes/packages/default/modules/video.variables new file mode 100644 index 000000000..5b50df553 --- /dev/null +++ b/src/themes/packages/default/modules/video.variables @@ -0,0 +1,16 @@ +/*------------------- + Video +--------------------*/ + +@background: #DDDDDD; +@placeholderBackground: #333333; + +@playSize: 8rem; +@playColor: #FFFFFF; +@playOpacity: 0.8; +@playHoverOpacity: 1; +@playShadow: none; + +@playBorderSize: 0rem; +@playBackground: rgba(0, 0, 0, 0.3); +@playBorderRadius: @circularRadius; \ No newline at end of file