diff --git a/.sass-cache/f66cb7c2b3d0411400756015aa90211aad813795/aria-tabs.scssc b/.sass-cache/f66cb7c2b3d0411400756015aa90211aad813795/aria-tabs.scssc index ed51078..c907750 100644 Binary files a/.sass-cache/f66cb7c2b3d0411400756015aa90211aad813795/aria-tabs.scssc and b/.sass-cache/f66cb7c2b3d0411400756015aa90211aad813795/aria-tabs.scssc differ diff --git a/README.md b/README.md index ff2ccc2..61edfd5 100755 --- a/README.md +++ b/README.md @@ -2,10 +2,9 @@ jQuery plugin for **accessible** tab-widgets. **WAI ARIA 1.1** compliant. +* User friendly and accessible * Only 3KB (minified). -* Fully compatible with [**t** css-framework](https://github.com/DavideTriso/t-css-framework) * Runs in strict mode. -* SASS/SCSS files for quick UI customisations. ## Dependencies @@ -121,7 +120,7 @@ Methods can be called on an initialised tabs widget with following syntax: ```javascript $('#my-tab-widget').ariaTabs('methodName', methodArgument); ``` -The plugin supports foloowing methods: select. +The plugin supports foloowing methods: toggle. ### Select @@ -180,10 +179,14 @@ $(window).on('ariaTabs.select', function(event, tabsGroup, index){ }); ``` -## css + +## Using CSS transitions + +By default the plugin is configured to use the jQuery methods `fadeIn()`, `fadeOut()` to show/hide tab-panels. Setting the option **cssTransitions** to 'true' will disable the JS animations. This will make possible to implement the transitions with css. In fact, the plugin toggles the classes passed along with the options **btnSelectedClass** and **panelSelectedClass** every time the widget's status is changed. + ## LICENSE -This project is licensed under the terms of the **MIT license**. +**Aria tabs** is licensed under the terms of the **MIT license**. See [LICENSE.md](LICENSE.md) for detailed informations. \ No newline at end of file diff --git a/aria-tabs.css b/aria-tabs.css index 56a4270..2b2c5c6 100644 --- a/aria-tabs.css +++ b/aria-tabs.css @@ -1,81 +1,43 @@ -.tab-group__tab-btn { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } - -.tab-group__tab-btn { - border: none; } - -.tab-group__tab-ul_justify { - -webkit-display: flex; - -ms-display: flex; - display: -webkit-flex; - display: flex; } +.tab-group { + padding: 1rem 0; + font-family: sans-serif; } -.tab-group__tab-ul_justify { - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; } +.tab-group__tab-ul { + margin: 0; + list-style: none; + padding: 0; + height: 2.8rem; } .tab-group__tab-li { float: left; } -.tab-group__tab-ul { - list-style: none; } - -.tab-group__tab-ul { - margin: 0; } - -.tab-group__tab-ul { - padding: 0; } - -.tab-group__tab-btn, .tab-group__tab-ul_justify > .tab-group__tab-li { - width: 100%; } - -.tab-group__tab-ul:before, .tab-group__tab-ul:after { - display: table; - content: ""; - line-height: 0; } -.tab-group__tab-ul:after { - clear: both; } - -/* -@mixins align-self ($value) { - -webkit-align-self: $value; - align-self: $value; -}*/ -.tab-group { - padding: 1rem 0; } - -.tab-group__tab-nav { - background-color: #b51c1c; - border-left: 0.01rem solid #b51c1c; - border-right: 0.01rem solid #b51c1c; - border-top: 0.01rem solid #b51c1c; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; } - -.tab-group__tab-li:first-child > .tab-group__tab-btn { - border-top-left-radius: 0.5rem; } -.tab-group__tab-li:last-child > .tab-group__tab-btn { - border-top-right-radius: 0.5rem; } - .tab-group__tab-btn { - background-color: #b51c1c; + background-color: #393939; + border: 0.01rem solid #d8d8d8; color: #fff; - padding: 0.5rem 1.5rem; } + margin: 0; + padding: 1rem 4rem; + width: 100%; } .tab-group__tabpanel { - border-bottom: 0.01rem solid #b51c1c; - border-left: 0.01rem solid #b51c1c; - border-right: 0.01rem solid #b51c1c; - border-bottom-left-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; } + border-width: 0.01rem; + border-color: #393939; + border-style: solid; } .tab-group__tab-content { - padding: 0.5rem; } + padding: 3rem 2rem; } .tab-group__tab-btn_selected { - background-color: #ffffff; - color: #690e0e; } + background-color: #d8d8d8; + color: #000; } + +.tab-group__tab-ul_justify { + align-items: stretch; + display: flex; + flex-wrap: nowrap; } + .tab-group__tab-ul_justify .tab-group__tab-li { + width: 100%; } + .tab-group__tab-ul_justify .tab-group__tab-btn { + height: 100%; } /*# sourceMappingURL=aria-tabs.css.map */ diff --git a/aria-tabs.min.css b/aria-tabs.min.css index eafc173..a1fec7d 100644 --- a/aria-tabs.min.css +++ b/aria-tabs.min.css @@ -1 +1 @@ -.tab-group__tab-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none}.tab-group__tab-li:first-child>.tab-group__tab-btn,.tab-group__tab-nav{border-top-left-radius:.5rem}.tab-group__tab-li:last-child>.tab-group__tab-btn,.tab-group__tab-nav{border-top-right-radius:.5rem}.tab-group__tab-nav,.tab-group__tabpanel{border-left:.01rem solid #b51c1c;border-right:.01rem solid #b51c1c}.tab-group__tab-ul_justify{-webkit-display:flex;-ms-display:flex;display:-webkit-flex;display:flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap}.tab-group__tab-li{float:left}.tab-group__tab-ul{list-style:none;margin:0;padding:0}.tab-group__tab-btn,.tab-group__tab-ul_justify>.tab-group__tab-li{width:100%}.tab-group__tab-ul:after,.tab-group__tab-ul:before{display:table;content:"";line-height:0}.tab-group__tab-ul:after{clear:both}.tab-group{padding:1rem 0}.tab-group__tab-nav{background-color:#b51c1c;border-top:.01rem solid #b51c1c}.tab-group__tab-btn{background-color:#b51c1c;color:#fff;padding:.5rem 1.5rem}.tab-group__tabpanel{border-bottom:.01rem solid #b51c1c;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.tab-group__tab-content{padding:.5rem}.tab-group__tab-btn_selected{background-color:#fff;color:#690e0e} \ No newline at end of file +.tab-group{padding:1rem 0;font-family:sans-serif}.tab-group__tab-ul{margin:0;list-style:none;padding:0;height:2.8rem}.tab-group__tab-li{float:left}.tab-group__tab-btn{background-color:#393939;border:.01rem solid #d8d8d8;color:#fff;margin:0;padding:1rem 4rem;width:100%}.tab-group__tabpanel{border-width:.01rem;border-color:#393939;border-style:solid}.tab-group__tab-content{padding:3rem 2rem}.tab-group__tab-btn_selected{background-color:#d8d8d8;color:#000}.tab-group__tab-ul_justify{align-items:stretch;display:flex;flex-wrap:nowrap}.tab-group__tab-ul_justify .tab-group__tab-li{width:100%}.tab-group__tab-ul_justify .tab-group__tab-btn{height:100%} \ No newline at end of file diff --git a/demo/aria-tabs.css b/demo/aria-tabs.css index 47e904f..2b2c5c6 100755 --- a/demo/aria-tabs.css +++ b/demo/aria-tabs.css @@ -1,88 +1,43 @@ -.tab-group__tab-ul_justify { - -webkit-align-items: stretch; - align-items: stretch; } - -.tab-group__tab-btn { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } - -.tab-group__tab-btn { - border: none; } - -.tab-group__tab-ul_justify { - -webkit-display: flex; - -ms-display: flex; - display: -webkit-flex; - display: flex; } +.tab-group { + padding: 1rem 0; + font-family: sans-serif; } -.tab-group__tab-ul_justify { - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; } +.tab-group__tab-ul { + margin: 0; + list-style: none; + padding: 0; + height: 2.8rem; } .tab-group__tab-li { float: left; } -.tab-group__tab-ul_justify .tab-group__tab-btn { - height: 100%; } - -.tab-group__tab-ul { - list-style: none; } - -.tab-group__tab-ul { - margin: 0; } - -.tab-group__tab-ul { - padding: 0; } - -.tab-group__tab-btn, .tab-group__tab-ul_justify .tab-group__tab-li { - width: 100%; } - -.tab-group__tab-ul:before, .tab-group__tab-ul:after { - display: table; - content: ""; - line-height: 0; } -.tab-group__tab-ul:after { - clear: both; } - -/* -@mixins align-self ($value) { - -webkit-align-self: $value; - align-self: $value; -}*/ -.tab-group { - padding: 1rem 0; } - -.tab-group__tab-nav { - background-color: #b51c1c; - border-left: 0.01rem solid #b51c1c; - border-right: 0.01rem solid #b51c1c; - border-top: 0.01rem solid #b51c1c; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; } - -.tab-group__tab-li:first-child > .tab-group__tab-btn { - border-top-left-radius: 0.5rem; } -.tab-group__tab-li:last-child > .tab-group__tab-btn { - border-top-right-radius: 0.5rem; } - .tab-group__tab-btn { - background-color: #b51c1c; + background-color: #393939; + border: 0.01rem solid #d8d8d8; color: #fff; - padding: 0.5rem 1.5rem; } + margin: 0; + padding: 1rem 4rem; + width: 100%; } .tab-group__tabpanel { - border-bottom: 0.01rem solid #b51c1c; - border-left: 0.01rem solid #b51c1c; - border-right: 0.01rem solid #b51c1c; - border-bottom-left-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; } + border-width: 0.01rem; + border-color: #393939; + border-style: solid; } .tab-group__tab-content { - padding: 0.5rem; } + padding: 3rem 2rem; } .tab-group__tab-btn_selected { - background-color: #ffffff; - color: #690e0e; } + background-color: #d8d8d8; + color: #000; } + +.tab-group__tab-ul_justify { + align-items: stretch; + display: flex; + flex-wrap: nowrap; } + .tab-group__tab-ul_justify .tab-group__tab-li { + width: 100%; } + .tab-group__tab-ul_justify .tab-group__tab-btn { + height: 100%; } /*# sourceMappingURL=aria-tabs.css.map */ diff --git a/demo/aria-tabs.css.map b/demo/aria-tabs.css.map index 24bd377..e7cdc12 100755 --- a/demo/aria-tabs.css.map +++ b/demo/aria-tabs.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "AAgCA,0BAAqB;EACnB,mBAAmB,EAAE,OAAO;EAC5B,WAAW,EAAE,OAAO;;AA0DtB,mBAAiB;EACf,kBAAkB,EAAE,IAAI;EACxB,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,IAAI;;AA6FlB,mBAAa;EACX,MAAM,EAAE,IAAI;;AAmhBd,0BAAc;EACZ,eAAe,EAAE,IAAI;EACrB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,IAAI;;AAiGf,0BAAkB;EAChB,iBAAiB,EAAE,MAAM;EACzB,SAAS,EAAE,MAAM;;AAanB,kBAAY;EACV,KAAK,EAAE,IAAI;;AAiEb,8CAAY;EACV,MAAM,EAAE,IAAI;;AAkCd,kBAAiB;EACf,UAAU,EAAE,IAAI;;AAoHlB,kBAAU;EACR,MAAM,EAAE,CAAC;;AA4IX,kBAAW;EACT,OAAO,EAAE,CAAC;;AA8PZ,kEAAW;EACT,KAAK,EAAE,IAAI;;AAqDX,mDACQ;EACN,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,EAAE;EACX,WAAW,EAAE,CAAC;AAEhB,wBAAQ;EACN,KAAK,EAAE,IAAI;;AC99Cf;;;;GAIG;ACoBH,UAAW;EACT,OAAO,EAxBoB,MAAM;;AA6BnC,mBAAoB;EAClB,gBAAgB,EA5Ba,OAAO;EA8BlC,WAAW,EA7BU,qBAAqB;EA8B1C,YAAY,EA9BS,qBAAqB;EA+B1C,UAAU,EA/BW,qBAAqB;EAkC1C,sBAAsB,EAjCK,MAAM;EAkCjC,uBAAuB,EAlCI,MAAM;;AA+C/B,oDAAsB;EACpB,sBAAsB,EAhDC,MAAM;AAsD/B,mDAAsB;EACpB,uBAAuB,EAvDA,MAAM;;AA4DrC,mBAAoB;EAElB,gBAAgB,EA3Da,OAAO;EA6DpC,KAAK,EA5Dc,IAAI;EA6DvB,OAAO,EA/Dc,aAAa;;AAqEpC,oBAAqB;EAEjB,aAAa,EAhEU,qBAAqB;EAiE5C,WAAW,EAjEY,qBAAqB;EAkE5C,YAAY,EAlEW,qBAAqB;EAqE5C,yBAAyB,EApEI,MAAM;EAqEnC,0BAA0B,EArEG,MAAM;;AAwEvC,uBAAwB;EACtB,OAAO,EAvEkB,MAAM;;AA4EjC,4BAA6B;EAC3B,gBAAgB,EAnFqB,OAAO;EAoF5C,KAAK,EAnFsB,OAAO", -"sources": ["../scss/01_placeholders/_placeholders-all.scss","../scss/02_css-mixins/_css-mixins.scss","../scss/aria-tabs.scss"], +"mappings": "AAGA,UAAW;EACT,OAAO,EAAE,MAAM;EACf,WAAW,EAAE,UAAU;;AAKzB,kBAAmB;EACjB,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,MAAM;;AAEhB,kBAAmB;EACjB,KAAK,EAAE,IAAI;;AAEb,mBAAoB;EAClB,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,qBAAqB;EAC7B,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE,IAAI;;AAKb,oBAAqB;EACnB,YAAY,EAAE,OAAO;EACrB,YAAY,EAAE,OAAO;EACrB,YAAY,EAAE,KAAK;;AAErB,uBAAwB;EACtB,OAAO,EAAE,SAAS;;AAKpB,4BAA6B;EAC3B,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,IAAI;;AAMb,0BAA2B;EACzB,WAAW,EAAE,OAAO;EACpB,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,MAAM;EACjB,6CAAmB;IACjB,KAAK,EAAE,IAAI;EAEb,8CAAoB;IAClB,MAAM,EAAE,IAAI", +"sources": ["../scss/aria-tabs.scss"], "names": [], "file": "aria-tabs.css" } \ No newline at end of file diff --git a/scss/01_placeholders/_import.scss b/scss/01_placeholders/_import.scss deleted file mode 100755 index c306f8e..0000000 --- a/scss/01_placeholders/_import.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'placeholders-all'; -@import 'placeholders-tablet'; -@import 'placeholders-desktop'; \ No newline at end of file diff --git a/scss/01_placeholders/_placeholders-all.scss b/scss/01_placeholders/_placeholders-all.scss deleted file mode 100755 index bb1b18b..0000000 --- a/scss/01_placeholders/_placeholders-all.scss +++ /dev/null @@ -1,1514 +0,0 @@ -%align-content-stretch { - -webkit-align-content: stretch; - align-content: stretch; -} -%align-content-center { - -webkit-align-content: center; - align-content: center; -} -%align-content-flex-start { - -webkit-align-content: flex-start; - align-content: flex-start; -} -%align-content-flex-end { - -webkit-align-content: flex-end; - align-content: flex-end; -} -%align-content-space-between { - -webkit-align-content: space-between; - align-content: space-between; -} -%align-content-space-around { - -webkit-align-content: space-around; - align-content: space-around; -} -%align-content-initial { - -webkit-align-content: initial; - align-content: initial; -} -%align-content-inherit { - -webkit-align-content: inherit; - align-content: inherit; -} -%align-items-stretch { - -webkit-align-items: stretch; - align-items: stretch; -} -%align-items-center { - -webkit-align-content: center; - align-items: center; -} -%align-items-flex-start { - -webkit-align-items: flex-start; - align-items: flex-start; -} -%align-items-flex-end { - -webkit-align-items: flex-end; - align-items: flex-end; -} -%align-items-baseline { - -webkit-align-items: baseline; - align-items: baseline; -} -%align-items-initial { - -webkit-align-items: initial; - align-items: initial; -} -%align-items-inherit { - -webkit-align-items: inherit; - align-items: inherit; -} -%align-self-auto { - -webkit-align-self: auto; - align-self: auto; -} -%align-self-stretch { - -webkit-align-self: stretch; - align-self: stretch; -} -%align-self-center { - -webkit-align-self: center; - align-self: center; -} -%align-self-flex-start { - -webkit-align-self: flex-start; - align-self: flex-start; -} -%align-self-flex-end { - -webkit-align-self: flex-end; - align-self: flex-end; -} -%align-self-baseline { - -webkit-align-self: baseline; - align-self: baseline; -} -%align-self-initial { - -webkit-align-self: initial; - align-self: initial; -} -%align-self-inherit { - -webkit-align-self: inherit; - align-self: inherit; -} -%appearance-none { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} -%backface-visibility-visible { - -webkit-backface-visibility: visible; - -moz-backface-visibility: visible; - backface-visibility: visible; -} -%backface-visibility-hidden { - -webkit-backface-visibility: hidden; - -mox-backface-visibility: hidden; - backface-visibility: hidden; -} -%background-attachment-scroll { - background-attachment: scroll; -} -%background-attachment-fixed { - background-attachment: fixed; -} -%background-attachment-local { - background-attachment: local; -} -%background-clip-border-box { - background-clip: border-box; -} -%background-clip-padding-box { - background-clip: padding-box; -} -%background-clip-content-box { - background-clip: content-box; -} -%background-color-1 { - background-color: #fff; -} -%background-color-2 { - background-color: #000; -} -%background-origin-padding-box { - background-origin: padding-box; -} -%background-origin-border-box { - background-origin: border-box; -} -%background-origin-content-box { - background-origin: content-box; -} -%background-position-left-top { - background-position: left top; -} -%background-position-left-center { - background-position: left center; -} -%background-position-left-bottom { - background-position: left bottom; -} -%background-position-right-top { - background-position: right top; -} -%background-position-right-center { - background-position: right center; -} -%background-position-right-bottom { - background-position: right bottom; -} -%background-position-center-top { - background-position: center top; -} -%background-position-center-center { - background-position: center center; -} -%background-position-center-bottom { - background-position: center bottom; -} -%background-repeat-repeat { - background-repeat: repeat; -} -%background-repeat-repeat-x { - background-repeat: repeat-x; -} -%background-repeat-repeat-y { - background-repeat: repeat-y; -} -%background-repeat-no-repeat { - background-repeat: no-repeat; -} -%background-size-auto { - background-size: auto; -} -%background-size-cover { - background-size: cover; -} -%background-size-contain { - background-size: contain; -} -%border-none { - border: none; -} -%border-0 { - border: 0; -} -%border-bottom-none { - border-bottom: none; -} -%border-bottom-0 { - border-bottom: 0; -} -%border-bottom-color-transparent { - border-bottom-color: transparent; -} -%border-bottom-style-none { - border-bottom-style: none; -} -%border-bottom-style-hidden { - border-bottom-style: hidden; -} -%border-bottom-style-dotted { - border-bottom-style: hidden; -} -%border-bottom-style-dashed { - border-bottom-style: dashed; -} -%border-bottom-style-solid { - border-bottom-style: solid; -} -%border-bottom-style-double { - border-bottom-style: double; -} -%border-bottom-style-groove { - border-bottom-style: groove; -} -%border-bottom-style-ridge { - border-bottom-style: ridge; -} -%border-bottom-style-inset { - border-bottom-style: inset; -} -%border-bottom-style-outset { - border-bottom-style: outset; -} -%border-collapse-separate { - border-collapse: separate; -} -%border-collapse-collapse { - border-collapse: collapse; -} -%border-image-repeat-stretch { - border-image-repeat: stretch; -} -%border-image-repeat-repeat { - border-image-repeat: repeat -} -%border-image-repeat-round { - border-image-repeat: round; -} -%border-image-slice-0 { - border-image-slice: 0; -} -%border-image-slice-100 { - border-image-slice: 100%; -} -%border-image-slice-fill { - border-image-slice: fill; -} -%border-image-source-none { - border-image-source: none; -} -%border-image-width-0 { - border-image-width: 0; -} -%border-image-width-100 { - border-image-width: 100%; -} -%border-image-width-auto { - border-image-width: auto; -} -%border-left-none { - border-left: none; -} -%border-left-0 { - border-left: 0; -} -%border-left-color-transparent { - border-left-color: transparent; -} -%border-left-style-none { - border-left-style: none; -} -%border-left-style-hidden { - border-left-style: hidden; -} -%border-left-style-dotted { - border-left-style: dotted; -} -%border-left-style-dashed { - border-left-style: dashed; -} -%border-left-style-solid { - border-left-style: solid; -} -%border-left-style-double { - border-left-style: double; -} -%border-left-style-groove { - border-left-style: groove; -} -%border-left-style-ridge { - border-left-style: ridge; -} -%border-left-style-inset { - border-left-style: inset; -} -%border-left-style-outset { - border-left-style: outset; -} -%border-radius-100 { - border-radius: 100%; -} -%border-radius-0 { - border-radius: 0; -} -%border-right-none { - border-right: none; -} -%border-right-0 { - border-right: 0; -} -%border-right-color-1 { - border-right-color: #fff; -} -%border-right-color-2 { - border-right-color: #000; -} -%border-right-style-none { - border-right-style: none; -} -%border-right-style-hidden { - border-right-style: hidden; -} -%border-right-style-dotted { - border-right-style: dotted; -} -%border-right-style-dashed { - border-right-style: dashed; -} -%border-right-style-solid { - border-right-style: solid; -} -%border-right-style-double { - border-right-style: double; -} -%border-right-style-groove { - border-right-style: groove; -} -%border-right-style-ridge { - border-right-style: ridge; -} -%border-right-style-inset { - border-right-style: inset; -} -%border-right-style-outset { - border-right-style: outset; -} -%border-style-none { - border-style: none; -} -%border-style-hidden { - border-style: hidden; -} -%border-style-dotted { - border-style: dotted; -} -%border-style-dashed { - border-style: dashed; -} -%border-style-solid { - border-style: solid; -} -%border-style-double { - border-style: double; -} -%border-style-groove { - border-style: groove; -} -%border-style-ridge { - border-style: ridge; -} -%border-style-inset { - border-style: inset; -} -%border-style-outset { - border-style: outset; -} -%border-top-none { - border-top: none; -} -%border-top-0 { - border-top: 0; -} -%border-top-color-1 { - border-top-color: #fff; -} -%border-top-color-2 { - border-top-color: #000; -} -%border-top-style-none { - border-top-style: none; -} -%border-top-style-hidden { - border-top-style: hidden; -} -%border-top-style-dotted { - border-top-style: dotted; -} -%border-top-style-dashed { - border-top-style: dashed; -} -%border-top-style-solid { - border-top-style: solid; -} -%border-top-style-double { - border-top-style: double; -} -%border-top-style-groove { - border-top-style: groove; -} -%border-top-style-ridge { - border-top-style: ridge; -} -%border-top-style-inset { - border-top-style: inset; -} -%border-top-style-outset { - border-top-style: outset; -} -%bottom-auto { - bottom: auto; -} -%bottom-0 { - bottom: 0; -} -%box-shadow-none { - -webkit-box-shadow: none; - box-shadow: none; -} -%box-sizing-content-box { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; -} -%box-sizing-border-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -%caption-side-top { - caption-side: top; -} -%caption-side-bottom { - caption-side: bottom; -} -%clear-none { - clear: none; -} -%clear-left { - clear: left; -} -%clear-right { - clear: right; -} -%clear-both { - clear: both; -} -%clip-auto { - clip: auto; -} -%color-1 { - color: #fff; -} -%color-2 { - color: #000; -} -%column-count-auto { - -webkit-column-count: auto; - -moz-column-count: auto; - column-count: auto; -} -%column-fill-auto { - -webkit-column-fill: auto; - -moz-column-fill: auto; - column-fill: auto; -} -%column-fill-balance { - -webkit-column-fill: balance; - -moz-column-fill: balance; - column-fill: balance; -} -%column-gap-normal { - -webkit-column-gap: normal; - -moz-column-gap: normal; - column-gap: normal; -} -%colum-gap-0 { - -webkit-column-gap: 0; - -moz-column-gap: 0; - column-gap: 0; -} -%column-rule-color-1 { - -webkit-column-rule-color: #fff; - -moz-column-rule-color: #fff; - column-rule-color: #fff; -} -%column-rule-color-2 { - -webkit-column-rule-color: #000; - -moz-column-rule-color: #000; - column-rule-color: #000; -} -%column-rule-style-none { - -webkit-column-rule-style: none; - -moz-column-rule-style: none; - column-rule-style: none; -} -%column-rule-style-hidden { - -webkit-column-rule-style: hidden; - -moz-column-rule-style: hidden; - column-rule-style: hidden; -} -%column-rule-style-dotted { - -webkit-column-rule-style: dotted; - -moz-column-rule-style: dotted; - column-rule-style: dotted; -} -%column-rule-style-dashed { - -webkit-column-rule-style: dashed; - -moz-column-rule-style: dashed; - column-rule-style: dashed; -} -%column-rule-style-solid { - -webkit-column-rule-style: solid; - -moz-column-rule-style: solid; - column-rule-style: solid; -} -%column-rule-style-double { - -webkit-column-rule-style: double; - -moz-column-rule-style: double; - column-rule-style: double; -} -%column-rule-style-groove { - -webkit-column-rule-style: groove; - -moz-column-rule-style: groove; - column-rule-style: groove; -} -%column-rule-style-ridge { - -webkit-column-rule-style: ridge; - -moz-column-rule-style: ridge; - column-rule-style: ridge; -} -%column-rule-style-inset { - -webkit-column-rule-style: inset; - -moz-column-rule-style: inset; - column-rule-style: inset; -} -%column-rule-style-outset { - -webkit-column-rule-style: outset; - -moz-column-rule-style: outset; - column-rule-style: outset; -} -%column-span-1 { - -webkit-column-span: 1; - column-span: 1; -} -%column-span-all { - -webkit-column-span: all; - column-span: all; -} -%column-width-auto { - -webkit-column-width: auto; - -moz-column-width: auto; - column-width: auto; -} -%content { - content: ""; -} -%content-none { - content: none; -} -%content-counter { - content: counter; -} -%content-open-quote { - content: open-quote; -} -%content-close-quote { - content: close-quote; -} -%content-no-open-quote { - content: no-open-quote; -} -%content-no-close-quote { - content: no-close-quote; -} -%counter-increment-none { - counter-increment: none; -} -%counter-reset-none { - counter-reset: none; -} -%cursor-alias { - cursor: alias; -} -%cursor-all-scroll { - cursor: all-scroll; -} -%cursor-auto { - cursor: auto; -} -%cursor-cell { - cursor: cell; -} -%cursor-context-menu { - cursor: context-menu; -} -%cursor-col-resize { - cursor: col-resize; -} -%cursor-copy { - cursor: copy; -} -%cursor-crosshair { - cursor: crosshair; -} -%cursor-default { - cursor: default; -} -%cursor-e-resize { - cursor: e-resize; -} -%cursor-ew-resize { - cursor: ew-resize; -} -%cursor-grab { - cursor: grab; -} -%cursor-grabbing { - cursor: grabbing; -} -%cursor-help { - cursor: help; -} -%cursor-move { - cursor: move; -} -%cursor-n-resize { - cursor: n-resize; -} -%cursor-ne-resize { - cursor: ne-resize; -} -%cursor-nesw-resize { - cursor: nesw-resize; -} -%cursor-ns-resize { - cursor: ns-resize; -} -%cursor-nw-resize { - cursor: nw-resize; -} -%cursor-nwse-resize { - cursor: nwse-resize; -} -%cursor-no-drop { - cursor: no-drop; -} -%cursor-none { - cursor: none; -} -%cursor-not-allowed { - cursor: not-allowed; -} -%cursor-pointer { - cursor: pointer; -} -%cursor-progress { - cursor: progress; -} -%cursor-row-resize { - cursor: row-resize; -} -%cursor-s-resize { - cursor: s-resize; -} -%cursor-se-resize { - cursor: se-resize; -} -%cursor-sw-resize { - cursor: sw-resize; -} -%cursor-text { - cursor: text -} -%cursor-vertical-text { - cursor: vertical-text; -} -%cursor-w-resize { - cursor: w-resize; -} -%cursor-wait { - cursor: wait; -} -%cursor-zoom-in { - cursor: zoom-in; -} -%cursor-zoom-out { - cursor: zoom-out; -} -%direction-ltr { - direction: ltr; -} -%direction-rtl { - direction: rtl; -} -%display-inline { - display: inline; -} -%display-block { - display: block; -} -%display-flex { - -webkit-display: flex; - -ms-display: flex; - display: -webkit-flex; - display: flex; -} -%display-inline-block { - display: inline-block; -} -%display-inline-flex { - -webkit-display: inline-flex; - -ms-display: inline-flex; - display: -webkit-inline-flex; - display: inline-flex; -} -%display-inline-table { - display: inline-table; -} -%display-list-item { - display: list-item; -} -%display-run-in { - display: run-in; -} -%display-table { - display: table; -} -%display-table-caption { - display: table-caption; -} -%display-table-column-group { - display: table-column-group -} -%display-table-header-group { - display: table-header-group; -} -%display-table-footer-group { - display: table-footer-group; -} -%display-table-row-group { - display: table-row-group -} -%display-table-cell { - display: table-cell; -} -%display-table-column { - display: table-column; -} -%display-table-row { - display: table-row; -} -%display-none { - display: none; -} -%empty-cells-hide { - empty-cells: hide; -} -%empty-cells-show { - empty-cells: show; -} -%flex-auto { - -webkit-flex: auto; - -ms-flex: auto; - flex: auto; -} -%flex-basis-auto { - -webkit-flex-basis: auto; - flex-basis: auto; -} -%flex-direction-row { - -webkit-flex-direction: row; - flex-direction: row; -} -%flex-direction-row-reverse { - -webkit-flex-direction: row-reverse; - flex-direction: row-reverse; -} -%flex-direction-column { - -webkit-flex-direction: column; - flex-direction: column; -} -%flex-direction-column-reverse { - -webkit-flex-direction: column-reverse; - flex-direction: column-reverse; -} -%flex-grow-initial { - -webkit-flex-grow: initial; - flex-grow: initial; -} -%flex-grow-inherit { - -webkit-flex-grow: inherit; - flex-grow: inherit; -} -%flex-shrink-initial { - -webkit-flex-shrink: initial; - flex-shrink: initial; -} -%flex-shrink-inherit { - -webkit-flex-shrink: inherit; - flex-shrink: inherit; -} -%flex-wrap-nowrap { - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; -} -%flex-wrap-wrap { - -webkit-flex-wrap: wrap; - flex-wrap: wrap; -} -%flex-wrap-wrap-reverse { - -webkit-flex-wrap: wrap-reverse; - flex-wrap: wrap-reverse; -} -%float-none { - float: none; -} -%float-left { - float: left; -} -%float-right { - float: right; -} -%font-style-normal { - font-style: normal; -} -%font-style-italic { - font-style: italic; -} -%font-style-oblique { - font-style: oblique; -} -%font-variant-normal { - font-variant: normal; -} -%font-variant-small-caps { - font-variant: small-caps; -} -%font-weight-normal { - font-weight: normal; -} -%font-weight-bold { - font-weight: bold; -} -%font-weight-bolder { - font-weight: bolder; -} -%font-weight-lighter { - font-weight: lighter; -} -%font-weight-100 { - font-weight: 100; -} -%font-weight-200 { - font-weight: 200; -} -%font-weight-300 { - font-weight: 300; -} -%font-weight-400 { - font-weight: 400; -} -%font-weight-500 { - font-weight: 500; -} -%font-weight-600 { - font-weight: 600; -} -%font-weight-700 { - font-weight: 700; -} -%font-weight-800 { - font-weight: 800; -} -%font-weight-900 { - font-weight: 900; -} -%height-auto { - height: auto; -} -%height-0 { - height: 0; -} -%height-100 { - height: 100%; -} -%justify-content-flex-start { - -webkit-justify-content: flex-start; - justify-content: flex-start; -} -%justify-content-flex-end { - -webkit-justify-content: flex-end; - justify-content: flex-end; -} -%justify-content-center { - -webkit-justify-content: center; - justify-content: center; -} -%justify-content-space-between { - -webkit-justify-content: space-between; - justify-content: space-between; -} -%justify-content-space-around { - -webkit-justify-content: space-around; - justify-content: space-around; -} -%left-auto { - left: auto; -} -%left-0 { - left: 0; -} -%letter-spacing-normal { - letter-spacing: normal; -} -%line-height-normal { - line-height: normal; -} -%list-style-none { - list-style: none; -} -%list-style-armenian { - list-style: armenian; -} -%list-style-circle { - list-style: circle; -} -%list-style-decimal { - list-style: decimal; -} -%list-style-decimal-leading-zero { - list-style: decimal-leading-zero; -} -%list-style-disc { - list-style: disc; -} -%list-style-gregorian { - list-style: georgian; -} -%list-style-inside { - list-style: inside; -} -%list-style-lower-alpha { - list-style: lower-alpha; -} -%list-style-lower-greek { - list-style: lower-greek; -} -%list-style-lower-latin { - list-style: lower-latin; -} -%list-style-lower-roman { - list-style: lower-roman; -} -%list-style-outside { - list-style: outside; -} -%list-style-square { - list-style: square; -} -%list-style-unset { - list-style: unset; -} -%list-style-upper-alpha { - list-style: upper-alpha; -} -%list-style-upper-latin { - list-style: upper-latin; -} -%list-style-upper-roman { - list-style: upper-roman; -} -%list-style-position-inside { - list-style-position: inside; -} -%list-style-position-outside { - list-style-position: outside; -} -%list-style-type-none { - list-style-type: none; -} -%list-style-type-armenian { - list-style-type: armenian; -} -%list-style-type-circle { - list-style-type: circle; -} -%list-style-type-decimal { - list-style-type: decimal; -} -%list-style-type-decimal-leading-zero { - list-style-type: decimal-leading-zero; -} -%list-style-type-disc { - list-style-type: disc; -} -%list-style-type-gregorian { - list-style-type: georgian; -} -%list-style-type-inside { - list-style-type: inside; -} -%list-style-type-lower-alpha { - list-style-type: lower-alpha; -} -%list-style-type-lower-greek { - list-style-type: lower-greek; -} -%list-style-type-lower-latin { - list-style-type: lower-latin; -} -%list-style-type-lower-roman { - list-style-type: lower-roman; -} -%list-style-type-outside { - list-style-type: outside; -} -%list-style-type-square { - list-style-type: square; -} -%list-style-type-unset { - list-style-type: unset; -} -%list-style-type-upper-alpha { - list-style-type: upper-alpha; -} -%list-style-type-upper-latin { - list-style-type: upper-latin; -} -%list-style-type-upper-roman { - list-style-type: upper-roman; -} -%margin-auto { - margin: auto; -} -%margin-0 { - margin: 0; -} -%margin-bottom-auto { - margin-bottom: auto; -} -%margin-bottom-0 { - margin-bottom: 0; -} -%margin-left-auto { - margin-left: auto; -} -%margin-left-0 { - margin-left: 0; -} -%margin-right-auto { - margin-right: auto; -} -%margin-right-0 { - margin-right: 0; -} -%margin-top-auto { - margin-top: auto; -} -%margin-top-0 { - margin-top: 0; -} -%max-width-100 { - max-width: 100%; -} -%min-width-100 { - min-width: 100%; -} -%opacity-1 { - opacity: 1; -} -%opacity-09 { - opacity: .9; -} -%opacity-08 { - opacity: .8; -} -%opacity-07 { - opacity: .7; -} -%opacity-06 { - opacity: .6; -} -%opacity-05 { - opacity: .5; -} -%opacity-04 { - opacity: .4; -} -%opacity-03 { - opacity: .3; -} -%opacity-02 { - opacity: .2; -} -%opacity-01 { - opacity: .1; -} -%opacity-0 { - opacity: 0; -} -%outline-none { - outline: none; -} -%outline-color-1 { - outline-color: #fff; -} -%outline-color-2 { - outline-color: #000; -} -%outline-style-none { - outline-style: none; -} -%outline-style-hidden { - outline-style: hidden; -} -%outline-style-dotted { - outline-style: dotted; -} -%outline-style-dashed { - outline-style: dashed; -} -%outline-style-solid { - outline-style: solid; -} -%outline-style-double { - outline-style: double; -} -%outline-style-groove { - outline-style: groove; -} -%outline-style-ridge { - outline-style: ridge; -} -%outline-style-inset { - outline-style: inset; -} -%outline-style-outset { - outline-style: outset; -} -%overflow-visible { - overflow: visible; -} -%overflow-hidden { - overflow: hidden; -} -%overflow-scroll { - overflow: scroll; -} -%overflow-auto { - overflow: auto; -} -%overflow-x-visible { - overflow: visible; -} -%overflow-x-hidden { - overflow: hidden; -} -%overflow-x-scroll { - overflow: scroll; -} -%overflow-x-auto { - overflow: auto; -} -%overflow-y-visible { - overflow: visible; -} -%overflow-y-hidden { - overflow: hidden; -} -%overflow-y-scroll { - overflow: scroll; -} -%overflow-y-auto { - overflow: auto; -} -%padding-0 { - padding: 0; -} -%padding-bottom-0 { - padding-bottom: 0; -} -%padding-left-0 { - padding-left: 0; -} -%padding-right { - padding-right: 0; -} -%padding-top { - padding-top: 0; -} -%page-break-after-auto { - page-break-after: auto; -} -%page-break-after-always { - page-break-after: always; -} -%page-break-after-avoid { - page-break-after: avoid; -} -%page-break-after-left { - page-break-after: left; -} -%page-break-after-right { - page-break-after: right; -} -%page-break-before-auto { - page-break-before: auto; -} -%page-break-before-always { - page-break-before: always; -} -%page-break-before-avoid { - page-break-before: avoid; -} -%page-break-before-left { - page-break-before: left; -} -%page-break-before-right { - page-break-before: right; -} -%page-break-inside-auto { - page-break-inside: auto; -} -%page-break-inside-avoide { - page-break-inside: avoid; -} -%perspective-none { - -webkit-perspective: none; - perspective: none; -} -%position-static { - position: static; -} -%position-absolute { - position: absolute; -} -%position-fixed { - position: fixed; -} -%position-relative { - position: relative; -} -%quotes-none { - quotes: none; -} -%resize-none { - resize: none; -} -%resize-both { - resize: both; -} -%resize-horizontal { - resize: horizontal; -} -%resize-vertical { - resize: vertical; -} -%right-auto { - right: auto; -} -%right-0 { - right: 0; -} -%table-layout-auto { - table-layout: auto; -} -%table-layout-fixed { - table-layout: fixed; -} -%text-align-left { - text-align: left; -} -%text-align-right { - text-align: right; -} -%text-align-center { - text-align: center; -} -%text-align-justify { - text-align: justify; -} -%text-align-last-left { - text-align-last: left; -} -%text-align-last-right { - text-align-last: right; -} -%text-align-last-center { - text-align-last: center; -} -%text-align-last-justify { - text-align-last: justify; -} -%text-align-last-start { - text-align-last: start; -} -%text-align-last-end { - text-align-last: end; -} -%text-decoration-none { - text-decoration: none; -} -%text-decoration-underline { - text-decoration: underline; -} -%text-decoration-overline { - text-decoration: overline; -} -%text-decoration-line-through { - text-decoration: line-through; -} -%text-indent-0 { - text-indent: 0; -} -%text-overflow-clip { - -o-text-overflow: clip; - text-overflow: clip; -} -%text-overflow-ellipsis { - -o-text-overflow: ellipsis; - text-overflow: ellipsis; -} -%text-shadow-none { - text-shadow: none; -} -%text-transform-none { - text-transform: none; -} -%text-transform-capitalize { - text-transform: capitalize; -} -%text-transform-uppercase { - text-transform: uppercase; -} -%text-transform-lowercase { - text-transform: lowercase; -} -%top-auto { - top: auto; -} -%top-0 { - top: 0; -} -%unicode-bidi-normal { - unicode-bidi: normal; -} -%unicode-bidi-embed { - unicode-bidi: embed; -} -%unicode-bidi-bidi-overrid { - unicode-bidi: bidi-override; -} -%user-select-auto { - -webkit-user-select: auto; - -moz-user-select: auto; - -ms-user-select: auto; - user-select: auto; -} -%user-select-none { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -%user-select-text { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} -%user-select-all { - -webkit-user-select: all; - -moz-user-select: all; - -ms-user-select: all; - user-select: all; -} -%vertical-align-baseline { - vertical-align: baseline; -} -%vertical-align-sub { - vertical-align: sub; -} -%vertical-align-super { - vertical-align: super; -} -%vertical-align-top { - vertical-align: top; -} -%vertical-align-text-top { - vertical-align: text-top; -} -%vertical-align-middle { - vertical-align: middle; -} -%vertical-align-bottom { - vertical-align: bottom; -} -%vertical-align-text-bottom { - vertical-align: text-bottom; -} -%visibility-visible { - visibility: visible; -} -%visibility-hidden { - visibility: hidden; -} -%visibility-collapse { - visibility: collapse; -} -%white-space-normal { - white-space: normal; -} -%white-space-nowrap { - white-space: nowrap; -} -%white-space-pre { - white-space: pre; -} -%white-space-pre-line { - white-space: pre-line; -} -%white-space-pre-wrap { - white-space: pre-wrap; -} -%width-auto { - width: auto; -} -%width-0 { - width: 0; -} -%width-100 { - width: 100%; -} -%word-break-normal { - word-break: normal; -} -%word-break-break-all { - word-break: break-all; -} -%word-break-keep-all { - word-break: keep-all; -} -%word-spacing-normal { - word-spacing: normal; -} -%word-wrap-normal { - word-wrap: normal; -} -%word-wrap-break-word { - word-wrap: break-word; -} -%z-index-0 { - z-index: 0; -} -%z-index-1 { - z-index: 1; -} -%z-index-10 { - z-index: 10; -} -%z-index-11 { - z-index: 11; -} -%z-index-100 { - z-index: 100; -} -%z-index-101 { - z-index: 101; -} -%z-index-1000 { - z-index: 1000; -} -%z-index-1001 { - z-index: 1001; -} -%z-index-10000 { - z-index: 10000; -} -%z-index-10001 { - z-index: 1001; -} - -//bootstrap clearfix placeholder -%clearfix { - &:before, - &:after { - display: table; - content: ""; - line-height: 0; - } - &:after { - clear: both; - } -} \ No newline at end of file diff --git a/scss/01_placeholders/_placeholders-desktop.scss b/scss/01_placeholders/_placeholders-desktop.scss deleted file mode 100755 index aacfde1..0000000 --- a/scss/01_placeholders/_placeholders-desktop.scss +++ /dev/null @@ -1,1503 +0,0 @@ -@media screen and (min-width: $w5) { - %desktop-align-content-stretch { - -webkit-align-content: stretch; - align-content: stretch; - } - %desktop-align-content-center { - -webkit-align-content: center; - align-content: center; - } - %desktop-align-content-flex-start { - -webkit-align-content: flex-start; - align-content: flex-start; - } - %desktop-align-content-flex-end { - -webkit-align-content: flex-end; - align-content: flex-end; - } - %desktop-align-content-space-between { - -webkit-align-content: space-between; - align-content: space-between; - } - %desktop-align-content-space-around { - -webkit-align-content: space-around; - align-content: space-around; - } - %desktop-align-content-initial { - -webkit-align-content: initial; - align-content: initial; - } - %desktop-align-content-inherit { - -webkit-align-content: inherit; - align-content: inherit; - } - %desktop-align-items-stretch { - -webkit-align-items: stretch; - align-items: stretch; - } - %desktop-align-items-center { - -webkit-align-items: center; - align-items: center; - } - %desktop-align-items-flex-start { - -webkit-align-items: flex-start; - align-items: flex-start; - } - %desktop-align-items-flex-end { - -webkit-align-items: flex-end; - align-items: flex-end; - } - %desktop-align-items-baseline { - -webkit-align-items: baseline; - align-items: baseline; - } - %desktop-align-items-initial { - -webkit-align-items: initial; - align-items: initial; - } - %desktop-align-items-inherit { - -webkit-align-items: inherit; - align-items: inherit; - } - %desktop-align-self-auto { - -webkit-align-self: auto; - align-self: auto; - } - %desktop-align-self-stretch { - -webkit-align-self: stretch; - align-self: stretch; - } - %desktop-align-self-center { - -webkit-align-self: center; - align-self: center; - } - %desktop-align-self-flex-start { - -webkit-align-self: flex-start; - align-self: flex-start; - } - %desktop-align-self-flex-end { - -webkit-align-self: flex-end; - align-self: flex-end; - } - %desktop-align-self-baseline { - -webkit-align-self: baseline; - align-self: baseline; - } - %desktop-align-self-initial { - -webkit-align-self: initial; - align-self: initial; - } - %desktop-align-self-inherit { - -webkit-align-self: inherit; - align-self: inherit; - } - %desktop-appearance-none { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - %desktop-backface-visibility-visible { - -webkit-backface-visibility: visible; - -moz-backface-visibility: visible; - backface-visibility: visible; - } - %desktop-backface-visibility-hidden { - -webkit-backface-visibility: hidden; - -mox-backface-visibility: hidden; - backface-visibility: hidden; - } - %desktop-background-attachment-scroll { - background-attachment: scroll; - } - %desktop-background-attachment-fixed { - background-attachment: fixed; - } - %desktop-background-attachment-local { - background-attachment: local; - } - %desktop-background-clip-border-box { - background-clip: border-box; - } - %desktop-background-clip-padding-box { - background-clip: padding-box; - } - %desktop-background-clip-content-box { - background-clip: content-box; - } - %desktop-background-color-1 { - background-color: #fff; - } - %desktop-background-color-2 { - background-color: #000; - } - %desktop-background-origin-padding-box { - background-origin: padding-box; - } - %desktop-background-origin-border-box { - background-origin: border-box; - } - %desktop-background-origin-content-box { - background-origin: content-box; - } - %desktop-background-position-left-top { - background-position: left top; - } - %desktop-background-position-left-center { - background-position: left center; - } - %desktop-background-position-left-bottom { - background-position: left bottom; - } - %desktop-background-position-right-top { - background-position: right top; - } - %desktop-background-position-right-center { - background-position: right center; - } - %desktop-background-position-right-bottom { - background-position: right bottom; - } - %desktop-background-position-center-top { - background-position: center top; - } - %desktop-background-position-center-center { - background-position: center center; - } - %desktop-background-position-center-bottom { - background-position: center bottom; - } - %desktop-background-repeat-repeat { - background-repeat: repeat; - } - %desktop-background-repeat-repeat-x { - background-repeat: repeat-x; - } - %desktop-background-repeat-repeat-y { - background-repeat: repeat-y; - } - %desktop-background-repeat-no-repeat { - background-repeat: no-repeat; - } - %desktop-background-size-auto { - background-size: auto; - } - %desktop-background-size-cover { - background-size: cover; - } - %desktop-background-size-contain { - background-size: contain; - } - %desktop-border-none { - border: none; - } - %desktop-border-0 { - border: 0; - } - %desktop-border-bottom-none { - border-bottom: none; - } - %desktop-border-bottom-0 { - border-bottom: 0; - } - %desktop-border-bottom-color-transparent { - border-bottom-color: transparent; - } - %desktop-border-bottom-style-none { - border-bottom-style: none; - } - %desktop-border-bottom-style-hidden { - border-bottom-style: hidden; - } - %desktop-border-bottom-style-dotted { - border-bottom-style: hidden; - } - %desktop-border-bottom-style-dashed { - border-bottom-style: dashed; - } - %desktop-border-bottom-style-solid { - border-bottom-style: solid; - } - %desktop-border-bottom-style-double { - border-bottom-style: double; - } - %desktop-border-bottom-style-groove { - border-bottom-style: groove; - } - %desktop-border-bottom-style-ridge { - border-bottom-style: ridge; - } - %desktop-border-bottom-style-inset { - border-bottom-style: inset; - } - %desktop-border-bottom-style-outset { - border-bottom-style: outset; - } - %desktop-border-collapse-separate { - border-collapse: separate; - } - %desktop-border-collapse-collapse { - border-collapse: collapse; - } - %desktop-border-image-repeat-stretch { - border-image-repeat: stretch; - } - %desktop-border-image-repeat-repeat { - border-image-repeat: repeat - } - %desktop-border-image-repeat-round { - border-image-repeat: round; - } - %desktop-border-image-slice-0 { - border-image-slice: 0; - } - %desktop-border-image-slice-100 { - border-image-slice: 100%; - } - %desktop-border-image-slice-fill { - border-image-slice: fill; - } - %desktop-border-image-source-none { - border-image-source: none; - } - %desktop-border-image-width-0 { - border-image-width: 0; - } - %desktop-border-image-width-100 { - border-image-width: 100%; - } - %desktop-border-image-width-auto { - border-image-width: auto; - } - %desktop-border-left-none { - border-left: none; - } - %desktop-border-left-0 { - border-left: 0; - } - %desktop-border-left-color-transparent { - border-left-color: transparent; - } - %desktop-border-left-style-none { - border-left-style: none; - } - %desktop-border-left-style-hidden { - border-left-style: hidden; - } - %desktop-border-left-style-dotted { - border-left-style: dotted; - } - %desktop-border-left-style-dashed { - border-left-style: dashed; - } - %desktop-border-left-style-solid { - border-left-style: solid; - } - %desktop-border-left-style-double { - border-left-style: double; - } - %desktop-border-left-style-groove { - border-left-style: groove; - } - %desktop-border-left-style-ridge { - border-left-style: ridge; - } - %desktop-border-left-style-inset { - border-left-style: inset; - } - %desktop-border-left-style-outset { - border-left-style: outset; - } - %desktop-border-radius-100 { - border-radius: 100%; - } - %desktop-border-radius-0 { - border-radius: 0; - } - %desktop-border-right-none { - border-right: none; - } - %desktop-border-right-0 { - border-right: 0; - } - %desktop-border-right-color-1 { - border-right-color: #fff; - } - %desktop-border-right-color-2 { - border-right-color: #000; - } - %desktop-border-right-style-none { - border-right-style: none; - } - %desktop-border-right-style-hidden { - border-right-style: hidden; - } - %desktop-border-right-style-dotted { - border-right-style: dotted; - } - %desktop-border-right-style-dashed { - border-right-style: dashed; - } - %desktop-border-right-style-solid { - border-right-style: solid; - } - %desktop-border-right-style-double { - border-right-style: double; - } - %desktop-border-right-style-groove { - border-right-style: groove; - } - %desktop-border-right-style-ridge { - border-right-style: ridge; - } - %desktop-border-right-style-inset { - border-right-style: inset; - } - %desktop-border-right-style-outset { - border-right-style: outset; - } - %desktop-border-style-none { - border-style: none; - } - %desktop-border-style-hidden { - border-style: hidden; - } - %desktop-border-style-dotted { - border-style: dotted; - } - %desktop-border-style-dashed { - border-style: dashed; - } - %desktop-border-style-solid { - border-style: solid; - } - %desktop-border-style-double { - border-style: double; - } - %desktop-border-style-groove { - border-style: groove; - } - %desktop-border-style-ridge { - border-style: ridge; - } - %desktop-border-style-inset { - border-style: inset; - } - %desktop-border-style-outset { - border-style: outset; - } - %desktop-border-top-none { - border-top: none; - } - %desktop-border-top-0 { - border-top: 0; - } - %desktop-border-top-color-1 { - border-top-color: #fff; - } - %desktop-border-top-color-2 { - border-top-color: #000; - } - %desktop-border-top-style-none { - border-top-style: none; - } - %desktop-border-top-style-hidden { - border-top-style: hidden; - } - %desktop-border-top-style-dotted { - border-top-style: dotted; - } - %desktop-border-top-style-dashed { - border-top-style: dashed; - } - %desktop-border-top-style-solid { - border-top-style: solid; - } - %desktop-border-top-style-double { - border-top-style: double; - } - %desktop-border-top-style-groove { - border-top-style: groove; - } - %desktop-border-top-style-ridge { - border-top-style: ridge; - } - %desktop-border-top-style-inset { - border-top-style: inset; - } - %desktop-border-top-style-outset { - border-top-style: outset; - } - %desktop-bottom-auto { - bottom: auto; - } - %desktop-bottom-0 { - bottom: 0; - } - %desktop-box-shadow-none { - -webkit-box-shadow: none; - box-shadow: none; - } - %desktop-box-sizing-content-box { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - } - %desktop-box-sizing-border-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - %desktop-caption-side-top { - caption-side: top; - } - %desktop-caption-side-bottom { - caption-side: bottom; - } - %desktop-clear-none { - clear: none; - } - %desktop-clear-left { - clear: left; - } - %desktop-clear-right { - clear: right; - } - %desktop-clear-both { - clear: both; - } - %desktop-clip-auto { - clip: auto; - } - %desktop-color-1 { - color: #fff; - } - %desktop-color-2 { - color: #000; - } - %desktop-column-count-auto { - -webkit-column-count: auto; - -moz-column-count: auto; - column-count: auto; - } - %desktop-column-fill-auto { - -webkit-column-fill: auto; - -moz-column-fill: auto; - column-fill: auto; - } - %desktop-column-fill-balance { - -webkit-column-fill: balance; - -moz-column-fill: balance; - column-fill: balance; - } - %desktop-column-gap-normal { - -webkit-column-gap: normal; - -moz-column-gap: normal; - column-gap: normal; - } - %desktop-colum-gap-0 { - -webkit-column-gap: 0; - -moz-column-gap: 0; - column-gap: 0; - } - %desktop-column-rule-color-1 { - -webkit-column-rule-color: #fff; - -moz-column-rule-color: #fff; - column-rule-color: #fff; - } - %desktop-column-rule-color-2 { - -webkit-column-rule-color: #000; - -moz-column-rule-color: #000; - column-rule-color: #000; - } - %desktop-column-rule-style-none { - -webkit-column-rule-style: none; - -moz-column-rule-style: none; - column-rule-style: none; - } - %desktop-column-rule-style-hidden { - -webkit-column-rule-style: hidden; - -moz-column-rule-style: hidden; - column-rule-style: hidden; - } - %desktop-column-rule-style-dotted { - -webkit-column-rule-style: dotted; - -moz-column-rule-style: dotted; - column-rule-style: dotted; - } - %desktop-column-rule-style-dashed { - -webkit-column-rule-style: dashed; - -moz-column-rule-style: dashed; - column-rule-style: dashed; - } - %desktop-column-rule-style-solid { - -webkit-column-rule-style: solid; - -moz-column-rule-style: solid; - column-rule-style: solid; - } - %desktop-column-rule-style-double { - -webkit-column-rule-style: double; - -moz-column-rule-style: double; - column-rule-style: double; - } - %desktop-column-rule-style-groove { - -webkit-column-rule-style: groove; - -moz-column-rule-style: groove; - column-rule-style: groove; - } - %desktop-column-rule-style-ridge { - -webkit-column-rule-style: ridge; - -moz-column-rule-style: ridge; - column-rule-style: ridge; - } - %desktop-column-rule-style-inset { - -webkit-column-rule-style: inset; - -moz-column-rule-style: inset; - column-rule-style: inset; - } - %desktop-column-rule-style-outset { - -webkit-column-rule-style: outset; - -moz-column-rule-style: outset; - column-rule-style: outset; - } - %desktop-column-span-1 { - -webkit-column-span: 1; - column-span: 1; - } - %desktop-column-span-all { - -webkit-column-span: all; - column-span: all; - } - %desktop-column-width-auto { - -webkit-column-width: auto; - -moz-column-width: auto; - column-width: auto; - } - %desktop-content { - content: ""; - } - %desktop-content-none { - content: none; - } - %desktop-content-counter { - content: counter; - } - %desktop-content-open-quote { - content: open-quote; - } - %desktop-content-close-quote { - content: close-quote; - } - %desktop-content-no-open-quote { - content: no-open-quote; - } - %desktop-content-no-close-quote { - content: no-close-quote; - } - %desktop-counter-increment-none { - counter-increment: none; - } - %desktop-counter-reset-none { - counter-reset: none; - } - %desktop-cursor-alias { - cursor: alias; - } - %desktop-cursor-all-scroll { - cursor: all-scroll; - } - %desktop-cursor-auto { - cursor: auto; - } - %desktop-cursor-cell { - cursor: cell; - } - %desktop-cursor-context-menu { - cursor: context-menu; - } - %desktop-cursor-col-resize { - cursor: col-resize; - } - %desktop-cursor-copy { - cursor: copy; - } - %desktop-cursor-crosshair { - cursor: crosshair; - } - %desktop-cursor-default { - cursor: default; - } - %desktop-cursor-e-resize { - cursor: e-resize; - } - %desktop-cursor-ew-resize { - cursor: ew-resize; - } - %desktop-cursor-grab { - cursor: grab; - } - %desktop-cursor-grabbing { - cursor: grabbing; - } - %desktop-cursor-help { - cursor: help; - } - %desktop-cursor-move { - cursor: move; - } - %desktop-cursor-n-resize { - cursor: n-resize; - } - %desktop-cursor-ne-resize { - cursor: ne-resize; - } - %desktop-cursor-nesw-resize { - cursor: nesw-resize; - } - %desktop-cursor-ns-resize { - cursor: ns-resize; - } - %desktop-cursor-nw-resize { - cursor: nw-resize; - } - %desktop-cursor-nwse-resize { - cursor: nwse-resize; - } - %desktop-cursor-no-drop { - cursor: no-drop; - } - %desktop-cursor-none { - cursor: none; - } - %desktop-cursor-not-allowed { - cursor: not-allowed; - } - %desktop-cursor-pointer { - cursor: pointer; - } - %desktop-cursor-progress { - cursor: progress; - } - %desktop-cursor-row-resize { - cursor: row-resize; - } - %desktop-cursor-s-resize { - cursor: s-resize; - } - %desktop-cursor-se-resize { - cursor: se-resize; - } - %desktop-cursor-sw-resize { - cursor: sw-resize; - } - %desktop-cursor-text { - cursor: text - } - %desktop-cursor-vertical-text { - cursor: vertical-text; - } - %desktop-cursor-w-resize { - cursor: w-resize; - } - %desktop-cursor-wait { - cursor: wait; - } - %desktop-cursor-zoom-in { - cursor: zoom-in; - } - %desktop-cursor-zoom-out { - cursor: zoom-out; - } - %desktop-direction-ltr { - direction: ltr; - } - %desktop-direction-rtl { - direction: rtl; - } - %desktop-display-inline { - display: inline; - } - %desktop-display-block { - display: block; - } - %desktop-display-flex { - -webkit-display: flex; - -ms-display: flex; - display: -webkit-flex; - display: flex; - } - %desktop-display-inline-block { - display: inline-block; - } - %desktop-display-inline-flex { - -webkit-display: inline-flex; - -ms-display: inline-flex; - display: -webkit-inline-flex; - display: inline-flex - } - %desktop-display-inline-table { - display: inline-table; - } - %desktop-display-list-item { - display: list-item; - } - %desktop-display-run-in { - display: run-in; - } - %desktop-display-table { - display: table; - } - %desktop-display-table-caption { - display: table-caption; - } - %desktop-display-table-column-group { - display: table-column-group - } - %desktop-display-table-header-group { - display: table-header-group; - } - %desktop-display-table-footer-group { - display: table-footer-group; - } - %desktop-display-table-row-group { - display: table-row-group - } - %desktop-display-table-cell { - display: table-cell; - } - %desktop-display-table-column { - display: table-column; - } - %desktop-display-table-row { - display: table-row; - } - %desktop-display-none { - display: none; - } - %desktop-empty-cells-hide { - empty-cells: hide; - } - %desktop-empty-cells-show { - empty-cells: show; - } - %desktop-flex-auto { - -webkit-flex: auto; - -ms-flex: auto; - flex: auto; - } - %desktop-flex-basis-auto { - -webkit-flex-basis: auto; - flex-basis: auto; - } - %desktop-flex-direction-row { - -webkit-flex-direction: row; - flex-direction: row; - } - %desktop-flex-direction-row-reverse { - -webkit-flex-direction: row-reverse; - flex-direction: row-reverse; - } - %desktop-flex-direction-column { - -webkit-flex-direction: column; - flex-direction: column; - } - %desktop-flex-direction-column-reverse { - -webkit-flex-direction: column-reverse; - flex-direction: column-reverse; - } - %desktop-flex-grow-initial { - -webkit-flex-grow: initial; - flex-grow: initial; - } - %desktop-flex-grow-inherit { - -webkit-flex-grow: inherit; - flex-grow: inherit; - } - %desktop-flex-shrink-initial { - -webkit-flex-shrink: initial; - flex-shrink: initial; - } - %desktop-flex-shrink-inherit { - -webkit-flex-shrink: inherit; - flex-shrink: inherit; - } - %desktop-flex-wrap-nowrap { - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; - } - %desktop-flex-wrap-wrap { - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - } - %desktop-flex-wrap-wrap-reverse { - -webkit-flex-wrap: wrap-reverse; - flex-wrap: wrap-reverse; - } - %desktop-float-none { - float: none; - } - %desktop-float-left { - float: left; - } - %desktop-float-right { - float: right; - } - %desktop-font-style-normal { - font-style: normal; - } - %desktop-font-style-italic { - font-style: italic; - } - %desktop-font-style-oblique { - font-style: oblique; - } - %desktop-font-variant-normal { - font-variant: normal; - } - %desktop-font-variant-small-caps { - font-variant: small-caps; - } - %desktop-font-weight-normal { - font-weight: normal; - } - %desktop-font-weight-bold { - font-weight: bold; - } - %desktop-font-weight-bolder { - font-weight: bolder; - } - %desktop-font-weight-lighter { - font-weight: lighter; - } - %desktop-font-weight-100 { - font-weight: 100; - } - %desktop-font-weight-200 { - font-weight: 200; - } - %desktop-font-weight-300 { - font-weight: 300; - } - %desktop-font-weight-400 { - font-weight: 400; - } - %desktop-font-weight-500 { - font-weight: 500; - } - %desktop-font-weight-600 { - font-weight: 600; - } - %desktop-font-weight-700 { - font-weight: 700; - } - %desktop-font-weight-800 { - font-weight: 800; - } - %desktop-font-weight-900 { - font-weight: 900; - } - %desktop-height-auto { - height: auto; - } - %desktop-height-0 { - height: 0; - } - %desktop-height-100 { - height: 100%; - } - %desktop-justify-content-flex-start { - -webkit-justify-content: flex-start; - justify-content: flex-start; - } - %desktop-justify-content-flex-end { - -webkit-justify-content: flex-end; - justify-content: flex-end; - } - %desktop-justify-content-center { - -webkit-justify-content: center; - justify-content: center; - } - %desktop-justify-content-space-between { - -webkit-justify-content: space-between; - justify-content: space-between; - } - %desktop-justify-content-space-around { - -webkit-justify-content: space-around; - justify-content: space-around; - } - %desktop-left-auto { - left: auto; - } - %desktop-left-0 { - left: 0; - } - %desktop-letter-spacing-normal { - letter-spacing: normal; - } - %desktop-line-height-normal { - line-height: normal; - } - %desktop-list-style-none { - list-style: none; - } - %desktop-list-style-armenian { - list-style: armenian; - } - %desktop-list-style-circle { - list-style: circle; - } - %desktop-list-style-decimal { - list-style: decimal; - } - %desktop-list-style-decimal-leading-zero { - list-style: decimal-leading-zero; - } - %desktop-list-style-disc { - list-style: disc; - } - %desktop-list-style-gregorian { - list-style: georgian; - } - %desktop-list-style-inside { - list-style: inside; - } - %desktop-list-style-lower-alpha { - list-style: lower-alpha; - } - %desktop-list-style-lower-greek { - list-style: lower-greek; - } - %desktop-list-style-lower-latin { - list-style: lower-latin; - } - %desktop-list-style-lower-roman { - list-style: lower-roman; - } - %desktop-list-style-outside { - list-style: outside; - } - %desktop-list-style-square { - list-style: square; - } - %desktop-list-style-unset { - list-style: unset; - } - %desktop-list-style-upper-alpha { - list-style: upper-alpha; - } - %desktop-list-style-upper-latin { - list-style: upper-latin; - } - %desktop-list-style-upper-roman { - list-style: upper-roman; - } - %desktop-list-style-position-inside { - list-style-position: inside; - } - %desktop-list-style-position-outside { - list-style-position: outside; - } - %desktop-list-style-type-none { - list-style-type: none; - } - %desktop-list-style-type-armenian { - list-style-type: armenian; - } - %desktop-list-style-type-circle { - list-style-type: circle; - } - %desktop-list-style-type-decimal { - list-style-type: decimal; - } - %desktop-list-style-type-decimal-leading-zero { - list-style-type: decimal-leading-zero; - } - %desktop-list-style-type-disc { - list-style-type: disc; - } - %desktop-list-style-type-gregorian { - list-style-type: georgian; - } - %desktop-list-style-type-inside { - list-style-type: inside; - } - %desktop-list-style-type-lower-alpha { - list-style-type: lower-alpha; - } - %desktop-list-style-type-lower-greek { - list-style-type: lower-greek; - } - %desktop-list-style-type-lower-latin { - list-style-type: lower-latin; - } - %desktop-list-style-type-lower-roman { - list-style-type: lower-roman; - } - %desktop-list-style-type-outside { - list-style-type: outside; - } - %desktop-list-style-type-square { - list-style-type: square; - } - %desktop-list-style-type-unset { - list-style-type: unset; - } - %desktop-list-style-type-upper-alpha { - list-style-type: upper-alpha; - } - %desktop-list-style-type-upper-latin { - list-style-type: upper-latin; - } - %desktop-list-style-type-upper-roman { - list-style-type: upper-roman; - } - %desktop-margin-auto { - margin: auto; - } - %desktop-margin-0 { - margin: 0; - } - %desktop-margin-bottom-auto { - margin-bottom: auto; - } - %desktop-margin-bottom-0 { - margin-bottom: 0; - } - %desktop-margin-left-auto { - margin-left: auto; - } - %desktop-margin-left-0 { - margin-left: 0; - } - %desktop-margin-right-auto { - margin-right: auto; - } - %desktop-margin-right-0 { - margin-right: 0; - } - %desktop-margin-top-auto { - margin-top: auto; - } - %desktop-margin-top-0 { - margin-top: 0; - } - %desktop-max-width-100 { - max-width: 100%; - } - %desktop-min-width-100 { - min-width: 100%; - } - %desktop-opacity-1 { - opacity: 1; - } - %desktop-opacity-09 { - opacity: .9; - } - %desktop-opacity-08 { - opacity: .8; - } - %desktop-opacity-07 { - opacity: .7; - } - %desktop-opacity-06 { - opacity: .6; - } - %desktop-opacity-05 { - opacity: .5; - } - %desktop-opacity-04 { - opacity: .4; - } - %desktop-opacity-03 { - opacity: .3; - } - %desktop-opacity-02 { - opacity: .2; - } - %desktop-opacity-01 { - opacity: .1; - } - %desktop-opacity-0 { - opacity: 0; - } - %desktop-outline-none { - outline: none; - } - %desktop-outline-color-1 { - outline-color: #fff; - } - %desktop-outline-color-2 { - outline-color: #000; - } - %desktop-outline-style-none { - outline-style: none; - } - %desktop-outline-style-hidden { - outline-style: hidden; - } - %desktop-outline-style-dotted { - outline-style: dotted; - } - %desktop-outline-style-dashed { - outline-style: dashed; - } - %desktop-outline-style-solid { - outline-style: solid; - } - %desktop-outline-style-double { - outline-style: double; - } - %desktop-outline-style-groove { - outline-style: groove; - } - %desktop-outline-style-ridge { - outline-style: ridge; - } - %desktop-outline-style-inset { - outline-style: inset; - } - %desktop-outline-style-outset { - outline-style: outset; - } - %desktop-overflow-visible { - overflow: visible; - } - %desktop-overflow-hidden { - overflow: hidden; - } - %desktop-overflow-scroll { - overflow: scroll; - } - %desktop-overflow-auto { - overflow: auto; - } - %desktop-overflow-x-visible { - overflow: visible; - } - %desktop-overflow-x-hidden { - overflow: hidden; - } - %desktop-overflow-x-scroll { - overflow: scroll; - } - %desktop-overflow-x-auto { - overflow: auto; - } - %desktop-overflow-y-visible { - overflow: visible; - } - %desktop-overflow-y-hidden { - overflow: hidden; - } - %desktop-overflow-y-scroll { - overflow: scroll; - } - %desktop-overflow-y-auto { - overflow: auto; - } - %desktop-padding-0 { - padding: 0; - } - %desktop-padding-bottom-0 { - padding-bottom: 0; - } - %desktop-padding-left-0 { - padding-left: 0; - } - %desktop-padding-right { - padding-right: 0; - } - %desktop-padding-top { - padding-top: 0; - } - %desktop-page-break-after-auto { - page-break-after: auto; - } - %desktop-page-break-after-always { - page-break-after: always; - } - %desktop-page-break-after-avoid { - page-break-after: avoid; - } - %desktop-page-break-after-left { - page-break-after: left; - } - %desktop-page-break-after-right { - page-break-after: right; - } - %desktop-page-break-before-auto { - page-break-before: auto; - } - %desktop-page-break-before-always { - page-break-before: always; - } - %desktop-page-break-before-avoid { - page-break-before: avoid; - } - %desktop-page-break-before-left { - page-break-before: left; - } - %desktop-page-break-before-right { - page-break-before: right; - } - %desktop-page-break-inside-auto { - page-break-inside: auto; - } - %desktop-page-break-inside-avoide { - page-break-inside: avoid; - } - %desktop-perspective-none { - -webkit-perspective: none; - perspective: none; - } - %desktop-position-static { - position: static; - } - %desktop-position-absolute { - position: absolute; - } - %desktop-position-fixed { - position: fixed; - } - %desktop-position-relative { - position: relative; - } - %desktop-quotes-none { - quotes: none; - } - %desktop-resize-none { - resize: none; - } - %desktop-resize-both { - resize: both; - } - %desktop-resize-horizontal { - resize: horizontal; - } - %desktop-resize-vertical { - resize: vertical; - } - %desktop-right-auto { - right: auto; - } - %desktop-right-0 { - right: 0; - } - %desktop-table-layout-auto { - table-layout: auto; - } - %desktop-table-layout-fixed { - table-layout: fixed; - } - %desktop-text-align-left { - text-align: left; - } - %desktop-text-align-right { - text-align: right; - } - %desktop-text-align-center { - text-align: center; - } - %desktop-text-align-justify { - text-align: justify; - } - %desktop-text-align-last-left { - text-align-last: left; - } - %desktop-text-align-last-right { - text-align-last: right; - } - %desktop-text-align-last-center { - text-align-last: center; - } - %desktop-text-align-last-justify { - text-align-last: justify; - } - %desktop-text-align-last-start { - text-align-last: start; - } - %desktop-text-align-last-end { - text-align-last: end; - } - %desktop-text-decoration-none { - text-decoration: none; - } - %desktop-text-decoration-underline { - text-decoration: underline; - } - %desktop-text-decoration-overline { - text-decoration: overline; - } - %desktop-text-decoration-line-through { - text-decoration: line-through; - } - %desktop-text-indent-0 { - text-indent: 0; - } - %desktop-text-overflow-clip { - -o-text-overflow: clip; - text-overflow: clip; - } - %desktop-text-overflow-ellipsis { - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - } - %desktop-text-shadow-none { - text-shadow: none; - } - %desktop-text-transform-none { - text-transform: none; - } - %desktop-text-transform-capitalize { - text-transform: capitalize; - } - %desktop-text-transform-uppercase { - text-transform: uppercase; - } - %desktop-text-transform-lowercase { - text-transform: lowercase; - } - %desktop-top-auto { - top: auto; - } - %desktop-top-0 { - top: 0; - } - %desktop-unicode-bidi-normal { - unicode-bidi: normal; - } - %desktop-unicode-bidi-embed { - unicode-bidi: embed; - } - %desktop-unicode-bidi-bidi-overrid { - unicode-bidi: bidi-override; - } - %desktop-user-select-auto { - -webkit-user-select: auto; - -moz-user-select: auto; - -ms-user-select: auto; - user-select: auto; - } - %desktop-user-select-none { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - %desktop-user-select-text { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - } - %desktop-user-select-all { - -webkit-user-select: all; - -moz-user-select: all; - -ms-user-select: all; - user-select: all; - } - %desktop-vertical-align-baseline { - vertical-align: baseline; - } - %desktop-vertical-align-sub { - vertical-align: sub; - } - %desktop-vertical-align-super { - vertical-align: super; - } - %desktop-vertical-align-top { - vertical-align: top; - } - %desktop-vertical-align-text-top { - vertical-align: text-top; - } - %desktop-vertical-align-middle { - vertical-align: middle; - } - %desktop-vertical-align-bottom { - vertical-align: bottom; - } - %desktop-vertical-align-text-bottom { - vertical-align: text-bottom; - } - %desktop-visibility-visible { - visibility: visible; - } - %desktop-visibility-hidden { - visibility: hidden; - } - %desktop-visibility-collapse { - visibility: collapse; - } - %desktop-white-space-normal { - white-space: normal; - } - %desktop-white-space-nowrap { - white-space: nowrap; - } - %desktop-white-space-pre { - white-space: pre; - } - %desktop-white-space-pre-line { - white-space: pre-line; - } - %desktop-white-space-pre-wrap { - white-space: pre-wrap; - } - %desktop-width-auto { - width: auto; - } - %desktop-width-0 { - width: 0; - } - %desktop-width-100 { - width: 100%; - } - %desktop-word-break-normal { - word-break: normal; - } - %desktop-word-break-break-all { - word-break: break-all; - } - %desktop-word-break-keep-all { - word-break: keep-all; - } - %desktop-word-spacing-normal { - word-spacing: normal; - } - %desktop-word-wrap-normal { - word-wrap: normal; - } - %desktop-word-wrap-break-word { - word-wrap: break-word; - } - %desktop-z-index-0 { - z-index: 0; - } - %desktop-z-index-1 { - z-index: 1; - } - %desktop-z-index-10 { - z-index: 10; - } - %desktop-z-index-11 { - z-index: 11; - } - %desktop-z-index-100 { - z-index: 100; - } - %desktop-z-index-101 { - z-index: 101; - } - %desktop-z-index-1000 { - z-index: 1000; - } - %desktop-z-index-1001 { - z-index: 1001; - } - %desktop-z-index-10000 { - z-index: 10000; - } - %desktop-z-index-10001 { - z-index: 1001; - } -} diff --git a/scss/01_placeholders/_placeholders-tablet.scss b/scss/01_placeholders/_placeholders-tablet.scss deleted file mode 100755 index 2e6ef96..0000000 --- a/scss/01_placeholders/_placeholders-tablet.scss +++ /dev/null @@ -1,1503 +0,0 @@ -@media screen and (min-width: $w3) { - %tablet-align-content-stretch { - -webkit-align-content: stretch; - align-content: stretch; - } - %tablet-align-content-center { - -webkit-align-content: center; - align-content: center; - } - %tablet-align-content-flex-start { - -webkit-align-content: flex-start; - align-content: flex-start; - } - %tablet-align-content-flex-end { - -webkit-align-content: flex-end; - align-content: flex-end; - } - %tablet-align-content-space-between { - -webkit-align-content: space-between; - align-content: space-between; - } - %tablet-align-content-space-around { - -webkit-align-content: space-around; - align-content: space-around; - } - %tablet-align-content-initial { - -webkit-align-content: initial; - align-content: initial; - } - %tablet-align-content-inherit { - -webkit-align-content: inherit; - align-content: inherit; - } - %tablet-align-items-stretch { - -webkit-align-items: stretch; - align-items: stretch; - } - %tablet-align-items-center { - -webkit-align-items: center; - align-items: center; - } - %tablet-align-items-flex-start { - -webkit-align-items: flex-start; - align-items: flex-start; - } - %tablet-align-items-flex-end { - -webkit-align-items: flex-end; - align-items: flex-end; - } - %tablet-align-items-baseline { - -webkit-align-items: baseline; - align-items: baseline; - } - %tablet-align-items-initial { - -webkit-align-items: initial; - align-items: initial; - } - %tablet-align-items-inherit { - -webkit-align-items: inherit; - align-items: inherit; - } - %tablet-align-self-auto { - -webkit-align-self: auto; - align-self: auto; - } - %tablet-align-self-stretch { - -webkit-align-self: stretch; - align-self: stretch; - } - %tablet-align-self-center { - -webkit-align-self: center; - align-self: center; - } - %tablet-align-self-flex-start { - -webkit-align-self: flex-start; - align-self: flex-start; - } - %tablet-align-self-flex-end { - -webkit-align-self: flex-end; - align-self: flex-end; - } - %tablet-align-self-baseline { - -webkit-align-self: baseline; - align-self: baseline; - } - %tablet-align-self-initial { - -webkit-align-self: initial; - align-self: initial; - } - %tablet-align-self-inherit { - -webkit-align-self: inherit; - align-self: inherit; - } - %tablet-appearance-none { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - %tablet-backface-visibility-visible { - -webkit-backface-visibility: visible; - -moz-backface-visibility: visible; - backface-visibility: visible; - } - %tablet-backface-visibility-hidden { - -webkit-backface-visibility: hidden; - -mox-backface-visibility: hidden; - backface-visibility: hidden; - } - %tablet-background-attachment-scroll { - background-attachment: scroll; - } - %tablet-background-attachment-fixed { - background-attachment: fixed; - } - %tablet-background-attachment-local { - background-attachment: local; - } - %tablet-background-clip-border-box { - background-clip: border-box; - } - %tablet-background-clip-padding-box { - background-clip: padding-box; - } - %tablet-background-clip-content-box { - background-clip: content-box; - } - %tablet-background-color-1 { - background-color: #fff; - } - %tablet-background-color-2 { - background-color: #000; - } - %tablet-background-origin-padding-box { - background-origin: padding-box; - } - %tablet-background-origin-border-box { - background-origin: border-box; - } - %tablet-background-origin-content-box { - background-origin: content-box; - } - %tablet-background-position-left-top { - background-position: left top; - } - %tablet-background-position-left-center { - background-position: left center; - } - %tablet-background-position-left-bottom { - background-position: left bottom; - } - %tablet-background-position-right-top { - background-position: right top; - } - %tablet-background-position-right-center { - background-position: right center; - } - %tablet-background-position-right-bottom { - background-position: right bottom; - } - %tablet-background-position-center-top { - background-position: center top; - } - %tablet-background-position-center-center { - background-position: center center; - } - %tablet-background-position-center-bottom { - background-position: center bottom; - } - %tablet-background-repeat-repeat { - background-repeat: repeat; - } - %tablet-background-repeat-repeat-x { - background-repeat: repeat-x; - } - %tablet-background-repeat-repeat-y { - background-repeat: repeat-y; - } - %tablet-background-repeat-no-repeat { - background-repeat: no-repeat; - } - %tablet-background-size-auto { - background-size: auto; - } - %tablet-background-size-cover { - background-size: cover; - } - %tablet-background-size-contain { - background-size: contain; - } - %tablet-border-none { - border: none; - } - %tablet-border-0 { - border: 0; - } - %tablet-border-bottom-none { - border-bottom: none; - } - %tablet-border-bottom-0 { - border-bottom: 0; - } - %tablet-border-bottom-color-transparent { - border-bottom-color: transparent; - } - %tablet-border-bottom-style-none { - border-bottom-style: none; - } - %tablet-border-bottom-style-hidden { - border-bottom-style: hidden; - } - %tablet-border-bottom-style-dotted { - border-bottom-style: hidden; - } - %tablet-border-bottom-style-dashed { - border-bottom-style: dashed; - } - %tablet-border-bottom-style-solid { - border-bottom-style: solid; - } - %tablet-border-bottom-style-double { - border-bottom-style: double; - } - %tablet-border-bottom-style-groove { - border-bottom-style: groove; - } - %tablet-border-bottom-style-ridge { - border-bottom-style: ridge; - } - %tablet-border-bottom-style-inset { - border-bottom-style: inset; - } - %tablet-border-bottom-style-outset { - border-bottom-style: outset; - } - %tablet-border-collapse-separate { - border-collapse: separate; - } - %tablet-border-collapse-collapse { - border-collapse: collapse; - } - %tablet-border-image-repeat-stretch { - border-image-repeat: stretch; - } - %tablet-border-image-repeat-repeat { - border-image-repeat: repeat - } - %tablet-border-image-repeat-round { - border-image-repeat: round; - } - %tablet-border-image-slice-0 { - border-image-slice: 0; - } - %tablet-border-image-slice-100 { - border-image-slice: 100%; - } - %tablet-border-image-slice-fill { - border-image-slice: fill; - } - %tablet-border-image-source-none { - border-image-source: none; - } - %tablet-border-image-width-0 { - border-image-width: 0; - } - %tablet-border-image-width-100 { - border-image-width: 100%; - } - %tablet-border-image-width-auto { - border-image-width: auto; - } - %tablet-border-left-none { - border-left: none; - } - %tablet-border-left-0 { - border-left: 0; - } - %tablet-border-left-color-transparent { - border-left-color: transparent; - } - %tablet-border-left-style-none { - border-left-style: none; - } - %tablet-border-left-style-hidden { - border-left-style: hidden; - } - %tablet-border-left-style-dotted { - border-left-style: dotted; - } - %tablet-border-left-style-dashed { - border-left-style: dashed; - } - %tablet-border-left-style-solid { - border-left-style: solid; - } - %tablet-border-left-style-double { - border-left-style: double; - } - %tablet-border-left-style-groove { - border-left-style: groove; - } - %tablet-border-left-style-ridge { - border-left-style: ridge; - } - %tablet-border-left-style-inset { - border-left-style: inset; - } - %tablet-border-left-style-outset { - border-left-style: outset; - } - %tablet-border-radius-100 { - border-radius: 100%; - } - %tablet-border-radius-0 { - border-radius: 0; - } - %tablet-border-right-none { - border-right: none; - } - %tablet-border-right-0 { - border-right: 0; - } - %tablet-border-right-color-1 { - border-right-color: #fff; - } - %tablet-border-right-color-2 { - border-right-color: #000; - } - %tablet-border-right-style-none { - border-right-style: none; - } - %tablet-border-right-style-hidden { - border-right-style: hidden; - } - %tablet-border-right-style-dotted { - border-right-style: dotted; - } - %tablet-border-right-style-dashed { - border-right-style: dashed; - } - %tablet-border-right-style-solid { - border-right-style: solid; - } - %tablet-border-right-style-double { - border-right-style: double; - } - %tablet-border-right-style-groove { - border-right-style: groove; - } - %tablet-border-right-style-ridge { - border-right-style: ridge; - } - %tablet-border-right-style-inset { - border-right-style: inset; - } - %tablet-border-right-style-outset { - border-right-style: outset; - } - %tablet-border-style-none { - border-style: none; - } - %tablet-border-style-hidden { - border-style: hidden; - } - %tablet-border-style-dotted { - border-style: dotted; - } - %tablet-border-style-dashed { - border-style: dashed; - } - %tablet-border-style-solid { - border-style: solid; - } - %tablet-border-style-double { - border-style: double; - } - %tablet-border-style-groove { - border-style: groove; - } - %tablet-border-style-ridge { - border-style: ridge; - } - %tablet-border-style-inset { - border-style: inset; - } - %tablet-border-style-outset { - border-style: outset; - } - %tablet-border-top-none { - border-top: none; - } - %tablet-border-top-0 { - border-top: 0; - } - %tablet-border-top-color-1 { - border-top-color: #fff; - } - %tablet-border-top-color-2 { - border-top-color: #000; - } - %tablet-border-top-style-none { - border-top-style: none; - } - %tablet-border-top-style-hidden { - border-top-style: hidden; - } - %tablet-border-top-style-dotted { - border-top-style: dotted; - } - %tablet-border-top-style-dashed { - border-top-style: dashed; - } - %tablet-border-top-style-solid { - border-top-style: solid; - } - %tablet-border-top-style-double { - border-top-style: double; - } - %tablet-border-top-style-groove { - border-top-style: groove; - } - %tablet-border-top-style-ridge { - border-top-style: ridge; - } - %tablet-border-top-style-inset { - border-top-style: inset; - } - %tablet-border-top-style-outset { - border-top-style: outset; - } - %tablet-bottom-auto { - bottom: auto; - } - %tablet-bottom-0 { - bottom: 0; - } - %tablet-box-shadow-none { - -webkit-box-shadow: none; - box-shadow: none; - } - %tablet-box-sizing-content-box { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - } - %tablet-box-sizing-border-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - %tablet-caption-side-top { - caption-side: top; - } - %tablet-caption-side-bottom { - caption-side: bottom; - } - %tablet-clear-none { - clear: none; - } - %tablet-clear-left { - clear: left; - } - %tablet-clear-right { - clear: right; - } - %tablet-clear-both { - clear: both; - } - %tablet-clip-auto { - clip: auto; - } - %tablet-color-1 { - color: #fff; - } - %tablet-color-2 { - color: #000; - } - %tablet-column-count-auto { - -webkit-column-count: auto; - -moz-column-count: auto; - column-count: auto; - } - %tablet-column-fill-auto { - -webkit-column-fill: auto; - -moz-column-fill: auto; - column-fill: auto; - } - %tablet-column-fill-balance { - -webkit-column-fill: balance; - -moz-column-fill: balance; - column-fill: balance; - } - %tablet-column-gap-normal { - -webkit-column-gap: normal; - -moz-column-gap: normal; - column-gap: normal; - } - %tablet-colum-gap-0 { - -webkit-column-gap: 0; - -moz-column-gap: 0; - column-gap: 0; - } - %tablet-column-rule-color-1 { - -webkit-column-rule-color: #fff; - -moz-column-rule-color: #fff; - column-rule-color: #fff; - } - %tablet-column-rule-color-2 { - -webkit-column-rule-color: #000; - -moz-column-rule-color: #000; - column-rule-color: #000; - } - %tablet-column-rule-style-none { - -webkit-column-rule-style: none; - -moz-column-rule-style: none; - column-rule-style: none; - } - %tablet-column-rule-style-hidden { - -webkit-column-rule-style: hidden; - -moz-column-rule-style: hidden; - column-rule-style: hidden; - } - %tablet-column-rule-style-dotted { - -webkit-column-rule-style: dotted; - -moz-column-rule-style: dotted; - column-rule-style: dotted; - } - %tablet-column-rule-style-dashed { - -webkit-column-rule-style: dashed; - -moz-column-rule-style: dashed; - column-rule-style: dashed; - } - %tablet-column-rule-style-solid { - -webkit-column-rule-style: solid; - -moz-column-rule-style: solid; - column-rule-style: solid; - } - %tablet-column-rule-style-double { - -webkit-column-rule-style: double; - -moz-column-rule-style: double; - column-rule-style: double; - } - %tablet-column-rule-style-groove { - -webkit-column-rule-style: groove; - -moz-column-rule-style: groove; - column-rule-style: groove; - } - %tablet-column-rule-style-ridge { - -webkit-column-rule-style: ridge; - -moz-column-rule-style: ridge; - column-rule-style: ridge; - } - %tablet-column-rule-style-inset { - -webkit-column-rule-style: inset; - -moz-column-rule-style: inset; - column-rule-style: inset; - } - %tablet-column-rule-style-outset { - -webkit-column-rule-style: outset; - -moz-column-rule-style: outset; - column-rule-style: outset; - } - %tablet-column-span-1 { - -webkit-column-span: 1; - column-span: 1; - } - %tablet-column-span-all { - -webkit-column-span: all; - column-span: all; - } - %tablet-column-width-auto { - -webkit-column-width: auto; - -moz-column-width: auto; - column-width: auto; - } - %tablet-content { - content: ""; - } - %tablet-content-none { - content: none; - } - %tablet-content-counter { - content: counter; - } - %tablet-content-open-quote { - content: open-quote; - } - %tablet-content-close-quote { - content: close-quote; - } - %tablet-content-no-open-quote { - content: no-open-quote; - } - %tablet-content-no-close-quote { - content: no-close-quote; - } - %tablet-counter-increment-none { - counter-increment: none; - } - %tablet-counter-reset-none { - counter-reset: none; - } - %tablet-cursor-alias { - cursor: alias; - } - %tablet-cursor-all-scroll { - cursor: all-scroll; - } - %tablet-cursor-auto { - cursor: auto; - } - %tablet-cursor-cell { - cursor: cell; - } - %tablet-cursor-context-menu { - cursor: context-menu; - } - %tablet-cursor-col-resize { - cursor: col-resize; - } - %tablet-cursor-copy { - cursor: copy; - } - %tablet-cursor-crosshair { - cursor: crosshair; - } - %tablet-cursor-default { - cursor: default; - } - %tablet-cursor-e-resize { - cursor: e-resize; - } - %tablet-cursor-ew-resize { - cursor: ew-resize; - } - %tablet-cursor-grab { - cursor: grab; - } - %tablet-cursor-grabbing { - cursor: grabbing; - } - %tablet-cursor-help { - cursor: help; - } - %tablet-cursor-move { - cursor: move; - } - %tablet-cursor-n-resize { - cursor: n-resize; - } - %tablet-cursor-ne-resize { - cursor: ne-resize; - } - %tablet-cursor-nesw-resize { - cursor: nesw-resize; - } - %tablet-cursor-ns-resize { - cursor: ns-resize; - } - %tablet-cursor-nw-resize { - cursor: nw-resize; - } - %tablet-cursor-nwse-resize { - cursor: nwse-resize; - } - %tablet-cursor-no-drop { - cursor: no-drop; - } - %tablet-cursor-none { - cursor: none; - } - %tablet-cursor-not-allowed { - cursor: not-allowed; - } - %tablet-cursor-pointer { - cursor: pointer; - } - %tablet-cursor-progress { - cursor: progress; - } - %tablet-cursor-row-resize { - cursor: row-resize; - } - %tablet-cursor-s-resize { - cursor: s-resize; - } - %tablet-cursor-se-resize { - cursor: se-resize; - } - %tablet-cursor-sw-resize { - cursor: sw-resize; - } - %tablet-cursor-text { - cursor: text - } - %tablet-cursor-vertical-text { - cursor: vertical-text; - } - %tablet-cursor-w-resize { - cursor: w-resize; - } - %tablet-cursor-wait { - cursor: wait; - } - %tablet-cursor-zoom-in { - cursor: zoom-in; - } - %tablet-cursor-zoom-out { - cursor: zoom-out; - } - %tablet-direction-ltr { - direction: ltr; - } - %tablet-direction-rtl { - direction: rtl; - } - %tablet-display-inline { - display: inline; - } - %tablet-display-block { - display: block; - } - %tablet-display-flex { - -webkit-display: flex; - -ms-display: flex; - display: -webkit-flex; - display: flex; - } - %tablet-display-inline-block { - display: inline-block; - } - %tablet-display-inline-flex { - -webkit-display: inline-flex; - -ms-display: inline-flex; - display: -webkit-inline-flex; - display: inline-flex - } - %tablet-display-inline-table { - display: inline-table; - } - %tablet-display-list-item { - display: list-item; - } - %tablet-display-run-in { - display: run-in; - } - %tablet-display-table { - display: table; - } - %tablet-display-table-caption { - display: table-caption; - } - %tablet-display-table-column-group { - display: table-column-group - } - %tablet-display-table-header-group { - display: table-header-group; - } - %tablet-display-table-footer-group { - display: table-footer-group; - } - %tablet-display-table-row-group { - display: table-row-group - } - %tablet-display-table-cell { - display: table-cell; - } - %tablet-display-table-column { - display: table-column; - } - %tablet-display-table-row { - display: table-row; - } - %tablet-display-none { - display: none; - } - %tablet-empty-cells-hide { - empty-cells: hide; - } - %tablet-empty-cells-show { - empty-cells: show; - } - %tablet-flex-auto { - -webkit-flex: auto; - -ms-flex: auto; - flex: auto; - } - %tablet-flex-basis-auto { - -webkit-flex-basis: auto; - flex-basis: auto; - } - %tablet-flex-direction-row { - -webkit-flex-direction: row; - flex-direction: row; - } - %tablet-flex-direction-row-reverse { - -webkit-flex-direction: row-reverse; - flex-direction: row-reverse; - } - %tablet-flex-direction-column { - -webkit-flex-direction: column; - flex-direction: column; - } - %tablet-flex-direction-column-reverse { - -webkit-flex-direction: column-reverse; - flex-direction: column-reverse; - } - %tablet-flex-grow-initial { - -webkit-flex-grow: initial; - flex-grow: initial; - } - %tablet-flex-grow-inherit { - -webkit-flex-grow: inherit; - flex-grow: inherit; - } - %tablet-flex-shrink-initial { - -webkit-flex-shrink: initial; - flex-shrink: initial; - } - %tablet-flex-shrink-inherit { - -webkit-flex-shrink: inherit; - flex-shrink: inherit; - } - %tablet-flex-wrap-nowrap { - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; - } - %tablet-flex-wrap-wrap { - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - } - %tablet-flex-wrap-wrap-reverse { - -webkit-flex-wrap: wrap-reverse; - flex-wrap: wrap-reverse; - } - %tablet-float-none { - float: none; - } - %tablet-float-left { - float: left; - } - %tablet-float-right { - float: right; - } - %tablet-font-style-normal { - font-style: normal; - } - %tablet-font-style-italic { - font-style: italic; - } - %tablet-font-style-oblique { - font-style: oblique; - } - %tablet-font-variant-normal { - font-variant: normal; - } - %tablet-font-variant-small-caps { - font-variant: small-caps; - } - %tablet-font-weight-normal { - font-weight: normal; - } - %tablet-font-weight-bold { - font-weight: bold; - } - %tablet-font-weight-bolder { - font-weight: bolder; - } - %tablet-font-weight-lighter { - font-weight: lighter; - } - %tablet-font-weight-100 { - font-weight: 100; - } - %tablet-font-weight-200 { - font-weight: 200; - } - %tablet-font-weight-300 { - font-weight: 300; - } - %tablet-font-weight-400 { - font-weight: 400; - } - %tablet-font-weight-500 { - font-weight: 500; - } - %tablet-font-weight-600 { - font-weight: 600; - } - %tablet-font-weight-700 { - font-weight: 700; - } - %tablet-font-weight-800 { - font-weight: 800; - } - %tablet-font-weight-900 { - font-weight: 900; - } - %tablet-height-auto { - height: auto; - } - %tablet-height-0 { - height: 0; - } - %tablet-height-100 { - height: 100%; - } - %tablet-justify-content-flex-start { - -webkit-justify-content: flex-start; - justify-content: flex-start; - } - %tablet-justify-content-flex-end { - -webkit-justify-content: flex-end; - justify-content: flex-end; - } - %tablet-justify-content-center { - -webkit-justify-content: center; - justify-content: center; - } - %tablet-justify-content-space-between { - -webkit-justify-content: space-between; - justify-content: space-between; - } - %tablet-justify-content-space-around { - -webkit-justify-content: space-around; - justify-content: space-around; - } - %tablet-left-auto { - left: auto; - } - %tablet-left-0 { - left: 0; - } - %tablet-letter-spacing-normal { - letter-spacing: normal; - } - %tablet-line-height-normal { - line-height: normal; - } - %tablet-list-style-none { - list-style: none; - } - %tablet-list-style-armenian { - list-style: armenian; - } - %tablet-list-style-circle { - list-style: circle; - } - %tablet-list-style-decimal { - list-style: decimal; - } - %tablet-list-style-decimal-leading-zero { - list-style: decimal-leading-zero; - } - %tablet-list-style-disc { - list-style: disc; - } - %tablet-list-style-gregorian { - list-style: georgian; - } - %tablet-list-style-inside { - list-style: inside; - } - %tablet-list-style-lower-alpha { - list-style: lower-alpha; - } - %tablet-list-style-lower-greek { - list-style: lower-greek; - } - %tablet-list-style-lower-latin { - list-style: lower-latin; - } - %tablet-list-style-lower-roman { - list-style: lower-roman; - } - %tablet-list-style-outside { - list-style: outside; - } - %tablet-list-style-square { - list-style: square; - } - %tablet-list-style-unset { - list-style: unset; - } - %tablet-list-style-upper-alpha { - list-style: upper-alpha; - } - %tablet-list-style-upper-latin { - list-style: upper-latin; - } - %tablet-list-style-upper-roman { - list-style: upper-roman; - } - %tablet-list-style-position-inside { - list-style-position: inside; - } - %tablet-list-style-position-outside { - list-style-position: outside; - } - %tablet-list-style-type-none { - list-style-type: none; - } - %tablet-list-style-type-armenian { - list-style-type: armenian; - } - %tablet-list-style-type-circle { - list-style-type: circle; - } - %tablet-list-style-type-decimal { - list-style-type: decimal; - } - %tablet-list-style-type-decimal-leading-zero { - list-style-type: decimal-leading-zero; - } - %tablet-list-style-type-disc { - list-style-type: disc; - } - %tablet-list-style-type-gregorian { - list-style-type: georgian; - } - %tablet-list-style-type-inside { - list-style-type: inside; - } - %tablet-list-style-type-lower-alpha { - list-style-type: lower-alpha; - } - %tablet-list-style-type-lower-greek { - list-style-type: lower-greek; - } - %tablet-list-style-type-lower-latin { - list-style-type: lower-latin; - } - %tablet-list-style-type-lower-roman { - list-style-type: lower-roman; - } - %tablet-list-style-type-outside { - list-style-type: outside; - } - %tablet-list-style-type-square { - list-style-type: square; - } - %tablet-list-style-type-unset { - list-style-type: unset; - } - %tablet-list-style-type-upper-alpha { - list-style-type: upper-alpha; - } - %tablet-list-style-type-upper-latin { - list-style-type: upper-latin; - } - %tablet-list-style-type-upper-roman { - list-style-type: upper-roman; - } - %tablet-margin-auto { - margin: auto; - } - %tablet-margin-0 { - margin: 0; - } - %tablet-margin-bottom-auto { - margin-bottom: auto; - } - %tablet-margin-bottom-0 { - margin-bottom: 0; - } - %tablet-margin-left-auto { - margin-left: auto; - } - %tablet-margin-left-0 { - margin-left: 0; - } - %tablet-margin-right-auto { - margin-right: auto; - } - %tablet-margin-right-0 { - margin-right: 0; - } - %tablet-margin-top-auto { - margin-top: auto; - } - %tablet-margin-top-0 { - margin-top: 0; - } - %tablet-max-width-100 { - max-width: 100%; - } - %tablet-min-width-100 { - min-width: 100%; - } - %tablet-opacity-1 { - opacity: 1; - } - %tablet-opacity-09 { - opacity: .9; - } - %tablet-opacity-08 { - opacity: .8; - } - %tablet-opacity-07 { - opacity: .7; - } - %tablet-opacity-06 { - opacity: .6; - } - %tablet-opacity-05 { - opacity: .5; - } - %tablet-opacity-04 { - opacity: .4; - } - %tablet-opacity-03 { - opacity: .3; - } - %tablet-opacity-02 { - opacity: .2; - } - %tablet-opacity-01 { - opacity: .1; - } - %tablet-opacity-0 { - opacity: 0; - } - %tablet-outline-none { - outline: none; - } - %tablet-outline-color-1 { - outline-color: #fff; - } - %tablet-outline-color-2 { - outline-color: #000; - } - %tablet-outline-style-none { - outline-style: none; - } - %tablet-outline-style-hidden { - outline-style: hidden; - } - %tablet-outline-style-dotted { - outline-style: dotted; - } - %tablet-outline-style-dashed { - outline-style: dashed; - } - %tablet-outline-style-solid { - outline-style: solid; - } - %tablet-outline-style-double { - outline-style: double; - } - %tablet-outline-style-groove { - outline-style: groove; - } - %tablet-outline-style-ridge { - outline-style: ridge; - } - %tablet-outline-style-inset { - outline-style: inset; - } - %tablet-outline-style-outset { - outline-style: outset; - } - %tablet-overflow-visible { - overflow: visible; - } - %tablet-overflow-hidden { - overflow: hidden; - } - %tablet-overflow-scroll { - overflow: scroll; - } - %tablet-overflow-auto { - overflow: auto; - } - %tablet-overflow-x-visible { - overflow: visible; - } - %tablet-overflow-x-hidden { - overflow: hidden; - } - %tablet-overflow-x-scroll { - overflow: scroll; - } - %tablet-overflow-x-auto { - overflow: auto; - } - %tablet-overflow-y-visible { - overflow: visible; - } - %tablet-overflow-y-hidden { - overflow: hidden; - } - %tablet-overflow-y-scroll { - overflow: scroll; - } - %tablet-overflow-y-auto { - overflow: auto; - } - %tablet-padding-0 { - padding: 0; - } - %tablet-padding-bottom-0 { - padding-bottom: 0; - } - %tablet-padding-left-0 { - padding-left: 0; - } - %tablet-padding-right { - padding-right: 0; - } - %tablet-padding-top { - padding-top: 0; - } - %tablet-page-break-after-auto { - page-break-after: auto; - } - %tablet-page-break-after-always { - page-break-after: always; - } - %tablet-page-break-after-avoid { - page-break-after: avoid; - } - %tablet-page-break-after-left { - page-break-after: left; - } - %tablet-page-break-after-right { - page-break-after: right; - } - %tablet-page-break-before-auto { - page-break-before: auto; - } - %tablet-page-break-before-always { - page-break-before: always; - } - %tablet-page-break-before-avoid { - page-break-before: avoid; - } - %tablet-page-break-before-left { - page-break-before: left; - } - %tablet-page-break-before-right { - page-break-before: right; - } - %tablet-page-break-inside-auto { - page-break-inside: auto; - } - %tablet-page-break-inside-avoide { - page-break-inside: avoid; - } - %tablet-perspective-none { - -webkit-perspective: none; - perspective: none; - } - %tablet-position-static { - position: static; - } - %tablet-position-absolute { - position: absolute; - } - %tablet-position-fixed { - position: fixed; - } - %tablet-position-relative { - position: relative; - } - %tablet-quotes-none { - quotes: none; - } - %tablet-resize-none { - resize: none; - } - %tablet-resize-both { - resize: both; - } - %tablet-resize-horizontal { - resize: horizontal; - } - %tablet-resize-vertical { - resize: vertical; - } - %tablet-right-auto { - right: auto; - } - %tablet-right-0 { - right: 0; - } - %tablet-table-layout-auto { - table-layout: auto; - } - %tablet-table-layout-fixed { - table-layout: fixed; - } - %tablet-text-align-left { - text-align: left; - } - %tablet-text-align-right { - text-align: right; - } - %tablet-text-align-center { - text-align: center; - } - %tablet-text-align-justify { - text-align: justify; - } - %tablet-text-align-last-left { - text-align-last: left; - } - %tablet-text-align-last-right { - text-align-last: right; - } - %tablet-text-align-last-center { - text-align-last: center; - } - %tablet-text-align-last-justify { - text-align-last: justify; - } - %tablet-text-align-last-start { - text-align-last: start; - } - %tablet-text-align-last-end { - text-align-last: end; - } - %tablet-text-decoration-none { - text-decoration: none; - } - %tablet-text-decoration-underline { - text-decoration: underline; - } - %tablet-text-decoration-overline { - text-decoration: overline; - } - %tablet-text-decoration-line-through { - text-decoration: line-through; - } - %tablet-text-indent-0 { - text-indent: 0; - } - %tablet-text-overflow-clip { - -o-text-overflow: clip; - text-overflow: clip; - } - %tablet-text-overflow-ellipsis { - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - } - %tablet-text-shadow-none { - text-shadow: none; - } - %tablet-text-transform-none { - text-transform: none; - } - %tablet-text-transform-capitalize { - text-transform: capitalize; - } - %tablet-text-transform-uppercase { - text-transform: uppercase; - } - %tablet-text-transform-lowercase { - text-transform: lowercase; - } - %tablet-top-auto { - top: auto; - } - %tablet-top-0 { - top: 0; - } - %tablet-unicode-bidi-normal { - unicode-bidi: normal; - } - %tablet-unicode-bidi-embed { - unicode-bidi: embed; - } - %tablet-unicode-bidi-bidi-overrid { - unicode-bidi: bidi-override; - } - %tablet-user-select-auto { - -webkit-user-select: auto; - -moz-user-select: auto; - -ms-user-select: auto; - user-select: auto; - } - %tablet-user-select-none { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - %tablet-user-select-text { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - } - %tablet-user-select-all { - -webkit-user-select: all; - -moz-user-select: all; - -ms-user-select: all; - user-select: all; - } - %tablet-vertical-align-baseline { - vertical-align: baseline; - } - %tablet-vertical-align-sub { - vertical-align: sub; - } - %tablet-vertical-align-super { - vertical-align: super; - } - %tablet-vertical-align-top { - vertical-align: top; - } - %tablet-vertical-align-text-top { - vertical-align: text-top; - } - %tablet-vertical-align-middle { - vertical-align: middle; - } - %tablet-vertical-align-bottom { - vertical-align: bottom; - } - %tablet-vertical-align-text-bottom { - vertical-align: text-bottom; - } - %tablet-visibility-visible { - visibility: visible; - } - %tablet-visibility-hidden { - visibility: hidden; - } - %tablet-visibility-collapse { - visibility: collapse; - } - %tablet-white-space-normal { - white-space: normal; - } - %tablet-white-space-nowrap { - white-space: nowrap; - } - %tablet-white-space-pre { - white-space: pre; - } - %tablet-white-space-pre-line { - white-space: pre-line; - } - %tablet-white-space-pre-wrap { - white-space: pre-wrap; - } - %tablet-width-auto { - width: auto; - } - %tablet-width-0 { - width: 0; - } - %tablet-width-100 { - width: 100%; - } - %tablet-word-break-normal { - word-break: normal; - } - %tablet-word-break-break-all { - word-break: break-all; - } - %tablet-word-break-keep-all { - word-break: keep-all; - } - %tablet-word-spacing-normal { - word-spacing: normal; - } - %tablet-word-wrap-normal { - word-wrap: normal; - } - %tablet-word-wrap-break-word { - word-wrap: break-word; - } - %tablet-z-index-0 { - z-index: 0; - } - %tablet-z-index-1 { - z-index: 1; - } - %tablet-z-index-10 { - z-index: 10; - } - %tablet-z-index-11 { - z-index: 11; - } - %tablet-z-index-100 { - z-index: 100; - } - %tablet-z-index-101 { - z-index: 101; - } - %tablet-z-index-1000 { - z-index: 1000; - } - %tablet-z-index-1001 { - z-index: 1001; - } - %tablet-z-index-10000 { - z-index: 10000; - } - %tablet-z-index-10001 { - z-index: 1001; - } -} diff --git a/scss/02_css-mixins/README.md b/scss/02_css-mixins/README.md deleted file mode 100644 index a8fe5e8..0000000 --- a/scss/02_css-mixins/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# CSS MIXINS - -## ABOUT - diff --git a/scss/02_css-mixins/_css-mixins.scss b/scss/02_css-mixins/_css-mixins.scss deleted file mode 100755 index a32980d..0000000 --- a/scss/02_css-mixins/_css-mixins.scss +++ /dev/null @@ -1,226 +0,0 @@ -@mixin align-content($value) { - -webkit-align-content: $value; - align-content: $value; -} -@mixin align-items($value) { - -webkit-align-items: $value; - align-items: $value; -} - -/* -@mixins align-self ($value) { - -webkit-align-self: $value; - align-self: $value; -}*/ - -@mixin backface-visibility($visibility) { - -webkit-backface-visibility: $visibility; - -moz-backface-visibility: $visibility; - backface-visibility: $visibility; -} -@mixin backdrop-filter ($filter) { - -webkit-backdrop-filter: $filter; - backdrop-filter: $filter; -} -@mixin border-image ($borderImage) { - -webkit-border-image: $borderImage; - -moz-border-image: $borderImage; - -o-border-image: $borderImage; - border-image: $borderImage; -} -@mixin box-shadow($boxShadow) { - -webkit-box-shadow: $boxShadow; - -moz-box-shadow: $boxShadow; - box-shadow: $boxShadow; -} - -@mixin background-gradient ($gradient) { - //always define a fallback background-color when using this mixin - background: -webkit-linear-gradient($gradient); - background: -o-linear-gradient($gradient); - background: -moz-linear-gradient($gradient); - background: linear-gradient($gradient); -} -@mixin border ($borderStyle, $borderWidth, $borderColor, $borderRadius) { - @if $borderColor !=transparent { - border-color: $borderColor; - } - @extend %border-style-#{$borderStyle}; - @if $borderRadius > 0 { - border-radius: $borderRadius; - } - @if $borderWidth > 0 { - border-width: $borderWidth; - } -} -@mixin column-count ($columnCount) { - -webkit-column-count: $columnCount; - -moz-column-count: $columnCount; - column-count: $columnCount; -} -@mixin column-design ($columGap, $columnWidth, $columnRuleType, $columnRuleWidth, $columnRuleColor) { - -webkit-column-gap: $columGap; - -moz-column-gap: $columGap; - column-gap: $columGap; - // - -webkit-column-width: $columnWidth; - -moz-column-width: $columnWidth; - column-width: $columnWidth; - // - -webkit-column-rule: $columnRuleWidth $columnRuleType $columnRuleColor; - -moz-column-rule: $columnRuleWidth $columnRuleType $columnRuleColor; - column-rule: $columnRuleWidth $columnRuleType $columnRuleColor; -} -@mixin filter ($filter) { - -webkit-filter: $filter; - filter: $filter; -} -@mixin perspective ($length, $origin) { - -webkit-perspective: $length; - -moz-perspective: $length; - perspective: $length; - -webkit-perspective-origin: $origin; - -moz-perspective-origin: $origin; - perspective-origin: $origin; -} -@mixin placeholder-color ($color) { - &::-webkit-input-placeholder { - color: $color; - } - &::-moz-placeholder { - color: $color; - } - &:-ms-input-placeholder { - color: $color; - } - &:-moz-placeholder { - color: $color; - } -} -@mixin tab-size ($value) { - -moz-tab-size: $value; - -o-tab-size: $value; - tab-size: $value; -} -@mixin scale($ratioX, $ratioY) { - -webkit-transform: scale($ratioX, $ratioY); - -moz-transform: scale($ratioX, $ratioY); - -ms-transform: scale($ratioX, $ratioY); - -o-transform: scale($ratioX, $ratioY); - transform: scale($ratioX, $ratioY); -} -@mixin scaleX($ratio) { - -webkit-transform: scaleX($ratio); - -moz-transform: scaleX($ratio); - -ms-transform: scaleX($ratio); - -o-transform: scaleX($ratio); - transform: scaleX($ratio); -} -@mixin scaleY($ratio) { - -webkit-transform: scaleY($ratio); - -moz-transform: scaleX($ratio); - -ms-transform: scaleY($ratio); - -o-transform: scaleY($ratio); - transform: scaleY($ratio); -} -@mixin skew($x, $y) { - -webkit-transform: skewX($x) skewY($y); - -moz-transform: skewX($x) skewY($y); - -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ - -o-transform: skewX($x) skewY($y); - transform: skewX($x) skewY($y); -} -@mixin translate($x, $y) { - -webkit-transform: translate($x, $y); - -moz-transform: translate($x, $y); - -ms-transform: translate($x, $y); - -o-transform: translate($x, $y); - transform: translate($x, $y); -} - -@mixin translateZ($z) { - -webkit-transform: translateZ($z); - -moz-transform: translateZ($z); - -ms-transform: translateZ($z); - -o-transform: translateZ($z); - transform: translateZ($z); -} -@mixin translate3d($x, $y, $z) { - -webkit-transform: translate3d($x, $y, $z); - -moz-transform: translate3d($x, $y, $z); - -ms-transform: translate3d($x, $y, $z); - -o-transform: translate3d($x, $y, $z); - transform: translate3d($x, $y, $z); -} -@mixin rotate($degrees) { - -webkit-transform: rotate($degrees); - -moz-transform: rotate($degrees); - -ms-transform: rotate($degrees); - -o-transform: rotate($degrees); - transform: rotate($degrees); -} -@mixin rotateX($degrees) { - -webkit-transform: rotateX($degrees); - -moz-transform: rotateX($degrees); - -ms-transform: rotateX($degrees); - -o-transform: rotateX($degrees); - transform: rotateX($degrees); -} -@mixin rotateY($degrees) { - -webkit-transform: rotateY($degrees); - -moz-transform: rotateY($degrees); - -ms-transform: rotateY($degrees); - -o-transform: rotateY($degrees); - transform: rotateY($degrees); -} -@mixin multiple-transform ($transformations) { - -webkit-transform: $transformations; - -moz-transform: $transformations; - -ms-transform: $transformations; - -o-transform: $transformations; - transform: $transformations; -} - -@mixin perspective($perspective) { - -webkit-perspective: $perspective; - -moz-perspective: $perspective; - perspective: $perspective; -} -@mixin perspective-origin($perspective) { - -webkit-perspective-origin: $perspective; - -moz-perspective-origin: $perspective; - perspective-origin: $perspective; -} -@mixin transform-origin($origin) { - -webkit-transform-origin: $origin; - -moz-transform-origin: $origin; - -ms-transform-origin: $origin; - -o-transform-origin: $origin; - transform-origin: $origin; -} -@mixin transition ($property, $seconds, $easing) { - -webkit-transition: $property $seconds $easing; - -moz-transition: $property $seconds $easing; - -o-transition: $property $seconds $easing; - transition: $property $seconds $easing; -} -@mixin double-transition ($property1, $seconds1, $easing1, $property2, $seconds2, $easing2) { - -webkit-transition: $property1 $seconds1 $easing1, $property2 $seconds2 $easing2; - -moz-transition: $property1 $seconds1 $easing1, $property2 $seconds2 $easing2; - -o-transition: $property1 $seconds1 $easing1, $property2 $seconds2 $easing2; - transition: $property1 $seconds1 $easing1, $property2 $seconds2 $easing2; -} -@mixin triple-transition ($property1, $seconds1, $easing1, $property2, $seconds2, $easing2, $property3, $seconds3, $easing3) { - -webkit-transition: $property1 $seconds1 $easing1, $property2 $seconds2 $easing2, $property3 $seconds3 $easing3; - -moz-transition: $property1 $seconds1 $easing1, $property2 $seconds2 $easing2, $property3 $seconds3 $easing3; - -o-transition: $property1 $seconds1 $easing1, $property2 $seconds2 $easing2, $property3 $seconds3 $easing3; - transition: $property1 $seconds1 $easing1, $property2 $seconds2 $easing2, $property3 $seconds3 $easing3; -} -@mixin text-selection-color ($color) { - &::selection { - background: $color; - } - &::-moz-selection { - background: $color; - } -} diff --git a/scss/02_css-mixins/_import.scss b/scss/02_css-mixins/_import.scss deleted file mode 100644 index 25318d6..0000000 --- a/scss/02_css-mixins/_import.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'css-mixins'; \ No newline at end of file diff --git a/scss/_breakpoints.scss b/scss/_breakpoints.scss deleted file mode 100755 index 5ba4f08..0000000 --- a/scss/_breakpoints.scss +++ /dev/null @@ -1,14 +0,0 @@ -//SCREEN SIZES -$w0: 280px; //Really small screen -$w1: 320px; //iPhone SE -$w2: 414px; //iPhone 6 plus -$w3: 768px; //iPad -$w4: 992px; //Tablet(?) -$w5: 1200px; //Desktop -$w6: 1440px; //Desktop -//MIN VARIABLES -$w2min: $w2 - 1px; -$w3min: $w3 - 1px; -$w4min: $w4 - 1px; -$w5min: $w5 - 1px; -$w6min: $w6 - 1px; \ No newline at end of file diff --git a/scss/_colors.scss b/scss/_colors.scss deleted file mode 100755 index 6729409..0000000 --- a/scss/_colors.scss +++ /dev/null @@ -1,116 +0,0 @@ -//========================== -//PERCENTAGES -//========================== -$colorPercentVariationOne: 6%; -$colorPercentVariationTwo: 12%; -$colorPercentVariationThree: 18%; -//========================== -//DEFINE COLORS -//========================== -$white: rgba(255, 255, 255, 1); -$black: rgba(0, 0, 0, 1); -$mid-gray: rgba(128, 128, 128, 1); -$color-1: rgba(200, 50, 20, 1); -$color-2: rgba(100, 250, 20, 1); -$color-3: rgba(50, 200, 150, 1); -$color-4: rgba(50, 200, 150, 1); -$color-5: rgba(50, 200, 150, 1); -$color-6: rgba(50, 200, 150, 1); -$color-7: rgba(50, 200, 150, 1); -$color-8: rgba(50, 200, 150, 1); -$color-9: rgba(50, 200, 150, 1); -//========================== -//COLORS VARIATIONS -//========================== -//white -$white-90: rgba($white, .9); -$white-80: rgba($white, .8); -$white-70: rgba($white, .7); -$white-60: rgba($white, .6); -$white-50: rgba($white, .5); -//black -$black-90: rgba($black, .9); -$black-80: rgba($black, .8); -$black-70: rgba($black, .7); -$black-60: rgba($black, .6); -$black-50: rgba($black, .5); -//gray -$mid-gray-light: lighten($mid-gray, $colorPercentVariationOne); -$mid-gray-lighter: lighten($mid-gray, $colorPercentVariationTwo); -$mid-gray-lighter-plus: lighten($mid-gray, $colorPercentVariationThree); -$mid-gray-dark: darken($mid-gray, $colorPercentVariationOne); -$mid-gray-darker: darken($mid-gray, $colorPercentVariationTwo); -$mid-gray-darker-plus: darken($mid-gray, $colorPercentVariationThree); -//color 1 -$color-1-light: lighten($color-1, $colorPercentVariationOne); -$color-1-lighter: lighten($color-1, $colorPercentVariationTwo); -$color-1-lighter-plus: lighten($color-1, $colorPercentVariationThree); -$color-1-dark: darken($color-1, $colorPercentVariationOne); -$color-1-darker: darken($color-1, $colorPercentVariationTwo); -$color-1-darker-plus: darken($color-1, $colorPercentVariationThree); -//color 2 -$color-2-light: lighten($color-2, $colorPercentVariationOne); -$color-2-lighter: lighten($color-2, $colorPercentVariationTwo); -$color-2-lighter-plus: lighten($color-2, $colorPercentVariationThree); -$color-2-dark: darken($color-2, $colorPercentVariationOne); -$color-2-darker: darken($color-2, $colorPercentVariationTwo); -$color-2-darker-plus: darken($color-2, $colorPercentVariationThree); -//color 3 -$color-3-light: lighten($color-3, $colorPercentVariationOne); -$color-3-lighter: lighten($color-3, $colorPercentVariationTwo); -$color-3-lighter-plus: lighten($color-3, $colorPercentVariationThree); -$color-3-dark: darken($color-3, $colorPercentVariationOne); -$color-3-darker: darken($color-3, $colorPercentVariationTwo); -$color-3-darker-plus: darken($color-3, $colorPercentVariationThree); -//color 4 -$color-4-light: lighten($color-4, $colorPercentVariationOne); -$color-4-lighter: lighten($color-4, $colorPercentVariationTwo); -$color-4-lighter-plus: lighten($color-4, $colorPercentVariationThree); -$color-4-dark: darken($color-4, $colorPercentVariationOne); -$color-4-darker: darken($color-4, $colorPercentVariationTwo); -$color-4-darker-plus: darken($color-4, $colorPercentVariationThree); -//color 5 -$color-5-light: lighten($color-5, $colorPercentVariationOne); -$color-5-lighter: lighten($color-5, $colorPercentVariationTwo); -$color-5-lighter-plus: lighten($color-5, $colorPercentVariationThree); -$color-5-dark: darken($color-5, $colorPercentVariationOne); -$color-5-darker: darken($color-5, $colorPercentVariationTwo); -$color-5-darker-plus: darken($color-5, $colorPercentVariationThree); -//color 6 -$color-6-light: lighten($color-6, $colorPercentVariationOne); -$color-6-lighter: lighten($color-6, $colorPercentVariationTwo); -$color-6-lighter-plus: lighten($color-6, $colorPercentVariationThree); -$color-6-dark: darken($color-6, $colorPercentVariationOne); -$color-6-darker: darken($color-6, $colorPercentVariationTwo); -$color-6-darker-plus: darken($color-6, $colorPercentVariationThree); -//color 7 -$color-7-light: lighten($color-7, $colorPercentVariationOne); -$color-7-lighter: lighten($color-7, $colorPercentVariationTwo); -$color-7-lighter-plus: lighten($color-7, $colorPercentVariationThree); -$color-7-dark: darken($color-7, $colorPercentVariationOne); -$color-7-darker: darken($color-7, $colorPercentVariationTwo); -$color-7-darker-plus: darken($color-7, $colorPercentVariationThree); -//color 8 -$color-8: rgba(50, 200, 150, 1); -$color-8-light: lighten($color-8, $colorPercentVariationOne); -$color-8-lighter: lighten($color-8, $colorPercentVariationTwo); -$color-8-lighter-plus: lighten($color-8, $colorPercentVariationThree); -$color-8-dark: darken($color-8, $colorPercentVariationOne); -$color-8-darker: darken($color-8, $colorPercentVariationTwo); -$color-8-darker-plus: darken($color-8, $colorPercentVariationThree); -//color 9 -$color-9: rgba(50, 200, 150, 1); -$color-9-light: lighten($color-9, $colorPercentVariationOne); -$color-9-lighter: lighten($color-9, $colorPercentVariationTwo); -$color-9-lighter-plus: lighten($color-9, $colorPercentVariationThree); -$color-9-dark: darken($color-9, $colorPercentVariationOne); -$color-9-darker: darken($color-9, $colorPercentVariationTwo); -$color-9-darker-plus: darken($color-9, $colorPercentVariationThree); -//color 10 -$color-10: rgba(50, 200, 150, 1); -$color-10-light: lighten($color-10, $colorPercentVariationOne); -$color-10-lighter: lighten($color-10, $colorPercentVariationTwo); -$color-10-lighter-plus: lighten($color-10, $colorPercentVariationThree); -$color-10-dark: darken($color-10, $colorPercentVariationOne); -$color-10-darker: darken($color-10, $colorPercentVariationTwo); -$color-10-darker-plus: darken($color-10, $colorPercentVariationThree); diff --git a/scss/aria-tabs.scss b/scss/aria-tabs.scss index beca605..3a54b06 100755 --- a/scss/aria-tabs.scss +++ b/scss/aria-tabs.scss @@ -1,121 +1,60 @@ -//================================ -//IMPORT -//================================ -@import 'breakpoints'; -@import '01_placeholders/import'; -@import '02_css-mixins/import'; -//================================ -//VARIABLES -//================================ -//Tab group style -$ariaTabs--tabGroupPaddings: 1rem 0; -//Nav style -$ariaTabs--navBackgroundColor: #b51c1c; -$ariaTabs--tabNavBorder: 0.01rem solid #b51c1c; -$ariaTabs--tabNavBorderRadius: 0.5rem; -//button style -$ariaTabs--btnPadding: 0.5rem 1.5rem; -$ariaTabs--btnBackgroundColor: #b51c1c; -$ariaTabs--btnColor: #fff; -//selected button style -$ariaTabs--btnSelectedBackgroundColor: #ffffff; -$ariaTabs--btnSelectedColor: #690e0e; -//Tabpanel style -$ariaTabs--tabpanelBorder: 0.01rem solid #b51c1c; -$ariaTabs--tabpanelBorderRadius: 0.5rem; -//content style -$ariaTabs--contentPadding: 0.5rem; -//================================ -//CSS STYLES -//================================ //------------------------------- //BLOCK //------------------------------- .tab-group { - padding: $ariaTabs--tabGroupPaddings; + padding: 1rem 0; + font-family: sans-serif; } //------------------------------- //ELEMENTS //------------------------------- -.tab-group__tab-nav { - background-color: $ariaTabs--navBackgroundColor; - @if $ariaTabs--tabNavBorder !='' { - border-left: $ariaTabs--tabNavBorder; - border-right: $ariaTabs--tabNavBorder; - border-top: $ariaTabs--tabNavBorder; - } - @if $ariaTabs--tabNavBorderRadius !=0 { - border-top-left-radius: $ariaTabs--tabNavBorderRadius; - border-top-right-radius: $ariaTabs--tabNavBorderRadius; - } -} .tab-group__tab-ul { - @extend %margin-0; - @extend %list-style-none; - @extend %padding-0; - @extend %clearfix; + margin: 0; + list-style: none; + padding: 0; + height: 2.8rem; } .tab-group__tab-li { - @extend %float-left; - @if $ariaTabs--tabNavBorderRadius !=0 { - &:first-child { - > .tab-group__tab-btn { - border-top-left-radius: $ariaTabs--tabNavBorderRadius; - } - } - } - @if $ariaTabs--tabNavBorderRadius !=0 { - &:last-child { - > .tab-group__tab-btn { - border-top-right-radius: $ariaTabs--tabNavBorderRadius; - } - } - } + float: left; } .tab-group__tab-btn { - @extend %appearance-none; - background-color: $ariaTabs--btnBackgroundColor; - @extend %border-none; - color: $ariaTabs--btnColor; - padding: $ariaTabs--btnPadding; - @extend %width-100; + background-color: #393939; + border: 0.01rem solid #d8d8d8; + color: #fff; + margin: 0; + padding: 1rem 4rem; + width: 100%; } .tab-group__tabs-cont { // } .tab-group__tabpanel { - @if $ariaTabs--tabpanelBorder !='' { - border-bottom: $ariaTabs--tabpanelBorder; - border-left: $ariaTabs--tabpanelBorder; - border-right: $ariaTabs--tabpanelBorder; - } - @if $ariaTabs--tabpanelBorderRadius !='' { - border-bottom-left-radius: $ariaTabs--tabpanelBorderRadius; - border-bottom-right-radius: $ariaTabs--tabpanelBorderRadius; - } + border-width: 0.01rem; + border-color: #393939; + border-style: solid; } .tab-group__tab-content { - padding: $ariaTabs--contentPadding; + padding: 3rem 2rem; } //------------------------------- //MODIFIERS //------------------------------- .tab-group__tab-btn_selected { - background-color: $ariaTabs--btnSelectedBackgroundColor; - color: $ariaTabs--btnSelectedColor; + background-color: #d8d8d8; + color: #000; } .tab-group__tabpanel_selected { // } //justify tabs with flexbox .tab-group__tab-ul_justify { - @extend %align-items-stretch; - @extend %display-flex; - @extend %flex-wrap-nowrap; + align-items: stretch; + display: flex; + flex-wrap: nowrap; .tab-group__tab-li { - @extend %width-100; + width: 100%; } .tab-group__tab-btn { - @extend %height-100; + height: 100%; } }