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/offcanvas.css | 100 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 offcanvas/offcanvas.css (limited to 'offcanvas/offcanvas.css') 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 -- cgit v1.2.3 From 6e8ace4b2bfa7927ee19504fdbeb31de6b419c04 Mon Sep 17 00:00:00 2001 From: ggam Date: Sat, 10 Aug 2013 13:36:05 +0200 Subject: Simplified Off Canvas example: - Removed unneeded media queries to be more consistent with the rest of Bootstrap. - Fixed unworking grid on latest 3.0 builds (BS version on this repo is outdated) - Inluded needed bootstrap.js --- offcanvas/offcanvas.css | 102 ++++++++++++------------------------------------ 1 file changed, 25 insertions(+), 77 deletions(-) (limited to 'offcanvas/offcanvas.css') diff --git a/offcanvas/offcanvas.css b/offcanvas/offcanvas.css index 6dcd5ece1..27a075d76 100644 --- a/offcanvas/offcanvas.css +++ b/offcanvas/offcanvas.css @@ -1,5 +1,9 @@ +/* + * Style twaks + * -------------------------------------------------- + */ body { - padding-top: 80px; + padding-top: 70px; } footer { padding-left: 15px; @@ -7,94 +11,38 @@ footer { } /* - * 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; -} + * Off Canvas + * -------------------------------------------------- + */ +@media screen and (max-width: 768px) { + .row-offcanvas { + position: relative; + overflow: hidden // Needed for Internet Explorer + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; + } -@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. */ + .row-offcanvas-right .sidebar-offcanvas { - width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ + right: -58.333333333333336%; // 6 columns } -} -@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 */ - } + .row-offcanvas-left .sidebar-offcanvas { - width: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + left: -58.333333333333336%; // 6 columns } -} -/* 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 */ + right: 58.333333333333336%; // 6 columns } + .row-offcanvas-left.active { - left: 480px; /* 60px * 8 = Tablets and wider */ - } - .sidebar-offcanvas { - width: 480px; /* 60px * 8 = Tablets and wider */ + left: 58.333333333333336%; // 6 columns } -} -/* Tablets & above - * ---------------- */ -@media screen and (min-width: 768px) { - .row-offcanvas { - position: static; - overflow: visible; - } .sidebar-offcanvas { - position: static; - } - .btn-offcanvas { - display: none; + position: absolute; + width: 58.333333333333336%; // 6 columns } } \ No newline at end of file -- cgit v1.2.3