CSS Customization

Toughclicks adds dom elements with predetermined css classes that you can use to customize the look and feel of what gets added to the page.

CSS Classes & IDs

• #tc-agreements - this is the overall wrapper. We recommend setting some "toughclicks global" settings here for width, height, fonts, anchors, and more.
• .tc-document-checkbox - this div contains the checkbox input and label.

If you are using Force Scroll:

• .tc-document-scrollable - this is the div that contains the terms. We advise you set a max height and overflow-y to scroll.
• .tc-document-checkbox-force-scroll - this class is added alongside tc-document-checkbox for custom styles when force scroll is enabled.
• .tc-document-helper-text - this is the text that says "Scroll to the bottom of the document to accept."

If you are using the Modal:

• .tc-modal-container - The grey background
• .tc-modal-text - The wrapper for the contents of the document and the close button.
• .tc-modal-text-contents - The actual contents of the document.
• .tc-modal-text-close-bar - The top bar of the modal where the close button lives.
• .tc-modal-close - The "X" button

Here is a starting point for your CSS that we use in our demo:

#tc-agreements {
        margin: 0 auto;
        max-width:60%;
      }
      #tc-agreements a {
        text-decoration: none;
        color:#003EB3;
      }
      #tc-agreements a:hover {
        text-decoration: underline;
        color:#3b65b3;
      }

      .tc-document-checkbox {

      }

      /* Used for Force Scroll */
      .tc-document-checkbox-force-scroll {
        float: left;
      }

      .tc-document-helper-text {
        float: right;
        font-style: italic;
      }

      .tc-document-scrollable {
        max-height: 300px;
        overflow-y: scroll;
        border: 1px solid #ccc;
        margin: 25px 0 0 0;
        padding: 10px;
      }

      /* Used for the Modal View */
      .tc-modal-container {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding: 10px 0; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    }
    
    .tc-modal-text {
      background-color: #fefefe;
      margin: auto;
      padding: 0 0 0 20px;
      border: 1px solid #888;
      width: 80vh;
      max-height: 80vh;
    }

    .tc-modal-text-contents {
      max-height: 75vh;
      overflow-y: scroll;
    }
    
    /* The Close Button */
    .tc-modal-text-close-bar {
      text-align: right;
      padding-right: 10px;
      height: 5vh;
    }

    .tc-modal-close {
      color: #aaaaaa;
      font-size: 28px;
      font-weight: bold;
      margin: auto;
      position: relative;
    }
    
    .tc-modal-close:hover,
    .tc-modal-close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }