chattigo-webkit 1.19.7

chattigo-webkit

  • Como Implementar
  • Desarrolladores
  • Changelog
  • Entregables [HTML]
  • Emojis [Emoji-button]
  • Libreria de graficos [ChartjJS]
  • Design

    • Colors
    • Fonts
    • Icons
  • Shared Components

    • Login Card
    • Conversation Boxes
    • Conversation Input
    • Counter Indicator
    • Transferable Card
    • Buttons
    • Dropdowns
    • Error Messages
    • Links
    • Loader
    • Lists
    • Report Resume
    • Stepper
    • Forms - Inputs
    • Forms - Selection Controls
    • Flexible alerts
  • Web Components

    • Dashboard Layout
    • Dashboard
    • Dropup / down
    • User Profile
    • Conversation
    • Inbox
    • HSM - Outbound
    • Buy - Outbound
    • Groups Members
    • Breadcrumbs
    • Modal
  • App Components

    • Headers
    • Navigation
    • Section Titles
    • Messages Actions
    • Alerts
    • Forms
    • Inbox Card
    • Empty Inbox
    • Links
    • Lists
    • Profile Info
  • Widget Components

    • Examples
    • Base
    • Header
    • Content
    • Trigger
    • Forms
    • Links
    • Lists
  • Trumps Classes

    • Cursor
    • Social Colors
    • Typographies Helpers
    • Before Content
    • Contents
  • Object Classes

    • Icons
  • Sass Placeholders [Dev]

    • Buttons
    • Messages Boxes
    • App Messages List Icons
  • Mixins & Functions [Dev]

    • Mixins BEM
    • Mixin Use Font
    • Breakpoint mixins
    • Breakpoint functions
    • Function Use Color
    • Function Use Z Index
  • Settings variables [Dev]

    • BEM
    • Fonts
    • Colors Palette
    • Breakpoints
    • z-index
    • UI Enhancements
Documented with Herman by OddBird
chattigo-webkit » Links

Anchor links components classes

.c-action-link

scss
.c-action-link {
  @include use-font('body', 'regular');
  border-bottom: solid 1px use-color('event', 'info');
  color: use-color('event', 'info');
  line-height: inherit;
  text-decoration: none;

  @include modifier('disabled') {
    border-bottom: solid 1px use-color('grey', light);
    color: use-color('grey', light);
    text-decoration: none;

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('grey', light);
    }
  }

  &:hover {
    border-bottom: solid 1px use-color(base, 'black');
    color: use-color(base, 'black');
    cursor: pointer;

    @include if-block-has-modifier('c-action-link','disabled', true) {
      border-bottom: solid 1px use-color('grey', light);
      color: use-color('grey', light);
      cursor: not-allowed;
      text-decoration: none;

      [class^='icon-'],
      [class*=' icon-'] {
        color: use-color('grey', light);
      }
    }

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color(base, 'black');
    }
  }

  &:active {
    border-bottom: solid 1px use-color(secondary);
    color: use-color(secondary);
  }

  &:disabled,
  &[disabled] {
    border-bottom: solid 1px use-color('grey', light);
    color: use-color('grey', light);
    cursor: not-allowed;
    text-decoration: none;
  }
}

Class for Anchor links - only texts

Example

html
<p>
  <a class="c-action-link">¿Olvidó su contraseña?<a>
</p>
<p>
  <a class="c-action-link c-action-link--disabled">¿Olvidó su contraseña?<a>
</p>
<p>
  <a class="c-action-link" disabled>¿Olvidó su contraseña?<a>
</p>

Requires

@mixin modifier()

@mixin if-block-has-modifier()

@function use-color()

@mixin use-font()