1. Advisor
  2. bobril
  3. functions
  4. bobril.styleDef
View all bobril analysis

How to use the bobril.styleDef function in bobril

To help you get started, we’ve selected a few bobril examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github keeema / bobrilstrap / components / listGroup.ts View on Github external
Success,
  Info,
  Warning,
  Danger
}

export const listGroupStyles = {
  listGroup: b.styleDef("list-group"),
  listGroupItem: b.styleDef("list-group-item"),
  listGroupItemHeading: b.styleDef("list-group-item-heading"),
  listGroupItemText: b.styleDef("list-group-item-text"),
  active: b.styleDef("active"),
  disabled: b.styleDef("disabled"),
  listGroupItemSuccess: b.styleDef("list-group-item-success"),
  listGroupItemInfo: b.styleDef("list-group-item-info"),
  listGroupItemWarning: b.styleDef("list-group-item-warning"),
  listGroupItemDanger: b.styleDef("list-group-item-danger")
};

export const listGroupItemContextStyles: IDictionary<
  ListGroupItemContext,
  b.IBobrilStyle
> = createDictionary();
listGroupItemContextStyles(
  ListGroupItemContext.Success,
  listGroupStyles.listGroupItemSuccess
);
listGroupItemContextStyles(
  ListGroupItemContext.Info,
  listGroupStyles.listGroupItemInfo
);
listGroupItemContextStyles(
github bobril / bobril-m / src / toggle.ts View on Github external
action?: () => void;
    tabindex?: number;
}

interface IToggleCtx extends b.IBobrilCtx {
    data: IToggleData;
    focusFromKeyboard: boolean;
    down: boolean;
    rippleStart: number;
}

let enabledStyle = b.styleDef({
    cursor: "pointer"
}, { focus: { outline: "none" } });

let disabledStyle = b.styleDef({
    cursor: "default"
});

const toggleSize = 20;
const toggleTrackWidth = 20;

let rootStyle = b.styleDef([c.userSelectNone, c.positionRelative, {
    display: "inline-block",
    width: toggleTrackWidth + toggleSize,
    height: 24
}]);

