From 2e18a955577130d75795f0779ae2f0aecc5a87d8 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Fri, 3 May 2013 16:37:43 -0400 Subject: [PATCH] fixes issue with peek Former-commit-id: 4d74a1f723d64be10fc4480fd045abe1f3bb51a2 Former-commit-id: 472a5970e9b92ae53e578e0422b6dfa8ed3af43f --- docs/collections/grid.html | 19 ++++--- docs/stylesheets/semantic.css | 57 ++++----------------- docs/ui/flat/collections/grid.css | 52 +++++++++---------- node/src/documents/collections/grid.html | 19 ++++--- node/src/files/stylesheets/semantic.css | 57 ++++----------------- node/src/files/ui/flat/collections/grid.css | 52 +++++++++---------- 6 files changed, 96 insertions(+), 160 deletions(-) diff --git a/docs/collections/grid.html b/docs/collections/grid.html index b86012595..35450cbdb 100644 --- a/docs/collections/grid.html +++ b/docs/collections/grid.html @@ -172,13 +172,18 @@ -

Standard

- -
-

Text header

-

A basic text header

-
- Welcome back! +

Collection

+

A grid is made up of a collection of divisions. If divisions are of equal size, the grid can specify this by using the classname "split" along with how many divisions to use.

+

Otherwise a grid is assumed to have 12 sub divisions by default. Individual divisions can then specify +

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.

+
+
+

Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.

+
+
+

Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.

diff --git a/docs/stylesheets/semantic.css b/docs/stylesheets/semantic.css index 752d18d3b..1bc1b2f70 100644 --- a/docs/stylesheets/semantic.css +++ b/docs/stylesheets/semantic.css @@ -326,16 +326,8 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ } #example .peek .menu { + margin-left: 0px; width: 180px; -} -#example .sticky-wrapper.stuck { - height: 0px !important; -} -#example .sticky-wrapper.stuck .peek { - position: fixed; - top: 75px; - left: 50%; - margin-left: -630px; -webkit-transition: margin-left 0.3s ease-out, opacity 0.3s ease-out @@ -357,41 +349,17 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ opacity 0.3s ease-out ; } -#example .sticky-wrapper.stuck .peek.pushed { - margin-left: -340px; - - -webkit-animation-name: fadeIn; - -moz-animation-name: fadeIn; - -o-animation-name: fadeIn; - animation-name: fadeIn; - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - -o-animation-fill-mode: both; - animation-fill-mode: both; -} - -@-webkit-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@-moz-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} +#example .sticky-wrapper.stuck { + height: 0px !important; } - -@-o-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} +#example .sticky-wrapper.stuck .peek { + position: fixed; + top: 75px; + left: 50%; + margin-left: -630px; } - -@keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} +#example .sticky-wrapper.stuck .peek.pushed .menu { + margin-left: 275px; } #example .settings.table { @@ -535,10 +503,5 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ margin-left: 0px; left: 165px; } - #example .sticky-wrapper.stuck .peek.pushed { - margin-left: 275px; - left: 165px; - } - } diff --git a/docs/ui/flat/collections/grid.css b/docs/ui/flat/collections/grid.css index ae68cc0ae..91b20d05b 100644 --- a/docs/ui/flat/collections/grid.css +++ b/docs/ui/flat/collections/grid.css @@ -3,11 +3,11 @@ *******************************/ /* Classic 12 section grid */ -.ui.elements { +.ui.grid { width: 100%; display: table; } -.ui.elements > .element { +.ui.grid > .division { display: table-cell; -webkit-box-sizing: border-box; @@ -17,70 +17,70 @@ vertical-align: top; } -.ui.elements .element:first-child { +.ui.grid .division:first-child { padding-left: 0% !important; } -.ui.elements .element:last-child { +.ui.grid .division:last-child { padding-right: 0% !important; } /* Sizing Combinations */ -.ui.elements .element, -.ui.elements .one.wide.element { +.ui.grid .division, +.ui.grid .one.wide.division { width: 8.3333%; padding-left: 1.5%; padding-right: 1.5%; } -.ui.six.elements .element, -.ui.elements .two.wide.element { +.ui.six.part.grid .division, +.ui.grid .two.wide.division { width: 16.66667%; } -.ui.four.elements .element, -.ui.elements .three.wide.element { +.ui.four.part.grid .division, +.ui.grid .three.wide.division { width: 25%; } -.ui.three.elements .element, -.ui.elements .four.wide.element { +.ui.three.part.grid .division, +.ui.grid .four.wide.division { width: 33.3333%; } -.ui.elements .five.wide.element { +.ui.grid .five.wide.division { width: 41.6666%; } -.ui.two.elements .element, -.ui.elements .six.wide.element { +.ui.two.part.grid .division, +.ui.grid .six.wide.division { width: 50%; } -.ui.elements .seven.wide.element { +.ui.grid .seven.wide.division { width: 58.3333%; } -.ui.elements .eight.wide.element { +.ui.grid .eight.wide.division { width: 66.6666%; } -.ui.elements .nine.wide.element { +.ui.grid .nine.wide.division { width: 75%; } -.ui.elements .ten.wide.element { +.ui.grid .ten.wide.division { width: 83.3333%; } -.ui.elements .eleven.wide.element { +.ui.grid .eleven.wide.division { width: 91.666%; } -.ui.elements .twelve.wide.element { +.ui.grid .twelve.wide.division { width: 100%; } /* Variations */ -/* Fitted Elements */ -.ui.fitted.elements .element, -.ui.elements .fitted.element { +/* Fitted grid */ +.ui.fitted.grid .division, +.ui.grid .fitted.division { padding-left: 0%; padding-right: 0%; } /* Vertical Centered */ -.ui.centered.elements .element, -.ui.centered.element { +.ui.centered.grid .division, +.ui.centered.division { vertical-align: middle; } diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index 074ed4f4c..7dda403ea 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -23,13 +23,18 @@ type : 'UI Collection'
-

