OptionsApp.scss

TLDR

This file contains the styling information for the OptionsApp component in the Demo Projects project.

Classes

OptionsApp

The OptionsApp class defines the styling for the OptionsApp component. It includes styling for labels, input fields, submit buttons, and status messages.

Some of the key styles include:

• label: Sets the display to block, font size to 90%, and font style to italic.
• input[type=text], input[type=password], select: Sets the width to 20em, max width to 100%, and margin bottom to 1em.
• input[type=submit]: Sets the display to block.
• .status: Sets the margin to 1em at the top and bottom.
• .status .in-progress: Defines the styles for the status message when it is in progress. It sets the background color to grey and adds padding.
• .status .success: Defines the styles for the status message when it is successful. It sets the background color to lightgreen and adds padding.
• .status .error: Defines the styles for the status message when there is an error. It sets the background color to lightpink and adds padding.

/* Copyright (c) 2021-present Mattermost, Inc. All Rights Reserved. */
/* See LICENSE.txt for license information. */

.OptionsApp {
  label {
    display: block;
    font-size: 90%;
    font-style: italic;
  }
  
  input[type=text], input[type=password], select {
    width: 20em;
    max-width: 100%;
    margin-bottom: 1em;
  }
  
  input[type=submit] {
    display: block;
  }
  
  .status {
    margin: 1em 0 1em 0;

    .in-progress {
      background-color: grey;
      padding: 0.5em;
    }

    .success {
      background-color: lightgreen;
      padding: 0.5em;
    }
    
    .error {
      background-color: lightpink;
      padding: 0.5em;
    }
  }
  
}