You are here

Home » API reference » Webform CiviCRM Integration 7.3

token-input.css in Webform CiviCRM Integration 7.3 

/* tokeninput vertical list - modified for webform_civicrm */
form ul.token-input-list {
    overflow: hidden;
    height: auto !important;
    height: 1%;
    width: 400px;
    border: 1px solid #999;
    cursor: text;
    font-size: 12px;
    font-family: Verdana;
    margin: 0;
    padding: 0;
    background-color: #fff;
    list-style-type: none;
    clear: left;
}

form .webform-container-inline ul.token-input-list {
    display: inline-block;
    position: relative;
    top: 10px;
}

form ul.token-input-list li {
    list-style-type: none;
    list-style-image: none;
}

form ul.token-input-list li input {
    border: 0;
    width: 350px;
    padding: 3px 8px;
    background-color: white;
    -webkit-appearance: caret;
}

form li.token-input-token {
    overflow: hidden;
    height: auto !important;
    height: 1%;
    margin: 3px;
    padding: 3px 5px;
    background-color: #d0efa0;
    color: #000;
    font-weight: bold;
    cursor: default;
    display: block;
}

form .webform-component.static li.token-input-token {
    background-color: #D9E4C9;
}

form li.token-input-token p {
    float: left;
    padding: 0;
    margin: 0;
}

form li.token-input-token span {
    float: right;
    color: #777;
    cursor: pointer;
}

form li.token-input-selected-token {
    background-color: #08844e;
    color: #fff;
}

form li.token-input-selected-token span {
    color: #bbb;
}

div.token-input-dropdown {
    position: absolute;
    width: 400px;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: default;
    font-size: 12px;
    font-family: Verdana;
}

div.token-input-dropdown p {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: #777;
}

div.token-input-dropdown ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown ul li {
    background-color: #fff;
    padding: 3px;
    list-style-type: none;
}

div.token-input-dropdown ul li.token-input-dropdown-item {
    background-color: #fafafa;
}

div.token-input-dropdown ul li.token-input-dropdown-item2 {
    background-color: #fff;
}

div.token-input-dropdown ul li em {
    font-weight: bold;
    font-style: normal;
}

div.token-input-dropdown ul li.token-input-selected-dropdown-item {
    background-color: #d0efa0;
}

form.contact-loading,
form.contact-loading * {
    cursor: progress !important;
}

File

token-input.css
View source 
  1. /* tokeninput vertical list - modified for webform_civicrm */

  2. form ul.token-input-list {

  3.     overflow: hidden;

  4.     height: auto !important;

  5.     height: 1%;

  6.     width: 400px;

  7.     border: 1px solid #999;

  8.     cursor: text;

  9.     font-size: 12px;

  10.     font-family: Verdana;

  11.     margin: 0;

  12.     padding: 0;

  13.     background-color: #fff;

  14.     list-style-type: none;

  15.     clear: left;

  16. }

  17. 

  18. form .webform-container-inline ul.token-input-list {

  19.     display: inline-block;

  20.     position: relative;

  21.     top: 10px;

  22. }

  23. 

  24. form ul.token-input-list li {

  25.     list-style-type: none;

  26.     list-style-image: none;

  27. }

  28. 

  29. form ul.token-input-list li input {

  30.     border: 0;

  31.     width: 350px;

  32.     padding: 3px 8px;

  33.     background-color: white;

  34.     -webkit-appearance: caret;

  35. }

  36. 

  37. form li.token-input-token {

  38.     overflow: hidden;

  39.     height: auto !important;

  40.     height: 1%;

  41.     margin: 3px;

  42.     padding: 3px 5px;

  43.     background-color: #d0efa0;

  44.     color: #000;

  45.     font-weight: bold;

  46.     cursor: default;

  47.     display: block;

  48. }

  49. 

  50. form .webform-component.static li.token-input-token {

  51.     background-color: #D9E4C9;

  52. }

  53. 

  54. form li.token-input-token p {

  55.     float: left;

  56.     padding: 0;

  57.     margin: 0;

  58. }

  59. 

  60. form li.token-input-token span {

  61.     float: right;

  62.     color: #777;

  63.     cursor: pointer;

  64. }

  65. 

  66. form li.token-input-selected-token {

  67.     background-color: #08844e;

  68.     color: #fff;

  69. }

  70. 

  71. form li.token-input-selected-token span {

  72.     color: #bbb;

  73. }

  74. 

  75. div.token-input-dropdown {

  76.     position: absolute;

  77.     width: 400px;

  78.     background-color: #fff;

  79.     overflow: hidden;

  80.     border-left: 1px solid #ccc;

  81.     border-right: 1px solid #ccc;

  82.     border-bottom: 1px solid #ccc;

  83.     cursor: default;

  84.     font-size: 12px;

  85.     font-family: Verdana;

  86. }

  87. 

  88. div.token-input-dropdown p {

  89.     margin: 0;

  90.     padding: 5px;

  91.     font-weight: bold;

  92.     color: #777;

  93. }

  94. 

  95. div.token-input-dropdown ul {

  96.     margin: 0;

  97.     padding: 0;

  98. }

  99. 

  100. div.token-input-dropdown ul li {

  101.     background-color: #fff;

  102.     padding: 3px;

  103.     list-style-type: none;

  104. }

  105. 

  106. div.token-input-dropdown ul li.token-input-dropdown-item {

  107.     background-color: #fafafa;

  108. }

  109. 

  110. div.token-input-dropdown ul li.token-input-dropdown-item2 {

  111.     background-color: #fff;

  112. }

  113. 

  114. div.token-input-dropdown ul li em {

  115.     font-weight: bold;

  116.     font-style: normal;

  117. }

  118. 

  119. div.token-input-dropdown ul li.token-input-selected-dropdown-item {

  120.     background-color: #d0efa0;

  121. }

  122. 

  123. form.contact-loading,

  124. form.contact-loading * {

  125.     cursor: progress !important;

  126. }