Is Foundation 5 class label.inline possible only to use for @media medium-up?

Question

I'm trying to get this layout for different media types, example is below.

Small screens:

+----------------------+
| LABEL                |
+----------------------+
| TEXT INPUT           |
+----------------------+

Medium-up screens:

+----------------------+----------------------+
| LABEL                | TEXT INPUT           |
+----------------------+----------------------+

So I have this code:

<div class="row">
    <div class="columns medium-2">
        <label>
            Label
        </label>
    </div>
    <div class="columns medium-10">
        <input type="text" />
    </div>                                    
</div>

All is fine but for medium-up screens label isn't verticaly aligned to the middle and also isn't horizontaly aligned to the right. To achive this Foundation 5 has two special classes for label: label.inline and label.right but I don't like to have these classes used for small screens too.

Possible solution which is already known to me but looking for a better (css only) one:

<label class="visible-for-small-only">
    Label
</label>
<label class="visible-for-medium-up right inline">
    Label
</label>

Is there any CSS only solution with reuse of Foundation classes inline and right or do I have to have two labels, one is visible for small screens only and one is visible for the rest of screens?

Answer 1

Since you said you're using SASS, you could make a custom class and include the inline label styling for medium screens and up. Here's how you would do that:

label {
    &.inline-for-medium-up { 
        @media #{$medium} {
            @include form-label(inline,false);
        }
    }
}


<div class="row">
    <div class="medium-2 columns">
        <label class="inline-for-medium-up">
            Label
        </label>
    </div>
    <div class="medium-10 columns">
        <input type="text" />
    </div>                                    
</div>

Explanation:

With SASS, you're able to create mixins of CSS and then include them wherever you would like. Form-label is a mixin that foundation created and it contains all of the form label styles. It has two parameters you can add, one is inline. So if you include the mixin, and add the inline parameter, sass will include all of the css for an inline label. I included that mixin with the parameter inside of a media query that says to only include the styles if the screen is of medium or greater size.