Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Is there a way to apply css styles defined by getbootstrap.com to SmartGWT elements?

    Is there maybe already a theme that is based on the getbootstrap.com css styles?

    Or if not, how do you suggest to apply the styles defined by getbootstrap.com to SmartGWT, so that SmartGWT UI elements like buttons can use them?

    Where can I find a description of the SmartGWT built-in css selectors found in (e.g.: .buttonRounded) and the name of the corresponding Java UI element?

    Bootstrap itself defines css styles for various visual elements, however, the problem is that the names of css selectors in Bootstrap are different than the ones used in the SmartGWT skin_styles.css file (see below). So I am not sure if applying the new styles can be easily achieved.

    Code:
    .btn {
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.428571429;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      border: 1px solid transparent;
      border-radius: 4px;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
           -o-user-select: none;
              user-select: none;
    }
    
    .btn:focus {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
    
    .btn:hover,
    .btn:focus {
      color: #333333;
      text-decoration: none;
    }
    
    .btn:active,
    .btn.active {
      background-image: none;
      outline: 0;
      -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
              box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }
    
    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
      pointer-events: none;
      cursor: not-allowed;
      opacity: 0.65;
      filter: alpha(opacity=65);
      -webkit-box-shadow: none;
              box-shadow: none;
    }
    Any thoughts or ideas would be greatly appreciated!
Working...
X