| //// |
| /// @group layout/responsive |
| //// |
| |
| /// Template for styling responsive layouts. |
| /// @todo Make it functional! |
| @mixin os-responsive { |
| .l-csslayout { |
| background: green; |
| } |
| |
| .l-csslayout .v-caption-os-box { |
| background: yellow; |
| } |
| |
| .l-csslayout[width-range~="0-399px"] { |
| .os-box { |
| width: 100%; |
| } |
| .v-caption-os-box { |
| width: 100%; |
| } |
| } |
| |
| .l-csslayout[width-range~="400-499px"] { |
| .os-box { |
| width: 50%; |
| } |
| .v-caption-os-box { |
| width: 50%; |
| } |
| } |
| |
| .l-csslayout[width-range~="500px-599px"] .os-box {width: 40%} |
| .l-csslayout[width-range~="500px-599px"] .v-caption-os-box {width: 10%} |
| |
| .l-csslayout[width-range~="600px-799px"] .os-box {width: 20%} |
| .l-csslayout[width-range~="600px-799px"] .v-caption-os-box {width: 13%} |
| |
| .l-csslayout[width-range~="800px-"] .os-box {width: 20%} |
| .l-csslayout[width-range~="800px-"] .v-caption-os-box {width: 5%} |
| } |