Trimble css library documentation

Trimble css library documentation

<ul class="accordion">
  <li class="accordion-menu">
    <a href="#">Item 1</a>
    <ul class="accordion-menu-container">
      <li class="accordion-menu">
        <a href="#">Item 11</a>
        <ul class="accordion-menu-container">
          <li><a href="#">Item 111</a></li>
          <li><a href="#">Item 112</a></li>
        </ul>
      </li>
      <li><a href="#">Item 12</a></li>
      <li><a href="#">Item 13</a></li>
    </ul>
  </li>
  <li class="accordion-menu">
    <a href="#">Item 2</a>
    <ul class="accordion-menu-container">
      <li><a href="#">Item 21</a></li>
    </ul>
  </li>
  <li class="accordion-menu">
    <a href="#">Item 3</a>
  </li>
</ul>

Example

  • keysersoze@yahoo.com
  • 001-303-709-9207
  • MST
  • Trimble Building Owner
  • Riverfront Overpass Contributor
  • Downtown Shopping Mall Contributor 
<div class="info-panel">
<section>
		<div class="section-title accordion accordion-panel">
			<label>Details</label>
		</div>
		<div class="accordion-content" style="max-height: 75px;">
			<ul>
				<li class="list-item">
					<label class="field">Email:</label>
					<span class="value">keysersoze@yahoo.com</span>
				</li>
				<li class="list-item">
					<label class="field">Phone:</label>
				<span class="value">001-303-709-9207</span>
				</li>
				<li class="list-item">
					<label class="field">Time Zone:</label>
				<span class="value">MST</span>
				</li>
			</ul>
		</div>
	</section>
	<section>
		<div class="section-title accordion accordion-panel">
			<label>Projects</label>
		</div>
		<div class="accordion-content">
			<ul>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/building.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Trimble Building</span>
						<span>Owner</span>
					</div>
				</li>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/river.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Riverfront Overpass</span>
						<span>Contributor</span>
					</div>
				</li>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/shopping.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Downtown Shopping Mall</span>
						<span>Contributor</span>
					</div>
				</li>
			</ul>
		</div>
	</section>
</div>

Source: avatar.scss, line 1

4.3 Avatar

Avatar styles from trimble css

Example

Avatar: 
Avatar:
<div class="avatar">
	<!-- <img src="" alt=""> -->
	<i class="i64 icon_solid_user"></i>
	<div class="edit-avatar">
		<i class="i16 icon_line_edit"></i>
	</div>
</div>

Source: card.scss, line 1

4.4 Cards

Card styles from trimble css

Example

Raman Babu

Raman

raman_babu@trimble.com

Trimble

Admin

    • FORCE LOGOFF
    • Remove
    • Suspend
<div class="row tile profile">
    <div class="col s12 m3 l2 xs12">
            <div class="profile-card-container">
                <div class="avatar-wrapper">
                    <div class="card-avatar">
                        <img src="../src/images/8.png" alt="">
                    </div>
                </div>
                <div><h4>Raman Babu</h4></div>
                <div class="name"><p>Raman</p></div>
                <div><p class="link">raman_babu@trimble.com</p></div>
                <div><p>Trimble</p></div>
                <div class="profile-card-footer">
                        <div class="profile-card-role">
                            <p>Admin</p>
                        </div>
                        <div class="profile-card-edit">
                            <ul>
                                <li class="dropdown-pane-container">
                                    <button class="clear dropdownpane-link"><i class="i32 icon_blue_overflow"></i></button>
                                    <div class="dropdown-pane is-open">
                                        <ul class="dropdown-list">
                                            <li>FORCE LOGOFF</li>
                                            <li>Remove</li>
                                            <li>Suspend</li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                </div>
            </div>
    </div>
</div>

Example

Click here
  • FORCE LOGOFF
  • Remove
  • Suspend
<div class="dropdown-pane-container">
  <div class="dropdownpane-link"> Click here</div>
  <div class="dropdown-pane">
      <ul class="dropdown-list">
          <li>FORCE LOGOFF</li>
          <li>Remove</li>
          <li>Suspend</li>
      </ul>
  </div>
</div>

Example

Crop Image

preview 
<!-- you should include these three files apart from style.css
    <link rel="stylesheet" href="../src/css/cropper.css" type="text/css">
		<script type="text/javascript" src="../src/js/trmb-css.js"></script>
		<script type="text/javascript" src="../src/js/cropper.js"></script>
-->
<div class="wrapper-container">
  <div class="avatar">
    <img src="" alt="" id="avatar-output" class="preview"/>
    <i class="i64 icon_solid_user"></i>
    <div class="edit-avatar">
      <i class="i16 icon_line_edit" onclick="openFileBrowse()"></i>
      <input type="file" name="file" id="image-file" onchange="onFileChange(event)"/>
    </div>
  </div>
  <div class="reveal-overlay" id="image-preview-container">
    <div class="reveal">
      <header>
  				<h1>Crop Image</h1>
  				<button class="close-button close" aria-label="Close reveal" type="button">
  						<i class="i32 icon_close_popup"></i>
  					</button>
  		</header>
  		<section class="crop-wrapper">
        <div class="crop-selection">
          <img id="output" alt="preview"/>
        </div>
        <div class="preview-container">
          <div class="preview">
          </div>
          <div class="preview circle">
          </div>
        </div>
      </section>
      <footer>
        <button class="button small clear" onclick="clearCropData()">Cancel</button>
        <button class="button small default" onclick="setCropData()">Crop</button>
      </footer>
    </div>
  </div>
