diff --git a/assets/sass/utils/_a11y.scss b/assets/sass/utils/_a11y.scss index d985864..c626587 100644 --- a/assets/sass/utils/_a11y.scss +++ b/assets/sass/utils/_a11y.scss @@ -1,7 +1,7 @@ .sr-only { - font-size: 0; - height: 0; - overflow: hidden; - position: absolute; - width: 0; + font-size: 0; + height: 0; + overflow: hidden; + position: absolute; + width: 0; } diff --git a/assets/sass/utils/_helpers.scss b/assets/sass/utils/_helpers.scss index 7e2365e..a518130 100644 --- a/assets/sass/utils/_helpers.scss +++ b/assets/sass/utils/_helpers.scss @@ -1,27 +1,77 @@ -.alignleft { - float: left; +/** + * Clearing and floating + */ + +.float-left { + float: left; + img & { + margin-right: $base-spacing-unit; + } } -img.alignleft { - margin-right: $base-spacing-unit; + +.float-right { + float: right; + img & { + margin-left : $base-spacing-unit; + } } -.alignright { - float: right; + +.float-center { + display: block; + margin: { + left: auto; + right: auto; + } + img & { + margin-bottom: $base-spacing-unit; + } } -img.alignright { - margin-left : $base-spacing-unit; +.clearfix { + @extend clearfix; } -.aligncenter { - display: block; - margin: { - left: auto; - right: auto; - } + + +/** + * Text aligments + */ + +.align-left { + text-align: left; } -img.aligncenter { - margin-bottom: $base-spacing-unit; +.align-right { + text-align: right; +} + +.align-center { + text-align: right; +} + + +/** + * Elements visibility + */ + +.visible-mobile { + display: none !important; + @include resp-max($breakpoint-sm) { + display: block !important; + } +} + +.visible-tablet { + display: none !important; + @include resp-max($breakpoint-md) { + display: block !important; + } +} + +.visible-desktop { + @include resp-max($breakpoint-md) { + display: none !important; + } } \ No newline at end of file diff --git a/styles.css b/styles.css index f4ee58a..b40d178 100755 --- a/styles.css +++ b/styles.css @@ -374,25 +374,56 @@ table { .hidden-xs { display: none !important; } } -.alignleft { +/** + * Clearing and floating + */ +.float-left { float: left; } + img .float-left { + margin-right: 24px; } -img.alignleft { - margin-right: 24px; } - -.alignright { +.float-right { float: right; } + img .float-right { + margin-left: 24px; } -img.alignright { - margin-left: 24px; } - -.aligncenter { +.float-center { display: block; margin-left: auto; margin-right: auto; } + img .float-center { + margin-bottom: 24px; } -img.aligncenter { - margin-bottom: 24px; } +/** + * Text aligments + */ +.align-left { + text-align: left; } + +.align-right { + text-align: right; } + +.align-center { + text-align: right; } + +/** + * Elements visibility + */ +.visible-mobile { + display: none !important; } + @media screen and (max-width: 767px) { + .visible-mobile { + display: block !important; } } + +.visible-tablet { + display: none !important; } + @media screen and (max-width: 992px) { + .visible-tablet { + display: block !important; } } + +@media screen and (max-width: 992px) { + .visible-desktop { + display: none !important; } } body { color: #444;