@use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/mixins" as mix; .wrapper { --btn-size: #{fun.convert-px(50)}; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; width: 100%; height: var(--toolbar-size); position: fixed; bottom: 0; left: 0; z-index: 5; background: var(--color-bg); border-top: fun.convert-px(4) solid; border-image: radial-gradient( ellipse at top, var(--color-primary-lighter) 20%, var(--color-primary) 100% ) 1; box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1) var(--color-shadow-dark); @include mix.media("screen") { @include mix.dimensions("sm") { --toolbar-size: auto; justify-content: flex-end; gap: var(--spacing-sm); width: auto; background: inherit; border: none; box-shadow: none; position: relative; left: unset; margin-right: unset; transform: unset; } } } .menu { padding: var(--spacing-md); position: absolute; bottom: 100%; left: 0; right: 0; background: var(--color-bg-secondary); border-top: fun.convert-px(4) solid; border-bottom: fun.convert-px(4) solid; border-image: radial-gradient( ellipse at top, var(--color-primary-lighter) 20%, var(--color-primary) 100% ) 1; box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1) var(--color-shadow-dark); transition: all 0.7s ease-in-out 0s; &--closed { transform: translateX(-100%); visibility: hidden; } &--opened { transform: translateX(0); visibility: visible; } @include mix.media("screen") { @include mix.dimensions("sm") { width: fun.convert-px(500); left: unset; right: unset; top: 120%; bottom: unset; border: fun.convert-px(4) solid; border-image: radial-gradient( ellipse at top, var(--color-primary-lighter) 20%, var(--color-primary) 100% ) 1; box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3) fun.convert-px(1) var(--color-shadow-dark); transform-origin: 50% -200%; transition: all 0.8s ease-in-out 0s; &--closed { opacity: 0; transform: perspective(20rem) translate3d(0, 100%, -20rem); visibility: hidden; } &--opened { opacity: 1; transform: none; } } } } e='qt'>
path: root/src/components/ContactForm/ContactForm.module.scss
blob: 3f0e86190a429209f0cd015e5df5bf3412728ed4 (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@use "@styles/abstracts/functions" as fun;

.status {
  max-width: max-content;
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm);
  border: fun.convert-px(3) solid var(--color-border-light);
  border-radius: fun.convert-px(5);

  &--error {
    border-color: var(--color-token-red);
  }

  &--success {
    border-color: var(--color-token-green);
  }

  &--warning {
    border-color: var(--color-token-orange);
  }
}