Styling – CSS guide

Common Styling

1. Background color of Webpart

.bg-color{
    background-color: #e2ebef;
 }

2. Filter button group

.search-filter-input is a parent class and button group named as .search-filter-btn

.search-filter-input a.search-filter-btn{ 
       width: 30px; 
       text-align: center; 
       padding: 3px!important; 
       height: 30px!important; 
       background-color: #dc3545; 
       border: 0!important; 
}

3. Table

1. Tabs

.total-items { 
   color: #fff; 
   font-size: 15px; 
   background-color: #296193!important; 
   border: 1px solid transparent; 
   border-top-left-radius: 0.25rem; 
   border-top-right-radius: 0.25rem; 
}

2. Table icon

.table-icon{
   width: 20px;
   height: 20px;
}

3. Table header color

.table th {
     color: #0072bc;
}

4. Table body font style

The table body font is taking the body font size.

5. Table header column fixed width

.table .version-width {
     width: 100px;
}

6. Table body with link text



.table  a.name {
    color: #0072bc;
}

4. Pagination

1. Default Pagination Button

.page-link{ 
  position: relative; 
  display: block; 
  padding: 0.5rem 0.75rem; 
  margin-left: -1px; 
  line-height: 1.25; 
  color: #007bff; 
  background-color: #fff; 
  border: 1px solid #dee2e6; 
}

2. Deafult button font color

a.page-link {
color: #0072bc;
}

3. Disable button

.page-item.disabled .page-link{ 
   color: #6c757d; 
   pointer-events: none; 
   background-color: #fff; 
   border-color: #dee2e6; 
}

4. Selected button

.page-item.active .page-link{ 
   border-color: #0072bc; 
   color: #fff; 
   background-color: #0072bc; 
}

5. Buttons

1. Filled button
Button component is using 2 important classes – .btn .btn-primary
[.btn-primary – Used for styling the font and background color]

2. Outline button
Outline button component is using 2 important classes – .btn .btn-outline-dark
[.btn-outline-dark – Used for styling the font and background color]

6. Chips

.multiselect-dropdown .dropdown-btn .selected-item{
    border: transparent !important;
    margin-right: 5px;
    background: #e4eef7!important;
    color: #06416d!important;
    line-height: 30px!important;
    border-radius: 15px!important;
    padding: 0 1px 0 10px!important;
    float: left;
    margin-bottom: 11px;
}

7. Multiselect dropdown list

Parent class – .multiselect-dropdown

List hover styling class


.dropdown-list li:hover{
  ……
}

Multiselect checkbox styling –

