@domoinc/domo-select/bower_components/Button/src/styles/da-button.css

DomoSelect - Domo Widget

.da-btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  display: block;
  border-radius: 3px;
  font-size: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .da-btn:focus, .da-btn.focus, .da-btn:active:focus, .da-btn:active.focus, .da-btn.active:focus, .da-btn.active.focus {
    outline: none;
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .da-btn:hover, .da-btn:focus, .da-btn.focus {
    outline: none;
    text-decoration: none; }
  .da-btn:active, .da-btn.active {
    outline: none;
    background-image: none; }
  .da-btn.disabled, .da-btn[disabled], fieldset[disabled] .da-btn {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .da-btn.rotate {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  .da-btn .btn-content div {
    display: inline-block; }
  .da-btn .btn-content .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .da-btn .btn-content .btn-icon-left {
    float: left; }
  .da-btn .btn-content .btn-text {
    width: 100%;
    float: left; }
    .da-btn .btn-content .btn-text.center {
      text-align: center; }
  .da-btn .btn-content .btn-icon-right {
    float: right; }
    .da-btn .btn-content .btn-icon-right .chevron {
      padding: 0px 0px; }
      .da-btn .btn-content .btn-icon-right .chevron svg {
        width: 100%;
        height: 100%;
        max-height: 10px; }
  .da-btn .hidden {
    display: none !important; }

.thm-clear {
  color: #54585A;
  background-color: transparent;
  border-color: transparent; }
  .thm-clear:hover, .thm-clear:focus, .thm-clear.focus, .open > .thm-clear.dropdown-toggle {
    color: #54585A;
    background-color: transparent;
    border-color: transparent; }
    .thm-clear:hover path, .thm-clear:focus path, .thm-clear.focus path, .open > .thm-clear.dropdown-toggle path {
      fill: #54585A; }
  .thm-clear:active, .thm-clear.active, .open > .thm-clear.dropdown-toggle {
    color: #54585A;
    background-color: transparent;
    border-color: transparent;
    background-image: none; }
    .thm-clear:active path, .thm-clear.active path, .open > .thm-clear.dropdown-toggle path {
      fill: #54585A; }
  .thm-clear.disabled, .thm-clear.disabled:hover, .thm-clear.disabled:focus, .thm-clear.disabled.focus, .thm-clear.disabled:active, .thm-clear.disabled.active, .thm-clear[disabled], .thm-clear[disabled]:hover, .thm-clear[disabled]:focus, .thm-clear[disabled].focus, .thm-clear[disabled]:active, .thm-clear[disabled].active, fieldset[disabled] .thm-clear, fieldset[disabled] .thm-clear:hover, fieldset[disabled] .thm-clear:focus, fieldset[disabled] .thm-clear.focus, fieldset[disabled] .thm-clear:active, fieldset[disabled] .thm-clear.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-clear path {
    fill: #54585A; }

.thm-light-grey {
  color: #54585A;
  background-color: #D8D8D9;
  border-color: #D8D8D9; }
  .thm-light-grey:hover, .thm-light-grey:focus, .thm-light-grey.focus, .open > .thm-light-grey.dropdown-toggle {
    color: #54585A;
    background-color: #cbcbcc;
    border-color: #cbcbcc; }
    .thm-light-grey:hover path, .thm-light-grey:focus path, .thm-light-grey.focus path, .open > .thm-light-grey.dropdown-toggle path {
      fill: #54585A; }
  .thm-light-grey:active, .thm-light-grey.active, .open > .thm-light-grey.dropdown-toggle {
    color: #54585A;
    background-color: #bebec0;
    border-color: #bebec0;
    background-image: none; }
    .thm-light-grey:active path, .thm-light-grey.active path, .open > .thm-light-grey.dropdown-toggle path {
      fill: #54585A; }
  .thm-light-grey.disabled, .thm-light-grey.disabled:hover, .thm-light-grey.disabled:focus, .thm-light-grey.disabled.focus, .thm-light-grey.disabled:active, .thm-light-grey.disabled.active, .thm-light-grey[disabled], .thm-light-grey[disabled]:hover, .thm-light-grey[disabled]:focus, .thm-light-grey[disabled].focus, .thm-light-grey[disabled]:active, .thm-light-grey[disabled].active, fieldset[disabled] .thm-light-grey, fieldset[disabled] .thm-light-grey:hover, fieldset[disabled] .thm-light-grey:focus, fieldset[disabled] .thm-light-grey.focus, fieldset[disabled] .thm-light-grey:active, fieldset[disabled] .thm-light-grey.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-light-grey path {
    fill: #54585A; }

.thm-light-grey-invert {
  color: #54585A;
  background-color: #FFFFFF;
  border-color: #D8D8D9; }
  .thm-light-grey-invert:hover, .thm-light-grey-invert:focus, .thm-light-grey-invert.focus, .open > .thm-light-grey-invert.dropdown-toggle {
    color: #54585A;
    background-color: rgba(216, 216, 217, 0.2); }
    .thm-light-grey-invert:hover path, .thm-light-grey-invert:focus path, .thm-light-grey-invert.focus path, .open > .thm-light-grey-invert.dropdown-toggle path {
      fill: #54585A; }
  .thm-light-grey-invert:active, .thm-light-grey-invert.active, .open > .thm-light-grey-invert.dropdown-toggle {
    color: #54585A;
    background-color: #bebec0;
    border-color: #bebec0;
    background-image: none; }
    .thm-light-grey-invert:active path, .thm-light-grey-invert.active path, .open > .thm-light-grey-invert.dropdown-toggle path {
      fill: #54585A; }
  .thm-light-grey-invert.disabled, .thm-light-grey-invert.disabled:hover, .thm-light-grey-invert.disabled:focus, .thm-light-grey-invert.disabled.focus, .thm-light-grey-invert.disabled:active, .thm-light-grey-invert.disabled.active, .thm-light-grey-invert[disabled], .thm-light-grey-invert[disabled]:hover, .thm-light-grey-invert[disabled]:focus, .thm-light-grey-invert[disabled].focus, .thm-light-grey-invert[disabled]:active, .thm-light-grey-invert[disabled].active, fieldset[disabled] .thm-light-grey-invert, fieldset[disabled] .thm-light-grey-invert:hover, fieldset[disabled] .thm-light-grey-invert:focus, fieldset[disabled] .thm-light-grey-invert.focus, fieldset[disabled] .thm-light-grey-invert:active, fieldset[disabled] .thm-light-grey-invert.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-light-grey-invert path {
    fill: #54585A; }

.thm-none {
  color: #54585A;
  background-color: #FFFFFF;
  border-color: #FFFFFF; }
  .thm-none:hover, .thm-none:focus, .thm-none.focus, .open > .thm-none.dropdown-toggle {
    color: #54585A;
    background-color: #f2f2f2;
    border-color: #f2f2f2; }
    .thm-none:hover path, .thm-none:focus path, .thm-none.focus path, .open > .thm-none.dropdown-toggle path {
      fill: #54585A; }
  .thm-none:active, .thm-none.active, .open > .thm-none.dropdown-toggle {
    color: #54585A;
    background-color: #e6e6e6;
    border-color: #e6e6e6;
    background-image: none; }
    .thm-none:active path, .thm-none.active path, .open > .thm-none.dropdown-toggle path {
      fill: #54585A; }
  .thm-none.disabled, .thm-none.disabled:hover, .thm-none.disabled:focus, .thm-none.disabled.focus, .thm-none.disabled:active, .thm-none.disabled.active, .thm-none[disabled], .thm-none[disabled]:hover, .thm-none[disabled]:focus, .thm-none[disabled].focus, .thm-none[disabled]:active, .thm-none[disabled].active, fieldset[disabled] .thm-none, fieldset[disabled] .thm-none:hover, fieldset[disabled] .thm-none:focus, fieldset[disabled] .thm-none.focus, fieldset[disabled] .thm-none:active, fieldset[disabled] .thm-none.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-none path {
    fill: #54585A; }

.thm-dark-grey {
  color: #FFFFFF;
  background-color: #7B8184;
  border-color: #7B8184; }
  .thm-dark-grey:hover, .thm-dark-grey:focus, .thm-dark-grey.focus, .open > .thm-dark-grey.dropdown-toggle {
    color: #FFFFFF;
    background-color: #6f7477;
    border-color: #6f7477; }
    .thm-dark-grey:hover path, .thm-dark-grey:focus path, .thm-dark-grey.focus path, .open > .thm-dark-grey.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-dark-grey:active, .thm-dark-grey.active, .open > .thm-dark-grey.dropdown-toggle {
    color: #FFFFFF;
    background-color: #62676a;
    border-color: #62676a;
    background-image: none; }
    .thm-dark-grey:active path, .thm-dark-grey.active path, .open > .thm-dark-grey.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-dark-grey.disabled, .thm-dark-grey.disabled:hover, .thm-dark-grey.disabled:focus, .thm-dark-grey.disabled.focus, .thm-dark-grey.disabled:active, .thm-dark-grey.disabled.active, .thm-dark-grey[disabled], .thm-dark-grey[disabled]:hover, .thm-dark-grey[disabled]:focus, .thm-dark-grey[disabled].focus, .thm-dark-grey[disabled]:active, .thm-dark-grey[disabled].active, fieldset[disabled] .thm-dark-grey, fieldset[disabled] .thm-dark-grey:hover, fieldset[disabled] .thm-dark-grey:focus, fieldset[disabled] .thm-dark-grey.focus, fieldset[disabled] .thm-dark-grey:active, fieldset[disabled] .thm-dark-grey.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-dark-grey path {
    fill: #FFFFFF; }

.thm-orange {
  color: #FFFFFF;
  background-color: #FC9927;
  border-color: #FC9927; }
  .thm-orange:hover, .thm-orange:focus, .thm-orange.focus, .open > .thm-orange.dropdown-toggle {
    color: #FFFFFF;
    background-color: #fc8d0e;
    border-color: #fc8d0e; }
    .thm-orange:hover path, .thm-orange:focus path, .thm-orange.focus path, .open > .thm-orange.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-orange:active, .thm-orange.active, .open > .thm-orange.dropdown-toggle {
    color: #FFFFFF;
    background-color: #ed8003;
    border-color: #ed8003;
    background-image: none; }
    .thm-orange:active path, .thm-orange.active path, .open > .thm-orange.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-orange.disabled, .thm-orange.disabled:hover, .thm-orange.disabled:focus, .thm-orange.disabled.focus, .thm-orange.disabled:active, .thm-orange.disabled.active, .thm-orange[disabled], .thm-orange[disabled]:hover, .thm-orange[disabled]:focus, .thm-orange[disabled].focus, .thm-orange[disabled]:active, .thm-orange[disabled].active, fieldset[disabled] .thm-orange, fieldset[disabled] .thm-orange:hover, fieldset[disabled] .thm-orange:focus, fieldset[disabled] .thm-orange.focus, fieldset[disabled] .thm-orange:active, fieldset[disabled] .thm-orange.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-orange path {
    fill: #FFFFFF; }

.thm-orange-invert {
  color: #FC9927;
  background-color: #FFFFFF;
  border-color: #FC9927; }
  .thm-orange-invert:hover, .thm-orange-invert:focus, .thm-orange-invert.focus, .open > .thm-orange-invert.dropdown-toggle {
    color: #FC9927;
    background-color: rgba(252, 153, 39, 0.2); }
    .thm-orange-invert:hover path, .thm-orange-invert:focus path, .thm-orange-invert.focus path, .open > .thm-orange-invert.dropdown-toggle path {
      fill: #FC9927; }
  .thm-orange-invert:active, .thm-orange-invert.active, .open > .thm-orange-invert.dropdown-toggle {
    color: #FFFFFF;
    background-color: #ed8003;
    border-color: #ed8003;
    background-image: none; }
    .thm-orange-invert:active path, .thm-orange-invert.active path, .open > .thm-orange-invert.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-orange-invert.disabled, .thm-orange-invert.disabled:hover, .thm-orange-invert.disabled:focus, .thm-orange-invert.disabled.focus, .thm-orange-invert.disabled:active, .thm-orange-invert.disabled.active, .thm-orange-invert[disabled], .thm-orange-invert[disabled]:hover, .thm-orange-invert[disabled]:focus, .thm-orange-invert[disabled].focus, .thm-orange-invert[disabled]:active, .thm-orange-invert[disabled].active, fieldset[disabled] .thm-orange-invert, fieldset[disabled] .thm-orange-invert:hover, fieldset[disabled] .thm-orange-invert:focus, fieldset[disabled] .thm-orange-invert.focus, fieldset[disabled] .thm-orange-invert:active, fieldset[disabled] .thm-orange-invert.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-orange-invert path {
    fill: #FC9927; }

.thm-red {
  color: #FFFFFF;
  background-color: #E4584F;
  border-color: #E4584F; }
  .thm-red:hover, .thm-red:focus, .thm-red.focus, .open > .thm-red.dropdown-toggle {
    color: #FFFFFF;
    background-color: #e14339;
    border-color: #e14339; }
    .thm-red:hover path, .thm-red:focus path, .thm-red.focus path, .open > .thm-red.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-red:active, .thm-red.active, .open > .thm-red.dropdown-toggle {
    color: #FFFFFF;
    background-color: #dd2e23;
    border-color: #dd2e23;
    background-image: none; }
    .thm-red:active path, .thm-red.active path, .open > .thm-red.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-red.disabled, .thm-red.disabled:hover, .thm-red.disabled:focus, .thm-red.disabled.focus, .thm-red.disabled:active, .thm-red.disabled.active, .thm-red[disabled], .thm-red[disabled]:hover, .thm-red[disabled]:focus, .thm-red[disabled].focus, .thm-red[disabled]:active, .thm-red[disabled].active, fieldset[disabled] .thm-red, fieldset[disabled] .thm-red:hover, fieldset[disabled] .thm-red:focus, fieldset[disabled] .thm-red.focus, fieldset[disabled] .thm-red:active, fieldset[disabled] .thm-red.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-red path {
    fill: #FFFFFF; }

.thm-red-invert {
  color: #E4584F;
  background-color: #FFFFFF;
  border-color: #E4584F; }
  .thm-red-invert:hover, .thm-red-invert:focus, .thm-red-invert.focus, .open > .thm-red-invert.dropdown-toggle {
    color: #E4584F;
    background-color: rgba(228, 88, 79, 0.2); }
    .thm-red-invert:hover path, .thm-red-invert:focus path, .thm-red-invert.focus path, .open > .thm-red-invert.dropdown-toggle path {
      fill: #E4584F; }
  .thm-red-invert:active, .thm-red-invert.active, .open > .thm-red-invert.dropdown-toggle {
    color: #FFFFFF;
    background-color: #dd2e23;
    border-color: #dd2e23;
    background-image: none; }
    .thm-red-invert:active path, .thm-red-invert.active path, .open > .thm-red-invert.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-red-invert.disabled, .thm-red-invert.disabled:hover, .thm-red-invert.disabled:focus, .thm-red-invert.disabled.focus, .thm-red-invert.disabled:active, .thm-red-invert.disabled.active, .thm-red-invert[disabled], .thm-red-invert[disabled]:hover, .thm-red-invert[disabled]:focus, .thm-red-invert[disabled].focus, .thm-red-invert[disabled]:active, .thm-red-invert[disabled].active, fieldset[disabled] .thm-red-invert, fieldset[disabled] .thm-red-invert:hover, fieldset[disabled] .thm-red-invert:focus, fieldset[disabled] .thm-red-invert.focus, fieldset[disabled] .thm-red-invert:active, fieldset[disabled] .thm-red-invert.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-red-invert path {
    fill: #E4584F; }

.thm-green {
  color: #FFFFFF;
  background-color: #80C25D;
  border-color: #80C25D; }
  .thm-green:hover, .thm-green:focus, .thm-green.focus, .open > .thm-green.dropdown-toggle {
    color: #FFFFFF;
    background-color: #71bb4a;
    border-color: #71bb4a; }
    .thm-green:hover path, .thm-green:focus path, .thm-green.focus path, .open > .thm-green.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-green:active, .thm-green.active, .open > .thm-green.dropdown-toggle {
    color: #FFFFFF;
    background-color: #66ab41;
    border-color: #66ab41;
    background-image: none; }
    .thm-green:active path, .thm-green.active path, .open > .thm-green.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-green.disabled, .thm-green.disabled:hover, .thm-green.disabled:focus, .thm-green.disabled.focus, .thm-green.disabled:active, .thm-green.disabled.active, .thm-green[disabled], .thm-green[disabled]:hover, .thm-green[disabled]:focus, .thm-green[disabled].focus, .thm-green[disabled]:active, .thm-green[disabled].active, fieldset[disabled] .thm-green, fieldset[disabled] .thm-green:hover, fieldset[disabled] .thm-green:focus, fieldset[disabled] .thm-green.focus, fieldset[disabled] .thm-green:active, fieldset[disabled] .thm-green.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-green path {
    fill: #FFFFFF; }

.thm-green-invert {
  color: #80C25D;
  background-color: #FFFFFF;
  border-color: #80C25D; }
  .thm-green-invert:hover, .thm-green-invert:focus, .thm-green-invert.focus, .open > .thm-green-invert.dropdown-toggle {
    color: #80C25D;
    background-color: rgba(128, 194, 93, 0.2); }
    .thm-green-invert:hover path, .thm-green-invert:focus path, .thm-green-invert.focus path, .open > .thm-green-invert.dropdown-toggle path {
      fill: #80C25D; }
  .thm-green-invert:active, .thm-green-invert.active, .open > .thm-green-invert.dropdown-toggle {
    color: #FFFFFF;
    background-color: #66ab41;
    border-color: #66ab41;
    background-image: none; }
    .thm-green-invert:active path, .thm-green-invert.active path, .open > .thm-green-invert.dropdown-toggle path {
      fill: #FFFFFF; }
  .thm-green-invert.disabled, .thm-green-invert.disabled:hover, .thm-green-invert.disabled:focus, .thm-green-invert.disabled.focus, .thm-green-invert.disabled:active, .thm-green-invert.disabled.active, .thm-green-invert[disabled], .thm-green-invert[disabled]:hover, .thm-green-invert[disabled]:focus, .thm-green-invert[disabled].focus, .thm-green-invert[disabled]:active, .thm-green-invert[disabled].active, fieldset[disabled] .thm-green-invert, fieldset[disabled] .thm-green-invert:hover, fieldset[disabled] .thm-green-invert:focus, fieldset[disabled] .thm-green-invert.focus, fieldset[disabled] .thm-green-invert:active, fieldset[disabled] .thm-green-invert.active {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .thm-green-invert path {
    fill: #80C25D; }

.sz-lg {
  font-size: 14px; }
  .sz-lg .btn-content {
    padding: 13px 0px 13px 10px;
    display: inline-block;
    width: 94%; }
  .sz-lg .chevron {
    width: 14px; }

.sz-md {
  font-size: 12px; }
  .sz-md .btn-content {
    padding: 10px 0px 10px 10px;
    display: inline-block;
    width: 94%; }
  .sz-md .chevron {
    width: 12px; }

.sz-sm {
  font-size: 10px; }
  .sz-sm .btn-content {
    padding: 7px 0px 7px 10px;
    display: inline-block;
    width: 94%; }
    .sz-sm .btn-content .chevron {
      width: 10px; }

/*.btn-clear {
  $fontColor: #54585A;
  $iconColor: #54585A;
  $borderColor: transparent;
  $backgroundColor: transparent;
  $hoverBorderColor: transparent;
  $hoverBackgroundColor: transparent;
  $activeFontColor: #54585A;
  $activeBorderColor: #CECECF;
  $activeBackgroundColor: #CECECF;
}*/
/*.btn-light-grey-invert {
$fontColor: #54585A;
$iconColor: #54585A;
$borderColor: #D8D8D9;
$backgroundColor: #FFFFFF;
$hoverBorderColor: #D8D8D9;
$hoverBackgroundColor: #F4F4F5;
$activeFontColor: #54585A;
$activeBorderColor: #CECECF;
$activeBackgroundColor: #CECECF;
}*/
/*.btn-none {
$fontColor: #54585A;
$iconColor: #54585A;
$borderColor: #FFFFFF;
$backgroundColor: #FFFFFF;
$hoverBorderColor: #D8D8D9;
$hoverBackgroundColor: #F4F4F5;
$activeFontColor: #54585A;
$activeBorderColor: #CECECF;
$activeBackgroundColor: #CECECF;
}*/