Subversion Repositories wimsdev

Rev

Rev 14734 | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. /**
  2.  * Foundation for Sites
  3.  * Version 6.6.3
  4.  * https://get.foundation
  5.  * Licensed under MIT Open Source
  6.  */
  7. /* Button styles */
  8. .button {
  9.   display: inline-block;
  10.   vertical-align: middle;
  11.   margin: 0 0 1rem 0;
  12.   padding: 0.85em 1em;
  13.   border: 1px solid transparent;
  14.   border-radius: 0;
  15.   transition: background-color 0.25s ease-out, color 0.25s ease-out;
  16.   font-family: inherit;
  17.   font-size: 0.9rem;
  18.   -webkit-appearance: none;
  19.   line-height: 1;
  20.   text-align: center;
  21.   cursor: pointer; }
  22.   [data-whatinput='mouse'] .button {
  23.     outline: 0; }
  24.   .button.tiny {
  25.     font-size: 0.6rem; }
  26.   .button.small {
  27.     font-size: 0.75rem; }
  28.   .button.large {
  29.     font-size: 1.25rem; }
  30.   .button.expanded {
  31.     display: block;
  32.     width: 100%;
  33.     margin-right: 0;
  34.     margin-left: 0; }
  35.   .button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus {
  36.     background-color: #1779ba;
  37.     color: #fefefe; }
  38.   .button:hover, .button:focus {
  39.     background-color: #14679e;
  40.     color: #fefefe; }
  41.   .button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover, .button.primary.disabled:focus, .button.primary[disabled]:focus {
  42.     background-color: #1779ba;
  43.     color: #fefefe; }
  44.   .button.primary:hover, .button.primary:focus {
  45.     background-color: #126195;
  46.     color: #fefefe; }
  47.   .button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus, .button.secondary[disabled]:focus {
  48.     background-color: #767676;
  49.     color: #fefefe; }
  50.   .button.secondary:hover, .button.secondary:focus {
  51.     background-color: #5e5e5e;
  52.     color: #fefefe; }
  53.   .button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover, .button.success.disabled:focus, .button.success[disabled]:focus {
  54.     background-color: #3adb76;
  55.     color: #0a0a0a; }
  56.   .button.success:hover, .button.success:focus {
  57.     background-color: #22bb5b;
  58.     color: #0a0a0a; }
  59.   .button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover, .button.warning[disabled]:hover, .button.warning.disabled:focus, .button.warning[disabled]:focus {
  60.     background-color: #ffae00;
  61.     color: #0a0a0a; }
  62.   .button.warning:hover, .button.warning:focus {
  63.     background-color: #cc8b00;
  64.     color: #0a0a0a; }
  65.   .button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover, .button.alert.disabled:focus, .button.alert[disabled]:focus {
  66.     background-color: #cc4b37;
  67.     color: #fefefe; }
  68.   .button.alert:hover, .button.alert:focus {
  69.     background-color: #a53b2a;
  70.     color: #fefefe; }
  71.   .button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[disabled], .button.hollow[disabled]:hover, .button.hollow[disabled]:focus {
  72.     background-color: transparent; }
  73.   .button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover, .button.hollow[disabled]:hover, .button.hollow.disabled:focus, .button.hollow[disabled]:focus {
  74.     border: 1px solid #1779ba;
  75.     color: #1779ba; }
  76.   .button.hollow:hover, .button.hollow:focus {
  77.     border-color: #0c3d5d;
  78.     color: #0c3d5d; }
  79.   .button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[disabled], .button.hollow.primary.disabled:hover, .button.hollow.primary[disabled]:hover, .button.hollow.primary.disabled:focus, .button.hollow.primary[disabled]:focus {
  80.     border: 1px solid #1779ba;
  81.     color: #1779ba; }
  82.   .button.hollow.primary:hover, .button.hollow.primary:focus {
  83.     border-color: #0c3d5d;
  84.     color: #0c3d5d; }
  85.   .button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover, .button.hollow.secondary[disabled]:hover, .button.hollow.secondary.disabled:focus, .button.hollow.secondary[disabled]:focus {
  86.     border: 1px solid #767676;
  87.     color: #767676; }
  88.   .button.hollow.secondary:hover, .button.hollow.secondary:focus {
  89.     border-color: #3b3b3b;
  90.     color: #3b3b3b; }
  91.   .button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[disabled], .button.hollow.success.disabled:hover, .button.hollow.success[disabled]:hover, .button.hollow.success.disabled:focus, .button.hollow.success[disabled]:focus {
  92.     border: 1px solid #3adb76;
  93.     color: #3adb76; }
  94.   .button.hollow.success:hover, .button.hollow.success:focus {
  95.     border-color: #157539;
  96.     color: #157539; }
  97.   .button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[disabled], .button.hollow.warning.disabled:hover, .button.hollow.warning[disabled]:hover, .button.hollow.warning.disabled:focus, .button.hollow.warning[disabled]:focus {
  98.     border: 1px solid #ffae00;
  99.     color: #ffae00; }
  100.   .button.hollow.warning:hover, .button.hollow.warning:focus {
  101.     border-color: #805700;
  102.     color: #805700; }
  103.   .button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[disabled], .button.hollow.alert.disabled:hover, .button.hollow.alert[disabled]:hover, .button.hollow.alert.disabled:focus, .button.hollow.alert[disabled]:focus {
  104.     border: 1px solid #cc4b37;
  105.     color: #cc4b37; }
  106.   .button.hollow.alert:hover, .button.hollow.alert:focus {
  107.     border-color: #67251a;
  108.     color: #67251a; }
  109.   .button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[disabled], .button.clear[disabled]:hover, .button.clear[disabled]:focus {
  110.     border-color: transparent;
  111.     background-color: transparent; }
  112.   .button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear.disabled:hover, .button.clear[disabled]:hover, .button.clear.disabled:focus, .button.clear[disabled]:focus {
  113.     color: #1779ba; }
  114.   .button.clear:hover, .button.clear:focus {
  115.     color: #0c3d5d; }
  116.   .button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary.disabled:hover, .button.clear.primary[disabled]:hover, .button.clear.primary.disabled:focus, .button.clear.primary[disabled]:focus {
  117.     color: #1779ba; }
  118.   .button.clear.primary:hover, .button.clear.primary:focus {
  119.     color: #0c3d5d; }
  120.   .button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary.disabled:hover, .button.clear.secondary[disabled]:hover, .button.clear.secondary.disabled:focus, .button.clear.secondary[disabled]:focus {
  121.     color: #767676; }
  122.   .button.clear.secondary:hover, .button.clear.secondary:focus {
  123.     color: #3b3b3b; }
  124.   .button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success.disabled:hover, .button.clear.success[disabled]:hover, .button.clear.success.disabled:focus, .button.clear.success[disabled]:focus {
  125.     color: #3adb76; }
  126.   .button.clear.success:hover, .button.clear.success:focus {
  127.     color: #157539; }
  128.   .button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning.disabled:hover, .button.clear.warning[disabled]:hover, .button.clear.warning.disabled:focus, .button.clear.warning[disabled]:focus {
  129.     color: #ffae00; }
  130.   .button.clear.warning:hover, .button.clear.warning:focus {
  131.     color: #805700; }
  132.   .button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert.disabled:hover, .button.clear.alert[disabled]:hover, .button.clear.alert.disabled:focus, .button.clear.alert[disabled]:focus {
  133.     color: #cc4b37; }
  134.   .button.clear.alert:hover, .button.clear.alert:focus {
  135.     color: #67251a; }
  136.   .button.disabled, .button[disabled] {
  137.     opacity: 0.25;
  138.     cursor: not-allowed; }
  139.   .button.dropdown::after {
  140.     display: block;
  141.     width: 0;
  142.     height: 0;
  143.     border: inset 0.4em;
  144.     content: '';
  145.     border-bottom-width: 0;
  146.     border-top-style: solid;
  147.     border-color: #fefefe transparent transparent;
  148.     position: relative;
  149.     top: 0.4em;
  150.     display: inline-block;
  151.     float: right;
  152.     margin-left: 1em; }
  153.   .button.dropdown.hollow::after, .button.dropdown.clear::after {
  154.     border-top-color: #1779ba; }
  155.   .button.dropdown.hollow.primary::after, .button.dropdown.clear.primary::after {
  156.     border-top-color: #1779ba; }
  157.   .button.dropdown.hollow.secondary::after, .button.dropdown.clear.secondary::after {
  158.     border-top-color: #767676; }
  159.   .button.dropdown.hollow.success::after, .button.dropdown.clear.success::after {
  160.     border-top-color: #3adb76; }
  161.   .button.dropdown.hollow.warning::after, .button.dropdown.clear.warning::after {
  162.     border-top-color: #ffae00; }
  163.   .button.dropdown.hollow.alert::after, .button.dropdown.clear.alert::after {
  164.     border-top-color: #cc4b37; }
  165.   .button.arrow-only::after {
  166.     top: -0.1em;
  167.     float: none;
  168.     margin-left: 0; }
  169.  
  170. a.button:hover, a.button:focus {
  171.   text-decoration: none; }
  172.