Source: https://developers-dot-devsite-v2-prod.appspot.com/appmaker/ui/styles?hl=es-419
Timestamp: 2020-07-14 23:04:56+00:00

Document:
Estilos | App Maker | Google Developers
El panel Estilo te permite personalizar el aspecto de tu aplicación. Puedes establecer temas, elegir entre variantes de widgets y hasta crear tus propios estilos.
Estilo global: define el estilo de varios widgets a la vez
Establece el estilo de toda la app con temas
El selector de temas en la parte superior de la pestaña Estilos controla el aspecto predeterminado de los widgets en tu app. Por el momento, App Maker tiene los siguientes temas:
Material: tema que implementa Material Design, el estilo visual estándar de Google. Usa este tema para compilar aplicaciones que se parezcan a los favoritos de Google, como Inbox o Keep.
Simple: un tema más simple que proporciona un aspecto genérico. Usa el tema sencillo para desarrollar tu estilo visual único.
Personaliza los widgets con CSS
Si deseas retocar los widgets de Material o mejorar el tema Sencillo, puedes personalizar los widgets. Para ello, escribe tus propias Hojas de estilo en cascada o CSS.
Los widgets de App Maker y sus subcomponentes tienen clases de CSS incorporadas con el prefijo app-, seguidas de sus nombres. Para cambiar la apariencia de los widgets, agrega tus propias CSS a estas clases mediante el área de texto debajo del selector de tema. Ejemplo:
/* Adds rounded corners to button widgets */
/* Sets font size for rows in list panels */
.app-ListPanelRow {
También puedes usar la gama completa de selectores de CSS para diseñar tu app:
/* Turns off link underlines. */
.app-Link:link {
/* Changes color of disabled buttons. */
.app-Button[disabled] {
Nota: App Maker muestra el nombre de la clase del widget que se encuentra seleccionado en la parte superior de la pestaña Estilos. Si quieres encontrar nombres de clase para subcomponentes de widgets, intenta examinar el código HTML del widget en una vista previa de tu app. Usa herramientas de navegador, como Inspector de Chrome o Firebug de Firefox.
Estilo para diferentes tamaños de pantalla
Los usuarios pueden acceder a tu app desde dispositivos con pantallas grandes o pequeñas. Puedes mejorar su experiencia en tu app si usas un diseño responsivo que cambie según el tamaño de la pantalla (también llamado resolución de pantalla).
Para adaptar el diseño a diferentes tamaños de pantalla de forma automática, usa consultas de medios en tus CSS globales. Si quieres obtener una introducción al diseño responsivo, consulta Conceptos básicos del diseño web responsivo. Para ver un ejemplo, consulta Cuadrícula de diseño responsivo.
Prueba tus estilos para tamaños específicos en el editor de páginas
Para probar tu estilo, puedes cambiar el tamaño del lienzo de forma manual o aplicar una resolución de pantalla específica. Cambiar la resolución en el editor de páginas no afecta a tus aplicaciones publicadas. Además, otros desarrolladores no verán los cambios. Puedes actualizar la página para que el lienzo vuelva al tamaño personalizado original.
Para seleccionar una resolución de pantalla específica, en la parte superior del editor de páginas, haz clic en Resoluciones de dispositivos devices.
Puedes ver el tamaño de la pantalla del lienzo en la esquina superior derecha, a menos que selecciones resolución Personalizada, en cuyo caso, el tamaño personalizado se encuentra en el editor de propiedades en los valores de dimensión.
Administra resoluciones de pantalla
Para agregar una resolución de pantalla, selecciona Resoluciones de dispositivos (devices) y haz clic en Agregar resolución. También puedes hacer clic en Configuración (settings) chevron_right Configuración de la aplicación chevron_right Agregar resolución.
Para editar y borrar resoluciones de pantalla, dirígete a Configuración (settings) chevron_right Configuración de la aplicación y localiza la sección Resoluciones de viewport. Apunta a la resolución que quieres editar o borrar y haz clic en Editar mode_edit o Borrar delete.
Estilo del widget: define el estilo de un solo widget
Temas de widgets
Usa el selector de temas para aplicar estilos a los widgets con facilidad. Selecciona un widget y elige de una lista de temas en el menú desplegable de la barra de acción.
El tema Material viene con múltiples variantes para la mayoría de los widgets. Por ejemplo, los widgets del panel tienen una variante Paper que parece un trozo de papel blanco, una variante Transparent que muestra los widgets debajo del panel y muchos más.
CSS específicas del widget
La pestaña Estilo tiene un área de texto para ingresar CSS personalizadas, por lo que puedes ajustar el estilo de un widget seleccionado según tus especificaciones exactas. Los estilos de widgets también tienen el prefijo .app- seguido del nombre de la página en la que se encuentra el widget y luego el nombre del propio widget. Cuando se selecciona el widget, aparece en la parte superior de la ventana emergente de autocompletar.
/* Changes color of SampleButton1 to yellow */
.app-NewPage-SampleButton1 {
/* Sets font in SampleListPanel1's rows to bold */
.app-NewPage-SampleListPanel1Row {
App Maker también te permite crear tus propias variantes. Para hacer una variante, usa la sección CSS de la pestaña Estilos y crea una clase con un nombre que posea el formato app-[WidgetType]--[VariantName]. Ejemplo:
.app-Button--RedButton {
Luego de crear una clase con un nombre adecuado, tu variante aparecerá en el menú desplegable Variante en la barra de acción cuando se seleccione ese widget.
Estilos adicionales con la propiedad de estilos
Puedes agregar estilos a los widgets fuera del panel Estilo mediante la propiedad de styles en Display en el Editor de propiedades. Define una clase en Estilo y agrégala a la propiedad. Los estilos que se asignan de esta manera no necesitan el prefijo habitual app-. Ejemplo:
.specialSubmitButton {
Nota: Usa la vinculación de datos con la propiedad styles para cambiar las CSS de un widget de forma dinámica.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución