From c8c71871d0e00b21ab114fbc1897de806eefeb0e Mon Sep 17 00:00:00 2001 From: sebbyt16 Date: Thu, 23 Feb 2017 14:52:42 -0700 Subject: [PATCH 1/3] Need to give the variable names the Overflow Scroller namespace to not overwrite bootstrap variable names. --- overflow-scroller.less | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/overflow-scroller.less b/overflow-scroller.less index 5630614..019dcc5 100644 --- a/overflow-scroller.less +++ b/overflow-scroller.less @@ -2,10 +2,10 @@ //variables customize as needed -@arrow-size-small: 32px; -@arrow-size: 46px; -@screen-sm: 600px; -@gutter-width: 10px; //should be the same as margin or padding on each element +@os-arrow-size-small: 32px; +@os-arrow-size: 46px; +@os-screen-sm: 600px; +@os-gutter-width: 10px; //should be the same as margin or padding on each element //styles for overflow scroller @@ -16,8 +16,8 @@ white-space: nowrap; font-size: 0; line-height: 0; - padding-left: @gutter-width; - padding-right: @gutter-width; + padding-left: @os-gutter-width; + padding-right: @os-gutter-width; &> * { display: inline-block; @@ -48,8 +48,8 @@ .overflow-scroller-arrow { position: absolute; - width: @arrow-size-small; - height: @arrow-size-small; + width: @os-arrow-size-small; + height: @os-arrow-size-small; top: 50%; left: 10px; border-radius: 50%; @@ -60,10 +60,10 @@ transition: all .3s ease-out; padding: 8px 15px; z-index: 100; - @media (min-width: @screen-sm) { + @media (min-width: @os-screen-sm) { left: 15px; - width: @arrow-size; - height: @arrow-size; + width: @os-arrow-size; + height: @os-arrow-size; } &:hover { @@ -72,7 +72,7 @@ &.overflow-scroller-arrow-hide { opacity: 0; - transform: translate(((@arrow-size + 15) * -1), -50%); + transform: translate(((@os-arrow-size + 15) * -1), -50%); } &-next { @@ -82,15 +82,15 @@ &.overflow-scroller-arrow-hide { opacity: 0; - transform: rotate(180deg) translate(((@arrow-size + 15) * -1), 50%); + transform: rotate(180deg) translate(((@os-arrow-size + 15) * -1), 50%); } } &:before { content: ''; display: block; - width: @arrow-size-small * .3; - height: @arrow-size-small * .3; + width: @os-arrow-size-small * .3; + height: @os-arrow-size-small * .3; border-right: 1px solid #fff; border-top: 1px solid #fff; @@ -98,9 +98,9 @@ transform: rotate(-135deg); top: 34.5%; left: 41%; - @media (min-width: @screen-sm) { - width: @arrow-size * .3; - height: @arrow-size * .3; + @media (min-width: @os-screen-sm) { + width: @os-arrow-size * .3; + height: @os-arrow-size * .3; } } } \ No newline at end of file From 0b2a35c73e58513adef208029a1801c5f18cf69a Mon Sep 17 00:00:00 2001 From: sebbyt16 Date: Thu, 23 Feb 2017 15:00:05 -0700 Subject: [PATCH 2/3] Revert "Need to give the variable names the Overflow Scroller namespace to not overwrite bootstrap variable names." This reverts commit c8c71871d0e00b21ab114fbc1897de806eefeb0e. --- overflow-scroller.less | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/overflow-scroller.less b/overflow-scroller.less index 019dcc5..5630614 100644 --- a/overflow-scroller.less +++ b/overflow-scroller.less @@ -2,10 +2,10 @@ //variables customize as needed -@os-arrow-size-small: 32px; -@os-arrow-size: 46px; -@os-screen-sm: 600px; -@os-gutter-width: 10px; //should be the same as margin or padding on each element +@arrow-size-small: 32px; +@arrow-size: 46px; +@screen-sm: 600px; +@gutter-width: 10px; //should be the same as margin or padding on each element //styles for overflow scroller @@ -16,8 +16,8 @@ white-space: nowrap; font-size: 0; line-height: 0; - padding-left: @os-gutter-width; - padding-right: @os-gutter-width; + padding-left: @gutter-width; + padding-right: @gutter-width; &> * { display: inline-block; @@ -48,8 +48,8 @@ .overflow-scroller-arrow { position: absolute; - width: @os-arrow-size-small; - height: @os-arrow-size-small; + width: @arrow-size-small; + height: @arrow-size-small; top: 50%; left: 10px; border-radius: 50%; @@ -60,10 +60,10 @@ transition: all .3s ease-out; padding: 8px 15px; z-index: 100; - @media (min-width: @os-screen-sm) { + @media (min-width: @screen-sm) { left: 15px; - width: @os-arrow-size; - height: @os-arrow-size; + width: @arrow-size; + height: @arrow-size; } &:hover { @@ -72,7 +72,7 @@ &.overflow-scroller-arrow-hide { opacity: 0; - transform: translate(((@os-arrow-size + 15) * -1), -50%); + transform: translate(((@arrow-size + 15) * -1), -50%); } &-next { @@ -82,15 +82,15 @@ &.overflow-scroller-arrow-hide { opacity: 0; - transform: rotate(180deg) translate(((@os-arrow-size + 15) * -1), 50%); + transform: rotate(180deg) translate(((@arrow-size + 15) * -1), 50%); } } &:before { content: ''; display: block; - width: @os-arrow-size-small * .3; - height: @os-arrow-size-small * .3; + width: @arrow-size-small * .3; + height: @arrow-size-small * .3; border-right: 1px solid #fff; border-top: 1px solid #fff; @@ -98,9 +98,9 @@ transform: rotate(-135deg); top: 34.5%; left: 41%; - @media (min-width: @os-screen-sm) { - width: @os-arrow-size * .3; - height: @os-arrow-size * .3; + @media (min-width: @screen-sm) { + width: @arrow-size * .3; + height: @arrow-size * .3; } } } \ No newline at end of file From 8881e8fa6998ad7a9a9db05457b46a29fc9aedf0 Mon Sep 17 00:00:00 2001 From: sebbyt16 Date: Thu, 23 Feb 2017 15:02:34 -0700 Subject: [PATCH 3/3] Add in namespace for overflow scroller to not override bootstrap variable names --- overflow-scroller.less | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/overflow-scroller.less b/overflow-scroller.less index 5630614..019dcc5 100644 --- a/overflow-scroller.less +++ b/overflow-scroller.less @@ -2,10 +2,10 @@ //variables customize as needed -@arrow-size-small: 32px; -@arrow-size: 46px; -@screen-sm: 600px; -@gutter-width: 10px; //should be the same as margin or padding on each element +@os-arrow-size-small: 32px; +@os-arrow-size: 46px; +@os-screen-sm: 600px; +@os-gutter-width: 10px; //should be the same as margin or padding on each element //styles for overflow scroller @@ -16,8 +16,8 @@ white-space: nowrap; font-size: 0; line-height: 0; - padding-left: @gutter-width; - padding-right: @gutter-width; + padding-left: @os-gutter-width; + padding-right: @os-gutter-width; &> * { display: inline-block; @@ -48,8 +48,8 @@ .overflow-scroller-arrow { position: absolute; - width: @arrow-size-small; - height: @arrow-size-small; + width: @os-arrow-size-small; + height: @os-arrow-size-small; top: 50%; left: 10px; border-radius: 50%; @@ -60,10 +60,10 @@ transition: all .3s ease-out; padding: 8px 15px; z-index: 100; - @media (min-width: @screen-sm) { + @media (min-width: @os-screen-sm) { left: 15px; - width: @arrow-size; - height: @arrow-size; + width: @os-arrow-size; + height: @os-arrow-size; } &:hover { @@ -72,7 +72,7 @@ &.overflow-scroller-arrow-hide { opacity: 0; - transform: translate(((@arrow-size + 15) * -1), -50%); + transform: translate(((@os-arrow-size + 15) * -1), -50%); } &-next { @@ -82,15 +82,15 @@ &.overflow-scroller-arrow-hide { opacity: 0; - transform: rotate(180deg) translate(((@arrow-size + 15) * -1), 50%); + transform: rotate(180deg) translate(((@os-arrow-size + 15) * -1), 50%); } } &:before { content: ''; display: block; - width: @arrow-size-small * .3; - height: @arrow-size-small * .3; + width: @os-arrow-size-small * .3; + height: @os-arrow-size-small * .3; border-right: 1px solid #fff; border-top: 1px solid #fff; @@ -98,9 +98,9 @@ transform: rotate(-135deg); top: 34.5%; left: 41%; - @media (min-width: @screen-sm) { - width: @arrow-size * .3; - height: @arrow-size * .3; + @media (min-width: @os-screen-sm) { + width: @os-arrow-size * .3; + height: @os-arrow-size * .3; } } } \ No newline at end of file