diff --git a/src/grids/css/framework-responsive.css b/src/grids/css/framework-responsive.css deleted file mode 100644 index 126d2db0fac..00000000000 --- a/src/grids/css/framework-responsive.css +++ /dev/null @@ -1,712 +0,0 @@ -@charset "utf-8"; - -/*! - * CSS Grid System v1.32 / Système de grille CSS v1.32 - * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) - * www.tbs.gc.ca/ws-nw/wet-boew/terms / www.sct.gc.ca/ws-nw/wet-boew/conditions -*/ - -@media screen { - - - /*** Theme begins / Début du thème ***/ - - /*** Theme ends / Fin du thème ***/ - - /*** CSS Grid System begins / Début du Système de grille CSS ***/ - /* ---- Add margin left and right to elements that are used outside a grid cell, as they must still match the grid dimensions ---- */ - h1,h2,h3,h4,h5,h6,p,blockquote,table,form,img,pre{ - margin-left:10px; - margin-right:10px; - } - - /* ---- Basic grid ---- */ - .span-1,.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10,.span-11,.span-12{ - display:inline; - position:relative; - float:left; - min-height:1px; - margin-left:10px; - margin-right:10px; - } - - .border-top,.border-right,.border-bottom,.border-left{ - display:inline; - position:relative; - float:left; - min-height:1px; - } - - #wb-main-in .span-1,#wb-main-in .span-2,#wb-main-in .span-3,#wb-main-in .span-4,#wb-main-in .span-5,#wb-main-in .span-6,#wb-main-in .span-7,#wb-main-in .span-8,#wb-main-in .span-9,#wb-main-in .span-10,#wb-main-in .span-11,#wb-main-in .span-12{ - margin-bottom:20px; - } - - .row-start { - margin-left:0 !important; - } - - .row-end { - margin-right:0 !important; - } - - .clear { - clear:both; - display:block; - height:0; - margin:0; - overflow:hidden; - visibility:hidden; - width:0; - } - - .span-1 .span-1,.span-2 .span-2,.span-3 .span-3,.span-4 .span-4,.span-5 .span-5,.span-6 .span-6,.span-7 .span-7,.span-8 .span-8,.span-9 .span-9,.span-10 .span-10,.span-11 .span-11,.span-12 .span-12{ - margin-left:0 !important; - margin-right:0 !important; - } - - .border-span-1,.border-span-2,.border-span-3,.border-span-4,.border-span-5,.border-span-6,.border-span-7,.border-span-8,.border-span-9,.border-span-10,.border-span-11,.border-span-12{ - background-repeat:no-repeat; - border-bottom:1px solid #ccc !important; - } - - img.image-actual,#gcwu-aside .gcwu-minister-img img { - width:auto !important; - height:auto; - } - - .span-1 img,.span-2 img,.span-3 img,.span-4 img,.span-5 img,.span-6 img,.span-7 img,.span-8 img,.span-9 img,.span-10 img,.span-11 img,.span-12 img,#gcwu-aside img{ - width:100%; - height:auto; - -ms-interpolation-mode:bicubic; - } - - - /* ---- Grid decoration ----*/ - .equalize { - margin-bottom:0 !important; - } - - - /* ---- IE fixes ---- */ - *:first-child+html .equalize { - margin-bottom:20px !important; - } - - - /*** 960px ***/ - /* ---- Dimensions ---- */ - #wb-body-sec #wb-core .grid-12 .span-1{ - width:40px; - } - - .grid-12 .span-1{ - width:60px; - } - - .span-1,#wb-body-sec #wb-core .grid-12 .span-2{ - width:100px; - } - - .grid-12 .span-2{ - width:140px; - } - - #wb-body-sec #wb-core .grid-12 .span-3{ - width:160px; - } - - .span-2,#wb-body-sec #wb-core .grid-12 .span-4,.grid-12 .span-3{ - width:220px; - } - - #wb-body-sec #wb-core .grid-12 .span-5{ - width:280px; - } - - .grid-12 .span-4{ - width:300px; - } - - .span-3,#wb-body-sec #wb-core .grid-12 .span-6{ - width:340px; - } - - .grid-12 .span-5{ - width:380px; - } - - #wb-body-sec #wb-core .grid-12 .span-7{ - width:400px; - } - - .span-4,#wb-body-sec #wb-core .grid-12 .span-8,.grid-12 .span-6{ - width:460px; - } - - #wb-body-sec #wb-core .grid-12 .span-9{ - width:520px; - } - - .grid-12 .span-7{ - width:540px; - } - - .span-5,#wb-body-sec #wb-core .grid-12 .span-10{ - width:580px; - } - - .grid-12 .span-8{ - width:620px; - } - - #wb-body-sec #wb-core .grid-12 .span-11{ - width:640px; - } - - .span-6,#wb-body-sec #wb-core .grid-12 .span-12,.grid-12 .span-9{ - width:700px; - } - - .grid-12 .span-10{ - width:780px; - } - - .span-7{ - width:820px; - } - - .grid-12 .span-11{ - width:860px; - } - - .span-8,.grid-12 .span-12{ - width:940px; - } - - - /* ---- Borders ---- */ - #wb-body-sec #wb-core .grid-12 .border-span-1{ - background-image:url(../../grids/images/border-40px.gif); - } - - .grid-12 .border-span-1{ - background-image:url(../../grids/images/border-60px.gif); - } - - .border-span-1,#wb-body-sec #wb-core .grid-12 .border-span-2,.module-versatile{ - background-image:url(../../grids/images/border-100px.gif); - } - - .grid-12 .border-span-2,.module-versatile{ - background-image:url(../../grids/images/border-140px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-3{ - background-image:url(../../grids/images/border-160px.gif); - } - - .border-span-2,.module-versatile,#wb-body-sec #wb-core .grid-12 .border-span-4,.grid-12 .border-span-3{ - background-image:url(../../grids/images/border-220px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-5{ - background-image:url(../../grids/images/border-280px.gif); - } - - .grid-12 .border-span-4{ - background-image:url(../../grids/images/border-300px.gif); - } - - .border-span-3,#wb-body-sec #wb-core .grid-12 .border-span-6{ - background-image:url(../../grids/images/border-340px.gif); - } - - .grid-12 .border-span-5{ - background-image:url(../../grids/images/border-380px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-7{ - background-image:url(../../grids/images/border-400px.gif); - } - - .border-span-4,.module-table-contents,.module-welcomepage,#wb-body-sec #wb-core .grid-12 .border-span-8,.grid-12 .border-span-6{ - background-image:url(../../grids/images/border-460px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-9{ - background-image:url(../../grids/images/border-520px.gif); - } - - .grid-12 .border-span-7{ - background-image:url(../../grids/images/border-540px.gif); - } - - .border-span-5,#wb-body-sec #wb-core .grid-12 .border-span-10{ - background-image:url(../../grids/images/border-580px.gif); - } - - .grid-12 .border-span-8{ - background-image:url(../../grids/images/border-620px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-11{ - background-image:url(../../grids/images/border-640px.gif); - } - - .border-span-6,#wb-body-sec #wb-core .grid-12 .border-span-12,.grid-12 .border-span-9{ - background-image:url(../../grids/images/border-700px.gif); - } - - .grid-12 .border-span-10{ - background-image:url(../../grids/images/border-780px.gif); - } - - .border-span-7{ - background-image:url(../../grids/images/border-820px.gif); - } - - .grid-12 .border-span-11{ - background-image:url(../../grids/images/border-860px.gif); - } - - .border-span-8,.grid-12 .border-span-12{ - background-image:url(../../grids/images/border-940px.gif); - } - - - /* ---- Other ---- */ - .span-2 .calendar-month td,.span-2 .calendar-month th{ - width:30px; - height:32px; - padding:2px 3px; - } - - #wb-body-sec #wb-core .grid-12 .span-4 .calendar-month td,#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month th{ - width:30px; - height:32px; - padding:2px 3px; - } - - .grid-12 .span-3 .calendar-month td,.grid-12 .span-3 .calendar-month th{ - width:30px; - height:32px; - padding:2px 3px; - } - -} - - -/*** 1200px ***/ -@media only screen and (min-width:1200px) { - /*** Theme begins / Début du thème ***/ - - /*** Theme ends / Fin du thème ***/ - - /*** CSS Grid System begins / Début du Système de grille CSS ***/ - /* ---- Dimensions ---- */ - #wb-body-sec #wb-core .grid-12 .span-1{ - width:55px; - } - - .grid-12 .span-1{ - width:80px; - } - - .span-1,#wb-body-sec #wb-core .grid-12 .span-2{ - width:130px; - } - - .grid-12 .span-2{ - width:180px; - } - - #wb-body-sec #wb-core .grid-12 .span-3{ - width:205px; - } - - .span-2,#wb-body-sec #wb-core .grid-12 .span-4,.grid-12 .span-3{ - width:280px; - } - - #wb-body-sec #wb-core .grid-12 .span-5{ - width:355px; - } - - .grid-12 .span-4{ - width:380px; - } - - .span-3,#wb-body-sec #wb-core .grid-12 .span-6{ - width:430px; - } - - .grid-12 .span-5{ - width:480px; - } - - #wb-body-sec #wb-core .grid-12 .span-7{ - width:505px; - } - - .span-4,#wb-body-sec #wb-core .grid-12 .span-8,.grid-12 .span-6{ - width:580px; - } - - #wb-body-sec #wb-core .grid-12 .span-9{ - width:655px; - } - - .grid-12 .span-7{ - width:680px; - } - - .span-5,#wb-body-sec #wb-core .grid-12 .span-10{ - width:730px; - } - - .grid-12 .span-8{ - width:780px; - } - - #wb-body-sec #wb-core .grid-12 .span-11{ - width:805px; - } - - .span-6,#wb-body-sec #wb-core .grid-12 .span-12,.grid-12 .span-9{ - width:880px; - } - - .grid-12 .span-10{ - width:980px; - } - - .span-7{ - width:1030px; - } - - .grid-12 .span-11{ - width:1080px; - } - - .span-8,.grid-12 .span-12{ - width:1180px; - } - - - /* ---- Borders ---- */ - #wb-body-sec #wb-core .grid-12 .border-span-1{ - background-image:url(../../grids/images/border-55px.gif); - } - - .grid-12 .border-span-1{ - background-image:url(../../grids/images/border-80px.gif); - } - - .border-span-1,#wb-body-sec #wb-core .grid-12 .border-span-2,.module-versatile{ - background-image:url(../../grids/images/border-130px.gif); - } - - .grid-12 .border-span-2,.module-versatile{ - background-image:url(../../grids/images/border-180px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-3{ - background-image:url(../../grids/images/border-205px.gif); - } - - .border-span-2,.module-versatile,#wb-body-sec #wb-core .grid-12 .border-span-4,.grid-12 .border-span-3{ - background-image:url(../../grids/images/border-280px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-5{ - background-image:url(../../grids/images/border-355px.gif); - } - - .grid-12 .border-span-4{ - background-image:url(../../grids/images/border-380px.gif); - } - - .border-span-3,#wb-body-sec #wb-core .grid-12 .border-span-6{ - background-image:url(../../grids/images/border-430px.gif); - } - - .grid-12 .border-span-5{ - background-image:url(../../grids/images/border-480px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-7{ - background-image:url(../../grids/images/border-505px.gif); - } - - .border-span-4,.module-table-contents,.module-welcomepage,#wb-body-sec #wb-core .grid-12 .border-span-8,.grid-12 .border-span-6{ - background-image:url(../../grids/images/border-580px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-9{ - background-image:url(../../grids/images/border-655px.gif); - } - - .grid-12 .border-span-7{ - background-image:url(../../grids/images/border-680px.gif); - } - - .border-span-5,#wb-body-sec #wb-core .grid-12 .border-span-10{ - background-image:url(../../grids/images/border-730px.gif); - } - - .grid-12 .border-span-8{ - background-image:url(../../grids/images/border-780px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-11{ - background-image:url(../../grids/images/border-805px.gif); - } - - .border-span-6,#wb-body-sec #wb-core .grid-12 .border-span-12,.grid-12 .border-span-9{ - background-image:url(../../grids/images/border-880px.gif); - } - - .grid-12 .border-span-10{ - background-image:url(../../grids/images/border-980px.gif); - } - - .border-span-7{ - background-image:url(../../grids/images/border-1030px.gif); - } - - .grid-12 .border-span-11{ - background-image:url(../../grids/images/border-1080px.gif); - } - - .border-span-8,.grid-12 .border-span-12{ - background-image:url(../../grids/images/border-1180px.gif); - } - - - /* ---- Other ---- */ - .span-2 .calendar-month td,.span-2 .calendar-month th{ - width:34px; - height:32px; - padding:2px 3px; - } - - #wb-body-sec #wb-core .grid-12 .span-4 .calendar-month td,#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month th{ - width:34px; - height:32px; - padding:2px 3px; - } - - .grid-12 .span-3 .calendar-month td,.grid-12 .span-3 .calendar-month th{ - width:34px; - height:32px; - padding:2px 3px; - } -} - - -/*** 768px ***/ -@media only screen and (max-width:959px) { - /*** Theme begins / Début du thème ***/ - - /*** Theme ends / Fin du thème ***/ - - /*** CSS Grid System begins / Début du Système de grille CSS ***/ - /* ---- Dimensions ---- */ - #wb-body-sec #wb-core .grid-12 .span-1{ - width:28px; - } - - .grid-12 .span-1{ - width:44px; - } - - .span-1,#wb-body-sec #wb-core .grid-12 .span-2{ - width:76px; - } - - .grid-12 .span-2{ - width:108px; - } - - #wb-body-sec #wb-core .grid-12 .span-3{ - width:124px; - } - - .span-2,#wb-body-sec #wb-core .grid-12 .span-4,.grid-12 .span-3{ - width:172px; - } - - #wb-body-sec #wb-core .grid-12 .span-5{ - width:220px; - } - - .grid-12 .span-4{ - width:236px; - } - - .span-3,#wb-body-sec #wb-core .grid-12 .span-6{ - width:268px; - } - - .grid-12 .span-5{ - width:300px; - } - - #wb-body-sec #wb-core .grid-12 .span-7{ - width:316px; - } - - .span-4,#wb-body-sec #wb-core .grid-12 .span-8,.grid-12 .span-6{ - width:364px; - } - - #wb-body-sec #wb-core .grid-12 .span-9{ - width:412px; - } - - .grid-12 .span-7{ - width:428px; - } - - .span-5,#wb-body-sec #wb-core .grid-12 .span-10{ - width:460px; - } - - .grid-12 .span-8{ - width:492px; - } - - #wb-body-sec #wb-core .grid-12 .span-11{ - width:508px; - } - - .span-6,#wb-body-sec #wb-core .grid-12 .span-12,.grid-12 .span-9{ - width:556px; - } - - .grid-12 .span-10{ - width:620px; - } - - .span-7{ - width:652px; - } - - .grid-12 .span-11{ - width:684px; - } - - .span-8,.grid-12 .span-12{ - width:748px; - } - - - /* ---- Borders ----*/ - #wb-body-sec #wb-core .grid-12 .border-span-1{ - background-image:url(../../grids/images/border-28px.gif); - } - - .grid-12 .border-span-1{ - background-image:url(../../grids/images/border-44px.gif); - } - - .border-span-1,#wb-body-sec #wb-core .grid-12 .border-span-2,.module-versatile{ - background-image:url(../../grids/images/border-76px.gif); - } - - .grid-12 .border-span-2,.module-versatile{ - background-image:url(../../grids/images/border-108px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-3{ - background-image:url(../../grids/images/border-124px.gif); - } - - .border-span-2,.module-versatile,#wb-body-sec #wb-core .grid-12 .border-span-4,.grid-12 .border-span-3{ - background-image:url(../../grids/images/border-172px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-5{ - background-image:url(../../grids/images/border-220px.gif); - } - - .grid-12 .border-span-4{ - background-image:url(../../grids/images/border-236px.gif); - } - - .border-span-3,#wb-body-sec #wb-core .grid-12 .border-span-6{ - background-image:url(../../grids/images/border-268px.gif); - } - - .grid-12 .border-span-5{ - background-image:url(../../grids/images/border-300px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-7{ - background-image:url(../../grids/images/border-316px.gif); - } - - .border-span-4,.module-table-contents,.module-welcomepage,#wb-body-sec #wb-core .grid-12 .border-span-8,.grid-12 .border-span-6{ - background-image:url(../../grids/images/border-364px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-9{ - background-image:url(../../grids/images/border-412px.gif); - } - - .grid-12 .border-span-7{ - background-image:url(../../grids/images/border-428px.gif); - } - - .border-span-5,#wb-body-sec #wb-core .grid-12 .border-span-10{ - background-image:url(../../grids/images/border-460px.gif); - } - - .grid-12 .border-span-8{ - background-image:url(../../grids/images/border-492px.gif); - } - - #wb-body-sec #wb-core .grid-12 .border-span-11{ - background-image:url(../../grids/images/border-508px.gif); - } - - .border-span-6,#wb-body-sec #wb-core .grid-12 .border-span-12,.grid-12 .border-span-9{ - background-image:url(../../grids/images/border-556px.gif); - } - - .grid-12 .border-span-10{ - background-image:url(../../grids/images/border-620px.gif); - } - - .border-span-7{ - background-image:url(../../grids/images/border-652px.gif); - } - - .grid-12 .border-span-11{ - background-image:url(../../grids/images/border-684px.gif); - } - - .border-span-8,.grid-12 .border-span-12{ - background-image:url(../../grids/images/border-748px.gif); - } - - - /* ---- Other ----*/ - .span-2 .calendar-month td,.span-2 .calendar-month th{ - width:26px; - height:32px; - padding:2px 3px; - } - - #wb-body-sec #wb-core .grid-12 .span-4 .calendar-month td,#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month th{ - width:26px; - height:32px; - padding:2px 3px; - } - - .grid-12 .span-3 .calendar-month td,.grid-12 .span-3 .calendar-month th{ - width:26px; - height:32px; - padding:2px 3px; - } -} diff --git a/src/grids/css/responsive-1200.css b/src/grids/css/responsive-1200.css new file mode 100644 index 00000000000..a6c22179953 --- /dev/null +++ b/src/grids/css/responsive-1200.css @@ -0,0 +1,202 @@ +@charset "utf-8"; +/* + * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * www.tbs.gc.ca/ws-nw/wet-boew/terms / www.sct.gc.ca/ws-nw/wet-boew/conditions +*/ +/*** Theme begins / Début du thème ***/ + +/*** Theme ends / Fin du thème ***/ + +#wb-body-sec #wb-core .grid-12 .span-1{ + width:55px; +} + +.grid-12 .span-1{ + width:80px; +} + +.span-1,#wb-body-sec #wb-core .grid-12 .span-2{ + width:130px; +} + +.grid-12 .span-2{ + width:180px; +} + +#wb-body-sec #wb-core .grid-12 .span-3{ + width:205px; +} + +.span-2,#wb-body-sec #wb-core .grid-12 .span-4,.grid-12 .span-3{ + width:280px; +} + +#wb-body-sec #wb-core .grid-12 .span-5{ + width:355px; +} + +.grid-12 .span-4{ + width:380px; +} + +.span-3,#wb-body-sec #wb-core .grid-12 .span-6{ + width:430px; +} + +.grid-12 .span-5{ + width:480px; +} + +#wb-body-sec #wb-core .grid-12 .span-7{ + width:505px; +} + +.span-4,#wb-body-sec #wb-core .grid-12 .span-8,.grid-12 .span-6{ + width:580px; +} + +#wb-body-sec #wb-core .grid-12 .span-9{ + width:655px; +} + +.grid-12 .span-7{ + width:680px; +} + +.span-5,#wb-body-sec #wb-core .grid-12 .span-10{ + width:730px; +} + +.grid-12 .span-8{ + width:780px; +} + +#wb-body-sec #wb-core .grid-12 .span-11{ + width:805px; +} + +.span-6,#wb-body-sec #wb-core .grid-12 .span-12,.grid-12 .span-9{ + width:880px; +} + +.grid-12 .span-10{ + width:980px; +} + +.span-7{ + width:1030px; +} + +.grid-12 .span-11{ + width:1080px; +} + +.span-8,.grid-12 .span-12{ + width:1180px; +} + +#wb-body-sec #wb-core .grid-12 .border-span-1{ + background-image:url(../images/border-55px.gif); +} + +.grid-12 .border-span-1{ + background-image:url(../images/border-80px.gif); +} + +.border-span-1,#wb-body-sec #wb-core .grid-12 .border-span-2,.module-versatile{ + background-image:url(../images/border-130px.gif); +} + +.grid-12 .border-span-2,.module-versatile{ + background-image:url(../images/border-180px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-3{ + background-image:url(../images/border-205px.gif); +} + +.border-span-2,.module-versatile,#wb-body-sec #wb-core .grid-12 .border-span-4,.grid-12 .border-span-3{ + background-image:url(../images/border-280px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-5{ + background-image:url(../images/border-355px.gif); +} + +.grid-12 .border-span-4{ + background-image:url(../images/border-380px.gif); +} + +.border-span-3,#wb-body-sec #wb-core .grid-12 .border-span-6{ + background-image:url(../images/border-430px.gif); +} + +.grid-12 .border-span-5{ + background-image:url(../images/border-480px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-7{ + background-image:url(../images/border-505px.gif); +} + +.border-span-4,.module-table-contents,.module-welcomepage,#wb-body-sec #wb-core .grid-12 .border-span-8,.grid-12 .border-span-6{ + background-image:url(../images/border-580px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-9{ + background-image:url(../images/border-655px.gif); +} + +.grid-12 .border-span-7{ + background-image:url(../images/border-680px.gif); +} + +.border-span-5,#wb-body-sec #wb-core .grid-12 .border-span-10{ + background-image:url(../images/border-730px.gif); +} + +.grid-12 .border-span-8{ + background-image:url(../images/border-780px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-11{ + background-image:url(../images/border-805px.gif); +} + +.border-span-6,#wb-body-sec #wb-core .grid-12 .border-span-12,.grid-12 .border-span-9{ + background-image:url(../images/border-880px.gif); +} + +.grid-12 .border-span-10{ + background-image:url(../images/border-980px.gif); +} + +.border-span-7{ + background-image:url(../images/border-1030px.gif); +} + +.grid-12 .border-span-11{ + background-image:url(../images/border-1080px.gif); +} + +.border-span-8,.grid-12 .border-span-12{ + background-image:url(../images/border-1180px.gif); +} + +.span-2 .calendar-month td,.span-2 .calendar-month th{ + width:34px; + height:32px; + padding:2px 3px; +} + +#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month td,#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month th{ + width:34px; + height:32px; + padding:2px 3px; +} + +.grid-12 .span-3 .calendar-month td,.grid-12 .span-3 .calendar-month th{ + width:34px; + height:32px; + padding:2px 3px; +} \ No newline at end of file diff --git a/src/grids/css/responsive-768.css b/src/grids/css/responsive-768.css new file mode 100644 index 00000000000..20e84a90080 --- /dev/null +++ b/src/grids/css/responsive-768.css @@ -0,0 +1,202 @@ +@charset "utf-8"; +/* + * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * www.tbs.gc.ca/ws-nw/wet-boew/terms / www.sct.gc.ca/ws-nw/wet-boew/conditions +*/ +/*** Theme begins / Début du thème ***/ + +/*** Theme ends / Fin du thème ***/ + +#wb-body-sec #wb-core .grid-12 .span-1{ + width:28px; +} + +.grid-12 .span-1{ + width:44px; +} + +.span-1,#wb-body-sec #wb-core .grid-12 .span-2{ + width:76px; +} + +.grid-12 .span-2{ + width:108px; +} + +#wb-body-sec #wb-core .grid-12 .span-3{ + width:124px; +} + +.span-2,#wb-body-sec #wb-core .grid-12 .span-4,.grid-12 .span-3{ + width:172px; +} + +#wb-body-sec #wb-core .grid-12 .span-5{ + width:220px; +} + +.grid-12 .span-4{ + width:236px; +} + +.span-3,#wb-body-sec #wb-core .grid-12 .span-6{ + width:268px; +} + +.grid-12 .span-5{ + width:300px; +} + +#wb-body-sec #wb-core .grid-12 .span-7{ + width:316px; +} + +.span-4,#wb-body-sec #wb-core .grid-12 .span-8,.grid-12 .span-6{ + width:364px; +} + +#wb-body-sec #wb-core .grid-12 .span-9{ + width:412px; +} + +.grid-12 .span-7{ + width:428px; +} + +.span-5,#wb-body-sec #wb-core .grid-12 .span-10{ + width:460px; +} + +.grid-12 .span-8{ + width:492px; +} + +#wb-body-sec #wb-core .grid-12 .span-11{ + width:508px; +} + +.span-6,#wb-body-sec #wb-core .grid-12 .span-12,.grid-12 .span-9{ + width:556px; +} + +.grid-12 .span-10{ + width:620px; +} + +.span-7{ + width:652px; +} + +.grid-12 .span-11{ + width:684px; +} + +.span-8,.grid-12 .span-12{ + width:748px; +} + +#wb-body-sec #wb-core .grid-12 .border-span-1{ + background-image:url(../images/border-28px.gif); +} + +.grid-12 .border-span-1{ + background-image:url(../images/border-44px.gif); +} + +.border-span-1,#wb-body-sec #wb-core .grid-12 .border-span-2,.module-versatile{ + background-image:url(../images/border-76px.gif); +} + +.grid-12 .border-span-2,.module-versatile{ + background-image:url(../images/border-108px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-3{ + background-image:url(../images/border-124px.gif); +} + +.border-span-2,.module-versatile,#wb-body-sec #wb-core .grid-12 .border-span-4,.grid-12 .border-span-3{ + background-image:url(../images/border-172px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-5{ + background-image:url(../images/border-220px.gif); +} + +.grid-12 .border-span-4{ + background-image:url(../images/border-236px.gif); +} + +.border-span-3,#wb-body-sec #wb-core .grid-12 .border-span-6{ + background-image:url(../images/border-268px.gif); +} + +.grid-12 .border-span-5{ + background-image:url(../images/border-300px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-7{ + background-image:url(../images/border-316px.gif); +} + +.border-span-4,.module-table-contents,.module-welcomepage,#wb-body-sec #wb-core .grid-12 .border-span-8,.grid-12 .border-span-6{ + background-image:url(../images/border-364px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-9{ + background-image:url(../images/border-412px.gif); +} + +.grid-12 .border-span-7{ + background-image:url(../images/border-428px.gif); +} + +.border-span-5,#wb-body-sec #wb-core .grid-12 .border-span-10{ + background-image:url(../images/border-460px.gif); +} + +.grid-12 .border-span-8{ + background-image:url(../images/border-492px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-11{ + background-image:url(../images/border-508px.gif); +} + +.border-span-6,#wb-body-sec #wb-core .grid-12 .border-span-12,.grid-12 .border-span-9{ + background-image:url(../images/border-556px.gif); +} + +.grid-12 .border-span-10{ + background-image:url(../images/border-620px.gif); +} + +.border-span-7{ + background-image:url(../images/border-652px.gif); +} + +.grid-12 .border-span-11{ + background-image:url(../images/border-684px.gif); +} + +.border-span-8,.grid-12 .border-span-12{ + background-image:url(../images/border-748px.gif); +} + +.span-2 .calendar-month td,.span-2 .calendar-month th{ + width:26px; + height:32px; + padding:2px 3px; +} + +#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month td,#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month th{ + width:26px; + height:32px; + padding:2px 3px; +} + +.grid-12 .span-3 .calendar-month td,.grid-12 .span-3 .calendar-month th{ + width:26px; + height:32px; + padding:2px 3px; +} \ No newline at end of file diff --git a/src/grids/css/responsive.css b/src/grids/css/responsive.css new file mode 100644 index 00000000000..65eb6b9e639 --- /dev/null +++ b/src/grids/css/responsive.css @@ -0,0 +1,281 @@ +@charset "utf-8"; +/* + * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * www.tbs.gc.ca/ws-nw/wet-boew/terms / www.sct.gc.ca/ws-nw/wet-boew/conditions +*/ +/*** Theme begins / Début du thème ***/ + +/*** Theme ends / Fin du thème ***/ + +h1,h2,h3,h4,h5,h6,p,blockquote,table,form,img,pre{ + margin-left:10px; + margin-right:10px; +} + +.span-1,.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10,.span-11,.span-12{ + display:inline; + position:relative; + float:left; + min-height:1px; + margin-left:10px; + margin-right:10px; +} + +.border-top,.border-right,.border-bottom,.border-left{ + display:inline; + position:relative; + float:left; + min-height:1px; +} + +#wb-main-in .span-1,#wb-main-in .span-2,#wb-main-in .span-3,#wb-main-in .span-4,#wb-main-in .span-5,#wb-main-in .span-6,#wb-main-in .span-7,#wb-main-in .span-8,#wb-main-in .span-9,#wb-main-in .span-10,#wb-main-in .span-11,#wb-main-in .span-12{ + margin-bottom:20px; +} + +.row-start { + margin-left:0 !important; +} + +.row-end { + margin-right:0 !important; +} + +.clear { + clear:both; + display:block; + height:0; + margin:0; + overflow:hidden; + visibility:hidden; + width:0; +} + +.span-1 .span-1,.span-2 .span-2,.span-3 .span-3,.span-4 .span-4,.span-5 .span-5,.span-6 .span-6,.span-7 .span-7,.span-8 .span-8,.span-9 .span-9,.span-10 .span-10,.span-11 .span-11,.span-12 .span-12{ + margin-left:0 !important; + margin-right:0 !important; +} + +.border-span-1,.border-span-2,.border-span-3,.border-span-4,.border-span-5,.border-span-6,.border-span-7,.border-span-8,.border-span-9,.border-span-10,.border-span-11,.border-span-12{ + background-repeat:no-repeat; + border-bottom:1px solid #ccc !important; +} + +img.image-actual,#gcwu-aside .gcwu-minister-img img { + width:auto !important; + height:auto; +} + +.span-1 img,.span-2 img,.span-3 img,.span-4 img,.span-5 img,.span-6 img,.span-7 img,.span-8 img,.span-9 img,.span-10 img,.span-11 img,.span-12 img,#gcwu-aside img{ + width:100%; + height:auto; + -ms-interpolation-mode:bicubic; +} + + +/* ---- Grid decoration ----*/ +.equalize { + margin-bottom:0 !important; +} + + +/* ---- IE fixes ---- */ +*:first-child+html .equalize { + margin-bottom:20px !important; +} + + +/*** 960px ***/ +/* ---- Dimensions ---- */ +#wb-body-sec #wb-core .grid-12 .span-1{ + width:40px; +} + +.grid-12 .span-1{ + width:60px; +} + +.span-1,#wb-body-sec #wb-core .grid-12 .span-2{ + width:100px; +} + +.grid-12 .span-2{ + width:140px; +} + +#wb-body-sec #wb-core .grid-12 .span-3{ + width:160px; +} + +.span-2,#wb-body-sec #wb-core .grid-12 .span-4,.grid-12 .span-3{ + width:220px; +} + +#wb-body-sec #wb-core .grid-12 .span-5{ + width:280px; +} + +.grid-12 .span-4{ + width:300px; +} + +.span-3,#wb-body-sec #wb-core .grid-12 .span-6{ + width:340px; +} + +.grid-12 .span-5{ + width:380px; +} + +#wb-body-sec #wb-core .grid-12 .span-7{ + width:400px; +} + +.span-4,#wb-body-sec #wb-core .grid-12 .span-8,.grid-12 .span-6{ + width:460px; +} + +#wb-body-sec #wb-core .grid-12 .span-9{ + width:520px; +} + +.grid-12 .span-7{ + width:540px; +} + +.span-5,#wb-body-sec #wb-core .grid-12 .span-10{ + width:580px; +} + +.grid-12 .span-8{ + width:620px; +} + +#wb-body-sec #wb-core .grid-12 .span-11{ + width:640px; +} + +.span-6,#wb-body-sec #wb-core .grid-12 .span-12,.grid-12 .span-9{ + width:700px; +} + +.grid-12 .span-10{ + width:780px; +} + +.span-7{ + width:820px; +} + +.grid-12 .span-11{ + width:860px; +} + +.span-8,.grid-12 .span-12{ + width:940px; +} + +#wb-body-sec #wb-core .grid-12 .border-span-1{ + background-image:url(../images/border-40px.gif); +} + +.grid-12 .border-span-1{ + background-image:url(../images/border-60px.gif); +} + +.border-span-1,#wb-body-sec #wb-core .grid-12 .border-span-2,.module-versatile{ + background-image:url(../images/border-100px.gif); +} + +.grid-12 .border-span-2,.module-versatile{ + background-image:url(../images/border-140px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-3{ + background-image:url(../images/border-160px.gif); +} + +.border-span-2,.module-versatile,#wb-body-sec #wb-core .grid-12 .border-span-4,.grid-12 .border-span-3{ + background-image:url(../images/border-220px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-5{ + background-image:url(../images/border-280px.gif); +} + +.grid-12 .border-span-4{ + background-image:url(../images/border-300px.gif); +} + +.border-span-3,#wb-body-sec #wb-core .grid-12 .border-span-6{ + background-image:url(../images/border-340px.gif); +} + +.grid-12 .border-span-5{ + background-image:url(../images/border-380px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-7{ + background-image:url(../images/border-400px.gif); +} + +.border-span-4,.module-table-contents,.module-welcomepage,#wb-body-sec #wb-core .grid-12 .border-span-8,.grid-12 .border-span-6{ + background-image:url(../images/border-460px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-9{ + background-image:url(../images/border-520px.gif); +} + +.grid-12 .border-span-7{ + background-image:url(../images/border-540px.gif); +} + +.border-span-5,#wb-body-sec #wb-core .grid-12 .border-span-10{ + background-image:url(../images/border-580px.gif); +} + +.grid-12 .border-span-8{ + background-image:url(../images/border-620px.gif); +} + +#wb-body-sec #wb-core .grid-12 .border-span-11{ + background-image:url(../images/border-640px.gif); +} + +.border-span-6,#wb-body-sec #wb-core .grid-12 .border-span-12,.grid-12 .border-span-9{ + background-image:url(../images/border-700px.gif); +} + +.grid-12 .border-span-10{ + background-image:url(../images/border-780px.gif); +} + +.border-span-7{ + background-image:url(../images/border-820px.gif); +} + +.grid-12 .border-span-11{ + background-image:url(../images/border-860px.gif); +} + +.border-span-8,.grid-12 .border-span-12{ + background-image:url(../images/border-940px.gif); +} + +.span-2 .calendar-month td,.span-2 .calendar-month th{ + width:30px; + height:32px; + padding:2px 3px; +} + +#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month td,#wb-body-sec #wb-core .grid-12 .span-4 .calendar-month th{ + width:30px; + height:32px; + padding:2px 3px; +} + +.grid-12 .span-3 .calendar-month td,.grid-12 .span-3 .calendar-month th{ + width:30px; + height:32px; + padding:2px 3px; +} \ No newline at end of file