From bf51e24700627b17df5041f3a369f6f6b4a4bfbb Mon Sep 17 00:00:00 2001 From: Nicole Date: Sat, 20 Jul 2013 23:17:01 -0700 Subject: change file names to example names --- offcanvas/example.css | 100 ------------------------------------------------ offcanvas/example.js | 5 --- offcanvas/index.html | 2 +- offcanvas/offcanvas.css | 100 ++++++++++++++++++++++++++++++++++++++++++++++++ offcanvas/offcanvas.js | 5 +++ 5 files changed, 106 insertions(+), 106 deletions(-) delete mode 100644 offcanvas/example.css delete mode 100644 offcanvas/example.js create mode 100644 offcanvas/offcanvas.css create mode 100644 offcanvas/offcanvas.js (limited to 'offcanvas') diff --git a/offcanvas/example.css b/offcanvas/example.css deleted file mode 100644 index 6dcd5ece1..000000000 --- a/offcanvas/example.css +++ /dev/null @@ -1,100 +0,0 @@ -body { - padding-top: 80px; -} -footer { - padding-left: 15px; - padding-right: 15px; -} - -/* - * Off canvas - * -------------------------------------------------- */ - -.row-offcanvas { - position: relative; - overflow: hidden; - -webkit-transition: all 0.25s ease-out; - -moz-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -.row-offcanvas.active { - overflow: visible; -} -.row-offcanvas-right .sidebar-offcanvas { - right: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-left .sidebar-offcanvas { - left: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-right.active { - right: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-left.active { - left: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.sidebar-offcanvas { - position: absolute; - top: 0; -} - -@media screen and (max-width: 319px) { - /* This is here instead of being outside the media queries because when - * we exit "mobile land", the sidebar needs to be able to restore its - * originally authored ".col-lg-X" width. */ - .sidebar-offcanvas { - width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ - } -} - -@media screen and (min-width: 320px) and (max-width: 480px) { - .row-offcanvas-right .sidebar-offcanvas { - right: -270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-left .sidebar-offcanvas { - left: -270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-right.active { - right: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-left.active { - left: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .sidebar-offcanvas { - width: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } -} - -/* Landscape phone to tablets - * -------------------------- */ -@media screen and (min-width: 481px) and (max-width: 767px) { - .row-offcanvas-right .sidebar-offcanvas { - right: -480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-left .sidebar-offcanvas { - left: -480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-right.active { - right: 480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-left.active { - left: 480px; /* 60px * 8 = Tablets and wider */ - } - .sidebar-offcanvas { - width: 480px; /* 60px * 8 = Tablets and wider */ - } -} - -/* Tablets & above - * ---------------- */ -@media screen and (min-width: 768px) { - .row-offcanvas { - position: static; - overflow: visible; - } - .sidebar-offcanvas { - position: static; - } - .btn-offcanvas { - display: none; - } -} \ No newline at end of file diff --git a/offcanvas/example.js b/offcanvas/example.js deleted file mode 100644 index 12f2dff51..000000000 --- a/offcanvas/example.js +++ /dev/null @@ -1,5 +0,0 @@ -$(document).ready(function() { - $('[data-toggle=offcanvas]').click(function() { - $('.row-offcanvas').toggleClass('active'); - }); -}); \ No newline at end of file diff --git a/offcanvas/index.html b/offcanvas/index.html index 319fcac70..350e83931 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -6,7 +6,7 @@ - Off canvas template for Bootstrap + Off Canvas Template for Bootstrap diff --git a/offcanvas/offcanvas.css b/offcanvas/offcanvas.css new file mode 100644 index 000000000..6dcd5ece1 --- /dev/null +++ b/offcanvas/offcanvas.css @@ -0,0 +1,100 @@ +body { + padding-top: 80px; +} +footer { + padding-left: 15px; + padding-right: 15px; +} + +/* + * Off canvas + * -------------------------------------------------- */ + +.row-offcanvas { + position: relative; + overflow: hidden; + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.row-offcanvas.active { + overflow: visible; +} +.row-offcanvas-right .sidebar-offcanvas { + right: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-left .sidebar-offcanvas { + left: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-right.active { + right: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-left.active { + left: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.sidebar-offcanvas { + position: absolute; + top: 0; +} + +@media screen and (max-width: 319px) { + /* This is here instead of being outside the media queries because when + * we exit "mobile land", the sidebar needs to be able to restore its + * originally authored ".col-lg-X" width. */ + .sidebar-offcanvas { + width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ + } +} + +@media screen and (min-width: 320px) and (max-width: 480px) { + .row-offcanvas-right .sidebar-offcanvas { + right: -270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-left .sidebar-offcanvas { + left: -270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-right.active { + right: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-left.active { + left: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .sidebar-offcanvas { + width: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } +} + +/* Landscape phone to tablets + * -------------------------- */ +@media screen and (min-width: 481px) and (max-width: 767px) { + .row-offcanvas-right .sidebar-offcanvas { + right: -480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-left .sidebar-offcanvas { + left: -480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-right.active { + right: 480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-left.active { + left: 480px; /* 60px * 8 = Tablets and wider */ + } + .sidebar-offcanvas { + width: 480px; /* 60px * 8 = Tablets and wider */ + } +} + +/* Tablets & above + * ---------------- */ +@media screen and (min-width: 768px) { + .row-offcanvas { + position: static; + overflow: visible; + } + .sidebar-offcanvas { + position: static; + } + .btn-offcanvas { + display: none; + } +} \ No newline at end of file diff --git a/offcanvas/offcanvas.js b/offcanvas/offcanvas.js new file mode 100644 index 000000000..12f2dff51 --- /dev/null +++ b/offcanvas/offcanvas.js @@ -0,0 +1,5 @@ +$(document).ready(function() { + $('[data-toggle=offcanvas]').click(function() { + $('.row-offcanvas').toggleClass('active'); + }); +}); \ No newline at end of file -- cgit v1.2.3 From 6d269c2ed7e035101bac75eecd1551df5004ed1f Mon Sep 17 00:00:00 2001 From: Nicole Date: Sat, 20 Jul 2013 23:30:08 -0700 Subject: add git ignore --- offcanvas/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'offcanvas') diff --git a/offcanvas/index.html b/offcanvas/index.html index 350e83931..1f774c1da 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -12,7 +12,7 @@ - + @@ -109,6 +109,6 @@ - + \ No newline at end of file -- cgit v1.2.3 From 9c13af8cb10f6e16322c50dfc82ae9263d99b82a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 20:42:47 -0700 Subject: massive update, including new index page --- offcanvas/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'offcanvas') diff --git a/offcanvas/index.html b/offcanvas/index.html index 1f774c1da..982b8f7b6 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -9,7 +9,7 @@ Off Canvas Template for Bootstrap - + -- cgit v1.2.3