.multiselect-item-checkbox input[type=checkbox:checked + div:before { … }

[Note: Default background, color, size comes here]

.multiselect-item-checkbox input[type=checkbox]:checked + div:before

[Note: When the checkbox is checked then background has been override]

.multiselect-item-checkbox input[type=checkbox]:checked + div:after{..}

[Note: Checkbox tick mark size and color comes here]

8. Search Dropdown

Button Class

.btn .btn-primary
[.btn-primary – Used for styling font and background color]

1. Clear the text – Close icon style

.reseticon{
position: absolute;
right: 50px;
width: 25px;
height: 30px;
padding: 7px;
z-index: 7;
top: 4px;
}

2. Items list section

Parent class - .full-dropdown 
.form-inline.dropdownBody{ 
  … 
}

Hover items list class –

.drowdown-item:focus, .dropdown-item:hover{
   color: #16181b;
   background-colour: #e9ecef; 
   … 
}

Styling of items list class - 

.source-dropdown-item{
 …
}

9. Popover

Popver list class – Can handle the font, color, background-color, etc.

.popover-body a {
….
}

Popver hover list class –

.popover-body a:hover{
….
}

10. Upload Files Popup

.uploadfilecontainer { 
     background-repeat: no-repeat; 
     background-size: 100px; 
     background-position: 50%;     
     height: 230px;      
     width: 100%;      
     margin: 0;      
     border: 2px dashed #296193;      
    border-radius: 5px;      
    position: relative;     
    background-color: #f5fcff; 
}

Tree View Styling

1. Button color

.btn-primary {
    color: #fff!important; 
    background-color: #2a5f8f !important; 
    border-color: #2a5f8f !important;
}

2. Source section width – Only clicking the button function call this class

@media (min-width: 768px){ .collapsepanel-none > div:first-child {
     flex: 0 0 305px; max-width: 305px;
}

3. Table result section

@media (min-width: 768px) .collapsepanel-none > div:last-child {
   flex: 0 0 100%;
   max-width: calc(100% - 305px);
   flex-basis: auto; 
}

Favorite View Styling

1. Button color

.btn-primary {
    color: #fff!important; 
    background-color: #2a5f8f !important; 
    border-color: #2a5f8f !important;
}

2. Source section width – Only clicking the button function call this class

@media (min-width: 768px){ .collapsepanel-none > div:first-child {
     flex: 0 0 305px; max-width: 305px;
}

3. Table result section

@media (min-width: 768px) .collapsepanel-none > div:last-child {
   flex: 0 0 100%;
   max-width: calc(100% - 305px);
   flex-basis: auto; 
}

Favorite View Styling

1. Favorites icon size and styling

.table .table-icon-sm{
    width: 15px;
    height: 15px;
}

END-USER imDocShare LICENSE AGREEMENT

This is a Legally binding agreement between you (either an individual or a single entity) and KLoBot, Inc. (“KLoBot”) for the “imDocShare” Software and associated media and printed materials, and many include online or electronic documentation for imDocShare Software Product or imDocShare Software (collectively “imDocShare”). By installing, copying or otherwise using imDocShare, you are agreeing to be bound by the terms and conditions of this agreement, including imDocShare license and disclaimer of imDocShare software warranty below. Please read this document carefully before using imDocShare. If you do not agree with the terms and conditions of this agreement you should not install or use imDocShare.

1. GRANT OF LICENSE; imDocShare USE RESTRICTIONS.
In consideration for your payment of any applicable license fee for imDocShare, KLoBot hereby grants to you a personal, non-transferable (except as expressly provided in Section 4 below) and non-exclusive right to use and execute imDocShare on a single Microsoft Office 365 SharePoint Online Tenant or Microsoft SharePoint on-premises farm (collectively “tenant”), without right to sublicense imDocShare. Under no circumstance may you store, use or allow the use of imDocShare in any manner on more than one tenant at a time. You agree that you will not reverse engineer, decompile or disassemble any portion of imDocShare. If you dispose of any media or apparatus containing imDocShare, you will ensure that you have completely erased or otherwise destroyed any imDocShare contained on such media or stored in such apparatus. Except as expressly provided in Section 4 below, you may not distribute, lease, transfer for profit, loan or otherwise convey imDocShare or any portion thereof to anyone.

2. COPYING RESTRICTIONS.
In order to effect your license rights hereunder, you may install imDocShare by copying it onto the tenant for use thereon, and you may make full or partial copies of imDocShare, but only as necessary for backup or archival purposes. You agree that

(i) your use and possession of such copies shall be solely under the terms and conditions of this Agreement, and

(ii) you shall place the same proprietary and copyright notices and legends on all such copies as included by KLoBot on the authorized copy of imDocShare that you downloaded from the imDocShare web site.

3. OWNERSHIP OF imDocShare AND MEDIA.
You agree and acknowledge that KLoBot transfers no ownership interest in imDocShare, in the intellectual property in any imDocShare or in any imDocShare copy, to you under this Agreement or otherwise, and that KLoBot and its licensors reserve all rights not expressly granted to you hereunder. After you pay any applicable license fees and/or the purchase price of the applicable KLoBot, you will own the media on which imDocShare was originally provided to you hereunder and on which you subsequently copy imDocShare, but KLoBot and its licensors shall retain ownership of all imDocShare and copies of imDocShare or portions thereof embodied in or on such media.

4. TRANSFER RESTRICTIONS.
If you transfer ownership of imDocShare you may transfer imDocShare and all licenses and rights in imDocShare granted to you under this Agreement to the transferee provided that:

(i) such transferee agrees in writing to accept the terms and conditions of this Agreement, and

(ii) you also transfer all imDocShare, including all copies thereof, to such transferee. Except as provided in this Section, you may not sublicense, transfer or assign this Agreement or any of your rights or obligations under this agreement, in whole or in part.

5. U.S. GOVERNMENT USERS.
If imDocShare is acquired by or on behalf of an entity of government of the United States of America, the following provision applies: U.S. GOVERNMENT RESTRICTED RIGHTS LEGEND. Use, duplication or disclosure of SOFTWARE by the Government is subject to restrictions as set forth in FAR 52.227.19( c)(2) or subparagraph (c)(1)(ii) of the Rights in Technical Data and Computer SOFTWARE clause at DFARS 252.227.7013 and/or in similar or successor clauses in the FAR or the DOD or NASA FAR Supplement. Unpublished rights reserved under the Copyright Laws of the United States. Contractor/manufacturer is KLoBot, Inc.

6. EXPORT RESTRICTIONS.
The software is exported from the United States in accordance with the Export Administration Regulations. Diversion contrary to U.S. law is prohibited. You agree that you will not:

(i) export or re-export the software, directly or indirectly, to Iran, Syria, Sudan, Cuba or North Korea; or

(ii) release the software to a person on the denied persons list, unverified list, entity list, specially designated nationals list, debarred list or nonproliferation sanctions list (see http://www.bis.doc.gov/complianceandenforcement/liststocheck.htm ). The foregoing obligations will apply to you unless the Office of Export Licensing of the U.S. Department of Commerce has granted authorization to you in writing for the export or re-export of the software. Your obligations under this section shall survive any termination of this Agreement.

7. ENFORCEMENT OF TERMS; TERMINATION.
If you fail to fulfill any of your material obligations under this Agreement, KLoBot and/or its licensors may pursue all available legal remedies to enforce this Agreement, and KLoBot may, at any time after your default of this Agreement, terminate this Agreement and all licenses and rights granted to you under this Agreement. You agree that KLoBot licensors referenced in imDocShare are third-party beneficiaries of this Agreement and may enforce this Agreement as it relates to their intellectual property. You further agree that, if KLoBot terminates this Agreement for your default, you will, within thirty (30) days after any such termination, deliver to KLoBot or render unusable all imDocShare originally provided to you hereunder and any copies thereof embodied in any medium.

8. DISCLAIMER OF SOFTWARE WARRANTY.
KLoBot PROVIDES imDocShare TO YOU AS IS AND WITHOUT WARRANTY OF ANY KIND, EXPRESS, IMPLIED OR OTHERWISE, INCLUDING WITHOUT LIMITATION ANY WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. NO ORAL OR WRITTEN INFORMATION OR ADVICE GIVEN BY ANY KLoBot EMPLOYEE, REPRESENTATIVE OR DISTRIBUTOR WILL CREATE A WARRANTY FOR THE imDocShare, AND YOU MAY NOT RELY ON ANY SUCH INFORMATION OR ADVICE.

9. INTELLECTUAL PROPERTY RIGHTS PROTECTION.
If any third party brings a suit against you that is based on a claim that imDocShare, solely as furnished to you under this Agreement, constitutes direct infringement of any patent issued by, or copyright registered in, the United states, KLoBot shall defend such suit or proceeding and shall pay any damages and costs finally awarded therein against you with respect to such matter, provided that you promptly inform KLoBot of any such claim, furnish KLoBot with a copy of each communication, notice or other action relating to the alleged infringement and give KLoBot the authority, information and assistance necessary to settle, compromise or litigate such suit or proceeding. Following notice of a claim or a threatened or actual suit, KLoBot may, without obligation to do so, at KLoBot sole option:

(a) procure for you the right to continue to use imDocShare as furnished,

(b) replace or modify imDocShare to make it non-infringing, or

(c) discontinue your license for imDocShare and refund to you any license fee that you paid for it, less a reasonable value for use, determined by prorating such license fee on the basis of a thirty-six (36) month straight line depreciation method, applied to the period of actual use.

KLoBot shall not be obligated to defend or be liable for costs and damages if the infringement or claim thereof arises out of:

(i) use or combination of imDocShare with products or data not provided by KLoBot,

(ii) use of other than the latest unmodified release of imDocShare made available to you by KLoBot if such infringement would have been avoided by the use of such release of imDocShare,

(iii) modification of imDocShare by anyone by KLoBot,

(iv) use of imDocShare after receiving notice, or having reason to believe, that imDocShare infringes a patent or copyright of a third party, or

(v) a claim based on any portion of the Windows(r) software that may be included with imDocShare.

THE FOREGOING STATES YOUR EXCLUSIVE REMEDY AND KLoBot ENTIRE LIABILITY WITH RESPECT TO INFRINGEMENT OF ANY PATENT OR COPYRIGHT BY imDocShare, AND KLoBot SHALL HAVE NO LIABILITY WITH RESPECT TO ANY OTHER INTELLECTUAL PROPERTY RIGHT.

10. GOVERNING LAW.
This Agreement shall be governed by and interpreted in accordance with New Jersey law, excluding its choice of law rules.

11. TECHNICAL SUPPORT TERMS.

Definitions.As used herein the following capitalized terms have the meanings set forth below:

“Correction” means, without limitation, a workaround, maintenance release, patch and/or documentation change, as KLoBot deems appropriate.
“Defect” means a material failure of imDocShare to operate substantially in accordance with the applicable user guides and reference manuals.
“Update” means a maintenance or minor release of imDocShare that provides corrections or performance improvements, is designated by KLoBot as an Update and is generally made available to all KLoBot technical support customers.
“Upgrade” means a major release of imDocShare that provides new features or functional enhancement, is designated by KLoBot as an Upgrade and is generally made available to KLoBot Premium technical support customers.

Technical Support.

During any 12/24/36-month support period for which you have pre-paid the required premium support payment, KLoBot will provide you:

Notification, if you have requested to be notified, when Updates are available for downloading from imDocShare website at www.imDocShare.com ;
Notification, if you have requested to be notified, when Upgrades are available for downloading from KLoBot’ website; and
Access to My imDocShare Support Portal on KLoBot’ website through which you may:

- Download Updates when commercially available;
- Download Upgrades (Premium technical support customers only) when commercially available;
- Report Defects in imDocShare and obtain Corrections as described herein and in accordance with the types of response and timing referenced on KLoBot’ website;
- Request General advice on implementation, operation, functionality and use of imDocShare as described on KLoBot’ website;
- Participate in community forums, review KLoBot’ extensive knowledge base and obtain usage tips and other useful information regarding imDocShare, including up-to-date information on current releases, product compatibility, restrictions, enhancements, workarounds and fixes; and
- Access on-line documentation regarding imDocShare, including application notes that include installation instructions, release notes and Frequently Asked Questions (FAQs).

Defect Correction.

When you report a suspected Defect in imDocShare to KLoBot using its My imDocShare Support Portal, KLoBot will attempt, based upon information provided by you, to recreate the suspected Defect. If the Defect is confirmed, KLoBot will use commercially reasonable efforts, given the nature and scope of the Defect, to make available to you through the My imDocShare Support Portal a Correction in accordance with the guidelines set forth on KLoBot’ website. KLoBot will make available to Premium technical support customers live chat, telephone call back and live meeting support as appropriate and warranted to confirm Defects and develop Corrections.
KLoBot will not be responsible for correcting Defects in any release of imDocShare other than the most recent release of imDocShare, provided that KLoBot shall continue to support the prior release superseded by recent release for a reasonable period sufficient to allow Premium technical support customers to implement the newest release or until the end of the current non-Premium technical support period.
You agree to implement within a reasonable time all Corrections provided by KLoBot hereunder.

Limitations.

KLoBot will not be obligated to provide technical support relating to problems, errors or malfunctions caused by

malfunction of the computer system and communications network on which you have installed and are using imDocShare,
other software installed in the same SharePoint environment not licensed pursuant to this Agreement,
any use of imDocShare in disregard of any known adverse consequences, including without limitation the failure of user to make appropriate backups, warning messages, and other written instructions,
any modification to imDocShare not authorized by KLoBot,
Mainstream Support of a given SharePoint Platform has been retired by Microsoft, or
any other cause not attributable to KLoBot.

Renewal of Support.

KLoBot provides the first year of basic technical support for no additional charge. Unless renewed in accordance herewith, basic technical support will cease on the last day of the 12-month support period that commenced upon the effective date of imDocShare license.
For an additional fee, you may obtain Premium technical support. Unless renewed in accordance herewith, Premium technical support will cease on the last day of the support period for which you have paid the additional Premium technical support fee.
Support fees for additional support periods must be paid in advance on or prior to last day of the support period for which you have paid the required support fee.
Approximately forty-five (45) days prior to the termination of the then current support period, KLoBot will invoice you for renewal of technical support. The support fee due for the next support period shall be KLoBot’ then current applicable list price for renewal of technical support as of the date of invoice.
KLoBot reserves the right to withdraw technical support of imDocShare, and to alter the prices, terms and conditions for technical support in advance of any renewal of support. Any such withdrawal or alterations will become effective as of such renewal date.

Reinstatement of Support.

If you allow technical support to expire, in order to reinstate support of imDocShare, you may be required to pay to KLoBot a reinstatement support fee, the then current annual support fee, and, If you are not licensing the then current release of imDocShare, an upgrade license fee for the current release of imDocShare.
Required Identifier.

In order to access My imDocShare Support Portal you must provide the identifier issued to you when you licensed imDocShare. Upon entry of such identifier access will be granted if you have paid in full the required maintenance fee.
Termination of Technical Support.

Notwithstanding Section 4 above, resale, assignment, or transfer of the technical support provided by KLoBot is strictly prohibited and will be grounds for termination of the technical support.

Styling – CSS guide

Common Styling

1. Background color of Webpart

2. Filter button group

3. Table

1. Tabs

2. Table icon

3. Table header color

4. Table body font style

5. Table header column fixed width

6. Table body with link text

4. Pagination

1. Default Pagination Button

2. Deafult button font color

3. Disable button

4. Selected button

5. Buttons

6. Chips

7. Multiselect dropdown list

8. Search Dropdown

2. Items list section

Hover items list class –

Styling of items list class -

9. Popover

10. Upload Files Popup

Tree View Styling

Favorite View Styling

Favorite View Styling

Connect with us

Styling of items list class - 