|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075 |
- /*
- * Copyright 2000-2016 Vaadin Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy of
- * the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- */
- package com.vaadin.ui.themes;
-
- import com.vaadin.server.FontAwesome;
- import com.vaadin.ui.Notification.Type;
-
- /**
- * <p>
- * Additional style names which can be used with the Valo theme.
- * </p>
- *
- * <p>
- * These styles are only available if the
- * <code>$v-included-additional-styles</code> Sass list variable contains the
- * name of the component for that additional style name (e.g.
- * <code>button, textfield, table</code>).
- * </p>
- *
- * <p>
- * Most of these additional style names can be included individually into your
- * custom theme using the component specific Sass mixins, in which case you can
- * also define the style names yourself. See the Valo theme Sass API
- * documentation for additional information.
- * </p>
- *
- * TODO link to Sass API documentation
- *
- * @since 7.3
- * @author Vaadin Ltd
- */
- public class ValoTheme {
-
- public static final String THEME_NAME = "valo";
-
- /***************************************************************************
- *
- * Notification styles
- *
- **************************************************************************/
-
- /**
- * Styles the notification to look like {@link Type#TRAY_NOTIFICATION},
- * without setting the position and delay. Can be combined with any other
- * Notification style.
- */
- public static final String NOTIFICATION_TRAY = "tray";
-
- /**
- * Styles the notification to look like {@link Type#WARNING_MESSAGE},
- * without setting the position and delay. Can be combined with any other
- * Notification style.
- */
- public static final String NOTIFICATION_WARNING = "warning";
-
- /**
- * Styles the notification to look like {@link Type#ERROR_MESSAGE}, without
- * setting the position and delay. Can be combined with any other
- * Notification style.
- */
- public static final String NOTIFICATION_ERROR = "error";
-
- /**
- * Styles the notification to look like a system notification. Can be
- * combined with any other Notification style.
- */
- public static final String NOTIFICATION_SYSTEM = "system";
-
- /**
- * Styles the notification to span the entire width of the viewport. Can be
- * combined with any other Notification style.
- */
- public static final String NOTIFICATION_BAR = "bar";
-
- /**
- * Smaller padding and font size for the notification. Can be combined with
- * any other Notification style.
- */
- public static final String NOTIFICATION_SMALL = "small";
-
- /**
- * Adds a close button to the notification to imply that the user must click
- * on the notification to dismiss it. Use in combination with an infinite
- * delay (<code>-1</code>). Can be combined with any other Notification
- * style.
- */
- public static final String NOTIFICATION_CLOSABLE = "closable";
-
- /**
- * Success notification style. Adds a border around the notification and an
- * icon next to the title. Can be combined with any other Label style.
- */
- public static final String NOTIFICATION_SUCCESS = "success";
-
- /**
- * Failure notification style. Adds a border around the notification and an
- * icon next to the title. Can be combined with any other Label style.
- */
- public static final String NOTIFICATION_FAILURE = "failure";
-
- /***************************************************************************
- *
- * Label styles
- *
- **************************************************************************/
-
- /**
- * Header style for main application headings. Can be combined with any
- * other Label style.
- */
- public static final String LABEL_H1 = "h1";
-
- /**
- * Header style for different sections in the application. Can be combined
- * with any other Label style.
- */
- public static final String LABEL_H2 = "h2";
-
- /**
- * Header style for different sub-sections in the application. Can be
- * combined with any other Label style.
- */
- public static final String LABEL_H3 = "h3";
-
- /**
- * Header style for different sub-sections in the application. Can be
- * combined with any other Label style.
- */
- public static final String LABEL_H4 = "h4";
-
- /**
- * A utility style that can be combined with the {@link #LABEL_H1},
- * {@link #LABEL_H2}, {@link #LABEL_H3} and {@link #LABEL_H4} styles to
- * remove the default margins from the header.
- */
- public static final String LABEL_NO_MARGIN = "no-margin";
-
- /**
- * Tiny font size. Suitable for additional/supplementary UI text. Can be
- * combined with any other Label style.
- */
- public static final String LABEL_TINY = "tiny";
-
- /**
- * Small font size. Suitable for additional/supplementary UI text. Can be
- * combined with any other Label style.
- */
- public static final String LABEL_SMALL = "small";
-
- /**
- * Large font size. Suitable for important/prominent UI text. Can be
- * combined with any other Label style.
- */
- public static final String LABEL_LARGE = "large";
-
- /**
- * Huge font size. Suitable for important/prominent UI text. Can be combined
- * with any other Label style.
- */
- public static final String LABEL_HUGE = "huge";
-
- /**
- * Lighter font weight. Suitable for additional/supplementary UI text. Can
- * be combined with any other Label style.
- */
- public static final String LABEL_LIGHT = "light";
-
- /**
- * Bolder font weight. Suitable for important/prominent UI text. Can be
- * combined with any other Label style.
- */
- public static final String LABEL_BOLD = "bold";
-
- /**
- * Colored text. Can be combined with any other Label style.
- */
- public static final String LABEL_COLORED = "colored";
-
- /**
- * Success badge style. Adds a border around the label and an icon next to
- * the text. Suitable for UI notifications that need to in the direct
- * context of some component. Can be combined with any other Label style.
- */
- public static final String LABEL_SUCCESS = "success";
-
- /**
- * Failure badge style. Adds a border around the label and an icon next to
- * the text. Suitable for UI notifications that need to in the direct
- * context of some component. Can be combined with any other Label style.
- */
- public static final String LABEL_FAILURE = "failure";
-
- /**
- * Spinner style. Add this style name to an empty Label to create a spinner.
- *
- * <h4>Example</h4>
- *
- * <pre>
- * Label spinner = new Label();
- * spinner.addStyleName(ValoTheme.LABEL_SPINNER);
- * </pre>
- */
- public static final String LABEL_SPINNER = "spinner";
-
- /***************************************************************************
- *
- * Button styles
- *
- **************************************************************************/
-
- /**
- * Primary action button (e.g. the button that should get activated when the
- * user presses the <code>enter</code> key in a form). Use sparingly, only
- * one default button per view should be visible. Can be combined with any
- * other Button style.
- */
- public static final String BUTTON_PRIMARY = "primary";
-
- /**
- * A prominent button that can be used instead of the
- * {@link #BUTTON_PRIMARY} for primary actions when the action is considered
- * <b>safe</b> for the user (i.e. does not cause any data loss or any other
- * irreversible action). Can be combined with any other Button style.
- */
- public static final String BUTTON_FRIENDLY = "friendly";
-
- /**
- * A prominent button that can be used when the action is considered
- * <b>unsafe</b> for the user (i.e. it causes data loss or some other
- * irreversible action). Can be combined with any other Button style.
- */
- public static final String BUTTON_DANGER = "danger";
-
- /**
- * Borderless button. Can be combined with any other Button style.
- */
- public static final String BUTTON_BORDERLESS = "borderless";
-
- /**
- * Borderless button with a colored caption text. Can be combined with any
- * other Button style.
- */
- public static final String BUTTON_BORDERLESS_COLORED = "borderless-colored";
-
- /**
- * "Quiet" button, which looks like {@link #BUTTON_BORDERLESS} until you
- * hover over it with the mouse. Can be combined with any other Button
- * style.
- */
- public static final String BUTTON_QUIET = "quiet";
-
- /**
- * Makes the button look like the Link component. Can be combined with any
- * other Button style.
- */
- public static final String BUTTON_LINK = "link";
-
- /**
- * Tiny size button. Can be combined with any other Button style.
- */
- public static final String BUTTON_TINY = "tiny";
-
- /**
- * Small size button. Can be combined with any other Button style.
- */
- public static final String BUTTON_SMALL = "small";
-
- /**
- * Large size button. Can be combined with any other Button style.
- */
- public static final String BUTTON_LARGE = "large";
-
- /**
- * Huge size button. Can be combined with any other Button style.
- */
- public static final String BUTTON_HUGE = "huge";
-
- /**
- * Align the icon to the right side of the button caption. Can be combined
- * with any other Button style.
- */
- public static final String BUTTON_ICON_ALIGN_RIGHT = "icon-align-right";
-
- /**
- * Stack the icon on top of the button caption. Can be combined with any
- * other Button style.
- */
- public static final String BUTTON_ICON_ALIGN_TOP = "icon-align-top";
-
- /**
- * Only show the icon in the button, and size the button to a square shape.
- */
- public static final String BUTTON_ICON_ONLY = "icon-only";
-
- /***************************************************************************
- *
- * Link styles
- *
- **************************************************************************/
-
- /**
- * Small size link.
- */
- public static final String LINK_SMALL = "small";
-
- /**
- * Large size link.
- */
- public static final String LINK_LARGE = "large";
-
- /***************************************************************************
- *
- * TextField styles
- *
- **************************************************************************/
-
- /**
- * Tiny size text field. Can be combined with any other TextField style.
- */
- public static final String TEXTFIELD_TINY = "tiny";
-
- /**
- * Small size text field. Can be combined with any other TextField style.
- */
- public static final String TEXTFIELD_SMALL = "small";
-
- /**
- * Large size text field. Can be combined with any other TextField style.
- */
- public static final String TEXTFIELD_LARGE = "large";
-
- /**
- * Huge size text field. Can be combined with any other TextField style.
- */
- public static final String TEXTFIELD_HUGE = "huge";
-
- /**
- * Removes the border and background from the text field. Can be combined
- * with any other TextField style.
- */
- public static final String TEXTFIELD_BORDERLESS = "borderless";
-
- /**
- * Align the text inside the field to the right. Can be combined with any
- * other TextField style.
- */
- public static final String TEXTFIELD_ALIGN_RIGHT = "align-right";
-
- /**
- * Align the text inside the field to center. Can be combined with any other
- * TextField style.
- */
- public static final String TEXTFIELD_ALIGN_CENTER = "align-center";
-
- /**
- * Move the default caption icon inside the text field. Can be combined with
- * any other TextField style.
- */
- public static final String TEXTFIELD_INLINE_ICON = "inline-icon";
-
- /***************************************************************************
- *
- * TextArea styles
- *
- **************************************************************************/
-
- /**
- * Tiny size text area. Can be combined with any other TextArea style.
- */
- public static final String TEXTAREA_TINY = "tiny";
-
- /**
- * Small size text area. Can be combined with any other TextArea style.
- */
- public static final String TEXTAREA_SMALL = "small";
-
- /**
- * Large size text area. Can be combined with any other TextArea style.
- */
- public static final String TEXTAREA_LARGE = "large";
-
- /**
- * Huge size text area. Can be combined with any other TextArea style.
- */
- public static final String TEXTAREA_HUGE = "huge";
-
- /**
- * Removes the border and background from the text area. Can be combined
- * with any other TextArea style.
- */
- public static final String TEXTAREA_BORDERLESS = "borderless";
-
- /**
- * Align the text inside the area to the right. Can be combined with any
- * other TextArea style.
- */
- public static final String TEXTAREA_ALIGN_RIGHT = "align-right";
-
- /**
- * Align the text inside the area to center. Can be combined with any other
- * TextArea style.
- */
- public static final String TEXTAREA_ALIGN_CENTER = "align-center";
-
- /***************************************************************************
- *
- * DateField styles
- *
- **************************************************************************/
-
- /**
- * Tiny size date field. Can be combined with any other DateField style.
- */
- public static final String DATEFIELD_TINY = "tiny";
-
- /**
- * Small size date field. Can be combined with any other DateField style.
- */
- public static final String DATEFIELD_SMALL = "small";
-
- /**
- * Large size date field. Can be combined with any other DateField style.
- */
- public static final String DATEFIELD_LARGE = "large";
-
- /**
- * Huge size date field. Can be combined with any other DateField style.
- */
- public static final String DATEFIELD_HUGE = "huge";
-
- /**
- * Removes the border and background from the date field. Can be combined
- * with any other DateField style.
- */
- public static final String DATEFIELD_BORDERLESS = "borderless";
-
- /**
- * Align the text inside the field to the right. Can be combined with any
- * other DateField style.
- */
- public static final String DATEFIELD_ALIGN_RIGHT = "align-right";
-
- /**
- * Align the text inside the field to center. Can be combined with any other
- * DateField style.
- */
- public static final String DATEFIELD_ALIGN_CENTER = "align-center";
-
- /***************************************************************************
- *
- * ComboBox styles
- *
- **************************************************************************/
-
- /**
- * Tiny size combo box. Can be combined with any other ComboBox style.
- */
- public static final String COMBOBOX_TINY = "tiny";
-
- /**
- * Small size combo box. Can be combined with any other ComboBox style.
- */
- public static final String COMBOBOX_SMALL = "small";
-
- /**
- * Large size combo box. Can be combined with any other ComboBox style.
- */
- public static final String COMBOBOX_LARGE = "large";
-
- /**
- * Huge size combo box. Can be combined with any other ComboBox style.
- */
- public static final String COMBOBOX_HUGE = "huge";
-
- /**
- * Removes the border and background from the combo box. Can be combined
- * with any other ComboBox style.
- */
- public static final String COMBOBOX_BORDERLESS = "borderless";
-
- /**
- * Align the text inside the combo box to the right. Can be combined with
- * any other TextField style.
- */
- public static final String COMBOBOX_ALIGN_RIGHT = "align-right";
-
- /**
- * Align the text inside the combo box to center. Can be combined with any
- * other TextField style.
- */
- public static final String COMBOBOX_ALIGN_CENTER = "align-center";
-
- /***************************************************************************
- *
- * CheckBox styles
- *
- **************************************************************************/
-
- /**
- * Small size check box. Can be combined with any other CheckBox style.
- */
- public static final String CHECKBOX_SMALL = "small";
-
- /**
- * Large size check box. Can be combined with any other CheckBox style.
- */
- public static final String CHECKBOX_LARGE = "large";
-
- /***************************************************************************
- *
- * RadioButtonGroup/CheckBoxGroup styles
- *
- **************************************************************************/
-
- /**
- * Small size option group. Can be combined with any other
- * RadioButtonGroup/CheckBoxGroup style.
- */
- public static final String OPTIONGROUP_SMALL = "small";
-
- /**
- * Large size option group. Can be combined with any other
- * RadioButtonGroup/CheckBoxGroup style.
- */
- public static final String OPTIONGROUP_LARGE = "large";
-
- /**
- * Display the options horizontally in a row (by default the items are
- * stacked vertically).
- */
- public static final String OPTIONGROUP_HORIZONTAL = "horizontal";
-
- /***************************************************************************
- *
- * Slider styles
- *
- **************************************************************************/
-
- /**
- * Hide the indicator bar from the slider. Can be combined with any other
- * Slider style.
- */
- public static final String SLIDER_NO_INDICATOR = "no-indicator";
-
- /***************************************************************************
- *
- * ProgressBar styles
- *
- **************************************************************************/
-
- /**
- * Make the progress bar indicator appear as a dot which progresses over the
- * progress bar track (instead of a growing bar).
- */
- public static final String PROGRESSBAR_POINT = "point";
-
- /***************************************************************************
- *
- * MenuBar styles
- *
- **************************************************************************/
-
- /**
- * Small size menu bar. Can be combined with any other MenuBar style.
- */
- public static final String MENUBAR_SMALL = "small";
-
- /**
- * Borderless menu bar. Can be combined with any other MenuBar style.
- */
- public static final String MENUBAR_BORDERLESS = "borderless";
-
- /***************************************************************************
- *
- * Table and TreeTable styles
- *
- **************************************************************************/
-
- /**
- * Remove the alternating row colors. Can be combined with any other
- * Table/TreeTable style.
- */
- public static final String TABLE_NO_STRIPES = "no-stripes";
-
- /**
- * See {@link #TABLE_NO_STRIPES}
- */
- public static final String TREETABLE_NO_STRIPES = TABLE_NO_STRIPES;
-
- /**
- * Remove the vertical divider lines between the table columns. Can be
- * combined with any other Table/TreeTable style.
- */
- public static final String TABLE_NO_VERTICAL_LINES = "no-vertical-lines";
-
- /**
- * See {@link #TABLE_NO_VERTICAL_LINES}
- */
- public static final String TREETABLE_NO_VERTICAL_LINES = TABLE_NO_VERTICAL_LINES;
-
- /**
- * Remove the horizontal divider lines between the table rows. Can be
- * combined with any other Table/TreeTable style.
- */
- public static final String TABLE_NO_HORIZONTAL_LINES = "no-horizontal-lines";
-
- /**
- * See {@link #TABLE_NO_HORIZONTAL_LINES}
- */
- public static final String TREETABLE_NO_HORIZONTAL_LINES = TABLE_NO_HORIZONTAL_LINES;
-
- /**
- * Hide the table column headers (effectively the same as
- * {@code ColumnHeaderMode.HIDDEN}). Can be combined with any other
- * Table/TreeTable style.
- */
- public static final String TABLE_NO_HEADER = "no-header";
-
- /**
- * See {@link #TABLE_NO_HEADER}
- */
- public static final String TREETABLE_NO_HEADER = TABLE_NO_HEADER;
-
- /**
- * Remove the outer border of the table. Can be combined with any other
- * Table/TreeTable style.
- */
- public static final String TABLE_BORDERLESS = "borderless";
-
- /**
- * See {@link #TABLE_BORDERLESS}
- */
- public static final String TREETABLE_BORDERLESS = TABLE_BORDERLESS;
-
- /**
- * Reduce the white space inside the table cells. Can be combined with any
- * other Table/TreeTable style.
- */
- public static final String TABLE_COMPACT = "compact";
-
- /**
- * See {@link #TABLE_COMPACT}
- */
- public static final String TREETABLE_COMPACT = TABLE_COMPACT;
-
- /**
- * Small font size and reduced the white space inside the table cells. Can
- * be combined with any other Table/TreeTable style.
- */
- public static final String TABLE_SMALL = "small";
-
- /**
- * See {@link #TABLE_SMALL}
- */
- public static final String TREETABLE_SMALL = TABLE_SMALL;
-
- /***************************************************************************
- *
- * DragAndDropWrapper styles
- *
- **************************************************************************/
-
- /**
- * Hide the "box drag hints" (i.e. the style which gets applied when the
- * drag is in the middle/center area of the drag target).
- */
- public static final String DRAG_AND_DROP_WRAPPER_NO_BOX_DRAG_HINTS = "no-box-drag-hints";
-
- /**
- * Hide the "vertical drag hints" (i.e. the style which gets applied when
- * the drag is in the top/bottom part of the drag target).
- */
- public static final String DRAG_AND_DROP_WRAPPER_NO_VERTICAL_DRAG_HINTS = "no-vertical-drag-hints";
-
- /**
- * Hide the "horizontal drag hints" (i.e. the style which gets applied when
- * the drag is in the left/right part of the drag target).
- */
- public static final String DRAG_AND_DROP_WRAPPER_NO_HORIZONTAL_DRAG_HINTS = "no-horizontal-drag-hints";
-
- /***************************************************************************
- *
- * Panel styles
- *
- **************************************************************************/
-
- /**
- * Remove borders and the background color of the panel. Can be combined
- * with any other Panel style.
- */
- public static final String PANEL_BORDERLESS = "borderless";
-
- /**
- * Show a divider between the panel caption and content when the content
- * area is scrolled. Suitable with the {@link #PANEL_BORDERLESS} style. Can
- * be combined with any other Panel style.
- */
- public static final String PANEL_SCROLL_INDICATOR = "scroll-divider";
-
- /**
- * Inset panel style. Can be combined with any other Panel style.
- */
- public static final String PANEL_WELL = "well";
-
- /***************************************************************************
- *
- * SplitPanel styles
- *
- **************************************************************************/
-
- /**
- * Make the split handle wider.
- */
- public static final String SPLITPANEL_LARGE = "large";
-
- /***************************************************************************
- *
- * TabSheet styles
- *
- **************************************************************************/
-
- /**
- * Adds a border around the whole component as well as around individual
- * tabs in the tab bar. Can be combined with any other TabSheet style.
- */
- public static final String TABSHEET_FRAMED = "framed";
-
- /**
- * Center the tabs inside the tab bar. Works best if all the tabs fit
- * completely in the tab bar (i.e. no tab bar scrolling). Can be combined
- * with any other TabSheet style.
- */
- public static final String TABSHEET_CENTERED_TABS = "centered-tabs";
-
- /**
- * Give equal amount of space to all tabs in the tab bar (.i.e expand ratio
- * == 1 for all tabs). The tab captions will be truncated if they do not fit
- * in to the tab. Tab scrolling will be disabled when this style is applied
- * (all tabs will be visible at the same time). Can be combined with any
- * other TabSheet style.
- */
- public static final String TABSHEET_EQUAL_WIDTH_TABS = "equal-width-tabs";
-
- /**
- * Add a small amount of padding around the tabs in the tab bar, so that
- * they don't touch the outer edges of the component. Can be combined with
- * any other TabSheet style.
- */
- public static final String TABSHEET_PADDED_TABBAR = "padded-tabbar";
-
- /**
- * Reduce the whitespace around the tabs in the tab bar. Can be combined
- * with any other TabSheet style.
- */
- public static final String TABSHEET_COMPACT_TABBAR = "compact-tabbar";
-
- /**
- * Display tab icons on top of the tab captions (by default the icons are
- * place on the left side of the caption). Can be combined with any other
- * TabSheet style.
- */
- public static final String TABSHEET_ICONS_ON_TOP = "icons-on-top";
-
- /**
- * Only the selected tab has the close button visible. Does not prevent
- * closing the tab programmatically, it only hides the button from the end
- * user. Can be combined with any other TabSheet style.
- */
- public static final String TABSHEET_ONLY_SELECTED_TAB_IS_CLOSABLE = "only-selected-closable";
-
- /***************************************************************************
- *
- * Accordion styles
- *
- **************************************************************************/
-
- /**
- * Remove the outer border from the accordion. Can be combined with any
- * other Accordion style.
- */
- public static final String ACCORDION_BORDERLESS = "borderless";
-
- /***************************************************************************
- *
- * Window and related styles
- *
- **************************************************************************/
-
- /**
- * Add this style to any layout component (e.g. CssLayout, VerticalLayout or
- * HorizontalLayout) and place it inside the root layout of the window to
- * create a toolbar area for the window. You can then place any other
- * components inside the toolbar layout, e.g. a MenuBar.
- */
- public static final String WINDOW_TOP_TOOLBAR = "v-window-top-toolbar";
-
- /**
- * Add this style to any layout component (e.g. CssLayout, VerticalLayout or
- * HorizontalLayout) and place it inside the root layout of the window to
- * create a toolbar area for the window. You can then place any other
- * components inside the toolbar layout, e.g. a MenuBar.
- */
- public static final String WINDOW_BOTTOM_TOOLBAR = "v-window-bottom-toolbar";
-
- /***************************************************************************
- *
- * FormLayout styles
- *
- **************************************************************************/
-
- /**
- * Removes the borders and background from any direct child field components
- * (TextField, TextArea, DateField, ComboBox) in the layout. Reduces the
- * spacing between the form rows and adds separator lines between them.
- */
- public static final String FORMLAYOUT_LIGHT = "light";
-
- /***************************************************************************
- *
- * Layout styles
- *
- **************************************************************************/
-
- /**
- * Make a layout look like the Panel component (resembles visually a card).
- * Add an additional <code>v-panel-caption</code> style name to any layout
- * inside the card layout to make it look like a Panel's caption.
- */
- public static final String LAYOUT_CARD = "card";
-
- /**
- * Make a layout look like the {@link #PANEL_WELL} style. Add an additional
- * <code>v-panel-caption</code> style name to any layout inside the card
- * layout to make it look like a Panel's caption.
- */
- public static final String LAYOUT_WELL = "well";
-
- /**
- * Make a HorizontalLayout wrap contained components to a new line when the
- * isn't enough space.
- */
- public static final String LAYOUT_HORIZONTAL_WRAPPING = "wrapping";
-
- /**
- * Add this style name to a CssLayout to create a grouped set of components,
- * i.e. a row of components which are joined seamlessly together.
- *
- * <h4>Example</h4>
- *
- * <pre>
- * CssLayout group = new CssLayout();
- * group.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
- *
- * TextField field = new TextField();
- * group.addComponent(field);
- *
- * Button button = new Button("Action");
- * group.addComponent(button);
- * </pre>
- */
- public static final String LAYOUT_COMPONENT_GROUP = "v-component-group";
-
- /***************************************************************************
- *
- * Valo menu styles
- *
- **************************************************************************/
-
- /**
- * <p>
- * When you use the Valo menu and wish to enable responsive features of the
- * menu, you need to add this style name to the UI containing the menu.
- * </p>
- *
- * <p>
- * You only need to add this style name to the UI containing a Valo menu, if
- * you're using the Responsive extension with the UI.
- * </p>
- *
- * <h4>Example</h4>
- *
- * <p>
- * To enable responsivity in the Valo menu, the following example code
- * should be executed in your UI containing the menu.
- * </p>
- *
- * <pre>
- * Responsive.makeResponsive(this);
- * addStyleName(ValoTheme.UI_WITH_MENU);
- * </pre>
- */
- public static final String UI_WITH_MENU = "valo-menu-responsive";
-
- /**
- * <p>
- * Set the <em><b>primary</b></em> style name of a CssLayout to this, and
- * add any number of layouts with the {@link #MENU_PART} style inside it.
- * </p>
- *
- * <p>
- * The menu style is used to create a sidebar navigation menu for the
- * application, usually action as the main navigation for the different
- * sections of the application. It usually consists of at least a number of
- * {@link #MENU_ITEM}s, and possibly some {@link #MENU_SUBTITLE}s and a
- * {@link #MENU_TITLE}.
- * </p>
- *
- * <h4>Example</h4>
- *
- * <pre>
- * CssLayout menuArea = new CssLayout();
- * menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);
- * </pre>
- */
- public static final String MENU_ROOT = "valo-menu";
-
- /**
- * Add this style name to any layout and place it inside a layout with the
- * {@link #MENU_ROOT} style to build a menu component. Use the additional
- * MENU styles for individual components inside the layout.
- *
- * <h4>Example</h4>
- *
- * <pre>
- * CssLayout menu = new CssLayout();
- * menu.addStyleName(ValoTheme.MENU_PART);
- * </pre>
- */
- public static final String MENU_PART = "valo-menu-part";
-
- /**
- * Add this style name to any layout with the {@link #MENU_PART} style name
- * to make any menu items inside the menu emphasize the icons more than the
- * captions. Useful on narrower viewport widths, since the menu width is
- * decreased quite dramatically, making more space for the content of the
- * application.
- *
- * <h4>Example</h4>
- *
- * <pre>
- * CssLayout menu = new CssLayout();
- * menu.addStyleName(ValoTheme.MENU_PART);
- * menu.addStyleName(ValoTheme.MENU_PART_LARGE_ICONS);
- * </pre>
- */
- public static final String MENU_PART_LARGE_ICONS = "large-icons";
-
- /**
- * <p>
- * Add this style name to any layout to make a header area for a menu
- * (intended to be placed in side a {@link #MENU_PART} layout). You can add
- * any components inside it, but usually you would place a Label inside.
- * </p>
- *
- * <p>
- * Any MenuBar component that you place inside this layout will match the
- * style of the title, allowing an easy way to add a toolbar to the title
- * layout.
- * </p>
- */
- public static final String MENU_TITLE = "valo-menu-title";
-
- /**
- * Set the <em><b>primary</b></em> style name of a Label or a Button to this
- * style name to create a section divider in a menu.
- */
- public static final String MENU_SUBTITLE = "valo-menu-subtitle";
-
- /**
- * <p>
- * Set the <em><b>primary</b></em> style name of a Button to this style name
- * to create a clickable menu item in the menu.
- * </p>
- *
- * <h4>Selected item</h4>
- * <p>
- * Add an additional style name <b><code>selected</code></b> to it to make
- * it the selected item in the menu.
- * </p>
- *
- * <h4>Example</h4>
- *
- * <pre>
- * Button item = new Button();
- * item.setPrimaryStyleName(ValoTheme.MENU_ITEM);
- * item.addStyleName("selected");
- * </pre>
- */
- public static final String MENU_ITEM = "valo-menu-item";
-
- /**
- * Add a SPAN element with this style name inside a {@link #MENU_SUBTITLE}
- * or {@link #MENU_ITEM} to add an additional badge indicator to the
- * subtitle/item. The Label/Button needs to allow HTML content in order to
- * use this style name.
- *
- * <h4>Examples</h4>
- *
- * <pre>
- * Button item = new Button();
- * item.setPrimaryStyleName(ValoTheme.MENU_ITEM);
- * item.setHtmlContentAllowed(true);
- * item.setCaption("Item Caption <span class=\"" + ValoTheme.MENU_BADGE
- * + "\">Badge text</span>");
- * </pre>
- *
- * <pre>
- * Label item = new Label();
- * item.setPrimaryStyleName(ValoTheme.MENU_ITEM);
- * item.setContentMode(ContentMode.HTML);
- * item.setCaption("Item Caption <span class=\"" + ValoTheme.MENU_BADGE
- * + "\">Badge text</span>");
- * </pre>
- */
- public static final String MENU_BADGE = "valo-menu-badge";
-
- /**
- * <p>
- * Set the <em><b>primary</b></em> style name of a Label or a Button to this
- * style name to create an application logo. The logo is designed to be
- * placed inside a {@link #MENU_PART} layout.
- *
- * <p>
- * The text content of the logo should be very short, since the logo area
- * only shows approximately three letters. Using one of the
- * {@link FontAwesome} icons is a good way to quickly create a logo for your
- * application.
- * <p>
- *
- * <h4>Example</h4>
- *
- * <pre>
- * Label logo = new Label(FontAwesome.ROCKET.getHtml(), ContentMode.HTML);
- * logo.setSizeUndefined();
- * logo.setPrimaryStyleName(ValoTheme.MENU_LOGO);
- * </pre>
- */
- public static final String MENU_LOGO = "valo-menu-logo";
-
- /**
- * Add this style name to your {@link #UI_WITH_MENU responsive}
- * {@link #MENU_ROOT valo menu} element to make it appear automatically on
- * hover - without adding any code.
- * <p>
- * The menu will appear on mouse over on desktop, or when tapping on touch
- * devices.
- * <p>
- * <h4>Example</h4>
- *
- * <pre>
- * HorizontalLayout menu = new HorizontalLayout();
- * Responsive.makeResponsive(menu);
- * menu.addStyleName(ValoTheme.UI_WITH_MENU);
- *
- * CssLayout menuArea = new CssLayout();
- * menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);
- * menuArea.addStyleName(ValoTheme.MENU_APPEAR_ON_HOVER);
- * menu.addComponent(menuArea);
- * </pre>
- */
- public static final String MENU_APPEAR_ON_HOVER = "valo-menu-hover";
- }
|