Merge branch 'dev' of github.com:soyjavi/react-toolbox into dev
* 'dev' of github.com:soyjavi/react-toolbox: Made general mixins properties depend on $unit value Small fixes All props are now commented Moved modules to separate files. A lot of JSDoc comments added, even more left Typings for the project Document CardTitle's cardTitle themeold
commit
e8bc36d63a
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
|
@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 11.2rem;
|
font-size: $unit * 11.2rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -.04em;
|
letter-spacing: -.04em;
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
|
|
||||||
@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
|
@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 5.6rem;
|
font-size: $unit * 5.6rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
letter-spacing: -.02em;
|
letter-spacing: -.02em;
|
||||||
|
@ -31,9 +31,9 @@
|
||||||
|
|
||||||
@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
|
@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 4.5rem;
|
font-size: $unit * 4.5;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 4.8rem;
|
line-height: $unit * 4.8;
|
||||||
|
|
||||||
@if $color-contrast {
|
@if $color-contrast {
|
||||||
opacity: .54;
|
opacity: .54;
|
||||||
|
@ -42,9 +42,9 @@
|
||||||
|
|
||||||
@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
|
@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 3.4rem;
|
font-size: $unit * 3.4;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 4rem;
|
line-height: $unit * 4;
|
||||||
|
|
||||||
@if $color-contrast {
|
@if $color-contrast {
|
||||||
opacity: .54;
|
opacity: .54;
|
||||||
|
@ -53,9 +53,9 @@
|
||||||
|
|
||||||
@mixin typo-headline($color-contrast: false, $use-preferred: true) {
|
@mixin typo-headline($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 2.4rem;
|
font-size: $unit * 2.4;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 3.2rem;
|
line-height: $unit * 3.2;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
@if $color-contrast {
|
@if $color-contrast {
|
||||||
|
@ -65,7 +65,7 @@
|
||||||
|
|
||||||
@mixin typo-title($color-contrast: false, $use-preferred: true) {
|
@mixin typo-title($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 2rem;
|
font-size: $unit * 2;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: .02em;
|
letter-spacing: .02em;
|
||||||
|
@ -77,9 +77,9 @@
|
||||||
|
|
||||||
@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
|
@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 1.6rem;
|
font-size: $unit * 1.6;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 2.4rem;
|
line-height: $unit * 2.4;
|
||||||
letter-spacing: .04em;
|
letter-spacing: .04em;
|
||||||
|
|
||||||
@if $color-contrast {
|
@if $color-contrast {
|
||||||
|
@ -89,9 +89,9 @@
|
||||||
|
|
||||||
@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
|
@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 1.6rem;
|
font-size: $unit * 1.6;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 2.8rem;
|
line-height: $unit * 2.8;
|
||||||
letter-spacing: .04em;
|
letter-spacing: .04em;
|
||||||
|
|
||||||
@if $color-contrast {
|
@if $color-contrast {
|
||||||
|
@ -101,8 +101,8 @@
|
||||||
|
|
||||||
@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
|
@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 1.4rem;
|
font-size: $unit * 1.4;
|
||||||
line-height: 2.4rem;
|
line-height: $unit * 2.4;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
|
||||||
@if $use-preferred {
|
@if $use-preferred {
|
||||||
|
@ -118,9 +118,9 @@
|
||||||
|
|
||||||
@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
|
@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 1.4rem;
|
font-size: $unit * 1.4;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 2.4rem;
|
line-height: $unit * 2.4;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
|
||||||
@if $color-contrast {
|
@if $color-contrast {
|
||||||
|
@ -130,7 +130,7 @@
|
||||||
|
|
||||||
@mixin typo-caption($color-contrast: false, $use-preferred: false) {
|
@mixin typo-caption($color-contrast: false, $use-preferred: false) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 1.2rem;
|
font-size: $unit * 1.2;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
@ -143,7 +143,7 @@
|
||||||
@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
|
@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 2.4rem;
|
font-size: $unit * 2.4;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
|
@ -167,7 +167,7 @@
|
||||||
|
|
||||||
@mixin typo-menu($color-contrast: false, $use-preferred: true) {
|
@mixin typo-menu($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 1.4rem;
|
font-size: $unit * 1.4;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
@ -179,7 +179,7 @@
|
||||||
|
|
||||||
@mixin typo-button($color-contrast: false, $use-preferred: true) {
|
@mixin typo-button($color-contrast: false, $use-preferred: true) {
|
||||||
@include typo-preferred-font($use-preferred);
|
@include typo-preferred-font($use-preferred);
|
||||||
font-size: 1.4rem;
|
font-size: $unit * 1.4;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
|
@ -73,10 +73,11 @@ A versatile title block that can be used in various places on the card, includin
|
||||||
|
|
||||||
| Name | Description|
|
| Name | Description|
|
||||||
|:---------|:-----------|
|
|:---------|:-----------|
|
||||||
|
| `cardTitle` | Class used for the root element.|
|
||||||
| `large` | Added to the root element when the card has avatar.|
|
| `large` | Added to the root element when the card has avatar.|
|
||||||
| `small` | Added to the root element when the card has no avatar.|
|
| `small` | Added to the root element when the card has no avatar.|
|
||||||
| `subtitle` | Added to the root element for subtitle.|
|
| `subtitle` | Added to the subtitle element.|
|
||||||
| `title` | Used in for the root element.|
|
| `title` | Added to the title element.|
|
||||||
|
|
||||||
## CardMedia
|
## CardMedia
|
||||||
|
|
||||||
|
|
|
@ -1,57 +1,115 @@
|
||||||
// Type definitions for react-toolbox 0.16.2
|
// Type definitions for react-toolbox
|
||||||
// Project: http://react-toolbox.com/
|
// Project: https://github.com/react-toolbox/react-toolbox
|
||||||
// Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker), @ixrock (Roman Karlov)
|
// Definitions by: Per Bergqwist <https://github.com/normano64>
|
||||||
/* CHANGES
|
|
||||||
* 26/05/2015 Export components by names (not only defaults), added missing components exports
|
|
||||||
* 06/05/2016: Refactor into external module declarations (no more 'declare module ...')
|
|
||||||
* 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
|
|
||||||
* 02/03/2016:
|
|
||||||
* Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
|
|
||||||
* Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
|
|
||||||
* Hopefully fixed the default exports where applicable
|
|
||||||
* 01/13/2016: Minor changes, add a few missing props, add IconButton to react-toolbox/lib/button
|
|
||||||
* 12/21/2015: Fix "import * as Input from 'react-toolbox/lib/input'" style imports, which now correctly import only the necessary component(s).
|
|
||||||
* NOTE that you must use "import * as {Component Name}" not just "import {Component Name}" for this to work.
|
|
||||||
* 12/20/2015: Should be compatible with 0.14.0. Refactor modules into 'react-toolbox/lib/*' format.
|
|
||||||
Unfortunately importing them directly in that manner doesn't seem to work
|
|
||||||
i.e. "import Input from 'react-toolbox/lib/input'" resolves to undefined, whereas "import { Input } from 'react-toolbox'" works fine!
|
|
||||||
... Any ideas welcome!
|
|
||||||
* 12/20/2015: Add AppBar, Avatar, and refactor Card and its child Components to match the documentation.
|
|
||||||
* 12/18/2015: Update to react-toolbox 0.13.1 (from 0.12.11)
|
|
||||||
* 12/18/2015: Use JSDoc-style comments to provide Intellisense where supported
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
MISSING COMPONENTS (Contributions welcome)
|
|
||||||
* Ripple HOC
|
|
||||||
*/
|
|
||||||
|
|
||||||
export { default as ActivableRendererFactory } from 'react-toolbox/lib/hoc/ActivableRenderer';
|
import { AppBar } from "react-toolbox/lib/app_bar";
|
||||||
|
import { Autocomplete } from "react-toolbox/lib/autocomplete";
|
||||||
|
import { Avatar } from "react-toolbox/lib/avatar";
|
||||||
|
import { Button, IconButton } from "react-toolbox/lib/button";
|
||||||
|
import { Card, CardTitle, CardMedia, CardText, CardActions } from "react-toolbox/lib/card";
|
||||||
|
import { Checkbox } from "react-toolbox/lib/checkbox";
|
||||||
|
import { Chip } from "react-toolbox/lib/chip";
|
||||||
|
import { DatePicker } from "react-toolbox/lib/date_picker";
|
||||||
|
import { Dialog } from "react-toolbox/lib/dialog";
|
||||||
|
import { Drawer } from "react-toolbox/lib/drawer";
|
||||||
|
import { Dropdown } from "react-toolbox/lib/dropdown";
|
||||||
|
import { FontIcon } from "react-toolbox/lib/font_icon";
|
||||||
|
import { Input } from "react-toolbox/lib/input";
|
||||||
|
import { Layout, Panel, NavDrawer, Sidebar } from "react-toolbox/lib/layout";
|
||||||
|
import { Link } from "react-toolbox/lib/link";
|
||||||
|
import { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from "react-toolbox/lib/list";
|
||||||
|
import { Menu, MenuDivider, MenuItem, IconMenu } from "react-toolbox/lib/menu";
|
||||||
|
import { Navigation } from "react-toolbox/lib/navigation";
|
||||||
|
import { ProgressBar } from "react-toolbox/lib/progress_bar";
|
||||||
|
import { RadioGroup, RadioButton } from "react-toolbox/lib/radio";
|
||||||
|
import { Ripple } from "react-toolbox/lib/ripple";
|
||||||
|
import { Slider } from "react-toolbox/lib/slider";
|
||||||
|
import { Snackbar } from "react-toolbox/lib/snackbar";
|
||||||
|
import { Switch } from "react-toolbox/lib/switch";
|
||||||
|
import { Tabs, Tab } from "react-toolbox/lib/tabs";
|
||||||
|
import { TimePicker } from "react-toolbox/lib/time_picker";
|
||||||
|
import { Tooltip } from "react-toolbox/lib/tooltip";
|
||||||
|
|
||||||
export { AppBar } from 'react-toolbox/lib/app_bar'
|
import { AppBarTheme } from "react-toolbox/lib/app_bar";
|
||||||
export { Autocomplete } from 'react-toolbox/lib/autocomplete'
|
import { AutocompleteTheme } from "react-toolbox/lib/autocomplete";
|
||||||
export { Avatar } from 'react-toolbox/lib/avatar'
|
import { AvatarTheme } from "react-toolbox/lib/avatar";
|
||||||
export { Button, IconButton } from 'react-toolbox/lib/button'
|
import { ButtonTheme, IconButtonTheme } from "react-toolbox/lib/button";
|
||||||
export { Card, CardTitle, CardMedia, CardText, CardActions } from 'react-toolbox/lib/card'
|
import { CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme } from "react-toolbox/lib/card";
|
||||||
export { Checkbox } from 'react-toolbox/lib/checkbox'
|
import { CheckboxTheme } from "react-toolbox/lib/checkbox";
|
||||||
export { Chip } from 'react-toolbox/lib/chip'
|
import { ChipTheme } from "react-toolbox/lib/chip";
|
||||||
export { DatePicker } from 'react-toolbox/lib/date_picker'
|
import { DatePickerTheme } from "react-toolbox/lib/date_picker";
|
||||||
export { Dialog } from 'react-toolbox/lib/dialog'
|
import { DialogTheme } from "react-toolbox/lib/dialog";
|
||||||
export { Drawer } from 'react-toolbox/lib/drawer'
|
import { DrawerTheme } from "react-toolbox/lib/drawer";
|
||||||
export { Dropdown } from 'react-toolbox/lib/dropdown'
|
import { DropdownTheme } from "react-toolbox/lib/dropdown";
|
||||||
export { FontIcon } from 'react-toolbox/lib/font_icon'
|
import { InputTheme } from "react-toolbox/lib/input";
|
||||||
export { Input } from 'react-toolbox/lib/input'
|
import { LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme } from "react-toolbox/lib/layout";
|
||||||
export { Layout, Panel, NavDrawer, Sidebar } from 'react-toolbox/lib/layout'
|
import { LinkTheme } from "react-toolbox/lib/link";
|
||||||
export { Link } from 'react-toolbox/lib/link'
|
import { ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme } from "react-toolbox/lib/list";
|
||||||
export { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from 'react-toolbox/lib/list'
|
import { MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme } from "react-toolbox/lib/menu";
|
||||||
export { Menu, MenuDivider, MenuItem, IconMenu } from 'react-toolbox/lib/menu'
|
import { NavigationTheme } from "react-toolbox/lib/navigation";
|
||||||
export { Navigation } from 'react-toolbox/lib/navigation'
|
import { ProgressBarTheme } from "react-toolbox/lib/progress_bar";
|
||||||
export { Overlay } from 'react-toolbox/lib/overlay'
|
import { RadioButtonTheme } from "react-toolbox/lib/radio";
|
||||||
export { ProgressBar } from 'react-toolbox/lib/progress_bar'
|
import { RippleTheme } from "react-toolbox/lib/ripple";
|
||||||
export { RadioButton, RadioGroup } from 'react-toolbox/lib/radio'
|
import { SliderTheme } from "react-toolbox/lib/slider";
|
||||||
export { Ripple } from 'react-toolbox/lib/ripple'
|
import { SnackbarTheme } from "react-toolbox/lib/snackbar";
|
||||||
export { Slider } from 'react-toolbox/lib/slider'
|
import { SwitchTheme } from "react-toolbox/lib/switch";
|
||||||
export { Snackbar } from 'react-toolbox/lib/snackbar'
|
import { TabsTheme, TabTheme } from "react-toolbox/lib/tabs";
|
||||||
export { Switch } from 'react-toolbox/lib/switch'
|
import { TimePickerTheme } from "react-toolbox/lib/time_picker";
|
||||||
export { Tabs, Tab } from 'react-toolbox/lib/tabs'
|
import { TooltipTheme } from "react-toolbox/lib/tooltip";
|
||||||
export { TimePicker } from 'react-toolbox/lib/time_picker'
|
|
||||||
export { default as Tooltip } from 'react-toolbox/lib/tooltip'
|
export {
|
||||||
|
AppBar,
|
||||||
|
Autocomplete,
|
||||||
|
Avatar,
|
||||||
|
Button, IconButton,
|
||||||
|
Card, CardTitle, CardMedia, CardText, CardActions,
|
||||||
|
Checkbox,
|
||||||
|
Chip,
|
||||||
|
DatePicker,
|
||||||
|
Dialog,
|
||||||
|
Drawer,
|
||||||
|
Dropdown,
|
||||||
|
FontIcon,
|
||||||
|
Input,
|
||||||
|
Layout, Panel, NavDrawer, Sidebar,
|
||||||
|
Link,
|
||||||
|
List, ListCheckbox, ListItem, ListDivider, ListSubHeader,
|
||||||
|
Menu, MenuDivider, MenuItem, IconMenu,
|
||||||
|
Navigation,
|
||||||
|
ProgressBar,
|
||||||
|
RadioGroup, RadioButton,
|
||||||
|
Ripple,
|
||||||
|
Slider,
|
||||||
|
Snackbar,
|
||||||
|
Switch,
|
||||||
|
Tabs, Tab,
|
||||||
|
TimePicker,
|
||||||
|
Tooltip,
|
||||||
|
|
||||||
|
AppBarTheme,
|
||||||
|
AutocompleteTheme,
|
||||||
|
AvatarTheme,
|
||||||
|
ButtonTheme, IconButtonTheme,
|
||||||
|
CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme,
|
||||||
|
CheckboxTheme,
|
||||||
|
ChipTheme,
|
||||||
|
DatePickerTheme,
|
||||||
|
DialogTheme,
|
||||||
|
DrawerTheme,
|
||||||
|
DropdownTheme,
|
||||||
|
InputTheme,
|
||||||
|
LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme,
|
||||||
|
LinkTheme,
|
||||||
|
ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme,
|
||||||
|
MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme,
|
||||||
|
NavigationTheme,
|
||||||
|
ProgressBarTheme,
|
||||||
|
RadioButtonTheme,
|
||||||
|
RippleTheme,
|
||||||
|
SliderTheme,
|
||||||
|
SnackbarTheme,
|
||||||
|
SwitchTheme,
|
||||||
|
TabsTheme, TabTheme,
|
||||||
|
TimePickerTheme,
|
||||||
|
TooltipTheme
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue