Behave

Behavioral Classes

This section contains a variety of styles related to behavioral stage of elements within a webpage. The code is divided into three main sections: "CURSOR", "MEDIA QUERY", "ANIMATION" and "EXTRA".

Classes

• Behavioral Classes

  • Cursor

  • Media Query

  • Border

  • Animation

  • Theme

Under the "CURSOR" module, there are several classes related to the cursor pointer design and interaction. These classes include:

• .cursor {cursor: default}.pointer {cursor: pointer}
  .clickble {cursor: pointer}.grab {cursor: grab}.grabble {cursor: grab}
  .stopcursor {cursor: not-allowed !important}.waitcursor {cursor: wait}
  ...

Additionally, there are several classes related to mobile responsiveness, which set the position and display of an element based on the user's device. These classes include:

• @media only screen and (max-width: 600px)
  {
  	.Q_xs_pa-0{padding: 0}.Q_xs_pa-1{padding: 5px}.Q_xs_pa-2{padding: 10px}.Q_xs_pa-3{padding: 15px}
  ...
  /* Only Extra Small */
  @media (min-width: 0601px){.Q_xs{display: none } }
  /* Only Small */
  @media (min-width: 0901px) , (max-width: 0600px){.Q_sm{display: none } }
  ...

Furthermore, there are multiple animation classes related to simple translation movements and opacity transitions. These classes include:

• .scale-outin-once-1{animation: scaleoutin 0.5s}
  .appear-once-1{animation: fadeinout 1s}
  .appear-once-2{animation: fadeinout 2s}
  ...
  .shake-1{animation: shake 1s;  animation-iteration-count: infinite }
  .shake-2{animation: shake 2s;  animation-iteration-count: infinite }
  .shakefull-1{animation: shakefull 0.1s;  animation-iteration-count: infinite }
  ...

Finally, there are several classes related to site-specific theme color, font families and more. These classes include:

• @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
  
  body { font-family: "Inter"; }
  
  :root {
    --color-blue: #0074D9;
    --color-blue-dark: #004267;
    --color-blue-sat: #1193E8;
    --color-blue-desat: #9CBEDB;
    --color-blue-light: #E8F3FF;
    
    ...
  }
  
  
  :root {  
    --primary-dark: var(--color-emerson-dark);
    --primary-sat: var(--color-emerson-sat);
    --primary:  var(--color-emerson);
    --primary-desat: var(--color-emerson-desat);
    --primary-light: var(--color-emerson-light);
    
    ...
    
    --bg-main: #ffffff;
    --bg-muted: #F9FAFB;
    --bg-faded: #F5F7F6;
  
    --tx-main: #101828;
    --tx-muted: #344054;
    --tx-faded: #667085;
  
    --tx-error: #B91C1C;
    --tx-link: #026AA2;
  
    --border-faded: #D0D5DD;
  }
  
  .bg-primary {
  	background: var(--primary);
  }
  .bg-main { background: var(--bg-main); }
  ...