core/src/components/fab-button/fab-button.ios.scss - main - githubmirror/ionic-framework

core/src/components/fab-button/fab-button.ios.scss
116 строк4 KB
Stefanos Anagnostou
feat(fab-button): add close icon font size css variable (#19628)
10 июн 2020, 16:34
10 июн 2020, 16:34df408f9
@import "./fab-button";
@import "./fab-button.ios.vars";

// iOS FAB Button
// --------------------------------------------------

:host {
  --background: #{$fab-ios-background-color};
  --background-activated: #{$fab-ios-background-color-activated};
  --background-focused: #{ion-color(primary, shade)};
  --background-hover: #{ion-color(primary, tint)};
  --background-activated-opacity: 1;
  --background-focused-opacity: 1;
  --background-hover-opacity: 1;
  --color: #{$fab-ios-text-color};
  --box-shadow: #{$fab-ios-box-shadow};
  --transition: #{$fab-ios-transition};
  --close-icon-font-size: #{$fab-ios-icon-font-size};
}

:host(.ion-activated) {
  --box-shadow: #{$fab-ios-box-shadow-activated};
  --transform: #{$fab-ios-transform};
  --transition: #{$fab-ios-transition-activated};
}

::slotted(ion-icon) {
  font-size: $fab-ios-icon-font-size;
}


// FAB buttons in a list
// --------------------------------------------------

:host(.fab-button-in-list) {
  --background: #{$fab-ios-list-button-background-color};
  --background-activated: #{$fab-ios-list-button-background-color-activated};
  --background-focused: var(--background-activated);
  --background-hover: #{$fab-ios-list-button-background-color-hover};
  --color: #{$fab-ios-list-button-text-color};
  --color-activated: #{$fab-ios-list-button-text-color};
  --color-focused: var(--color-activated);
  --transition: #{transform 200ms ease 10ms,
              opacity 200ms ease 10ms};
}

:host(.fab-button-in-list) ::slotted(ion-icon) {
  font-size: $fab-ios-list-button-icon-font-size;
}


// FAB Button: Color
// --------------------------------------------------

:host(.ion-color.ion-focused) .button-native::after {
  background: #{current-color(shade)};
}

// Focused/Activated Button with Color
:host(.ion-color.ion-focused) .button-native,
:host(.ion-color.ion-activated) .button-native {
  color: #{current-color(contrast)};

  &::after {
    background: #{current-color(shade)};
  }
}

@media (any-hover: hover) {
  :host(.ion-color:hover) .button-native {
    color: #{current-color(contrast)};

    &::after {
      background: #{current-color(tint)};
    }
  }
}


// Translucent FAB buttons
// --------------------------------------------------

@supports (backdrop-filter: blur(0)) {
  :host(.fab-button-translucent) {
    --background: #{ion-color(primary, base, $fab-ios-translucent-background-alpha)};
    --background-hover: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-hover)};
    --background-focused: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-focused)};
    --backdrop-filter: #{$fab-ios-translucent-filter};
  }

  :host(.fab-button-translucent-in-list) {
    --background: #{ion-color(light, base, $fab-ios-translucent-background-alpha)};
    --background-hover: #{ion-color(light, base, $fab-ios-translucent-background-alpha-hover)};
    --background-focused: #{ion-color(light, base, $fab-ios-translucent-background-alpha-focused)};
  }
}

// Translucent FAB buttons with color
// --------------------------------------------------

@supports (backdrop-filter: blur(0)) {
  @media (any-hover: hover) {
    :host(.fab-button-translucent.ion-color:hover) .button-native {
      background: #{current-color(base, $fab-ios-translucent-background-alpha-hover)};
    }
  }

  :host(.ion-color.fab-button-translucent) .button-native {
    background: #{current-color(base, $fab-ios-translucent-background-alpha)};
  }

  :host(.ion-color.ion-focused.fab-button-translucent) .button-native,
  :host(.ion-color.ion-activated.fab-button-translucent) .button-native {
    background: #{current-color(base)};
  }
}