os.web.angular.Material.scala Maven / Gradle / Ivy
The newest version!
// Copyright 2015 ~ Optersoft
package os.web.angular
import scalatags.generic._
import scalatags.text.Builder
import scalatags._
import os.browse.uri
/**
* http://www.google.com/design/spec/material-design/introduction.html
*/
@uri("//ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css")
object Material extends Text.Cap with Material { // with os.web.Style
val url = "https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css"
}
trait Material extends Util[Builder, String, String] {
///// TYPOGRAPHY /////
/** Light 112px */
val display4 = "md-display-4"
/** Regular 56px */
val display3 = "md-display-3"
/** Regular 45px */
val display2 = "md-display-2"
/** Regular 34px */
val display1 = "md-display-1"
/** Regular 24px */
val headline = "md-headline"
/** Medium 2.0sp */
val title = "md-title"
/** Regular 16px */
val subhead = "md-subhead"
///// DIRECTIVES /////
/**
* A special input component with a drop-down of all possible matches to a custom query.
* This component allows you to provide real-time suggestions as the user types in the input area.
*/
val autocomplete = "md-autocomplete".tag
/**
* A button directive with optional ink ripples (default enabled).
*
* If you supply a `href` or `ng-href` attribute, it will become an `a` element. Otherwise,
* it will become a `button` element.
*
* @param md-no-ink If present, disable ripple ink effects.
* @param ng-disabled En/Disable based on the expression
* @param md-ripple-size Overrides the default ripple size logic. Options: full, partial, auto
* @param aria-label Adds alternative text to button for accessibility, useful for icon buttons. If no default text is found, a warning will be logged.
*/
val button = "md-button".tag
/**
* The directive is a container element used within containers.
*/
val card = "md-card".tag
/**
* The checkbox directive is used like the normal angular checkbox.
*
* As per the material design spec the checkbox is in the accent color by default. The primary
* color palette may be used with the md-primary class.
*/
val checkbox = "md-checkbox".tag
/**
* Component used within `chips` and is responsible for rendering individual chips.
*/
val chip = "md-chip".tag
/**
* Designates an element to be used as the delete button for a `chip`. This element is
* passed as a child of the `chips` element.
*/
val chipRemove = "md-chip-remove".tag
/**
* An input component for building lists of strings or objects. The list items are displayed
* as 'chips'. This component can make use of an html `input` element or an `autocomplete` element.
*/
val chips = "md-chips".tag
/**
* An input component based on `chips` and makes use of an `autocomplete` element. The component
* allows the caller to supply a query expression which returns a list of possible contacts.
* The user can select one of these and add it to the list of chips.
*/
val contactChips = "md-contact-chips".tag
val content = "md-content".tag[String]
/**
* Dividers group and separate content within lists and page layouts using strong visual
* and spatial distinctions. This divider is a thin rule, lightweight enough to not distract
* the user from content.
*
* @param md-inset add this attribute to activate the inset divider style.
*
*/
val divider = "md-divider".tag
val gridList = "md-grid-list".tag
val gridTitle = "md-grid-title".tag
val highligthText = "md-highlight-text".attr := ""
val icon = "md-icon".tag
val input = "md-input".tag
val inputContainer = "md-input-container".tag
val item = "md-item".tag
val itemContent = "md-item-content".tag
val list = "md-list".tag
val listItem = "md-list-item".tag
val menu = "md-menu".tag
val progressCircular = "md-progress-circular".tag
val progressLinear = "md-progress-linear".tag
val radioButton = "md-radio-button".tag
val radioGroup = "md-radio-group".tag
val select = "md-select".tag
val sidenav = "md-sidenav".tag
val sidenavFocus = "md-sidenav-focus".tag
val slider = "md-slider".tag
val subheader = "md-subheader".tag
val swipeLeft = "md-swipe-left".tag
val swipeRight = "md-swipe-right".tag
val switch = "md-switch".tag
val tab = "md-tab".tag
val tabs = "md-tabs".tag
val toolbar = "md-toolbar".tag
val tooltip = "md-tooltip".tag
/**
* Add class md-whiteframe-z1, ..., md-whiteframe-z5 for box shadow
*/
val whiteframe = "md-whiteframe".tag
///// LAYOUT /////
// The flex attribute value is restricted to 33, 66, and multiples of five, or no value
val flex = "flex".attr
val flexSm = "flex-sm".attr
val flexGtSm = "flex-gt-sm".attr
val flexMd = "flex-md".attr
val flexGtMd = "flex-gt-md".attr
val flexLg = "flex-lg".attr
val flexGtlg = "flex-gt-lg".attr
/**
* Add the flex-order attribute to a layout child to set its position within the layout.
* Any value from 0-9 is accepted.
*/
val flexOrder = "flex-order".attr
val flexOrderSm = "flex-order-sm".attr
val flexOrderGtSm = "flex-order-gt-sm".attr
val flexOrderMd = "flex-order-md".attr
val flexOrderGtMd = "flex-order-gt-md".attr
val flexOrderLg = "flex-order-lg".attr
val flexOrderGtlg = "flex-order-gt-lg".attr
/**
* display: none
*/
val hide = "hide".attr := ""
val hideSm = "hide-sm".attr := ""
val hideGtSm = "hide-gt-sm".attr := ""
val hideMd = "hide-md".attr := ""
val hideGtMd = "hide-gt-md".attr := ""
val hideLg = "hide-lg".attr := ""
val hideGtLg = "hide-gt-lg".attr := ""
/**
* Use the layout attribute on an element to arrange its children horizontally in a
* row, or vertically in a column.
*/
object layout extends Attr("layout") {
val column = this := "column"; val row = this := "row"
}
object layoutSm extends Attr("layout-sm") {
val column = this := "column"; val row = this := "row"
}
object layoutGtSm extends Attr("layout-gt-sm") {
val column = this := "column"; val row = this := "row"
}
object layoutMd extends Attr("layout-md") {
val column = this := "column"; val row = this := "row"
}
object layoutGtMd extends Attr("layout-gt-md") {
val column = this := "column"; val row = this := "row"
}
object layoutLg extends Attr("layout-lg") {
val column = this := "column"; val row = this := "row"
}
object layoutGtLg extends Attr("layout-gt-lg") {
val column = this := "column"; val row = this := "row"
}
/////
/**
* The layout-align attribute takes two words. The first word says how the children
* will be aligned in the layout's direction, and the second word says how the children
* will be aligned perpendicular to the layout's direction.
*
* Only one word is required for the attribute. For example, layout="row" layout-align="center"
* would make the elements center horizontally and use the default behavior vertically.
*
* start|center|end|space-around|space-between
* start|center| end
*/
val layoutAlign = "layout-align".attr
val layoutAlignSm = "layout-align-sm".attr
val layoutAlignGtSm = "layout-align-gt-sm".attr
val layoutAlignMd = "layout-align-md".attr
val layoutAlignGtMd = "layout-align-gt-md".attr
val layoutAlignLg = "layout-align-lg".attr
val layoutAlignGtlg = "layout-align-gt-lg".attr
/**
* Forces the layout element to fill its parent container.
*/
val layoutFill = "layout-fill".attr := ""
/*
* Adds margin around each flex child. It also adds a margin to the layout container itself.
*/
val layoutMargin = "layout-margin".attr := ""
/**
* Adds padding inside each flex child. It also adds padding to the layout container itself.
*/
val layoutPadding = "layout-padding".attr := ""
/**
* Allows flex children to wrap within the container if the elements use more than 100%.
*/
val layoutWrap = "layout-wrap".attr := ""
/////
/**
* Add the offset attribute to a layout child to set its offset percentage within
* the layout. Values must be multiples of 5, or 33, 34, 66, 67.
*/
val offset = "offset".attr
val flexOffsetSm = "flex-offset-sm".attr
val flexOffsetGtSm = "flex-offset-gt-sm".attr
val flexOffsetMd = "flex-offset-md".attr
val flexOffsetGtMd = "flex-offset-gt-md".attr
val flexOffsetLg = "flex-offset-lg".attr
val flexOffsetGtlg = "flex-offset-gt-lg".attr
/**
* Negates hide.
*/
val show = "show"
val showSm = "show-sm".attr := ""
val showGtSm = "show-gt-sm".attr := ""
val showMd = "show-md".attr := ""
val showGtMd = "show-gt-md".attr := ""
val showLg = "show-lg".attr := ""
val showGtLg = "show-gt-lg".attr := ""
/////
val svgSrc = "md-svg-src".attr
// attrs
val componentId = "md-component-id".attr
val _icon = "icon".attr
val isLockedOpen = "md-is-locked-open".attr
val theme = "md-theme".attr
} © 2015 - 2025 Weber Informatics LLC | Privacy Policy