Standard

- -
-

Text header

-

A basic text header

-
- Welcome back! +

Collection

+

A grid is made up of a collection of divisions. If divisions are of equal size, the grid can specify this by using the classname "split" along with how many divisions to use.

+

Otherwise a grid is assumed to have 12 sub divisions by default. Individual divisions can then specify +

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.

+
+
+

Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.

+
+
+

Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.

diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 752d18d3b..1bc1b2f70 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -326,16 +326,8 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ } #example .peek .menu { + margin-left: 0px; width: 180px; -} -#example .sticky-wrapper.stuck { - height: 0px !important; -} -#example .sticky-wrapper.stuck .peek { - position: fixed; - top: 75px; - left: 50%; - margin-left: -630px; -webkit-transition: margin-left 0.3s ease-out, opacity 0.3s ease-out @@ -357,41 +349,17 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ opacity 0.3s ease-out ; } -#example .sticky-wrapper.stuck .peek.pushed { - margin-left: -340px; - - -webkit-animation-name: fadeIn; - -moz-animation-name: fadeIn; - -o-animation-name: fadeIn; - animation-name: fadeIn; - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - -o-animation-fill-mode: both; - animation-fill-mode: both; -} - -@-webkit-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@-moz-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} +#example .sticky-wrapper.stuck { + height: 0px !important; } - -@-o-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} +#example .sticky-wrapper.stuck .peek { + position: fixed; + top: 75px; + left: 50%; + margin-left: -630px; } - -@keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} +#example .sticky-wrapper.stuck .peek.pushed .menu { + margin-left: 275px; } #example .settings.table { @@ -535,10 +503,5 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ margin-left: 0px; left: 165px; } - #example .sticky-wrapper.stuck .peek.pushed { - margin-left: 275px; - left: 165px; - } - } diff --git a/node/src/files/ui/flat/collections/grid.css b/node/src/files/ui/flat/collections/grid.css index ae68cc0ae..91b20d05b 100755 --- a/node/src/files/ui/flat/collections/grid.css +++ b/node/src/files/ui/flat/collections/grid.css @@ -3,11 +3,11 @@ *******************************/ /* Classic 12 section grid */ -.ui.elements { +.ui.grid { width: 100%; display: table; } -.ui.elements > .element { +.ui.grid > .division { display: table-cell; -webkit-box-sizing: border-box; @@ -17,70 +17,70 @@ vertical-align: top; } -.ui.elements .element:first-child { +.ui.grid .division:first-child { padding-left: 0% !important; } -.ui.elements .element:last-child { +.ui.grid .division:last-child { padding-right: 0% !important; } /* Sizing Combinations */ -.ui.elements .element, -.ui.elements .one.wide.element { +.ui.grid .division, +.ui.grid .one.wide.division { width: 8.3333%; padding-left: 1.5%; padding-right: 1.5%; } -.ui.six.elements .element, -.ui.elements .two.wide.element { +.ui.six.part.grid .division, +.ui.grid .two.wide.division { width: 16.66667%; } -.ui.four.elements .element, -.ui.elements .three.wide.element { +.ui.four.part.grid .division, +.ui.grid .three.wide.division { width: 25%; } -.ui.three.elements .element, -.ui.elements .four.wide.element { +.ui.three.part.grid .division, +.ui.grid .four.wide.division { width: 33.3333%; } -.ui.elements .five.wide.element { +.ui.grid .five.wide.division { width: 41.6666%; } -.ui.two.elements .element, -.ui.elements .six.wide.element { +.ui.two.part.grid .division, +.ui.grid .six.wide.division { width: 50%; } -.ui.elements .seven.wide.element { +.ui.grid .seven.wide.division { width: 58.3333%; } -.ui.elements .eight.wide.element { +.ui.grid .eight.wide.division { width: 66.6666%; } -.ui.elements .nine.wide.element { +.ui.grid .nine.wide.division { width: 75%; } -.ui.elements .ten.wide.element { +.ui.grid .ten.wide.division { width: 83.3333%; } -.ui.elements .eleven.wide.element { +.ui.grid .eleven.wide.division { width: 91.666%; } -.ui.elements .twelve.wide.element { +.ui.grid .twelve.wide.division { width: 100%; } /* Variations */ -/* Fitted Elements */ -.ui.fitted.elements .element, -.ui.elements .fitted.element { +/* Fitted grid */ +.ui.fitted.grid .division, +.ui.grid .fitted.division { padding-left: 0%; padding-right: 0%; } /* Vertical Centered */ -.ui.centered.elements .element, -.ui.centered.element { +.ui.centered.grid .division, +.ui.centered.division { vertical-align: middle; }