1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111


ash / webui / common / resources / navigation_selector.html [blame]

<style include="cr-shared-style">
:host {
  --focus-border-width: 2px;
}

:host-context(body.jelly-enabled) .navigation-item {
  border-radius: 20px;
  font: var(--cros-button-2-font);
}

.navigation-item {
  --active-shadow-rgb: transparent; /* Disable Active Shadow on cr-button */
  --focus-shadow-color: transparent; /* Disable Focus Shadow on cr-button */
  --hover-bg-color: var(--cros-ripple-color);
  --ripple-opacity: 0; /* Disable Ripple on cr-button */

  align-items: center;
  border-block-end-width: var(--focus-border-width);
  border-block-start-width: var(--focus-border-width);
  border-color: transparent;
  border-inline-end-width: var(--focus-border-width);
  border-inline-start-width: 0;
  border-radius: 0 20px 20px 0;
  border-style: solid;
  color: var(--cros-text-color-primary);
  cursor: pointer;
  display: flex;
  font-weight: 500;
  justify-content: start;
  margin-bottom: 8px;
  margin-inline-end: 2px;
  min-height: 40px;
  padding-inline-start: 20px;
}

:host-context(body.jelly-enabled) .navigation-item {
  color: var(--cros-sys-on_surface);
}

:host-context(body.jelly-enabled) .navigation-item:hover {
  background-color: var(--cros-sys-hover_on_subtle);
}

.navigation-item:focus-visible {
  outline: var(--cros-focus-ring-color) solid var(--focus-border-width);
}

.navigation-item.selected {
  background-color: var(--cros-highlight-color);
  color: var(--cros-text-color-selection);
}

:host-context(body.jelly-enabled) .navigation-item.selected {
  /* TODO(276493287): Replace default color rule after jelly colors launches. */
  background-color: var(--cros-sys-primary);
  color: var(--cros-sys-on_primary);
}

iron-icon {
  --iron-icon-fill-color: var(--cros-icon-color-primary);
  --iron-icon-height: 20px;
  --iron-icon-width: 20px;
  margin-inline-end: 16px;
  pointer-events: none;
  vertical-align: top;
}

/* TODO(276493287): Merge into default color rule after jelly colors
                    launches. */
:host-context(body.jelly-enabled) iron-icon {
  --iron-icon-fill-color: var(--cros-sys-on_surface);
}

/* TODO(276493287): Remove default color rule after jelly colors launches. */
.navigation-item.selected > iron-icon {
  --iron-icon-fill-color: var(--cros-icon-color-prominent);
}

:host-context(body.jelly-enabled) .navigation-item.selected > iron-icon {
  --iron-icon-fill-color: var(--cros-sys-on_primary);
}

cr-expand-button {
  padding-inline-start: 20px;
}


:host-context(body.jelly-enabled) #navigationSelectorMenu {
  margin-inline-start: 8px;
}

#navigationSelectorMenu {
  position: relative;
  top: var(--focus-border-width, 0);
}

</style>

<div id="navigationSelectorComponent">
  <nav id="navigationSelectorMenu">
    <template id="selectorItems" is="dom-repeat" items="{{selectorItems}}">
        <cr-button class$="{{computeInitialClass_(item)}}" tabindex="0"
            part="navigation-item"
            on-click="onSelected_">
          <iron-icon class="icon" icon="[[item.icon]]"
            alt="" hidden="[[!item.icon]]"></iron-icon>
          [[item.name]]
        </cr-button>
    </template>
  </nav>
</div>