Created
July 28, 2016 20:51
-
-
Save HariantoAtWork/93321321d4ecb0c161f2fdb5ecb69001 to your computer and use it in GitHub Desktop.
Flex Box Less Mixins
This file contains 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
| /* mixins */ | |
| .flex() { | |
| display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | |
| display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | |
| display: -ms-flexbox; /* TWEENER - IE 10 */ | |
| display: -webkit-flex; /* NEW - Chrome */ | |
| display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
| } | |
| .flex--column() { | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| } | |
| .flex--row() { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| } | |
| .flex--align-center() { | |
| align-items: center; | |
| } | |
| .flex--center() { | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -webkit-box-direction: normal; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| } | |
| .flex-flex(@flex: 1) { | |
| -webkit-box-flex: @flex; /* OLD - iOS 6-, Safari 3.1-6 */ | |
| -moz-box-flex: @flex; /* OLD - Firefox 19- */ | |
| -webkit-flex: @flex; /* Chrome */ | |
| -ms-flex: @flex; /* IE 10 */ | |
| flex: @flex; | |
| } | |
| .flex-content(@content) { | |
| -webkit-justify-content: @content; | |
| -ms-flex-pack: @content; | |
| justify-content: @content; | |
| } | |
| .text-overflow(@val: ellipsis) { | |
| text-overflow: @val; | |
| } | |
| .filter(@val: blur(5px)) { | |
| -webkit-filter: @val; | |
| -moz-filter: @val; | |
| -o-filter: @val; | |
| -ms-filter: @val; | |
| filter: @val; | |
| } | |
| .transition(@type:all, @duration:.4s, @ease:ease-out) when not (@type = all) { | |
| -ms-transition: -ms-@type @duration @ease; | |
| -moz-transition: -moz-@type @duration @ease; | |
| -webkit-transition: -webkit-@type @duration @ease; | |
| transition: @type @duration @ease; | |
| } | |
| .transform(...) { | |
| -webkit-transform: @arguments; | |
| -moz-transform: @arguments; | |
| -ms-transform: @arguments; | |
| -o-transform: @arguments; | |
| transform: @arguments; | |
| } | |
| .gradient(...) { | |
| background: -webkit-linear-gradient(@arguments); /* For Safari 5.1 to 6.0 */ | |
| background: -moz-linear-gradient(@arguments); /* For Firefox 3.6 to 15 */ | |
| background: -o-linear-gradient(@arguments); /* For Opera 11.1 to 12.0 */ | |
| background: linear-gradient(@arguments); /* Standard syntax */ | |
| } | |
| /* END mixins */ |
This file contains 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
| /* Utils */ | |
| .u-box { | |
| .flex(); | |
| } | |
| .u-box--column { | |
| .flex--column(); | |
| } | |
| .u-box--row { | |
| .flex--row(); | |
| } | |
| // flex-wrap on default `nowrap` where items is inline | |
| .u-box--wrap { | |
| flex-wrap: wrap; | |
| } | |
| .u-box--wrap-reverse { | |
| flex-wrap: wrap-reverse; | |
| } | |
| .u-box--list { | |
| margin-right: -1rem; | |
| margin-bottom: -1rem; | |
| > * { | |
| margin-right: 1rem; | |
| margin-bottom: 1rem; | |
| &:empty { | |
| display: none; | |
| } | |
| } | |
| } | |
| // justify content HORIZONTALLY - left/right | |
| .u-box--justify { | |
| &-flex-start { | |
| justify-content: flex-start; | |
| } | |
| &-flex-end { | |
| -webkit-justify-content: flex-end; | |
| justify-content: flex-end; | |
| } | |
| &-center { | |
| justify-content: center; | |
| } | |
| &-space-between { | |
| justify-content: space-between; | |
| } | |
| &-space-around { | |
| justify-content: space-around; | |
| } | |
| } | |
| .u-box--inline { | |
| display: inline-flex; | |
| } | |
| // align content VERTICALLY - up/down | |
| .u-box--align { | |
| &-flex-start { | |
| align-items: flex-start; | |
| } | |
| &-flex-end { | |
| align-items: flex-end; | |
| } | |
| &-center { | |
| -webkit-align-items: center; /* Safari 7.0+ */ | |
| align-items: center; | |
| } | |
| &-stretch { | |
| align-items: stretch; | |
| } | |
| &-space-between { | |
| align-items: space-between; | |
| } | |
| &-space-around { | |
| align-items: space-around; | |
| } | |
| } | |
| .u-box-flex { | |
| .flex-flex(1); | |
| &--minWidth { | |
| flex-basis: 320px; | |
| } | |
| &--grow { | |
| flex-grow: 1; | |
| } | |
| &--shrink { | |
| flex-shrink: 0; | |
| } | |
| } | |
| .u-box-col--center { | |
| .flex-content(center); | |
| } | |
| .u-relative { | |
| position: relative; | |
| } | |
| .u-absolute { | |
| position: absolute; | |
| } | |
| .u-absolute-full { | |
| position: absolute; | |
| top:0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 100%; | |
| } | |
| .u-hidden { | |
| display: none; | |
| } | |
| .u-invisible { | |
| visibility: hidden; | |
| } | |
| .u-overflow { | |
| overflow: hidden; | |
| &-x { | |
| overflow-x: scroll; | |
| overflow-y: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| -webkit-transform: translateZ(0px); | |
| -webkit-transform: translate3d(0,0,0); | |
| -webkit-perspective: 1000; | |
| } | |
| &-y { | |
| overflow-x: hidden; | |
| overflow-y: scroll; | |
| -webkit-overflow-scrolling: touch; | |
| -webkit-transform: translateZ(0px); | |
| -webkit-transform: translate3d(0,0,0); | |
| -webkit-perspective: 1000; | |
| } | |
| } | |
| .u-text-overflow { | |
| white-space: nowrap; | |
| .text-overflow(); | |
| } | |
| .u-height { | |
| height: 100%; | |
| } | |
| .u-padding { | |
| padding: 1rem; | |
| &-2 { | |
| padding: 2rem; | |
| } | |
| &-x { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| &-2 { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| &-left { | |
| padding-left: 1rem; | |
| &-2 { | |
| padding-left: 2rem; | |
| } | |
| } | |
| &-right { | |
| padding-right: 1rem; | |
| &-2 { | |
| padding-right: 2rem; | |
| } | |
| } | |
| &-y { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| &-2 { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; | |
| } | |
| } | |
| &-top { | |
| padding-top: 1rem; | |
| &-2 { | |
| padding-top: 2rem; | |
| } | |
| } | |
| &-bottom { | |
| padding-bottom: 1rem; | |
| &-2 { | |
| padding-bottom: 2rem; | |
| } | |
| } | |
| &-px { | |
| padding: 1px; | |
| &-x { | |
| padding-left: 1px; | |
| padding-right: 1px; | |
| } | |
| &-left { | |
| padding-left: 1px; | |
| } | |
| &-right { | |
| padding-right: 1px; | |
| } | |
| &-y { | |
| padding-top: 1px; | |
| padding-bottom: 1px; | |
| } | |
| &-top { | |
| padding-top: 1px; | |
| } | |
| &-bottom { | |
| padding-bottom: 1px; | |
| } | |
| } | |
| } | |
| .u-margin { | |
| margin: 1rem; | |
| &-2 { | |
| margin: 2rem; | |
| } | |
| &-x { | |
| margin-left: 1rem; | |
| margin-right: 1rem; | |
| &-2 { | |
| margin-left: 2rem; | |
| margin-right: 2rem; | |
| } | |
| } | |
| &-left { | |
| margin-left: 1rem; | |
| &-2 { | |
| margin-left: 2rem; | |
| } | |
| } | |
| &-right { | |
| margin-right: 1rem; | |
| &-2 { | |
| margin-right: 2rem; | |
| } | |
| } | |
| &-y { | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| &-2 { | |
| margin-top: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| &-top { | |
| margin-top: 1rem; | |
| &-2 { | |
| margin-top: 2rem; | |
| } | |
| } | |
| &-bottom { | |
| margin-bottom: 1rem; | |
| &-2 { | |
| margin-bottom: 2rem; | |
| } | |
| &--editModel { | |
| margin-bottom: .4rem; | |
| } | |
| } | |
| &-px { | |
| margin: 1px; | |
| &-x { | |
| margin-left: 1px; | |
| margin-right: 1px; | |
| } | |
| &-left { | |
| margin-left: 1px; | |
| } | |
| &-right { | |
| margin-right: 1px; | |
| } | |
| &-y { | |
| margin-top: 1px; | |
| margin-bottom: 1px; | |
| } | |
| &-top { | |
| margin-top: 1px; | |
| } | |
| &-bottom { | |
| margin-bottom: 1px; | |
| } | |
| } | |
| } | |
| .u-border { | |
| border: 1rem solid rgba(0,0,0,0.05); | |
| &-2 { | |
| border: 2rem solid rgba(0,0,0,0.05); | |
| } | |
| &-x { | |
| border-left: 1rem solid rgba(0,0,0,0.05); | |
| border-right: 1rem solid rgba(0,0,0,0.05); | |
| &-2 { | |
| border-left: 2rem solid rgba(0,0,0,0.05); | |
| border-right: 2rem solid rgba(0,0,0,0.05); | |
| } | |
| } | |
| &-left { | |
| border-left: 1rem solid rgba(0,0,0,0.05); | |
| &-2 { | |
| border-left: 2rem solid rgba(0,0,0,0.05); | |
| } | |
| } | |
| &-right { | |
| border-right: 1rem solid rgba(0,0,0,0.05); | |
| &-2 { | |
| border-right: 2rem solid rgba(0,0,0,0.05); | |
| } | |
| } | |
| &-y { | |
| border-top: 1rem solid rgba(0,0,0,0.05); | |
| border-bottom: 1rem solid rgba(0,0,0,0.05); | |
| &-2 { | |
| border-top: 2rem solid rgba(0,0,0,0.05); | |
| border-bottom: 2rem solid rgba(0,0,0,0.05); | |
| } | |
| } | |
| &-top { | |
| border-top: 1rem solid rgba(0,0,0,0.05); | |
| &-2 { | |
| border-top: 2rem solid rgba(0,0,0,0.05); | |
| } | |
| } | |
| &-bottom { | |
| border-bottom: 1rem solid rgba(0,0,0,0.05); | |
| &-2 { | |
| border-bottom: 2rem solid rgba(0,0,0,0.05); | |
| } | |
| } | |
| &-px { | |
| border: 1px solid rgba(0,0,0,0.05); | |
| &-x { | |
| border-left: 1px solid rgba(0,0,0,0.05); | |
| border-right: 1px solid rgba(0,0,0,0.05); | |
| } | |
| &-left { | |
| border-left: 1px solid rgba(0,0,0,0.05); | |
| } | |
| &-right { | |
| border-right: 1px solid rgba(0,0,0,0.05); | |
| } | |
| &-y { | |
| border-top: 1px solid rgba(0,0,0,0.05); | |
| border-bottom: 1px solid rgba(0,0,0,0.05); | |
| } | |
| &-top { | |
| border-top: 1px solid rgba(0,0,0,0.05); | |
| } | |
| &-bottom { | |
| border-bottom: 1px solid rgba(0,0,0,0.05); | |
| } | |
| } | |
| } | |
| .u-min { | |
| &-square { | |
| min-height: 320px; | |
| min-width: 320px; } | |
| &-height { | |
| min-height: 320px; } | |
| &-width { | |
| min-width: 320px; } | |
| } | |
| .u-max { | |
| &-height { | |
| height: 100%; } | |
| &-width { | |
| width: 100%; } | |
| } | |
| .u-noselecttext { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .u-inline { | |
| display: inline; | |
| &-block { | |
| display: inline-block; | |
| } | |
| } | |
| .u-input { | |
| &--clean { | |
| border: 0; | |
| background-color: transparent; | |
| } | |
| } | |
| .u-font-code { | |
| font-family: "Lucida Console", Monaco, monospace; | |
| } | |
| .u-label--title { | |
| position: relative; | |
| border-left: 1px solid darken(#FFF, 10%); | |
| border-bottom: 1px solid darken(#FFF, 10%); | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| padding-top: 3px; | |
| padding-bottom: 1px; | |
| margin-bottom: 26px; | |
| &::after { | |
| position: absolute; | |
| top: 100%; | |
| left: 1.1rem; | |
| display: block; | |
| font-size: 8px; | |
| line-height: 8px; | |
| content: attr(title) " "; | |
| color: darken(#FFF, 30%); | |
| padding-top: 4px; | |
| } | |
| input, | |
| textarea { | |
| color: darken(#F00, 10%); | |
| &:focus { | |
| outline: 0; | |
| color: black; | |
| font-style: italic; | |
| } | |
| } | |
| textarea { | |
| flex-grow: 1; | |
| } | |
| } | |
| .u-label--help { | |
| color: darken(#FFF, 50%); | |
| &:not(.is-expanded) { | |
| .u-label--description { | |
| display: none; | |
| } | |
| } | |
| &.is-expanded { | |
| .u-label--description { | |
| display: block; | |
| } | |
| } | |
| } | |
| .u-label--button { | |
| cursor: help; | |
| } | |
| .u-label--description { | |
| font-size: 10px; | |
| color: darken(#FFF, 60%); | |
| } | |
| .u-grid { | |
| &__row { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| &__item { | |
| flex: 1; | |
| } | |
| } | |
| .u-pointer { | |
| cursor: pointer; | |
| } | |
| .u-max { | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| @media all and ( min-width: 480px ) { | |
| .u-grid__row--sm { | |
| flex-direction: row; | |
| } | |
| } | |
| @media all and ( min-width: 720px ) { | |
| .u-grid__row--md { | |
| flex-direction: row; | |
| } | |
| } | |
| @media all and ( min-width: 960px ) { | |
| .u-grid__row--lg { | |
| flex-direction: row; | |
| } | |
| } | |
| /* END Utils */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment