Select component

[4k1k0]

I added a select component.

I had to remove the border-style mixin from the input scope in input.scss so I can use it.

This solves the issue #152 .

[4k1k0]

@trezy I restored the branch. Sorry. :bowing_man:

[BcRikko]

Sorry for the late comment. 😢

I reexamined the styles with reference to your implementation. 🔧 Please split the files of inputs.scss and selects.scss. 🙏

I don't need to provide a dark theme for input elements. 🙇 I added the color of the state instead of dark theme. 🎨

.nes-select {
  @mixin border-style($border, $outline) {
    color: $border;
    box-shadow: 0 4px, 0 -4px, 4px 0, -4px 0;

    > select {
      outline-color: $outline;
    }

    &::after {
      color: $background-color;
      background-color: $border;
    }
  }

  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 4px;

  @include border-style($base-color, map-get($default-colors, "hover"));

  &.is-success {
    @include border-style(map-get($success-colors, "normal"), map-get($success-colors, "hover"));
  }
  &.is-warning {
    @include border-style(map-get($warning-colors, "normal"), map-get($warning-colors, "hover"));
  }
  &.is-error {
    @include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
  }

  > select {
    width: 100%;
    padding: 0.5rem 3.2rem 0.5rem 1rem;
    cursor: $cursor-click-url, pointer;
    border: none;
    -webkit-appearance: none;
    appearance: none;
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    line-height: 2.5rem;
    color: $background-color;
    text-align: center;
    pointer-events: none;
    content: ">";
    transform: rotateZ(90deg);
  }
}

<div class="nes-select">
  <select>
    <option>Hello</option>
    <option>World</option>
  </select>
</div>
<div class="nes-select is-success">
  <select>
    <option>Hello</option>
    <option>World</option>
  </select>
</div>
<div class="nes-select is-warning">
  <select>
    <option>Hello</option>
    <option>World</option>
  </select>
</div>
<div class="nes-select is-error">
  <select>
    <option>Hello</option>
    <option>World</option>
  </select>
</div>

[4k1k0]

That's pretty dope! :sunglasses: I have a problem. I don't have the $X-colors variables. i.e. $default-colors. I suppose they're need to be declared inside scss/base/variables.scss. And when I try to build or commit the build fails and I can't continue. What should I do? I can't push and I did a fetch to develop branch already. :confused: :sos: :bowing_man:

[BcRikko]

umm…… 🤔 Color variables are already merged into the latest develop branch 🤔 https://github.com/nostalgic-css/NES.css/blob/0e66d0b81ef0ec8cbd7a3798f45ce3ec909ec48b/scss/base/variables.scss#L11-L39

References to the develop branch may be old 🙈 Could you try settings upstream as follow link. 🙏 https://github.com/nostalgic-css/NES.css/pull/164/files#diff-4ed520cfcdddf22dea24c7672e0e6047R62

[BcRikko]

This PR was addressed by #217. Sorry 🙇

[tlynetteb]

i really have no idea what i am to do plz help me

On Sat, Dec 22, 2018 at 9:37 PM ダーシノ notifications@github.com wrote:

This PR was addressed by #217 https://github.com/nostalgic-css/NES.css/pull/217. Sorry 🙇

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/nostalgic-css/NES.css/pull/154#issuecomment-449612113, or mute the thread https://github.com/notifications/unsubscribe-auth/ArgS1ksZOsGQcSMMwoqqJI1BopUgP1Bpks5u7vpfgaJpZM4ZKlw0 .