franken-ui/dist/uikit/stylings/section.js

Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.

import merge from 'lodash/merge.js';
export const rules = {
    '.uk-section': {
        display: 'flow-root',
        boxSizing: 'border-box',
        paddingTop: '40px',
        paddingBottom: '40px'
    },
    '.uk-section > :last-child': { marginBottom: '0' },
    '.uk-section-xsmall': { paddingTop: '20px', paddingBottom: '20px' },
    '.uk-section-small': { paddingTop: '40px', paddingBottom: '40px' },
    '.uk-section-large': { paddingTop: '70px', paddingBottom: '70px' },
    '.uk-section-xlarge': { paddingTop: '140px', paddingBottom: '140px' },
    '.uk-section-default': { backgroundColor: '#fff', '--uk-navbar-color': 'dark' },
    '.uk-section-muted': { backgroundColor: '#f8f8f8', '--uk-navbar-color': 'dark' },
    '.uk-section-primary': {
        backgroundColor: '#1e87f0',
        '--uk-navbar-color': 'light'
    },
    '.uk-section-secondary': { backgroundColor: '#222', '--uk-navbar-color': 'light' }
};
export const media = {
    '@media (min-width: 768px)': {
        '.uk-section': { paddingTop: '70px', paddingBottom: '70px' },
        '.uk-section-large': { paddingTop: '140px', paddingBottom: '140px' },
        '.uk-section-xlarge': { paddingTop: '210px', paddingBottom: '210px' }
    }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-section': {},
        'hook-default': {},
        'hook-muted': {},
        'hook-secondary': {},
        'hook-primary': {},
        'hook-overlap': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-section': {
            ..._hooks['hook-section']
        },
        '.uk-section-default': {
            ..._hooks['hook-default']
        },
        '.uk-section-muted': {
            ..._hooks['hook-muted']
        },
        '.uk-section-primary': {
            ..._hooks['hook-primary']
        },
        '.uk-section-secondary': {
            ..._hooks['hook-secondary']
        },
        '.uk-section-overlap': {
            ..._hooks['hook-overlap']
        },
        ..._hooks['hook-misc']
    };
};