let trackStyle = b.styleDef([c.positionAbsolute, c.noTapHighlight, {
    transition: transitions.easeOut(),
    left: toggleSize * 0.5 - 7,
    top: 5,
github keeema / bobrilstrap / components / listGroup.ts View on Github external
export enum ListGroupItemContext {
  Success,
  Info,
  Warning,
  Danger
}

export const listGroupStyles = {
  listGroup: b.styleDef("list-group"),
  listGroupItem: b.styleDef("list-group-item"),
  listGroupItemHeading: b.styleDef("list-group-item-heading"),
  listGroupItemText: b.styleDef("list-group-item-text"),
  active: b.styleDef("active"),
  disabled: b.styleDef("disabled"),
  listGroupItemSuccess: b.styleDef("list-group-item-success"),
  listGroupItemInfo: b.styleDef("list-group-item-info"),
  listGroupItemWarning: b.styleDef("list-group-item-warning"),
  listGroupItemDanger: b.styleDef("list-group-item-danger")
};

export const listGroupItemContextStyles: IDictionary<
  ListGroupItemContext,
  b.IBobrilStyle
> = createDictionary();
listGroupItemContextStyles(
  ListGroupItemContext.Success,
  listGroupStyles.listGroupItemSuccess
);
listGroupItemContextStyles(
  ListGroupItemContext.Info,
  listGroupStyles.listGroupItemInfo
);
github keeema / bobrilstrap / components / helpers.ts View on Github external
import * as b from "bobril";

export const helpers = {
  text: {
    mutated: b.styleDef("text-mutated"),
    primary: b.styleDef("text-primary"),
    success: b.styleDef("text-success"),
    info: b.styleDef("text-info"),
    warning: b.styleDef("text-warning"),
    danger: b.styleDef("text-danger")
  },
  background: {
    primary: b.styleDef("bg-primary"),
    success: b.styleDef("bg-success"),
    info: b.styleDef("bg-info"),
    warning: b.styleDef("bg-warning"),
    danger: b.styleDef("bg-danger")
  },
  float: {
    pullLeft: b.styleDef("pull-left"),
    pullRight: b.styleDef("pull-right")
  },
  clearfix: b.styleDef("clearfix"),
  close: b.styleDef("close"),
github keeema / bobrilstrap / components / nav.ts View on Github external
import * as b from "bobril";
import { Elem, IBaseData } from "./element";

export const navStyles = {
  navbar: b.styleDef("navbar"),
  navbarDefault: b.styleDef("navbar-default"),
  navbarCollapse: b.styleDef("navbar-collapse"),
  navbarHeader: b.styleDef("navbar-header"),
  navbarToggle: b.styleDef("navbar-toggle"),
  navbarBrand: b.styleDef("navbar-brand"),
  navbarNav: b.styleDef("navbar-nav"),
  nav: b.styleDef("nav"),
  navbarForm: b.styleDef("navbar-form"),
  navbarLeft: b.styleDef("navbar-left"),
  navbarRight: b.styleDef("navbar-right"),
  navbarBtn: b.styleDef("navbar-btn"),
  navbarText: b.styleDef("navbar-text"),
  navbarLink: b.styleDef("navbar-link"),
  navbarFixedTop: b.styleDef("navbar-fixed-top"),
  navbarFixedBottom: b.styleDef("navbar-fixed-bottom"),
  navbarStaticTop: b.styleDef("navbar-static-top"),
  navbarInverse: b.styleDef("navbar-inverse"),
  navbTabs: b.styleDef("nav-tabs"),
  navStacked: b.styleDef("nav-stacked"),
  navJustified: b.styleDef("nav-justified"),
  navPills: b.styleDef("nav-pills"),
  dropdown: b.styleDef("dropdown"),
  disabled: b.styleDef("disabled"),
  collapse: b.styleDef("collapse"),
  iconBar: b.styleDef("icon-bar")
};
github keeema / bobrilstrap / components / panel.ts View on Github external
import { PanelFooter } from "./panelFooter";

export const panelStyles = {
  panel: b.styleDef("panel"),
  panelGroup: b.styleDef("panel-group"),
  panelDefault: b.styleDef("panel-default"),
  panelPrimary: b.styleDef("panel-primary"),
  panelSuccess: b.styleDef("panel-success"),
  panelWarning: b.styleDef("panel-warning"),
  panelDanger: b.styleDef("panel-danger"),
  panelInfo: b.styleDef("panel-info"),
  panelHeading: b.styleDef("panel-heading"),
  panelBody: b.styleDef("panel-body"),
  panelFooter: b.styleDef("panel-footer"),
  panelTitle: b.styleDef("panel-title"),
  panelCollapse: b.styleDef("panel-collapse")
};

export enum PanelContext {
  Default,
  Primary,
  Success,
  Warning,
  Danger,
  Info
}

export const panelContextStyles: IDictionary<
  PanelContext,
  b.IBobrilStyle
> = createDictionary();
panelContextStyles(PanelContext.Default, panelStyles.panelDefault);
github Bobris / bobril-build / web / styles.ts View on Github external
import * as b from 'bobril';

export const spanUserAgent = b.styleDef({ 
    display: "inline-block", 
    width: "30%" 
});

export const spanInfo = b.styleDef({ 
    marginLeft: 10, 
    display: "inline-block" 
});

export const selectedStyle = b.styleDef({ 
    background: "#ccddee" 
});

export const stackStyle = b.styleDef({
    whiteSpace: "pre-wrap"
});
github bobril / bobril-m / src / popoverAnimationDefault.ts View on Github external
style?: b.IBobrilStyles,
    targetOrigin?: IPopoverOrigin,
    zDepth?: number
}

interface IPopoverAnimationDefaultCtx extends b.IBobrilCtx {
    data: IPopoverAnimationDefaultData;
}

const rootStyle = b.styleDef({
    position: 'fixed',
    transition: transitions.easeOut('250ms', 'opacity') + ', ' + transitions.easeOut('250ms', 'transform'),
    maxHeight: '100%'
});

const horizontalStyle = b.styleDef({
    maxHeight: '100%',
    overflowY: 'auto',
    transition: transitions.easeOut('250ms', 'opacity') + ', ' + transitions.easeOut('250ms', 'transform')
});

const verticalStyle = b.styleDef({
    transition: transitions.easeOut('250ms', 'opacity') + ', ' + transitions.easeOut('250ms', 'transform')
});

export const PopoverAnimationDefault = b.createComponent({
    render(ctx: IPopoverAnimationDefaultCtx, me: b.IBobrilNode) {
        const d = ctx.data;
        const horizontal = d.targetOrigin!.horizontal === 'middle' ? 'vertical' : d.targetOrigin!.horizontal;
        me.children = paper.Paper({
            style: [
                rootStyle,
github keeema / bobrilstrap / example / bsexample / css.ts View on Github external
bsDocsBooticonLg: b.styleDef("bs-docs-booticon-lg"),
  bsDocsBooticonOutline: b.styleDef("bs-docs-booticon-outline"),
  bsDocsNav: b.styleDef("bs-docs-nav"),
  bsDocsHeader: b.styleDef("bs-docs-header"),
  bsDocsFooter: b.styleDef("bs-docs-footer"),
  bsDocsFooterLinks: b.styleDef("bs-docs-footer-links"),
  bsDocsSection: b.styleDef("bs-docs-section"),
  bsDocsSidebar: b.styleDef("bs-docs-sidebar"),
  bsDocsSidenav: b.styleDef("bs-docs-sidenav"),
  bsExample: b.styleDef("bs-example"),
  bsExampleBgClasses: b.styleDef("bs-example-bg-classes"),
  bsExampleControlSizing: b.styleDef("bs-example-control-sizing"),
  bsExampleType: b.styleDef("bs-example-type"),
  bsExampleTooltips: b.styleDef("bs-example-tooltips"),
  bsExampleImages: b.styleDef("bs-example-images"),
  bsDocsMastHead: b.styleDef("bs-docs-masthead"),
  bsNavbarTopExample: b.styleDef("bs-navbar-top-example"),
  bsNavbarBottomExample: b.styleDef("bs-navbar-bottom-example"),
  bsGlyphicons: b.styleDef("bs-glyphicons"),
  bsGlyphiconsList: b.styleDef("bs-glyphicons-list"),
  controls: b.styleDef("controls"),
  glyphiconClass: b.styleDef("glyphicon-class"),
  highlight: b.styleDef("highlight"),
  isHidden: b.styleDef("is-hidden"),
  isVisible: b.styleDef("is-visible"),
  pageHeader: b.styleDef("page-header"),
  responsiveUtilities: b.styleDef("responsive-utilities"),
  responsiveUtilitiesTest: b.styleDef("row responsive-utilities-test"),
  visibleOn: b.styleDef("visible-on"),
  hiddenOn: b.styleDef("hidden-on"),
  showGrid: b.styleDef("show-grid"),
  tooltipDemo: b.styleDef("tooltip-demo"),
github keeema / bobrilstrap / components / nav.ts View on Github external
import * as b from "bobril";
import { Elem, IBaseData } from "./element";

export const navStyles = {
  navbar: b.styleDef("navbar"),
  navbarDefault: b.styleDef("navbar-default"),
  navbarCollapse: b.styleDef("navbar-collapse"),
  navbarHeader: b.styleDef("navbar-header"),
  navbarToggle: b.styleDef("navbar-toggle"),
  navbarBrand: b.styleDef("navbar-brand"),
  navbarNav: b.styleDef("navbar-nav"),
  nav: b.styleDef("nav"),
  navbarForm: b.styleDef("navbar-form"),
  navbarLeft: b.styleDef("navbar-left"),
  navbarRight: b.styleDef("navbar-right"),
  navbarBtn: b.styleDef("navbar-btn"),
  navbarText: b.styleDef("navbar-text"),
  navbarLink: b.styleDef("navbar-link"),
  navbarFixedTop: b.styleDef("navbar-fixed-top"),
  navbarFixedBottom: b.styleDef("navbar-fixed-bottom"),
  navbarStaticTop: b.styleDef("navbar-static-top"),
  navbarInverse: b.styleDef("navbar-inverse"),
  navbTabs: b.styleDef("nav-tabs"),
  navStacked: b.styleDef("nav-stacked"),

bobril

Component Oriented MVC Framework with virtual DOM and CSS

GitHub
MIT
Latest version published 12 days ago

Package Health Score

66 / 100
Full package analysis

Popular bobril functions

Similar packages