You are here

Home » API reference » Webform CiviCRM Integration 7.4

token-input.css in Webform CiviCRM Integration 7.4

Same filename and directory in other branches
  1. 8.5 css/token-input.css
  2. 7.5 css/token-input.css
/* tokeninput vertical list - modified for webform_civicrm */
form ul.token-input-list {
    overflow: hidden;
    height: auto !important;
    height: 1%;
    width: 100%;
    max-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

css/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: 100%;

  7.     max-width: 400px;

  8.     border: 1px solid #999;

  9.     cursor: text;

  10.     font-size: 12px;

  11.     font-family: Verdana;

  12.     margin: 0;

  13.     padding: 0;

  14.     background-color: #fff;

  15.     list-style-type: none;

  16.     clear: left;

  17. }

  18. 

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

  20.     display: inline-block;

  21.     position: relative;

  22.     top: 10px;

  23. }

  24. 

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

  26.     list-style-type: none;

  27.     list-style-image: none;

  28. }

  29. 

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

  31.     border: 0;

  32.     width: 350px;

  33.     padding: 3px 8px;

  34.     background-color: white;

  35.     -webkit-appearance: caret;

  36. }

  37. 

  38. form li.token-input-token {

  39.     overflow: hidden;

  40.     height: auto !important;

  41.     height: 1%;

  42.     margin: 3px;

  43.     padding: 3px 5px;

  44.     background-color: #d0efa0;

  45.     color: #000;

  46.     font-weight: bold;

  47.     cursor: default;

  48.     display: block;

  49. }

  50. 

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

  52.     background-color: #D9E4C9;

  53. }

  54. 

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

  56.     float: left;

  57.     padding: 0;

  58.     margin: 0;

  59. }

  60. 

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

  62.     float: right;

  63.     color: #777;

  64.     cursor: pointer;

  65. }

  66. 

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

  68.     background-color: #08844e;

  69.     color: #fff;

  70. }

  71. 

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

  73.     color: #bbb;

  74. }

  75. 

  76. div.token-input-dropdown {

  77.     position: absolute;

  78.     width: 400px;

  79.     background-color: #fff;

  80.     overflow: hidden;

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

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

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

  84.     cursor: default;

  85.     font-size: 12px;

  86.     font-family: Verdana;

  87. }

  88. 

  89. div.token-input-dropdown p {

  90.     margin: 0;

  91.     padding: 5px;

  92.     font-weight: bold;

  93.     color: #777;

  94. }

  95. 

  96. div.token-input-dropdown ul {

  97.     margin: 0;

  98.     padding: 0;

  99. }

  100. 

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

  102.     background-color: #fff;

  103.     padding: 3px;

  104.     list-style-type: none;

  105. }

  106. 

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

  108.     background-color: #fafafa;

  109. }

  110. 

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

  112.     background-color: #fff;

  113. }

  114. 

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

  116.     font-weight: bold;

  117.     font-style: normal;

  118. }

  119. 

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

  121.     background-color: #d0efa0;

  122. }

  123. 

  124. form.contact-loading,

  125. form.contact-loading * {

  126.     cursor: progress !important;

  127. }