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 .

[BcRikko]

Thanks 🙇
Please wait a moment as I have other things to try. 🙏

[BcRikko]

please use color variables 🙏

• #000, black -> $base-color
• #fff, white -> $background-color

[4k1k0]

Okay 😄 I will fix it later 🙇

[4k1k0]

@trezy I restored the branch. Sorry. 🙇‍♂️

[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! 😎 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. 😕 🆘 🙇‍♂️

[BcRikko]

umm…… 🤔
Color variables are already merged into the latest develop branch 🤔

NES.css/scss/base/variables.scss

Lines 11 to 39 in 0e66d0b

	$default-colors: (
	normal: $background-color,
	hover: #e7e7e7,
	shadow: #adafbc
	);
	$disabled-colors: (
	normal: #d3d3d3,
	shadow: #adafbc
	);
	$primary-colors: (
	normal: #209cee,
	hover: #108de0,
	shadow: #006bb3
	);
	$success-colors: (
	normal: #92cc41,
	hover: #76c442,
	shadow: #4aa52e
	);
	$warning-colors: (
	normal: #f7d51d,
	hover: #f2c409,
	shadow: #e59400
	);
	$error-colors: (
	normal: #e76e55,
	hover: #ce372b,
	shadow: #8c2022
	);

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 ダーシノ ***@***.***> wrote: This PR was addressed by #217 <#217>. Sorry 🙇 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#154 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ArgS1ksZOsGQcSMMwoqqJI1BopUgP1Bpks5u7vpfgaJpZM4ZKlw0> .