Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save lvl99/0f59f9c1d936e89849058b71e1a71276 to your computer and use it in GitHub Desktop.
Save lvl99/0f59f9c1d936e89849058b71e1a71276 to your computer and use it in GitHub Desktop.
Object-oriented inspired composable LESS mixins. View the article on the blog: http://blog.lvl99.com
// Modal Mixin Class
// @param @ns Namespaces the custom state classes
.ui-lvl99-modal(@ns: ~"lvl99-modal") {
.ui-lvl99-toggleable(@ns);
// Special mixin to apply any rules to the default class
// If you feel you wouldn’t need to reuse this class definition in other components, you could
// just define it in the main body of the mixin class definition
.-modal-class-default(@rules: {}) {
position: fixed;
left: 0;
top: 0;
width: 100%;
pointer-events: none;
@rules();
}
// Special mixin to apply any rules to the `show` class
.-modal-class-show(@rules: {}) {
// Ensure to inherit the `.-toggleable-class-show` mixin styles
.-toggleable-class-show({
overflow: auto;
height: 100%;
pointer-events: auto;
@rules();
});
}
// Special mixin to apply any rules to the `hide` class
.-modal-class-hide(@rules: {}) {
// Ensure to inherit the `.-toggleable-class-hide` mixin styles
.-toggleable-class-hide({
overflow: hidden;
height: 0;
@rules();
});
}
// The default state of this modal will actually inherit from the Toggleable’s `hide` class
// since modals should be closed by default
.-modal-state-default(@rules: {}) {
// Notice I use `.-toggleable-class-hide` here and not `.-toggleable-state-hide` since the state
// will be using the `&` parent selector, and I don’t need that
.-toggleable-class-hide({
.-modal-class-default(@rules);
});
}
// Special mixin to apply any rules to the modal’s `show` state
.-modal-state-show(@rules: {}) {
// The Toggleable state uses the `&` parent selector to assign the class to the component
.-toggleable-state-show({
.-modal-class-show(@rules);
});
}
// Special mixin to apply any rules to the modal’s `hide` state
.-modal-state-hide(@rules: {}) {
// The Toggleable state uses the `&` parent selector to assign the class to the component
.-toggleable-state-hide({
.-modal-class-hide(@rules);
});
}
// Special mixin to apply any default state styles and rules
.-modal-init-default(@rules: {}) {
// Initialise the default/show/hide states for the modal
.-modal-state-default();
.-modal-state-show();
.-modal-state-hide();
// Import in detached ruleset to extend this component instance’s style
@rules();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment