diff --git a/private/webpack/WebpackCompiler.js b/private/webpack/WebpackCompiler.js index f9f48da..4cba82e 100644 --- a/private/webpack/WebpackCompiler.js +++ b/private/webpack/WebpackCompiler.js @@ -79,7 +79,8 @@ module.exports = (isDev) => { '@assets': `${base}/public/assets`, '@pages': `${base}/public/pages`, '@common': `${base}/common`, - '@styles': `${base}/public/styles` + '@styles': `${base}/public/styles`, + '@sections': `${base}/public/components/section` } }, diff --git a/public/assets/images/branding/csharp/logo.png b/public/assets/images/branding/csharp/logo.png new file mode 100644 index 0000000..aa30538 Binary files /dev/null and b/public/assets/images/branding/csharp/logo.png differ diff --git a/public/assets/images/branding/discord/logo.png b/public/assets/images/branding/discord/logo.png new file mode 100644 index 0000000..bf008fd Binary files /dev/null and b/public/assets/images/branding/discord/logo.png differ diff --git a/public/assets/images/branding/google-cloud/logo.png b/public/assets/images/branding/google-cloud/logo.png new file mode 100644 index 0000000..28adc62 Binary files /dev/null and b/public/assets/images/branding/google-cloud/logo.png differ diff --git a/public/assets/images/branding/heroku/logo.png b/public/assets/images/branding/heroku/logo.png new file mode 100644 index 0000000..757fa4b Binary files /dev/null and b/public/assets/images/branding/heroku/logo.png differ diff --git a/public/assets/images/branding/java/java-logo.svg b/public/assets/images/branding/java/java-logo.svg index c85098c..28d4a95 100644 --- a/public/assets/images/branding/java/java-logo.svg +++ b/public/assets/images/branding/java/java-logo.svg @@ -1,5 +1,3 @@ - - diff --git a/public/assets/images/branding/java/logo.png b/public/assets/images/branding/java/logo.png new file mode 100644 index 0000000..4bea6f6 Binary files /dev/null and b/public/assets/images/branding/java/logo.png differ diff --git a/public/assets/images/branding/monogame/logo.png b/public/assets/images/branding/monogame/logo.png new file mode 100644 index 0000000..096383a Binary files /dev/null and b/public/assets/images/branding/monogame/logo.png differ diff --git a/public/assets/images/branding/mysql/logo.png b/public/assets/images/branding/mysql/logo.png new file mode 100644 index 0000000..ee7382c Binary files /dev/null and b/public/assets/images/branding/mysql/logo.png differ diff --git a/public/assets/images/branding/neto/logo.png b/public/assets/images/branding/neto/logo.png new file mode 100644 index 0000000..975b267 Binary files /dev/null and b/public/assets/images/branding/neto/logo.png differ diff --git a/public/assets/images/branding/nodejs/logo.png b/public/assets/images/branding/nodejs/logo.png new file mode 100644 index 0000000..180d00e Binary files /dev/null and b/public/assets/images/branding/nodejs/logo.png differ diff --git a/public/assets/images/branding/opengl/logo.png b/public/assets/images/branding/opengl/logo.png new file mode 100644 index 0000000..1d4f24b Binary files /dev/null and b/public/assets/images/branding/opengl/logo.png differ diff --git a/public/assets/images/branding/pgsql/logo.png b/public/assets/images/branding/pgsql/logo.png new file mode 100644 index 0000000..c46b789 Binary files /dev/null and b/public/assets/images/branding/pgsql/logo.png differ diff --git a/public/assets/images/branding/php/logo.png b/public/assets/images/branding/php/logo.png new file mode 100644 index 0000000..33d5ce1 Binary files /dev/null and b/public/assets/images/branding/php/logo.png differ diff --git a/public/assets/images/branding/react/logo.png b/public/assets/images/branding/react/logo.png new file mode 100644 index 0000000..7dc4289 Binary files /dev/null and b/public/assets/images/branding/react/logo.png differ diff --git a/public/assets/images/branding/shopify/logo.png b/public/assets/images/branding/shopify/logo.png new file mode 100644 index 0000000..59cdef8 Binary files /dev/null and b/public/assets/images/branding/shopify/logo.png differ diff --git a/public/assets/images/branding/twitch/logo.png b/public/assets/images/branding/twitch/logo.png new file mode 100644 index 0000000..d0ce948 Binary files /dev/null and b/public/assets/images/branding/twitch/logo.png differ diff --git a/public/assets/images/branding/twitter/logo.png b/public/assets/images/branding/twitter/logo.png new file mode 100644 index 0000000..4f781bd Binary files /dev/null and b/public/assets/images/branding/twitter/logo.png differ diff --git a/public/assets/images/photo.jpg b/public/assets/images/photo.jpg new file mode 100644 index 0000000..6b05361 Binary files /dev/null and b/public/assets/images/photo.jpg differ diff --git a/public/components/App.jsx b/public/components/App.jsx index 601937e..b1cc141 100644 --- a/public/components/App.jsx +++ b/public/components/App.jsx @@ -39,6 +39,7 @@ const AppRoutes = (props) => { import('@pages/home/HomePage') } /> import ('@pages/contact/ContactPage') } /> import('@pages/legal/privacy/PrivacyPolicyPage') } /> + import('@pages/blog/BlogPage') } /> ); }; diff --git a/public/components/App.scss b/public/components/App.scss index 6126a02..598e416 100644 --- a/public/components/App.scss +++ b/public/components/App.scss @@ -2,11 +2,8 @@ * App * App styles for the app container. * - * Dependencies: - * styles/tools/flex.scss - * * Version: - * 1.0.0 - 2018/05/03 + * 1.1.0 - 2018/10/30 */ @import '~@styles/global'; diff --git a/public/components/footer/Footer.scss b/public/components/footer/Footer.scss index 27ae9fb..5cb60ec 100644 --- a/public/components/footer/Footer.scss +++ b/public/components/footer/Footer.scss @@ -5,11 +5,10 @@ * Dependencies: * styles/settings/colors.scss * styles/settings/typography.scss - * styles/tools/flex.scss * styles/tools/_box-shadow.scss * * Version: - * 1.0.0 - 2018/05/16 + * 1.1.0 - 2018/10/30 */ @import '~@styles/global'; diff --git a/public/components/nav/navbar/Navbar.jsx b/public/components/nav/navbar/Navbar.jsx index 202537c..be478c2 100644 --- a/public/components/nav/navbar/Navbar.jsx +++ b/public/components/nav/navbar/Navbar.jsx @@ -66,6 +66,7 @@ const Navbar = props => { {/* Desktop / Tablet Screen Links */} + {/* Hamburger Menu for smaller screens */} diff --git a/public/components/nav/navbar/Navbar.scss b/public/components/nav/navbar/Navbar.scss index 31de400..79b1587 100644 --- a/public/components/nav/navbar/Navbar.scss +++ b/public/components/nav/navbar/Navbar.scss @@ -6,7 +6,6 @@ * styles/settings/colors.scss * styles/settings/typography.scss * styles/settings/z.scss - * styles/tools/flex.scss * styles/tool/list.scss * * Version: diff --git a/public/components/section/blog/article/FeaturedArticleSection.jsx b/public/components/section/blog/article/FeaturedArticleSection.jsx new file mode 100644 index 0000000..3e25c9e --- /dev/null +++ b/public/components/section/blog/article/FeaturedArticleSection.jsx @@ -0,0 +1,53 @@ +// Copyright (c) 2018 Dominic Masters +// +// MIT License +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +import React from 'react'; + + +import Section from '@components/section/Section'; + +import Image from '@objects/image/Image'; +import ContentBox from '@objects/content/box/ContentBox'; +import { Title, Paragraph } from '@objects/typography/Typography'; + +import Styles from './FeaturedArticleSection.scss'; + +export default props => { + let { article } = props; + + return ( +
+ + + { article.title } + + + + { article.shortDescription } + +
+ ); +}; diff --git a/public/components/section/blog/article/FeaturedArticleSection.scss b/public/components/section/blog/article/FeaturedArticleSection.scss new file mode 100644 index 0000000..676a1c3 --- /dev/null +++ b/public/components/section/blog/article/FeaturedArticleSection.scss @@ -0,0 +1,43 @@ +/* + * Featured Blog Section + * Section for featuring a large blog item. + * + * Version: + * 1.0.0 - 2018/10/30 + */ +@import '~@styles/global'; + +$c-featured-article--background: rgba(0,0,0,0.5); +$c-featured-article--color: white; +$c-featured-article--padding: 15px; + +.c-featured-article { + position: relative; + + &__image { + display: block; + width: 100%; + min-height: 75vh; + object-fit: cover; + } + + &__title, + &__description { + position: absolute; + margin: 0; + padding: 0.25em; + color: $c-featured-article--color; + background: $c-featured-article--background; + } + + &__title { + top: 2.5em; + left: 0.25em; + } + + &__description { + bottom: 0.5em; + right: 0.5em; + max-width: 250px; + } +} diff --git a/public/components/section/image/ImageSection.jsx b/public/components/section/image/ImageSection.jsx index 260b661..648a475 100644 --- a/public/components/section/image/ImageSection.jsx +++ b/public/components/section/image/ImageSection.jsx @@ -32,13 +32,14 @@ export default props => { let sectionProps = {...props}; let imageProps = {...props}; - let { image, background, children, className } = props; + let { image, background, children, className, imageClassName } = props; - ["children", "background", "loadable"].forEach(e => delete sectionProps[e]); - ["image", "full", "children", "background"].forEach(e => delete imageProps[e]); + ["children", "background", "loadable", "imageClassName"].forEach(e => delete sectionProps[e]); + ["image", "full", "children", "background", "imageClassName"].forEach(e => delete imageProps[e]); let clazz = "c-image-section"; - image = image || ; + let imageClazz = `c-image-section__image ${imageClassName||""}`; + image = image || ; if(className) clazz += ` ${className}`; if(background) clazz += " is-background"; diff --git a/public/components/section/layout/SplitSection.scss b/public/components/section/layout/SplitSection.scss index 1395b01..decb7d1 100644 --- a/public/components/section/layout/SplitSection.scss +++ b/public/components/section/layout/SplitSection.scss @@ -2,9 +2,6 @@ * Split section * Simple Section that is split into multiple columns * - * Dependencies: - * styles/tools/_flex.scss - * * Version: * 1.0.0 - 2018/05/28 */ diff --git a/public/language/Language.jsx b/public/language/Language.jsx index 09d5035..6e911bd 100644 --- a/public/language/Language.jsx +++ b/public/language/Language.jsx @@ -23,7 +23,7 @@ import React from 'react'; import { connect } from 'react-redux'; -import LanguageActions from './../actions/LanguageActions'; +import * as LanguageActions from './../actions/LanguageActions'; import enAU from './en-AU.jsx'; diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx index a5cf521..27f6f8b 100644 --- a/public/language/en-AU.jsx +++ b/public/language/en-AU.jsx @@ -12,6 +12,7 @@ export default { "navbar": { "home": "Home", + "blog": "Blog", "contact": "Contact" }, @@ -162,7 +163,7 @@ export default {

); } }, - "footer": "Want me for your next project?", + "footer": "Want to get in touch?", "footerButton": "Contact Me" } }, @@ -213,6 +214,10 @@ export default { "loading": { "title": "Please Wait..." + }, + + "blog": { + "title": "Blog" } }, diff --git a/public/objects/content/box/FloatingContentBox.jsx b/public/objects/content/box/FloatingContentBox.jsx index cdb51d6..a15321d 100644 --- a/public/objects/content/box/FloatingContentBox.jsx +++ b/public/objects/content/box/FloatingContentBox.jsx @@ -23,10 +23,10 @@ import React from 'react'; -import Styles from './FloatingContentBox.scss'; - import ContentBox from './ContentBox'; +import Styles from './FloatingContentBox.scss'; + export default (props) => { let newProps = {...props}; let { position, size, children, className } = props; diff --git a/public/objects/window/_window95.scss b/public/objects/window/_window95.scss index c4a7516..71b74ba 100644 --- a/public/objects/window/_window95.scss +++ b/public/objects/window/_window95.scss @@ -218,8 +218,8 @@ $o-window--one-third: #{"33.333333333%"};//I needed greater accuracy than SCSS p } &__address-bar { - @extend %t-flexbox; - @include t-align-items(center); + display: flex; + align-items: center; &-title { display: block; @@ -227,7 +227,7 @@ $o-window--one-third: #{"33.333333333%"};//I needed greater accuracy than SCSS p } &-frame { - @include t-flex-basis(100%); + flex-basis: 100%; } } diff --git a/public/pages/blog/BlogPage.jsx b/public/pages/blog/BlogPage.jsx new file mode 100644 index 0000000..12d1a4a --- /dev/null +++ b/public/pages/blog/BlogPage.jsx @@ -0,0 +1,46 @@ +// Copyright (c) 2018 Dominic Masters +// +// MIT License +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +import React from 'react'; + +import { withLanguage } from '@public/language/Language'; +import Page, { PageBoundary } from '@components/page/Page'; + +import FeaturedArticleSection from '@sections/blog/article/FeaturedArticleSection'; + +const TestBlogData = { + handle: "test-blog", + title: "Test Blog Article", + shortDescription: "Read how the latest lorem ipsum is dolor sit amet for business owners." +}; + +export default withLanguage(props => { + let { lang } = props; + + return ( + + {/* First (Featured) Blog */} + + + ); +}); diff --git a/public/pages/blog/BlogPage.scss b/public/pages/blog/BlogPage.scss new file mode 100644 index 0000000..ccc7337 --- /dev/null +++ b/public/pages/blog/BlogPage.scss @@ -0,0 +1,7 @@ +/* + * Blog Page + * Styles for the Blog Landing Page + * + * Version: + * 1.0.0 - 2018/10/30 + */ diff --git a/public/pages/home/HomePage.jsx b/public/pages/home/HomePage.jsx index ce48f0b..9b7161d 100644 --- a/public/pages/home/HomePage.jsx +++ b/public/pages/home/HomePage.jsx @@ -22,8 +22,10 @@ // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import Page from '@components/page/Page'; +import Styles from './HomePage.scss'; + +import Page from '@components/page/Page'; import BannerSection from './sections/BannerSection'; import PromoVideoSection from './sections/PromoVideoSection'; import ProgrammingSection from './sections/ProgrammingSection'; @@ -38,10 +40,6 @@ export default props => { { /* Banner */ } - { /* Promo Video - - */ } - {/* Programming */} diff --git a/public/styles/pages/_home-page.scss b/public/pages/home/HomePage.scss similarity index 82% rename from public/styles/pages/_home-page.scss rename to public/pages/home/HomePage.scss index c1691c6..35aa945 100644 --- a/public/styles/pages/_home-page.scss +++ b/public/pages/home/HomePage.scss @@ -4,17 +4,25 @@ * * Dependencies: * styles/settings/responsive.scss - * styles/tools/_flex.scss * styles/tools/_responsive.scss * * Version: * 1.1.0 - 2018/08/14 */ +@import '~@styles/global'; + .p-home-page { + &__banner { + &-image { + object-fit: cover; + + height: 80vh; + } + } + &__banner, &__promo { position: relative; - //@extend %t-dp--shadow-3d; } &__promo { @@ -22,15 +30,15 @@ background-size: 150% auto; &-video { - background-image: url($s-asset--directory+'images/patterns/florida.svg'); + background-image: url('~@assets/images/patterns/florida.svg'); } } &__brands { - @extend %t-flexbox; - @include t-align-items(stretch); - @include t-justify-content(space-between); - @include t-flex-wrap(wrap); + display: flex; + align-items: stretch; + justify-content: space-between; + flex-wrap: wrap; &-title { } diff --git a/public/pages/home/sections/BannerSection.jsx b/public/pages/home/sections/BannerSection.jsx index 1c6b0fa..543992f 100644 --- a/public/pages/home/sections/BannerSection.jsx +++ b/public/pages/home/sections/BannerSection.jsx @@ -27,7 +27,6 @@ import { PageBoundary } from '@components/page/Page'; import { ImageSection } from '@components/section/Section'; import FloatingContentBox from '@objects/content/box/FloatingContentBox'; import { Title, Subtitle } from '@objects/typography/Typography'; -import ElementScrollFader from '@objects/animation/fade/ElementScrollFader'; export default withLanguage(props => { @@ -36,6 +35,7 @@ export default withLanguage(props => { return ( { > - - { lang.pages.home.banner.title } - { lang.pages.home.banner.subtitle } - + { lang.pages.home.banner.title } + { lang.pages.home.banner.subtitle } diff --git a/public/pages/home/sections/PlatformsSection.jsx b/public/pages/home/sections/PlatformsSection.jsx index 4369b4b..ab7560b 100644 --- a/public/pages/home/sections/PlatformsSection.jsx +++ b/public/pages/home/sections/PlatformsSection.jsx @@ -32,13 +32,14 @@ import Video from '@objects/video/Video'; import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography'; import ElementScrollFader from '@objects/animation/fade/ElementScrollFader'; -const Platform = (props) => { +const Platform = props => { + let { src, to, title } = props; let children; - let image = ; + let image = ; if(props.to) { children = ( - + { image } ); @@ -47,13 +48,7 @@ const Platform = (props) => { } //Wrap in a div and a fader. Div is to help with random transitions on resizing. - return ( -
- - {children} - -
- ); + return
; }; export default withLanguage(props => { @@ -66,142 +61,127 @@ export default withLanguage(props => { background > - + { lang.pages.home.platforms.heading } -
+ {/* Shopify */} + {/* React */} {/* MonoGame */} {/* PGSQL */} {/* NodeJS */} {/* C# */} {/* PHP */} {/* Java */} {/* neto */} {/* MySQL */} {/* Heroku */} {/* OpenGL */} {/* Discord */} {/* Twitch */} {/* Twitter */} {/* Google Cloud */} -
+ - + { lang.pages.home.platforms.footer } diff --git a/public/styles/common.scss b/public/styles/common.scss index a74c65a..6289dbb 100644 --- a/public/styles/common.scss +++ b/public/styles/common.scss @@ -47,7 +47,6 @@ //TEMP @import './objects/_page-transition.scss'; @import './pages/_contact-page.scss'; -@import './pages/_home-page.scss'; @import './pages/_privacy-policy-page.scss'; //Utilities diff --git a/public/styles/global.scss b/public/styles/global.scss index 1bd3108..d207e37 100644 --- a/public/styles/global.scss +++ b/public/styles/global.scss @@ -40,7 +40,6 @@ @import './settings/z.scss'; //Tools -@import './tools/flex.scss'; @import './tools/list.scss'; @import './tools/prefix.scss'; diff --git a/public/styles/tools/flex.scss b/public/styles/tools/flex.scss deleted file mode 100644 index 196053c..0000000 --- a/public/styles/tools/flex.scss +++ /dev/null @@ -1,167 +0,0 @@ -/* - * Flex - * Used to simplify the flexbox and it's styles - * - * Many of these mixins were taken from mastastealth/sass-flex-mixin: - * https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss - * - * Version: - * 1.0.1 - 2018/06/27 - */ - -//Flex/Flexbox -@mixin t-flexbox { - display: -webkit-box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; - display: flex; -} - -%t-flexbox { - @include t-flexbox; -} - -//Inline Flex/Inline Flexbox -@mixin t-inline-flex { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -moz-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -%t-inline-flex { - @include t-inline-flex; -} - -//Align-items -@mixin t-align-items($value: stretch) { - @if $value == flex-start { - -webkit-box-align: start; - -ms-flex-align: start; - } @else if $value == flex-end { - -webkit-box-align: end; - -ms-flex-align: end; - } @else { - -webkit-box-align: $value; - -ms-flex-align: $value; - } - - -webkit-align-items: $value; - -moz-align-items: $value; - align-items: $value; -} - - -//Align-self -@mixin t-align-self($value: auto) { - // No Webkit Box Fallback. - -webkit-align-self: $value; - -moz-align-self: $value; - @if $value == flex-start { - -ms-flex-item-align: start; - } @else if $value == flex-end { - -ms-flex-item-align: end; - } @else { - -ms-flex-item-align: $value; - } - align-self: $value; -} - -//Align content -@mixin t-align-content($value: stretch) { - // No Webkit Box Fallback. - -webkit-align-content: $value; - -moz-align-content: $value; - @if $value == flex-start { - -ms-flex-line-pack: start; - } @else if $value == flex-end { - -ms-flex-line-pack: end; - } @else { - -ms-flex-line-pack: $value; - } - align-content: $value; -} - -//Justify Content -@mixin t-justify-content($value: flex-start) { - @if $value == flex-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - } @else if $value == flex-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - } @else if $value == space-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - } @else if $value == space-around { - -ms-flex-pack: distribute; - } @else { - -webkit-box-pack: $value; - -ms-flex-pack: $value; - } - -webkit-justify-content: $value; - -moz-justify-content: $value; - justify-content: $value; -} - -//Wrapping -@mixin t-flex-wrap($value: nowrap) { - // No Webkit Box fallback. - -webkit-flex-wrap: $value; - -moz-flex-wrap: $value; - @if $value == nowrap { - -ms-flex-wrap: none; - } @else { - -ms-flex-wrap: $value; - } - flex-wrap: $value; -} - -//Flowing -@mixin t-flex-flow($values: (row nowrap)) { - // No Webkit Box fallback. - -webkit-flex-flow: $values; - -moz-flex-flow: $values; - -ms-flex-flow: $values; - flex-flow: $values; -} - -//t-flex-direction -@mixin t-flex-direction($value: row) { - @if $value == row-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: horizontal; - } @else if $value == column { - -webkit-box-direction: normal; - -webkit-box-orient: vertical; - } @else if $value == column-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: vertical; - } @else { - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - } - -webkit-flex-direction: $value; - -moz-flex-direction: $value; - -ms-flex-direction: $value; - flex-direction: $value; -} - -//Flex Grow -@mixin t-flex-grow($int: 0) { - -webkit-box-flex: $int; - -webkit-flex-grow: $int; - -moz-flex-grow: $int; - -ms-flex-positive: $int; - flex-grow: $int; -} - -//Flex basis -@mixin t-flex-basis($value: auto) { - -webkit-flex-basis: $value; - -moz-flex-basis: $value; - -ms-flex-preferred-size: $value; - flex-basis: $value; -}