</div>
<style>
.reveal {
  width: 550px;
  height: 550px;
}
.reveal section{
  width: 250px;
  height: 275px;
}
#avatar-output {
 display: none;
}
</style>
<script type="text/javascript">
  var image = document.getElementById('output');
  var previews = document.querySelectorAll('.wrapper-container .preview');
  var cropper = null;
  function openFileBrowse() {
      document.getElementById('image-file').click();
  }
  function setCropData() {
    document.getElementById('avatar-output').src = cropper.getCroppedCanvas().toDataURL('image/jpeg');
    document.getElementById('avatar-output').style.display = 'block';
    document.getElementById('avatar-output').style.height = '7em';
    clearCropData();
  }
  function clearCropData() {
    if( cropper ) {
      cropper.destroy();
      previews.forEach(function(elem){
        elem.innerHTML = '';
      });
    }
    document.getElementById('image-preview-container').style.display = 'none';
  }
  function onFileChange(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
      document.getElementById("image-preview-container").style.display = "block";
      if( cropper ) {
        cropper.destroy();
        previews.forEach(function(elem){
          elem.innerHTML = '';
        });
      }
      document.querySelector('.preview-container').style.display = "block";
      //document.querySelector('#avatar-output').style.display = "block";
      cropper = new Cropper(image, {
        viewMode: 2,
        aspectRatio: 4 / 4,
        ready: function () {
          var clone = this.cloneNode();
          clone.className = ''
          clone.style.cssText = (
            'display: block;' +
            'width: 100%;' +
            'min-width: 0;' +
            'min-height: 7em;' +
            'max-width: none;' +
            'max-height: none;'
          );
          previews.forEach(function (elem) {
            elem.appendChild(clone.cloneNode());
          });
        },
        crop: function(e) {
          var data = e.detail;
          var cropper = this.cropper;
          var imageData = cropper.getImageData();
          var previewAspectRatio = data.width / data.height;
          previews.forEach(function (elem, index) {
            var previewImage = previews[index].children[0];
            if( previewImage ) {
              var previewWidth = previews[index].offsetWidth;
              var previewHeight = previewWidth / previewAspectRatio;
              var imageScaledRatio = data.width / previewWidth;
              elem.style.height = previewHeight + 'px';
              previewImage.style.width = imageData.naturalWidth / imageScaledRatio + 'px';
              previewImage.style.height = imageData.naturalHeight / imageScaledRatio + 'px';
              previewImage.style.marginLeft = -data.x / imageScaledRatio + 'px';
              previewImage.style.marginTop = -data.y / imageScaledRatio + 'px';
            }
          });
        }
      });
    };
    reader.readAsDataURL(event.target.files[0]);
  }
</script>

Source: popup.scss, line 1

4.7 Popup

Popup styles from trimble css

Example

Invite People to this Project

Popup content 
<button class="button primary reveal-overlay-link" open-container-id="invite-user-popup">Open popup</button>
<div class="reveal-overlay" id="invite-user-popup">
    <div class="reveal">
        <header>
            <h1>Invite People to this Project</h1>
            <button class="close-button close" aria-label="Close reveal" type="button">
                <i class="i32 icon_close_popup"></i>
            </button>
        </header>
        <section>
        Popup content
        </section>
        <footer>
            <button class="button clear close">Cancel</button>
            <button class="button default">Invite</button>
        </footer>
    </div>
</div>

Example

Trimble Building

Owner: Acme Co

Acme Co

02/03/2018

    • FORCE LOGOFF
    • Remove
    • Suspend

Acme Co

02/03/2018

    • FORCE LOGOFF
    • Remove
    • Suspend
<div class="row tile projects">
<div class="col s12 m3 l2 xs12">
<div class="media-object">
        <div class="thumbnail-wrapper">
                <div class="thumbnail" style="background-image:url(https://www.bing.com/az/hprichbg/rb/FishingWarehouses_EN-IN11622673825_1920x1080.jpg)">
                </div>
        </div>
        <div class="media-object-section">
                <div class="media-object-details">
                    <h4>Trimble Building</h4>
                    <p>Owner: Acme Co</p>
                </div>
                <div class="owner"><p>Acme Co</p></div>
                <div class="update"><p>02/03/2018</p></div>
                <div class="media-object-edit">
                    <ul>
                        <li class="dropdown-pane-container">
                            <button class="clear dropdownpane-link"><i class="i32 icon_blue_overflow"></i></button>
                            <div class="dropdown-pane is-open">
                                <ul class="dropdown-list">
                                    <li>FORCE LOGOFF</li>
                                    <li>Remove</li>
                                    <li>Suspend</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
        </div>
        <div class="owner"><p>Acme Co</p></div>
        <div class="update"><p>02/03/2018</p></div>
        <div class="media-object-edit">
                    <ul>
                        <li class="dropdown-pane-container">
                            <button class="clear dropdownpane-link"><i class="i32 icon_blue_overflow"></i></button>
                            <div class="dropdown-pane is-open">
                                <ul class="dropdown-list">
                                    <li>FORCE LOGOFF</li>
                                    <li>Remove</li>
                                    <li>Suspend</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
        </div>
</div>
</div>
</div>

Source: switch.scss, line 1

4.9 Switch

Switch styles from trimble css

Example

Switch: 
Switch:
<div class="switch">
        <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
        <label class="switch-paddle" for="exampleSwitch">
            &nbsp;
        </label>
</div>

Example

Hover over me - Left tooltip Tooltip text

Hover over me - Right tooltip Tooltip text

Tooltip text 
<div class="tooltip">Hover over me - Left tooltip
  <span class="tooltip-text">Tooltip text</span>
</div><br/>
<div class="tooltip">Hover over me - Right tooltip
  <span class="tooltip-text right">Tooltip text</span>
</div><br/>
<div class="tooltip-container">
  <input type="text" value="error field" style="width:200px;"/>
  <span class="tooltip-text">Tooltip text</span>
</div>