Use this pen to play around with how flexbox works.
Forked from CAH-MikeEarley's Pen Flexbox.less Example HTML.
A Pen by Greg Miller on CodePen.
Created
December 6, 2014 02:31
-
-
Save shrinkray/f5c64f5df0a54e15e4b1 to your computer and use it in GitHub Desktop.
Flexbox.less Example HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="flex-container contained-green"> | |
| <div class="contained-blue">Flex Child 1 | |
| <div class="contained-white">Flex Child Child A</div> | |
| <div class="contained-white">Flex Child Child B</div> | |
| </div> | |
| <div class="contained-blue">Flex Child 2</div> | |
| <div class="contained-blue">Flex Child 3</div> | |
| <div class="contained-blue">Flex Child 4</div> | |
| <div class="contained-blue">Flex Child 5</div> | |
| </div> | |
| <div class="flex-container contained-green"> | |
| <div class="contained-blue flexRow">Flex Child 1 | |
| <div class="contained-white">Flex Child Child A</div> | |
| <div class="contained-white">Flex Child Child B</div> | |
| </div> | |
| <div class="contained-blue">Flex Child 2</div> | |
| <div class="contained-blue">Flex Child 3</div> | |
| <div class="contained-blue">Flex Child 4</div> | |
| <div class="contained-blue">Flex Child 5</div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .flex-container { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flex; | |
| display: -o-flex; | |
| display: flex; | |
| } | |
| .is-inline { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-inline-flexbox; | |
| display: -webkit-inline-flex; | |
| display: -moz-inline-flex; | |
| display: -ms-inline-flex; | |
| display: -o-inline-flex; | |
| display: -inline-flex; | |
| } | |
| .ut_flex-2009_none { | |
| -webkit-box-flex: 0.0; | |
| -moz-box-flex: 0.0; | |
| -ms-box-flex: 0.0; | |
| -o-box-flex: 0.0; | |
| box-flex: 0.0; | |
| } | |
| .ut_flex-2013_none { | |
| -webkit-flex: 0 0 auto; | |
| -moz-flex: 0 0 auto; | |
| -ms-flex: 0 0 auto; | |
| -o-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| } | |
| .ut_flex-tweener_none { | |
| -webkit-flex: 0 0 auto; | |
| -moz-flex: 0 0 auto; | |
| -ms-flex: 0 0 auto; | |
| -o-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| -webkit-flex: 1 1 auto; | |
| -moz-flex: 1 1 auto; | |
| -ms-flex: 1 1 auto; | |
| -o-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -webkit-flex: 0 1 auto; | |
| -moz-flex: 0 1 auto; | |
| -ms-flex: 0 1 auto; | |
| -o-flex: 0 1 auto; | |
| flex: 0 1 auto; | |
| } | |
| .ut_flex-2009_1 { | |
| -webkit-box-flex: 1; | |
| -moz-box-flex: 1; | |
| -ms-box-flex: 1; | |
| -o-box-flex: 1; | |
| box-flex: 1; | |
| } | |
| .ut_flex-2013_1_1_auto { | |
| -webkit-flex: 1 1 100px; | |
| -moz-flex: 1 1 100px; | |
| -ms-flex: 1 1 100px; | |
| -o-flex: 1 1 100px; | |
| flex: 1 1 100px; | |
| } | |
| .ut_flex_tweener_1_1_auto { | |
| -webkit-flex: 1 1 100px; | |
| -moz-flex: 1 1 100px; | |
| -ms-flex: 1 1 100px; | |
| -o-flex: 1 1 100px; | |
| flex: 1 1 100px; | |
| } | |
| .ut_flex-direction_row { | |
| -webkit-box-orient: horizontal; | |
| -moz-box-orient: horizontal; | |
| -ms-box-orient: horizontal; | |
| -o-box-orient: horizontal; | |
| box-orient: horizontal; | |
| -webkit-flex-direction: row; | |
| -moz-flex-direction: row; | |
| -ms-flex-direction: row; | |
| -o-flex-direction: row; | |
| flex-direction: row; | |
| } | |
| .ut_flex-direction_column { | |
| -webkit-box-orient: vertical; | |
| -moz-box-orient: vertical; | |
| -ms-box-orient: vertical; | |
| -o-box-orient: vertical; | |
| box-orient: vertical; | |
| -webkit-flex-direction: column; | |
| -moz-flex-direction: column; | |
| -ms-flex-direction: column; | |
| -o-flex-direction: column; | |
| flex-direction: column; | |
| } | |
| .ut_flex-direction_row-reverse { | |
| -webkit-box-orient: horizontal; | |
| -moz-box-orient: horizontal; | |
| -ms-box-orient: horizontal; | |
| -o-box-orient: horizontal; | |
| box-orient: horizontal; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| -ms-box-direction: reverse; | |
| -o-box-direction: reverse; | |
| box-direction: reverse; | |
| -webkit-flex-direction: row-reverse; | |
| -moz-flex-direction: row-reverse; | |
| -ms-flex-direction: row-reverse; | |
| -o-flex-direction: row-reverse; | |
| flex-direction: row-reverse; | |
| } | |
| .ut_flex-direction_column-reverse { | |
| -webkit-box-orient: vertical; | |
| -moz-box-orient: vertical; | |
| -ms-box-orient: vertical; | |
| -o-box-orient: vertical; | |
| box-orient: vertical; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| -ms-box-direction: reverse; | |
| -o-box-direction: reverse; | |
| box-direction: reverse; | |
| -webkit-flex-direction: column-reverse; | |
| -moz-flex-direction: column-reverse; | |
| -ms-flex-direction: column-reverse; | |
| -o-flex-direction: column-reverse; | |
| flex-direction: column-reverse; | |
| } | |
| .ut_order_1 { | |
| -webkit-box-ordinal-group: 2; | |
| -moz-box-ordinal-group: 2; | |
| -ms-box-ordinal-group: 2; | |
| -o-box-ordinal-group: 2; | |
| box-ordinal-group: 2; | |
| -ms-flex-order: 1; | |
| -webkit-order: 1; | |
| -moz-order: 1; | |
| -ms-order: 1; | |
| -o-order: 1; | |
| order: 1; | |
| } | |
| .ut_order_100 { | |
| -webkit-box-ordinal-group: 101; | |
| -moz-box-ordinal-group: 101; | |
| -ms-box-ordinal-group: 101; | |
| -o-box-ordinal-group: 101; | |
| box-ordinal-group: 101; | |
| -ms-flex-order: 100; | |
| -webkit-order: 100; | |
| -moz-order: 100; | |
| -ms-order: 100; | |
| -o-order: 100; | |
| order: 100; | |
| } | |
| .ut_flex-wrap_wrap { | |
| -webkit-lines: multiple; | |
| -webkit-box-lines: multiple; | |
| -moz-box-lines: multiple; | |
| -ms-box-lines: multiple; | |
| -o-box-lines: multiple; | |
| box-lines: multiple; | |
| -webkit-flex-wrap: wrap; | |
| -moz-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| -o-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| } | |
| .ut_flex-wrap_wrap-reverse { | |
| -webkit-lines: multiple; | |
| -webkit-box-lines: multiple; | |
| -moz-box-lines: multiple; | |
| -ms-box-lines: multiple; | |
| -o-box-lines: multiple; | |
| box-lines: multiple; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| -ms-box-direction: reverse; | |
| -o-box-direction: reverse; | |
| box-direction: reverse; | |
| -webkit-flex-wrap: wrap-reverse; | |
| -moz-flex-wrap: wrap-reverse; | |
| -ms-flex-wrap: wrap-reverse; | |
| -o-flex-wrap: wrap-reverse; | |
| flex-wrap: wrap-reverse; | |
| } | |
| .ut_flex-wrap_nowrap { | |
| -webkit-lines: single; | |
| -webkit-box-lines: single; | |
| -moz-box-lines: single; | |
| -ms-box-lines: single; | |
| -o-box-lines: single; | |
| box-lines: single; | |
| -webkit-flex-wrap: nowrap; | |
| -moz-flex-wrap: nowrap; | |
| -ms-flex-wrap: nowrap; | |
| -o-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| } | |
| .ut_align-items_start { | |
| -webkit-box-align: start; | |
| -moz-box-align: start; | |
| -ms-box-align: start; | |
| -o-box-align: start; | |
| box-align: start; | |
| -ms-flex-align: start; | |
| -webkit-align-items: flex-start; | |
| -moz-align-items: flex-start; | |
| -ms-align-items: flex-start; | |
| -o-align-items: flex-start; | |
| align-items: flex-start; | |
| } | |
| .ut_align-items_end { | |
| -webkit-box-align: end; | |
| -moz-box-align: end; | |
| -ms-box-align: end; | |
| -o-box-align: end; | |
| box-align: end; | |
| -ms-flex-align: end; | |
| -webkit-align-items: flex-end; | |
| -moz-align-items: flex-end; | |
| -ms-align-items: flex-end; | |
| -o-align-items: flex-end; | |
| align-items: flex-end; | |
| } | |
| .ut_align-items_center { | |
| -webkit-box-align: center; | |
| -moz-box-align: center; | |
| -ms-box-align: center; | |
| -o-box-align: center; | |
| box-align: center; | |
| -ms-flex-align: center; | |
| -webkit-align-items: center; | |
| -moz-align-items: center; | |
| -ms-align-items: center; | |
| -o-align-items: center; | |
| align-items: center; | |
| } | |
| .ut_align-items_baseline { | |
| -webkit-box-align: baseline; | |
| -moz-box-align: baseline; | |
| -ms-box-align: baseline; | |
| -o-box-align: baseline; | |
| box-align: baseline; | |
| -ms-flex-align: baseline; | |
| -webkit-align-items: baseline; | |
| -moz-align-items: baseline; | |
| -ms-align-items: baseline; | |
| -o-align-items: baseline; | |
| align-items: baseline; | |
| } | |
| .ut_align-items_stretch { | |
| -webkit-box-align: stretch; | |
| -moz-box-align: stretch; | |
| -ms-box-align: stretch; | |
| -o-box-align: stretch; | |
| box-align: stretch; | |
| -ms-flex-align: stretch; | |
| -webkit-align-items: stretch; | |
| -moz-align-items: stretch; | |
| -ms-align-items: stretch; | |
| -o-align-items: stretch; | |
| align-items: stretch; | |
| } | |
| .ut_align-self_auto { | |
| -ms-flex-item-align: auto; | |
| flex-item-align: auto; | |
| -webkit-align-self: auto; | |
| -moz-align-self: auto; | |
| -ms-align-self: auto; | |
| -o-align-self: auto; | |
| align-self: auto; | |
| } | |
| .ut_align-self_start { | |
| -ms-flex-item-align: start; | |
| flex-item-align: start; | |
| -webkit-align-self: flex-start; | |
| -moz-align-self: flex-start; | |
| -ms-align-self: flex-start; | |
| -o-align-self: flex-start; | |
| align-self: flex-start; | |
| } | |
| .ut_align-self_end { | |
| -ms-flex-item-align: end; | |
| flex-item-align: end; | |
| -webkit-align-self: flex-end; | |
| -moz-align-self: flex-end; | |
| -ms-align-self: flex-end; | |
| -o-align-self: flex-end; | |
| align-self: flex-end; | |
| } | |
| .ut_align-self_center { | |
| -ms-flex-item-align: center; | |
| flex-item-align: center; | |
| -webkit-align-self: center; | |
| -moz-align-self: center; | |
| -ms-align-self: center; | |
| -o-align-self: center; | |
| align-self: center; | |
| } | |
| .ut_align-self_baseline { | |
| -ms-flex-item-align: baseline; | |
| flex-item-align: baseline; | |
| -webkit-align-self: baseline; | |
| -moz-align-self: baseline; | |
| -ms-align-self: baseline; | |
| -o-align-self: baseline; | |
| align-self: baseline; | |
| } | |
| .ut_align-self_stretch { | |
| -ms-flex-item-align: stretch; | |
| flex-item-align: stretch; | |
| -webkit-align-self: stretch; | |
| -moz-align-self: stretch; | |
| -ms-align-self: stretch; | |
| -o-align-self: stretch; | |
| align-self: stretch; | |
| } | |
| .ut_align-content_start { | |
| -ms-flex-line-pack: start; | |
| -webkit-align-content: flex-start; | |
| -moz-align-content: flex-start; | |
| -o-align-content: flex-start; | |
| align-content: flex-start; | |
| } | |
| .ut_align-content_end { | |
| -ms-flex-line-pack: end; | |
| -webkit-align-content: flex-end; | |
| -moz-align-content: flex-end; | |
| -o-align-content: flex-end; | |
| align-content: flex-end; | |
| } | |
| .ut_align-content_center { | |
| -ms-flex-line-pack: center; | |
| -webkit-align-content: center; | |
| -moz-align-content: center; | |
| -o-align-content: center; | |
| align-content: center; | |
| } | |
| .ut_align-content_space-between { | |
| -ms-flex-line-pack: justify; | |
| -webkit-align-content: space-between; | |
| -moz-align-content: space-between; | |
| -o-align-content: space-between; | |
| align-content: space-between; | |
| } | |
| .ut_align-content_space-around { | |
| -ms-flex-line-pack: distribute; | |
| -webkit-align-content: space-around; | |
| -moz-align-content: space-around; | |
| -o-align-content: space-around; | |
| align-content: space-around; | |
| } | |
| .ut_align-content_stretch { | |
| -ms-flex-line-pack: stretch; | |
| -webkit-align-content: stretch; | |
| -moz-align-content: stretch; | |
| -o-align-content: stretch; | |
| align-content: stretch; | |
| } | |
| .ut_flex-flow_row { | |
| -webkit-flex-flow: row ; | |
| -ms-flex-flow: row ; | |
| flex-flow: row ; | |
| } | |
| .ut_flex-flow_row-reverse { | |
| -webkit-flex-flow: row-reverse ; | |
| -ms-flex-flow: row-reverse ; | |
| flex-flow: row-reverse ; | |
| } | |
| .ut_flex-flow_column { | |
| -webkit-flex-flow: column ; | |
| -ms-flex-flow: column ; | |
| flex-flow: column ; | |
| } | |
| .ut_flex-flow_column-reverse { | |
| -webkit-flex-flow: column-reverse ; | |
| -ms-flex-flow: column-reverse ; | |
| flex-flow: column-reverse ; | |
| } | |
| .ut_flex-flow_row_wrap { | |
| -webkit-flex-flow: row wrap; | |
| -ms-flex-flow: row wrap; | |
| flex-flow: row wrap; | |
| } | |
| .ut_flex-flow_column_wrap { | |
| -webkit-flex-flow: column wrap; | |
| -ms-flex-flow: column wrap; | |
| flex-flow: column wrap; | |
| } | |
| .ut_flex-flow_column-reverse_wrap { | |
| -webkit-flex-flow: column-reverse wrap; | |
| -ms-flex-flow: column-reverse wrap; | |
| flex-flow: column-reverse wrap; | |
| } | |
| .ut_flex-flow_row-reverse_wrap { | |
| -webkit-flex-flow: row-reverse wrap; | |
| -ms-flex-flow: row-reverse wrap; | |
| flex-flow: row-reverse wrap; | |
| } | |
| .ut_flex-flow_row_nowrap { | |
| -webkit-flex-flow: row nowrap; | |
| -ms-flex-flow: row nowrap; | |
| flex-flow: row nowrap; | |
| } | |
| .ut_flex-flow_column_nowrap { | |
| -webkit-flex-flow: column nowrap; | |
| -ms-flex-flow: column nowrap; | |
| flex-flow: column nowrap; | |
| } | |
| .ut_flex-flow_column-reverse_nowrap { | |
| -webkit-flex-flow: column-reverse nowrap; | |
| -ms-flex-flow: column-reverse nowrap; | |
| flex-flow: column-reverse nowrap; | |
| } | |
| .ut_flex-flow_row-reverse_nowrap { | |
| -webkit-flex-flow: row-reverse nowrap; | |
| -ms-flex-flow: row-reverse nowrap; | |
| flex-flow: row-reverse nowrap; | |
| } | |
| .ut_flex-flow_row_wrap-reverse { | |
| -webkit-flex-flow: row wrap-reverse; | |
| -ms-flex-flow: row wrap-reverse; | |
| flex-flow: row wrap-reverse; | |
| } | |
| .ut_flex-flow_column_wrap-reverse { | |
| -webkit-flex-flow: column wrap-reverse; | |
| -ms-flex-flow: column wrap-reverse; | |
| flex-flow: column wrap-reverse; | |
| } | |
| .ut_flex-flow_column-reverse_wrap-reverse { | |
| -webkit-flex-flow: column-reverse wrap-reverse; | |
| -ms-flex-flow: column-reverse wrap-reverse; | |
| flex-flow: column-reverse wrap-reverse; | |
| } | |
| .ut_flex-flow_row-reverse_wrap-reverse { | |
| -webkit-flex-flow: row-reverse wrap-reverse; | |
| -ms-flex-flow: row-reverse wrap-reverse; | |
| flex-flow: row-reverse wrap-reverse; | |
| } | |
| .ut_justify-content_start { | |
| -webkit-box-pack: start; | |
| -moz-box-pack: start; | |
| -ms-box-pack: start; | |
| -o-box-pack: start; | |
| box-pack: start; | |
| -ms-flex-pack: start; | |
| -webkit-justify-content: flex-start; | |
| -moz-justify-content: flex-start; | |
| -ms-justify-content: flex-start; | |
| -o-justify-content: flex-start; | |
| justify-content: flex-start; | |
| } | |
| .ut_justify-content_end { | |
| -webkit-box-pack: end; | |
| -moz-box-pack: end; | |
| -ms-box-pack: end; | |
| -o-box-pack: end; | |
| box-pack: end; | |
| -ms-flex-pack: end; | |
| -webkit-justify-content: flex-end; | |
| -moz-justify-content: flex-end; | |
| -ms-justify-content: flex-end; | |
| -o-justify-content: flex-end; | |
| justify-content: flex-end; | |
| } | |
| .ut_justify-content_center { | |
| -webkit-box-pack: center; | |
| -moz-box-pack: center; | |
| -ms-flex-pack: center; | |
| -webkit-justify-content: center; | |
| -moz-justify-content: center; | |
| -ms-justify-content: center; | |
| -o-justify-content: center; | |
| justify-content: center; | |
| } | |
| .ut_justify-content_space-between { | |
| -webkit-box-pack: justify; | |
| -moz-box-pack: justify; | |
| -ms-flex-pack: justify; | |
| -webkit-justify-content: space-between; | |
| -moz-justify-content: space-between; | |
| -ms-justify-content: space-between; | |
| -o-justify-content: space-between; | |
| justify-content: space-between; | |
| } | |
| .ut_justify-content_space-around { | |
| -ms-flex-pack: distribute; | |
| -webkit-justify-content: space-around; | |
| -moz-justify-content: space-around; | |
| -ms-justify-content: space-around; | |
| -o-justify-content: space-around; | |
| justify-content: space-around; | |
| } | |
| .ut_flex-grow_1 { | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -moz-box-flex: 1; | |
| -ms-flex: 1 1 auto; | |
| flex-grow: 1; | |
| } | |
| .ut_flex-grow_100 { | |
| -webkit-box-flex: 100; | |
| -webkit-flex-grow: 100; | |
| -moz-box-flex: 100; | |
| -ms-flex: 100 1 auto; | |
| flex-grow: 100; | |
| } | |
| .ut_flex-shrink_1 { | |
| -webkit-flex-shrink: 1; | |
| -ms-flex: 0 1 auto; | |
| flex-shrink: 1; | |
| } | |
| .ut_flex-shrink_100 { | |
| -webkit-flex-shrink: 100; | |
| -ms-flex: 0 100 auto; | |
| flex-shrink: 100; | |
| } | |
| .ut_flex-basis_100px { | |
| -webkit-flex-basis: 100px; | |
| -ms-flex: 0 1 100px; | |
| flex-basis: 100px; | |
| } | |
| .ut_flex-basis_100pct { | |
| -webkit-flex-basis: 100%; | |
| -ms-flex: 0 1 100%; | |
| flex-basis: 100%; | |
| } | |
| .ut_flex-basis_10em { | |
| -webkit-flex-basis: 10em; | |
| -ms-flex: 0 1 10em; | |
| flex-basis: 10em; | |
| } | |
| .ut_flex-basis_10rem { | |
| -webkit-flex-basis: 10rem; | |
| -ms-flex: 0 1 10rem; | |
| flex-basis: 10rem; | |
| } | |
| /* the following classes are integration/regression testing of the classes into an HTML page */ | |
| .flexRow { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flex; | |
| display: -o-flex; | |
| display: flex; | |
| -webkit-box-orient: horizontal; | |
| -moz-box-orient: horizontal; | |
| -ms-box-orient: horizontal; | |
| -o-box-orient: horizontal; | |
| box-orient: horizontal; | |
| -webkit-flex-direction: row; | |
| -moz-flex-direction: row; | |
| -ms-flex-direction: row; | |
| -o-flex-direction: row; | |
| flex-direction: row; | |
| } | |
| .flexRow.isInline { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-inline-flexbox; | |
| display: -webkit-inline-flex; | |
| display: -moz-inline-flex; | |
| display: -ms-inline-flex; | |
| display: -o-inline-flex; | |
| display: -inline-flex; | |
| -webkit-box-orient: horizontal; | |
| -moz-box-orient: horizontal; | |
| -ms-box-orient: horizontal; | |
| -o-box-orient: horizontal; | |
| box-orient: horizontal; | |
| -webkit-flex-direction: row; | |
| -moz-flex-direction: row; | |
| -ms-flex-direction: row; | |
| -o-flex-direction: row; | |
| flex-direction: row; | |
| } | |
| .flexColumn { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flex; | |
| display: -o-flex; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -moz-box-orient: vertical; | |
| -ms-box-orient: vertical; | |
| -o-box-orient: vertical; | |
| box-orient: vertical; | |
| -webkit-flex-direction: column; | |
| -moz-flex-direction: column; | |
| -ms-flex-direction: column; | |
| -o-flex-direction: column; | |
| flex-direction: column; | |
| } | |
| .flexColumn.isInline { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-inline-flexbox; | |
| display: -webkit-inline-flex; | |
| display: -moz-inline-flex; | |
| display: -ms-inline-flex; | |
| display: -o-inline-flex; | |
| display: -inline-flex; | |
| -webkit-box-orient: vertical; | |
| -moz-box-orient: vertical; | |
| -ms-box-orient: vertical; | |
| -o-box-orient: vertical; | |
| box-orient: vertical; | |
| -webkit-flex-direction: column; | |
| -moz-flex-direction: column; | |
| -ms-flex-direction: column; | |
| -o-flex-direction: column; | |
| flex-direction: column; | |
| } | |
| .flexRowReverse { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flex; | |
| display: -o-flex; | |
| display: flex; | |
| -webkit-box-orient: horizontal; | |
| -moz-box-orient: horizontal; | |
| -ms-box-orient: horizontal; | |
| -o-box-orient: horizontal; | |
| box-orient: horizontal; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| -ms-box-direction: reverse; | |
| -o-box-direction: reverse; | |
| box-direction: reverse; | |
| -webkit-flex-direction: row-reverse; | |
| -moz-flex-direction: row-reverse; | |
| -ms-flex-direction: row-reverse; | |
| -o-flex-direction: row-reverse; | |
| flex-direction: row-reverse; | |
| } | |
| .flexRowReverse.isInline { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-inline-flexbox; | |
| display: -webkit-inline-flex; | |
| display: -moz-inline-flex; | |
| display: -ms-inline-flex; | |
| display: -o-inline-flex; | |
| display: -inline-flex; | |
| -webkit-box-orient: horizontal; | |
| -moz-box-orient: horizontal; | |
| -ms-box-orient: horizontal; | |
| -o-box-orient: horizontal; | |
| box-orient: horizontal; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| -ms-box-direction: reverse; | |
| -o-box-direction: reverse; | |
| box-direction: reverse; | |
| -webkit-flex-direction: row-reverse; | |
| -moz-flex-direction: row-reverse; | |
| -ms-flex-direction: row-reverse; | |
| -o-flex-direction: row-reverse; | |
| flex-direction: row-reverse; | |
| } | |
| .flexColumnReverse { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flex; | |
| display: -o-flex; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -moz-box-orient: vertical; | |
| -ms-box-orient: vertical; | |
| -o-box-orient: vertical; | |
| box-orient: vertical; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| -ms-box-direction: reverse; | |
| -o-box-direction: reverse; | |
| box-direction: reverse; | |
| -webkit-flex-direction: column-reverse; | |
| -moz-flex-direction: column-reverse; | |
| -ms-flex-direction: column-reverse; | |
| -o-flex-direction: column-reverse; | |
| flex-direction: column-reverse; | |
| } | |
| .flexColumnReverse.isInline { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -ms-box; | |
| display: -o-box; | |
| display: box; | |
| display: -ms-inline-flexbox; | |
| display: -webkit-inline-flex; | |
| display: -moz-inline-flex; | |
| display: -ms-inline-flex; | |
| display: -o-inline-flex; | |
| display: -inline-flex; | |
| -webkit-box-orient: vertical; | |
| -moz-box-orient: vertical; | |
| -ms-box-orient: vertical; | |
| -o-box-orient: vertical; | |
| box-orient: vertical; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| -ms-box-direction: reverse; | |
| -o-box-direction: reverse; | |
| box-direction: reverse; | |
| -webkit-flex-direction: column-reverse; | |
| -moz-flex-direction: column-reverse; | |
| -ms-flex-direction: column-reverse; | |
| -o-flex-direction: column-reverse; | |
| flex-direction: column-reverse; | |
| } | |
| .selfEnd { | |
| -ms-flex-item-align: end; | |
| flex-item-align: end; | |
| -webkit-align-self: flex-end; | |
| -moz-align-self: flex-end; | |
| -ms-align-self: flex-end; | |
| -o-align-self: flex-end; | |
| align-self: flex-end; | |
| } | |
| .selfStart { | |
| -ms-flex-item-align: start; | |
| flex-item-align: start; | |
| -webkit-align-self: flex-start; | |
| -moz-align-self: flex-start; | |
| -ms-align-self: flex-start; | |
| -o-align-self: flex-start; | |
| align-self: flex-start; | |
| } | |
| .selfCenter { | |
| -ms-flex-item-align: center; | |
| flex-item-align: center; | |
| -webkit-align-self: center; | |
| -moz-align-self: center; | |
| -ms-align-self: center; | |
| -o-align-self: center; | |
| align-self: center; | |
| } | |
| .flexBasis50Percent { | |
| -webkit-flex-basis: 50%; | |
| -ms-flex: 0 1 50%; | |
| flex-basis: 50%; | |
| } | |
| .flexBasis30Percent { | |
| -webkit-flex-basis: 30%; | |
| -ms-flex: 0 1 30%; | |
| flex-basis: 30%; | |
| } | |
| .flexBasis20Percent { | |
| -webkit-flex-basis: 20%; | |
| -ms-flex: 0 1 20%; | |
| flex-basis: 20%; | |
| } | |
| .flexWrap { | |
| -webkit-lines: multiple; | |
| -webkit-box-lines: multiple; | |
| -moz-box-lines: multiple; | |
| -ms-box-lines: multiple; | |
| -o-box-lines: multiple; | |
| box-lines: multiple; | |
| -webkit-flex-wrap: wrap; | |
| -moz-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| -o-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| } | |
| .flexGrow2 { | |
| -webkit-box-flex: 2; | |
| -webkit-flex-grow: 2; | |
| -moz-box-flex: 2; | |
| -ms-flex: 2 1 auto; | |
| flex-grow: 2; | |
| } | |
| .flexGrow1 { | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -moz-box-flex: 1; | |
| -ms-flex: 1 1 auto; | |
| flex-grow: 1; | |
| } | |
| .order1 { | |
| -webkit-box-ordinal-group: 2; | |
| -moz-box-ordinal-group: 2; | |
| -ms-box-ordinal-group: 2; | |
| -o-box-ordinal-group: 2; | |
| box-ordinal-group: 2; | |
| -ms-flex-order: 1; | |
| -webkit-order: 1; | |
| -moz-order: 1; | |
| -ms-order: 1; | |
| -o-order: 1; | |
| order: 1; | |
| } | |
| .order2 { | |
| -webkit-box-ordinal-group: 3; | |
| -moz-box-ordinal-group: 3; | |
| -ms-box-ordinal-group: 3; | |
| -o-box-ordinal-group: 3; | |
| box-ordinal-group: 3; | |
| -ms-flex-order: 2; | |
| -webkit-order: 2; | |
| -moz-order: 2; | |
| -ms-order: 2; | |
| -o-order: 2; | |
| order: 2; | |
| } | |
| .order3 { | |
| -webkit-box-ordinal-group: 4; | |
| -moz-box-ordinal-group: 4; | |
| -ms-box-ordinal-group: 4; | |
| -o-box-ordinal-group: 4; | |
| box-ordinal-group: 4; | |
| -ms-flex-order: 3; | |
| -webkit-order: 3; | |
| -moz-order: 3; | |
| -ms-order: 3; | |
| -o-order: 3; | |
| order: 3; | |
| } | |
| .order4 { | |
| -webkit-box-ordinal-group: 5; | |
| -moz-box-ordinal-group: 5; | |
| -ms-box-ordinal-group: 5; | |
| -o-box-ordinal-group: 5; | |
| box-ordinal-group: 5; | |
| -ms-flex-order: 4; | |
| -webkit-order: 4; | |
| -moz-order: 4; | |
| -ms-order: 4; | |
| -o-order: 4; | |
| order: 4; | |
| } | |
| .order5 { | |
| -webkit-box-ordinal-group: 6; | |
| -moz-box-ordinal-group: 6; | |
| -ms-box-ordinal-group: 6; | |
| -o-box-ordinal-group: 6; | |
| box-ordinal-group: 6; | |
| -ms-flex-order: 5; | |
| -webkit-order: 5; | |
| -moz-order: 5; | |
| -ms-order: 5; | |
| -o-order: 5; | |
| order: 5; | |
| } | |
| /* style.less */ | |
| /*--------------------------------------------------- | |
| LESS Elements 0.9 | |
| --------------------------------------------------- | |
| A set of useful LESS mixins | |
| More info at: http://lesselements.com | |
| ---------------------------------------------------*/ | |
| .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { | |
| background: @color; | |
| background: -webkit-gradient(linear, | |
| left bottom, | |
| left top, | |
| color-stop(0, @start), | |
| color-stop(1, @stop)); | |
| background: -ms-linear-gradient(bottom, | |
| @start, | |
| @stop); | |
| background: -moz-linear-gradient(center bottom, | |
| @start 0%, | |
| @stop 100%); | |
| background: -o-linear-gradient(@stop, | |
| @start); | |
| filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); | |
| } | |
| .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { | |
| background: @color; | |
| background: -webkit-gradient(linear, | |
| left bottom, | |
| left top, | |
| color-stop(0, rgb(@start,@start,@start)), | |
| color-stop(1, rgb(@stop,@stop,@stop))); | |
| background: -ms-linear-gradient(bottom, | |
| rgb(@start,@start,@start) 0%, | |
| rgb(@stop,@stop,@stop) 100%); | |
| background: -moz-linear-gradient(center bottom, | |
| rgb(@start,@start,@start) 0%, | |
| rgb(@stop,@stop,@stop) 100%); | |
| background: -o-linear-gradient(rgb(@stop,@stop,@stop), | |
| rgb(@start,@start,@start)); | |
| filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); | |
| } | |
| .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { | |
| border-top: solid 1px @top-color; | |
| border-left: solid 1px @left-color; | |
| border-right: solid 1px @right-color; | |
| border-bottom: solid 1px @bottom-color; | |
| } | |
| .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { | |
| -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); | |
| -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); | |
| box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); | |
| } | |
| .rounded(@radius: 2px) { | |
| -webkit-border-radius: @radius; | |
| -moz-border-radius: @radius; | |
| border-radius: @radius; | |
| } | |
| .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { | |
| -webkit-border-top-right-radius: @topright; | |
| -webkit-border-bottom-right-radius: @bottomright; | |
| -webkit-border-bottom-left-radius: @bottomleft; | |
| -webkit-border-top-left-radius: @topleft; | |
| -moz-border-radius-topright: @topright; | |
| -moz-border-radius-bottomright: @bottomright; | |
| -moz-border-radius-bottomleft: @bottomleft; | |
| -moz-border-radius-topleft: @topleft; | |
| border-top-right-radius: @topright; | |
| border-bottom-right-radius: @bottomright; | |
| border-bottom-left-radius: @bottomleft; | |
| border-top-left-radius: @topleft; | |
| .background-clip(padding-box); | |
| } | |
| .opacity(@opacity: 0.5) { | |
| -moz-opacity: @opacity; | |
| -khtml-opacity: @opacity; | |
| -webkit-opacity: @opacity; | |
| opacity: @opacity; | |
| @opperc: @opacity * 100; | |
| -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; | |
| filter: ~"alpha(opacity=@{opperc})"; | |
| } | |
| .transition-duration(@duration: 0.2s) { | |
| -moz-transition-duration: @duration; | |
| -webkit-transition-duration: @duration; | |
| -o-transition-duration: @duration; | |
| transition-duration: @duration; | |
| } | |
| .transform(...) { | |
| -webkit-transform: @arguments; | |
| -moz-transform: @arguments; | |
| -o-transform: @arguments; | |
| -ms-transform: @arguments; | |
| transform: @arguments; | |
| } | |
| .rotation(@deg:5deg){ | |
| .transform(rotate(@deg)); | |
| } | |
| .scale(@ratio:1.5){ | |
| .transform(scale(@ratio)); | |
| } | |
| .transition(@duration:0.2s, @ease:ease-out) { | |
| -webkit-transition: all @duration @ease; | |
| -moz-transition: all @duration @ease; | |
| -o-transition: all @duration @ease; | |
| transition: all @duration @ease; | |
| } | |
| .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { | |
| -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); | |
| -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); | |
| box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); | |
| } | |
| .box-shadow(@arguments) { | |
| -webkit-box-shadow: @arguments; | |
| -moz-box-shadow: @arguments; | |
| box-shadow: @arguments; | |
| } | |
| .box-sizing(@sizing: border-box) { | |
| -ms-box-sizing: @sizing; | |
| -moz-box-sizing: @sizing; | |
| -webkit-box-sizing: @sizing; | |
| box-sizing: @sizing; | |
| } | |
| .user-select(@argument: none) { | |
| -webkit-user-select: @argument; | |
| -moz-user-select: @argument; | |
| -ms-user-select: @argument; | |
| user-select: @argument; | |
| } | |
| .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { | |
| -moz-column-width: @colwidth; | |
| -moz-column-count: @colcount; | |
| -moz-column-gap: @colgap; | |
| -moz-column-rule-color: @columnRuleColor; | |
| -moz-column-rule-style: @columnRuleStyle; | |
| -moz-column-rule-width: @columnRuleWidth; | |
| -webkit-column-width: @colwidth; | |
| -webkit-column-count: @colcount; | |
| -webkit-column-gap: @colgap; | |
| -webkit-column-rule-color: @columnRuleColor; | |
| -webkit-column-rule-style: @columnRuleStyle; | |
| -webkit-column-rule-width: @columnRuleWidth; | |
| column-width: @colwidth; | |
| column-count: @colcount; | |
| column-gap: @colgap; | |
| column-rule-color: @columnRuleColor; | |
| column-rule-style: @columnRuleStyle; | |
| column-rule-width: @columnRuleWidth; | |
| } | |
| .translate(@x:0, @y:0) { | |
| .transform(translate(@x, @y)); | |
| } | |
| .background-clip(@argument: padding-box) { | |
| -moz-background-clip: @argument; | |
| -webkit-background-clip: @argument; | |
| background-clip: @argument; | |
| } | |
| @darkest: #000000; | |
| @lightest: #ffffff; | |
| @gray-shade: #555555; | |
| @gray: #9a9a9a; | |
| @gray-highlight: #dbdbdb; | |
| @lightest-shade: #f3f3f3; | |
| @red: #e41f35; | |
| @red-highlight: lighten(@red, 10%); | |
| @red-shade: darken(@red, 10%); | |
| @green: #149781; | |
| @green-highlight: lighten(@green, 10%); | |
| @green-shade: darken(@green, 10%); | |
| @bright-green: #abe11f; | |
| @bright-green-highlight: lighten(@bright-green, 10%); | |
| @bright-green-shade: darken(@bright-green, 10%); | |
| @yellow: #feef21; | |
| @yellow-highlight: lighten(@yellow, 10%); | |
| @yellow-shade: darken(@yellow, 10%); | |
| @blue: #1faee1; | |
| @blue-highlight: lighten(@blue, 10%); | |
| @blue-shade: darken(@blue, 10%); | |
| .darkest {background:@darkest;} | |
| .lightest {background:@lightest;} | |
| .dark-gray {background:@gray-shade;} | |
| .medium-gray {background:@gray;} | |
| .light-gray {background:@gray-highlight;} | |
| .highlight-gray {background:@lightest-shade;} | |
| .red {background:@red;} | |
| .green {background:@green;} | |
| .bright-green {background:@bright-green;} | |
| .yellow {background:@yellow;} | |
| .blue {background:@blue;} | |
| body { | |
| background: #000000; | |
| font-family: "Calibri", "Verdana", "Tahoma", "Arial", sans-serif; | |
| font-size: 16px; | |
| } | |
| code, pre { | |
| background: @lightest-shade; | |
| border-radius:5px; | |
| padding:2px; | |
| border: 1px dashed @gray-highlight; | |
| line-height: 1.8rem; | |
| } | |
| ul li ,ol li { | |
| margin: 5px 0; | |
| line-height: 1.4rem; | |
| } | |
| .contained-white { | |
| border-radius:5px; | |
| background-color:@lightest; | |
| margin: 5px; | |
| padding:5px; | |
| .bordered(@top-color: @gray, @right-color: @gray, @bottom-color: @gray-shade, @left-color: @gray-shade); | |
| } | |
| .contained-gray { | |
| border-radius:5px; | |
| background-color:@gray-highlight; | |
| margin: 5px; | |
| padding:5px; | |
| .bordered(@top-color: @lightest-shade, @right-color: @gray-highlight, @bottom-color: @darkest, @left-color: @gray-shade); | |
| } | |
| .contained-green { | |
| border-radius: 5px; | |
| background-color:@green; | |
| margin: 5px; | |
| padding:5px; | |
| .bordered(@top-color: @green-highlight, @right-color: @green-highlight, @bottom-color: @green-shade, @left-color: @green-shade); | |
| } | |
| .contained-blue { | |
| border-radius: 5px; | |
| background-color:@blue; | |
| margin: 5px; | |
| padding:5px; | |
| font-size:.8rem; | |
| .bordered(@top-color: @blue-highlight, @right-color: @blue-highlight, @bottom-color: @blue-shade, @left-color: @blue-shade); | |
| } | |
| .flex-label { | |
| padding: 0 5px 0 5px; | |
| font-weight:700; | |
| } | |
| .flex-value { | |
| padding: 0 5px 0 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment