phares3757/oi-metrology
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client Hub Project

Browse Source
This commit is contained in:
Mike Phares
2023-01-15 18:40:32 -07:00
parent f69a937b1f
commit 924c903b3b
865 changed files with 51668 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
ClientHub/wwwroot/igniteui/css/themes/bootstrap3/default/style-guide/style-guide Normal file
View File

@ -0,0 +1,332 @@
@import "../variables";
// STYLES NOT RELATED TO THE STYLE GUIDE
body {
padding: 0;
margin: 0;
}
.paragraph-styles p {
margin: 0;
}
.paragraph-styles,
.brand-color {
display: flex;
}
.container {
max-width: 960px;
margin: 100px auto;
}
.style-guide-header {
margin-bottom: 40px;
}
.g-row {
margin-left: -20px;
margin-right: -20px;
}
.brand-color {
color: #fff;
}
.g-title-small {
padding-top: 15px;
border-top: 1px solid #ddd;
}
.container :first-of-type .g-title-small {border: none}
.container .flex-group .g-title-small {border-top: 1px solid #ddd}
.g-box-color {
flex: 1;
margin: 10px 20px;
padding: 20px;
text-align: center;
}
.g-box-text {
flex: 1;
margin: 10px 20px;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.inherit {
color: #555;
}
.section {
margin-bottom: 50px;
}
.flex-group {
display: flex;
>* {
flex:1;
margin: 10px 20px;
}
}
.serif-font {
font-family: @font-family-serif;
}
.section-column {
display: flex;
flex-direction: column;
align-items: flex-start;
.g-input-field {
width: 100%;
}
}
.g-input-field {
margin-bottom: 15px;
padding: 0 10px;
&:last-of-type {
margin-bottom: 0;
}
}
.g-label {
margin-bottom: 5px;
margin-top: 15px;
}
.g-flex-row-start {
display: flex;
align-items: center;
justify-content: flex-start;
}
.checkbox-wrap {
margin-bottom: 10px;
&:last-of-type{
margin-bottom: 0;
}
}
input[type="radio"],
input[type="checkbox"]
{
margin: 0 5px 2px 0;
}
// STYLES NOT RELATED TO THE STYLE GUIDE END!!!
/*
STYLE GUIDE STYLES
=======================
*/
body {
font-family: @font-family-sans-serif;
background: @body-bg;
color: @text-color;
line-height: @line-height-base;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 10px;
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
color: @headings-color;
}
// Title styles
h1 {
font-size: @font-size-h1;
}
h2 {
font-size: @font-size-h2;
}
h3 {
font-size: @font-size-h3;
}
h4 {
font-size: @font-size-h4;
}
h5 {
font-size: @font-size-h5;
}
h6 {
font-size: @font-size-h6;
}
// Links Styles
a {
color: @link-color;
&:hover {
color: @link-hover-color;
}
}
// Brand colors
.bg-primary {
background: @brand-primary;
}
.bg-success {
background: @brand-success;
}
.bg-info {
background: @brand-info;
}
.bg-warning {
background: @brand-warning;
}
.bg-danger {
background: @brand-danger;
}
// Gray colors
.bg-gray-darker {
background: @gray-darker;
}
.bg-gray-dark {
background: @gray-dark;
}
.bg-gray {
background: @gray;
}
.bg-gray-light {
background: @gray-light;
}
.bg-gray-lighter {
background: @gray-lighter;
}
// Text color
.text-color {
color: @text-color;
}
.text-muted {
color: @text-muted;
}
// Alert text styles
.alert-box {
padding: 5px;
}
.text-success {
color: @state-success-text;
background: @state-success-bg;
border: 1px solid @state-success-border;
}
.text-info {
color: @state-info-text;
background: @state-info-bg;
border: 1px solid @state-info-border;
}
.text-warning {
color: @state-warning-text;
background: @state-warning-bg;
border: 1px solid @state-warning-border;
}
.text-danger {
color: @state-danger-text;
background: @state-danger-bg;
border: 1px solid @state-danger-border;
}
/* Forms, inputs...*/
.g-input-field {
height: @input-height-base;
background: @input-bg;
color:@input-color;
border: 1px solid @input-border;
border-radius: @input-border-radius;
&:focus {
border-color: @input-border-focus;
}
}
.input--large {
height: @input-height-large;
}
.input--small {
height:@input-height-small;
}
.g-input-field[disabled] {
background: @input-bg-disabled;
}
.has-error {
.g-label {
color: @label-danger-bg;
}
.g-input-field {
border-color: @brand-danger;
}
}
.has-warning {
.g-label {
color: @label-warning-bg;
}
.g-input-field {
border-color: @brand-warning;
}
}
.has-success {
.g-label {
color: @label-success-bg;
}
.g-input-field {
border-color: @brand-success;
}
}
// Placeholder styles
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: @input-color-placeholder;
}
::-moz-placeholder { /* Firefox 19+ */
color: @input-color-placeholder;
}
:-ms-input-placeholder { /* IE 10+ */
color: @input-color-placeholder;
}
:-moz-placeholder { /* Firefox 18- */
color: @input-color-placeholder;
}

1
ClientHub/wwwroot/igniteui/css/themes/bootstrap3/default/style-guide/style-guide.css Normal file
View File

@ -0,0 +1 @@
.paragraph-styles p,body{margin:0}.g-box-color,.text-center{text-align:center}.brand-color,.flex-group,.paragraph-styles,.section-column{display:flex}body{padding:0}.container{max-width:960px;margin:100px auto}.style-guide-header{margin-bottom:40px}.g-row{margin-left:-20px;margin-right:-20px}.g-box-color,.g-box-text{flex:1;margin:10px 20px}.brand-color{color:#fff}.g-title-small{padding-top:15px;border-top:1px solid #ddd}.container :first-of-type .g-title-small{border:none}.container .flex-group .g-title-small{border-top:1px solid #ddd}.g-box-color{padding:20px}.text-right{text-align:right}.text-left{text-align:left}.inherit{color:#555}.section{margin-bottom:50px}.flex-group>*{flex:1;margin:10px 20px}.serif-font{font-family:Georgia,"Times New Roman",Times,serif}.section-column{flex-direction:column;align-items:flex-start}.section-column .g-input-field{width:100%}.g-input-field{margin-bottom:15px;padding:0 10px}.g-input-field:last-of-type{margin-bottom:0}.g-label{margin-bottom:5px;margin-top:15px}.g-flex-row-start{display:flex;align-items:center;justify-content:flex-start}.checkbox-wrap{margin-bottom:10px}.checkbox-wrap:last-of-type{margin-bottom:0}input[type=radio],input[type=checkbox]{margin:0 5px 2px 0}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;color:#333;line-height:1.42857143}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:10px;font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:18px}h5{font-size:14px}h6{font-size:12px}a{color:#428bca}a:hover{color:#2a6496}.bg-primary{background:#428bca}.bg-success{background:#5cb85c}.bg-info{background:#5bc0de}.bg-warning{background:#f0ad4e}.bg-danger{background:#d9534f}.bg-gray-darker{background:#222}.bg-gray-dark{background:#333}.bg-gray{background:#555}.bg-gray-light{background:#999}.bg-gray-lighter{background:#eee}.text-color{color:#333}.text-muted{color:#999}.alert-box{padding:5px}.text-success{color:#3c763d;background:#dff0d8;border:1px solid #d6e9c6}.text-info{color:#31708f;background:#d9edf7;border:1px solid #bce8f1}.text-warning{color:#8a6d3b;background:#fcf8e3;border:1px solid #faebcc}.text-danger{color:#a94442;background:#f2dede;border:1px solid #ebccd1}.g-input-field{height:34px;background:#fff;color:#555;border:1px solid #ccc;border-radius:4px}.g-input-field:focus{border-color:#66afe9}.input--large{height:46px}.input--small{height:30px}.g-input-field[disabled]{background:#eee}.has-error .g-label{color:#d9534f}.has-error .g-input-field{border-color:#d9534f}.has-warning .g-label{color:#f0ad4e}.has-warning .g-input-field{border-color:#f0ad4e}.has-success .g-label{color:#5cb85c}.has-success .g-input-field{border-color:#5cb85c}::-webkit-input-placeholder{color:#999}::-moz-placeholder{color:#999}:-ms-input-placeholder{color:#999}:-moz-placeholder{color:#999}

167
ClientHub/wwwroot/igniteui/css/themes/bootstrap3/default/style-guide/style-guide.html Normal file
View File

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style guide</title>
<link rel="stylesheet" href="style-guide.css">
</head>
<body>
<div class="container">
<header class="style-guide-header">
<h1 class="g-title-big">
Style guide - Bootstrap default
</h1>
</header>
<section class="section">
<h3 class="g-title-small">Brand Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color bg-primary">#428bca</div>
<div class="g-box-color bg-success">#5cb85c</div>
<div class="g-box-color bg-info">#5bc0de</div>
<div class="g-box-color bg-warning">#f0ad4e</div>
<div class="g-box-color bg-danger">#d9534f</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Gray Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color bg-gray-darker">#222222</div>
<div class="g-box-color bg-gray-dark">#333333</div>
<div class="g-box-color bg-gray">#555555</div>
<div class="g-box-color bg-gray-light">#999999</div>
<div class="g-box-color bg-gray-lighter inherit">#eeeeee</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Paragraph styles</h3>
<div class="g-row paragraph-styles">
<div class="g-box-text text-left">
<h4>Text Left</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-center">
<h4>Text Center</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-right">
<h4>Text Right</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
</div>
</section>
<section class="section serif-font">
<h3 class="g-title-small">Serif font</h3>
<div class="g-row paragraph-styles">
<div class="g-box-text text-left">
<h4>Text Left</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-center">
<h4>Text Center</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-right">
<h4>Text Right</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Links Styles</h3>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#">Link in paragraph</a> elit. </p>
<a href="#">This is a link</a>
</section>
<div class="g-row">
<div class="flex-group">
<section class="section">
<h3 class="g-title-small">Titles Styles</h3>
<br>
<h1>This is h1 title</h1>
<h2>This is h2 title</h2>
<h3>This is h3 title</h3>
<h4>This is h4 title</h4>
<h5>This is h5 title</h5>
<h6>This is h6 title</h6>
</section>
<section class="section">
<h3 class="g-title-small">Text color</h3>
<p class="text-color">Default text color example</p>
<p class="text-muted">Muted text color example</p>
<h3 class="g-title-small">Alerts Styles</h3>
<p class="alert-box text-success"> Success alert box example</p>
<p class="alert-box text-info"> Info alert box example</p>
<p class="alert-box text-warning"> Warning alert box example</p>
<p class="alert-box text-danger"> Danger alert box example</p>
</section>
</div>
</div>
<div class="g-row">
<div class="flex-group">
<section class="section">
<h3 class="g-title-small">Form fields</h3>
<form>
<div class="section-column">
<label class="g-label" for="g-larg-input">Large input</label>
<input id="g-larg-input" class="g-input-field input--large" placeholder="Placeholder" type="text">
</div>
<div class="section-column">
<label class="g-label" for="g-disabled-input">Disabled input</label>
<input id="g-disabled-input" class="g-input-field" disabled placeholder="Placeholder" type="text">
</div>
<div class="section-column has-error">
<label class="g-label" for="g-error-input">Input Error</label>
<input id="g-error-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
<div class="section-column has-warning">
<label class="g-label" for="g-warning-input">Input Warning</label>
<input id="g-warning-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
<div class="section-column has-success">
<label class="g-label" for="g-success-input">Input Success</label>
<input id="g-success-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
</form>
</section>
<section class="section">
<h3 class="g-title-small">Checkboxs</h3>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<h3 class="g-title-small">Radio buttons</h3>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked="">
Option one is this
</label>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" checked="">
Option one is this
</label>
</section>
</div>
</div>
</div>
</body>
</html>