Add select specs

docs/bulma.scss

@@ -1,30 +1,2 @@
 @charset "utf-8";
 @import "../bulma";
-
-.yolo {
-  content: "default";
-}
-
-@include tablet {
-  .yolo {
-    content: "tablet";
-  }
-}
-
-@include desktop {
-  .yolo {
-    content: "desktop";
-  }
-}
-
-@include widescreen {
-  .yolo {
-    content: "widescreen";
-  }
-}
-
-@include fullhd {
-  .yolo {
-    content: "fullhd";
-  }
-}

docs/css/bulma-docs.css

@@ -76,7 +76,7 @@ fieldset[disabled] .bulma-control-extend {
   user-select: none;
 }
 
-.select:not(.is-multiple):not(.is-loading)::after, .navbar-link:not(.is-arrowless)::after {
+.select:not(.is-multiple):not(.is-loading):not(.is-disabled)::after, .navbar-link:not(.is-arrowless)::after {
   border: 3px solid transparent;
   border-radius: 2px;
   border-right: 0;
@@ -184,7 +184,6 @@ fieldset[disabled] .bulma-control-extend {
 }
 
 .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
-  -webkit-animation: spinAround 500ms infinite linear;
   animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 9999px;
@@ -326,8 +325,6 @@ html {
   overflow-x: hidden;
   overflow-y: scroll;
   text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }
 
@@ -454,15 +451,6 @@ table th {
   color: #363636;
 }
 
-@-webkit-keyframes spinAround {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-
 @keyframes spinAround {
   from {
     transform: rotate(0deg);
@@ -4427,13 +4415,9 @@ div.icon-text {
 }
 
 .progress:indeterminate {
-  -webkit-animation-duration: 1.5s;
   animation-duration: 1.5s;
-  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
-  -webkit-animation-name: moveIndeterminate;
   animation-name: moveIndeterminate;
-  -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   background-color: #ededed;
   background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
@@ -4466,15 +4450,6 @@ div.icon-text {
   height: 1.5rem;
 }
 
-@-webkit-keyframes moveIndeterminate {
-  from {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
-}
-
 @keyframes moveIndeterminate {
   from {
     background-position: 200% 0;
@@ -5625,7 +5600,7 @@ fieldset[disabled] .radio,
   height: 2.5em;
 }
 
-.select:not(.is-multiple):not(.is-loading)::after {
+.select:not(.is-multiple):not(.is-loading):not(.is-disabled)::after {
   border-color: #485fc7;
   right: 1.125em;
   z-index: 4;
@@ -10060,9 +10035,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
 }
 
-.pagination-previous[disabled],
+.pagination-previous[disabled], .pagination-previous.is-disabled,
 .pagination-next[disabled],
-.pagination-link[disabled] {
+.pagination-next.is-disabled,
+.pagination-link[disabled],
+.pagination-link.is-disabled {
   background-color: #dbdbdb;
   border-color: #dbdbdb;
   box-shadow: none;
@@ -12530,8 +12507,6 @@ label.panel-block:hover {
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  min-height: -webkit-min-content;
-  min-height: -moz-min-content;
   min-height: min-content;
 }
 
@@ -17164,7 +17139,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 
 .bd-anchors {
   padding: var(--docs-side-padding);
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
@@ -17599,8 +17573,9 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 
 .bd-categories {
   --height: 1.25;
+  overflow-y: auto;
+  max-height: 100vh;
   padding: var(--docs-side-padding);
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
@@ -21027,7 +21002,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   --device-md-width: 24px;
   --device-lg-height: 40px;
   --device-lg-width: 48px;
-  -webkit-animation: bdDeviceBounce 3.5s infinite;
   animation: bdDeviceBounce 3.5s infinite;
   border: 0 solid hsl(var(--device-deg), 100%, 53%);
   border-width: var(--device-y) var(--device-x);
@@ -21073,44 +21047,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   color: #333333;
 }
 
-@-webkit-keyframes bdDeviceBounce {
-  0% {
-    --device-deg: var(--device-sm-deg);
-    height: var(--device-sm-height);
-    width: var(--device-sm-width);
-  }
-  28% {
-    --device-deg: var(--device-sm-deg);
-    height: var(--device-sm-height);
-    width: var(--device-sm-width);
-  }
-  33% {
-    --device-deg: var(--device-md-deg);
-    height: var(--device-md-height);
-    width: var(--device-md-width);
-  }
-  62% {
-    --device-deg: var(--device-md-deg);
-    height: var(--device-md-height);
-    width: var(--device-md-width);
-  }
-  67% {
-    --device-deg: var(--device-lg-deg);
-    height: var(--device-lg-height);
-    width: var(--device-lg-width);
-  }
-  95% {
-    --device-deg: var(--device-lg-deg);
-    height: var(--device-lg-height);
-    width: var(--device-lg-width);
-  }
-  100% {
-    --device-deg: var(--device-sm-deg);
-    height: var(--device-sm-height);
-    width: var(--device-sm-width);
-  }
-}
-
 @keyframes bdDeviceBounce {
   0% {
     --device-deg: var(--device-sm-deg);
@@ -21149,15 +21085,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdGrow {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
 @keyframes bdGrow {
   from {
     transform: scale(0);
@@ -21167,17 +21094,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdSlideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes bdSlideDown {
   from {
     opacity: 0;
@@ -21189,17 +21105,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes bdSlideUp {
   from {
     opacity: 0;
@@ -21212,98 +21117,69 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github {
-  -webkit-animation-duration: 500ms;
   animation-duration: 500ms;
-  -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
-  -webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
   animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
   transform-origin: center center;
 }
 
 .bd-focus-item .title {
-  -webkit-animation-name: bdSlideDown;
   animation-name: bdSlideDown;
 }
 
 .bd-focus-item .subtitle {
-  -webkit-animation-name: bdSlideUp;
   animation-name: bdSlideUp;
 }
 
 .bd-focus-item:nth-child(1) .title {
-  -webkit-animation-delay: 0;
   animation-delay: 0;
 }
 
 .bd-focus-item:nth-child(1) .subtitle {
-  -webkit-animation-delay: 125ms;
   animation-delay: 125ms;
 }
 
 .bd-focus-item:nth-child(2) .title {
-  -webkit-animation-delay: 500ms;
   animation-delay: 500ms;
 }
 
 .bd-focus-item:nth-child(2) .subtitle {
-  -webkit-animation-delay: 625ms;
   animation-delay: 625ms;
 }
 
 .bd-focus-item:nth-child(3) .title {
-  -webkit-animation-delay: 1000ms;
   animation-delay: 1000ms;
 }
 
 .bd-focus-item:nth-child(3) .subtitle {
-  -webkit-animation-delay: 1125ms;
   animation-delay: 1125ms;
 }
 
 .bd-focus-item:nth-child(4) .title {
-  -webkit-animation-delay: 1500ms;
   animation-delay: 1500ms;
 }
 
 .bd-focus-item:nth-child(4) .subtitle {
-  -webkit-animation-delay: 1625ms;
   animation-delay: 1625ms;
 }
 
 .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
-  -webkit-animation-name: bdGrow;
   animation-name: bdGrow;
   transform-origin: bottom center;
 }
 
 .bd-focus-mobile {
-  -webkit-animation-delay: 0;
   animation-delay: 0;
 }
 
 .bd-focus-tablet {
-  -webkit-animation-delay: 250ms;
   animation-delay: 250ms;
 }
 
 .bd-focus-desktop {
-  -webkit-animation-delay: 500ms;
   animation-delay: 500ms;
 }
 
-@-webkit-keyframes bdCube1 {
-  0% {
-    transform: translate3d(0, -50px, 0);
-    opacity: 0;
-  }
-  25%,
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
 @keyframes bdCube1 {
   0% {
     transform: translate3d(0, -50px, 0);
@@ -21316,18 +21192,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdCube2 {
-  0% {
-    transform: translate3d(-40px, 30px, 0);
-    opacity: 0;
-  }
-  25%,
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
 @keyframes bdCube2 {
   0% {
     transform: translate3d(-40px, 30px, 0);
@@ -21340,18 +21204,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdCube3 {
-  0% {
-    transform: translate3d(40px, 30px, 0);
-    opacity: 0;
-  }
-  25%,
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
 @keyframes bdCube3 {
   0% {
     transform: translate3d(40px, 30px, 0);
@@ -21365,44 +21217,26 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
-  -webkit-animation-direction: alternate;
   animation-direction: alternate;
-  -webkit-animation-duration: 2000ms;
   animation-duration: 2000ms;
-  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
 }
 
 .bd-focus-cube-1 {
-  -webkit-animation-delay: 500ms;
   animation-delay: 500ms;
-  -webkit-animation-name: bdCube1;
   animation-name: bdCube1;
 }
 
 .bd-focus-cube-2 {
-  -webkit-animation-name: bdCube2;
   animation-name: bdCube2;
-  -webkit-animation-delay: 750ms;
   animation-delay: 750ms;
 }
 
 .bd-focus-cube-3 {
-  -webkit-animation-name: bdCube3;
   animation-name: bdCube3;
-  -webkit-animation-delay: 1000ms;
   animation-delay: 1000ms;
 }
 
-@-webkit-keyframes bdFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes bdFadeIn {
   from {
     opacity: 0;
@@ -21412,17 +21246,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdSlowIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes bdSlowIn {
   from {
     opacity: 0;
@@ -21434,17 +21257,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdScaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes bdScaleIn {
   from {
     opacity: 0;
@@ -21457,105 +21269,16 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 .bd-focus-css3 {
-  -webkit-animation-delay: 1000ms;
   animation-delay: 1000ms;
-  -webkit-animation-name: bdScaleIn;
   animation-name: bdScaleIn;
 }
 
 .bd-focus-github {
-  -webkit-animation-delay: 1500ms;
   animation-delay: 1500ms;
-  -webkit-animation-duration: 1500ms;
   animation-duration: 1500ms;
-  -webkit-animation-name: bdJellyPop;
   animation-name: bdJellyPop;
 }
 
-@-webkit-keyframes bdJellyPop {
-  0% {
-    opacity: 0;
-    transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  3.4% {
-    opacity: 1;
-    transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  4.7% {
-    transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  6.81% {
-    transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  9.41% {
-    transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  10.21% {
-    transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  13.61% {
-    transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  14.11% {
-    transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  17.52% {
-    transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  18.72% {
-    transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  21.32% {
-    transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  24.32% {
-    transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  25.23% {
-    transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  29.03% {
-    transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  29.93% {
-    transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  35.54% {
-    transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  36.74% {
-    transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  41.04% {
-    transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  44.44% {
-    transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  52.15% {
-    transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  59.86% {
-    transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  63.26% {
-    transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  75.28% {
-    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  85.49% {
-    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  90.69% {
-    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-}
-
 @keyframes bdJellyPop {
   0% {
     opacity: 0;
@@ -21649,22 +21372,17 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 
 .bd-best-list {
   align-items: stretch;
-  -webkit-animation-duration: 93.6s;
   animation-duration: 93.6s;
-  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
-  -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   display: flex;
   left: 0;
   position: absolute;
   top: 1.5rem;
-  -webkit-animation-name: bdBestCarousel;
   animation-name: bdBestCarousel;
 }
 
 .bd-best-list:hover {
-  -webkit-animation-play-state: paused;
   animation-play-state: paused;
 }
 
@@ -21713,12 +21431,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   width: auto;
 }
 
-@-webkit-keyframes bdBestCarousel {
-  100% {
-    transform: translateX(calc(-100% + 3120px));
-  }
-}
-
 @keyframes bdBestCarousel {
   100% {
     transform: translateX(calc(-100% + 3120px));
@@ -22692,7 +22404,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 .bulma-loader-mixin {
-  -webkit-animation: spinAround 500ms infinite linear;
   animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 9999px;
@@ -22934,5 +22645,3 @@ fieldset[disabled] .bulma-control-mixin {
     background: blue;
   }
 }
-
-/*# sourceMappingURL=bulma-docs.css.map */

docs/css/bulma.css

@@ -3728,7 +3728,7 @@ fieldset[disabled] .select select:hover {
 }
 
 .select.is-disabled::after {
-  border-color: #7a7a7a;
+  border-color: #7a7a7a !important;
 }
 
 .select.is-fullwidth {
@@ -11788,31 +11788,3 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   background-color: #fafafa;
   padding: 3rem 1.5rem 6rem;
 }
-
-.yolo {
-  content: "default";
-}
-
-@media screen and (min-width: 769px), print {
-  .yolo {
-    content: "tablet";
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .yolo {
-    content: "desktop";
-  }
-}
-
-@media screen and (min-width: 1216px) {
-  .yolo {
-    content: "widescreen";
-  }
-}
-
-@media screen and (min-width: 1408px) {
-  .yolo {
-    content: "fullhd";
-  }
-}

docs/cyp/form/select.html

@@ -0,0 +1,53 @@
+---
+layout: cypress
+title: Form/Select
+---
+
+{% capture options %}
+  <option value="Argentina">Argentina</option>
+  <option value="Bolivia">Bolivia</option>
+  <option value="Brazil">Brazil</option>
+  <option value="Chile">Chile</option>
+  <option value="Colombia">Colombia</option>
+  <option value="Ecuador">Ecuador</option>
+  <option value="Guyana">Guyana</option>
+  <option value="Paraguay">Paraguay</option>
+  <option value="Peru">Peru</option>
+  <option value="Suriname">Suriname</option>
+  <option value="Uruguay">Uruguay</option>
+  <option value="Venezuela">Venezuela</option>
+{% endcapture %}
+
+<div id="select" class="select">
+  <select>
+    {{ options }}
+  </select>
+</div>
+
+{% for color in site.data.colors.justColors %}
+  <div id="select-{{ color }}" class="select is-{{ color }}">
+    <select>
+      {{ options }}
+    </select>
+  </div>
+{% endfor %}
+
+{% for size in site.data.sizes %}
+  <div id="select-{{ size }}" class="select is-{{ size }}">
+    <select>
+      {{ options }}
+    </select>
+  </div>
+{% endfor %}
+
+<div id="select-multiple" class="select is-multiple">
+  <select multiple>
+    {{ options }}
+  </select>
+</div>
+
+<div id="select-disabled" class="select is-disabled">
+  <select disabled>
+    {{ options }}
+  </select>
+</div>

docs/cypress/integration/form/input-textarea.spec.js

@@ -35,7 +35,7 @@ describe("Form/Input", () => {
     });
   });
 
-  it(`has correct color File`, () => {
+  it(`has correct color Input`, () => {
     for (let i = 0; i < Cypress.env("color-names").length; i++) {
       const name = Cypress.env("color-names")[i];
       const baseColor = Cypress.env(name);
@@ -50,7 +50,7 @@ describe("Form/Input", () => {
     }
   });
 
-  it("has correct File sizes", () => {
+  it("has correct Input sizes", () => {
     for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
       const size = Cypress.env("just-sizes")[i];
 

docs/cypress/integration/form/select.spec.js

@@ -0,0 +1,86 @@
+describe("Form/select", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/select/");
+  });
+
+  it("has a Select", () => {
+    cy.get(".select").should("exist");
+  });
+
+  it("has a correct Select", () => {
+    cy.get("#select").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("inline-block");
+      expect(cs.height).to.equal(Cypress.env("control-height"));
+      expect(cs.maxWidth).to.equal("100%");
+      expect(cs.position).to.equal("relative");
+      expect(cs.verticalAlign).to.equal("top");
+
+      const after = window.getComputedStyle($[0], "after");
+      expect(after.borderColor).to.equal(Cypress.env("link"));
+    });
+
+    cy.get("#select select").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.cursor).to.equal("pointer");
+      expect(cs.display).to.equal("block");
+      expect(cs.fontSize).to.equal("16px");
+      expect(cs.height).to.equal(Cypress.env("control-height"));
+      expect(cs.maxWidth).to.equal("100%");
+    });
+  });
+
+  it(`has correct color Select`, () => {
+    for (let i = 0; i < Cypress.env("color-names").length; i++) {
+      const name = Cypress.env("color-names")[i];
+      const baseColor = Cypress.env(name);
+      const invertColor = Cypress.env(`${name}-invert`);
+      const lightColor = Cypress.env(`${name}-light`);
+      const darkColor = Cypress.env(`${name}-dark`);
+
+      cy.get(`#select-${name}`).then(($) => {
+        const after = window.getComputedStyle($[0], "after");
+        expect(after.borderColor).to.equal(baseColor);
+      });
+
+      cy.get(`#select-${name} select`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.borderColor).to.equal(baseColor);
+      });
+    }
+  });
+
+  it("has correct Select sizes", () => {
+    for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+      const size = Cypress.env("just-sizes")[i];
+
+      cy.get(`#select-${size}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
+      });
+    }
+  });
+
+  it("has a correct Select multiple", () => {
+    cy.get("#select-multiple").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.not.equal(Cypress.env("control-height"));
+    });
+
+    cy.get("#select-multiple select").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.cursor).to.equal("pointer");
+      expect(cs.display).to.equal("block");
+      expect(cs.fontSize).to.equal("16px");
+      expect(cs.height).to.not.equal(Cypress.env("control-height"));
+      expect(cs.maxWidth).to.equal("100%");
+    });
+  });
+
+  it("has a correct Select disabled", () => {
+    cy.get("#select-disabled").then(($) => {
+      const after = window.getComputedStyle($[0], "after");
+      expect(after.borderColor).to.equal(Cypress.env("text-light"));
+    });
+  });
+});

sass/form/select.sass

@@ -66,7 +66,7 @@ $select-colors: $form-colors !default
   // Modifiers
   &.is-disabled
     &::after
-      border-color: $input-disabled-color
+      border-color: $input-disabled-color !important
   &.is-fullwidth
     width: 100%
     select