// Alignment
.text-center{
text-align: center;
}
.align-vertical{
position: absolute;
transform: translatey(-50%);
top: 50%;
}
.align-horizontal{
position: absolute;
transform: translatex(-50%);
left: 50%;
}
.align-center{
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.flex {
-webkit-display: flex;
display: flex;
//PARENT classes
//.flex__desktop
&-desktop{
@media @breakpoint-sm{
-webkit-display: flex;
display: flex;
}
}
&-mobile {
@media @breakpoint-sm-down{
display: flex;
}
}
//.flex-1
&-1{
//display: -webkit-flex;
//display: flex;
> *{
flex: 1;
min-width: 1px;
}
}
//.flex-children > *
&-children > *{
-webkit-display: flex;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
//.flex-grow > *
&-grow > *{
flex-grow: 1;
}
//.flex-wrap
&-wrap{
flex-wrap: wrap;
}
//.flex-column
&-column{
flex-direction: column;
}
//.flex-column-tablet
&-column-tablet{
@media @breakpoint-md-down {
flex-direction: column;
}
}
//.flex-center
&-center{
justify-content: center;
}
//.flex-supercenter
&-supercenter{
justify-content: center;
align-items: center;
}
//.flex-space-between
&-space-between{
justify-content: space-between;
}
//.flex-space-around
&-space-around{
justify-content: space-between;
}
//.flex-end
&-end{
justify-content: flex-end;
}
//.flex-v-start
&-v-start{
align-items: flex-start;
}
//.flex-v-end
&-v-end{
align-items: flex-end;
}
//.flex-center
&-v-center{
align-items: center;
}
//.flex-v-stretch
&-v-stretch{
align-items: stretch;
}
//.flex-v-baseline
&-v-baseline{
align-items: baseline;
}
//CHILD classes
//.flex-c-grow
&-c-grow{
flex-grow: 1;
}
//.flex-c-center
&-c-center{
align-self: center;
}
//.flex-c-start
&-c-start{
align-self: flex-start;
}
//.flex-c-end
&-c-end{
align-self: flex-end;
}
//.flex-c-stretch
&-c-stretch{
align-self: stretch;
}
//.flex-c-baseline
&-c-baseline{
align-self: baseline; //who knows
}
//.flex-c-children
&-c-children{
align-items: center;
justify-content: center;
text-align: center;
}
&-row {
flex-flow: row wrap;
}
}
.Transition( @property: all, @time:.5s ) {
transition: @property @time;
-webkit-transition: @property @time;
-moz-transition: @property @time;
-ms-transition: @property @time;
}
.TransitionEase( @property, @time ) {
transition: @property @time ease;
-webkit-transition: @property @time ease;
-moz-transition: @property @time ease;
-ms-transition: @property @time ease;
}
.TransformScale( @variable) {
transform: scale( @variable );
-ms-transform: scale( @variable );
-webkit-transform: scale( @variable );
}
.TransformRotate( @variable) {
transform: rotate( @variable );
-ms-transform: rotate( @variable );
-webkit-transform: rotate( @variable );
}
.ColorTransition(@color-1, @color-2){
.TransitionEase(all, 0.5s);
color: @color-2;
&:hover{
color: @color-1;
}
}
.flex-quarters__child {
flex: 1 1 24%;
max-width: 24%;
margin: 0 0.3% 1.5rem;
}
.flex-thirds__child {
flex: 1 1 32%;
max-width: 32%;
margin: 0 0.3% 1.5rem;
}
.flex-halves__child {
flex: 1 1 49%;
max-width: 49%;
margin: 0 0.3% 1.5rem;
}
.flex-none-full-width {
width: 100%;
flex: none;
max-width: 100%;
}
.flex-thirds {
.flex;
flex-wrap: wrap;
li,
article {
.flex-thirds__child;
@media @breakpoint-sm-down {
.flex-none-full-width;
}
}
}
.flex-thirds-and-quarters {
.flex;
flex-wrap: wrap;
li,
article {
@media @breakpoint-sm-down {
.flex-none-full-width;
}
@media @breakpoint-sm {
.flex-thirds__child;
}
@media @breakpoint-md {
.flex-quarters__child;
}
}
}
.flex-quarters {
.flex;
flex-wrap: wrap;
li,
article {
.flex-quarters__child;
@media @breakpoint-sm-down {
.flex-none-full-width;
}
}
}
.flex-halves {
.flex;
flex-wrap: wrap;
li,
article {
.flex-halves__child;
@media @breakpoint-sm-down {
.flex-none-full-width;
}
}
}