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/flatly/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/flatly/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}body,h1,h2,h3,h4,h5,h6{font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-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{background:#fff;color:#2C3E50;line-height:1.42857143}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:10px;font-weight:400;line-height:1.1;color:inherit}h1{font-size:39px}h2{font-size:32px}h3{font-size:26px}h4{font-size:19px}h5{font-size:15px}h6{font-size:13px}a,a:hover{color:#18BC9C}.bg-primary{background:#2C3E50}.bg-success{background:#18BC9C}.bg-info{background:#3498DB}.bg-warning{background:#F39C12}.bg-danger{background:#E74C3C}.bg-gray-base{background:#000}.bg-gray-darker{background:#222}.bg-gray-dark{background:#7b8a8b}.bg-gray{background:#95a5a6}.bg-gray-light{background:#b4bcc2}.bg-gray-lighter{background:#ecf0f1}.text-color{color:#2C3E50}.text-muted{color:#b4bcc2}.alert-box{padding:5px}.text-success{color:#fff;background:#18BC9C;border:1px solid #18BC9C}.text-info{color:#fff;background:#3498DB;border:1px solid #3498DB}.text-warning{color:#fff;background:#F39C12;border:1px solid #F39C12}.text-danger{color:#fff;background:#E74C3C;border:1px solid #E74C3C}.g-input-field{height:45px;background:#fff;color:#2C3E50;border:1px solid #dce4ec;border-radius:4px}.g-input-field:focus{border-color:#2C3E50}.input--large{height:66px}.input--small{height:35px}.g-input-field[disabled]{background:#ecf0f1}.has-error .g-label{color:#E74C3C}.has-error .g-input-field{border-color:#E74C3C}.has-warning .g-label{color:#F39C12}.has-warning .g-input-field{border-color:#F39C12}.has-success .g-label{color:#18BC9C}.has-success .g-input-field{border-color:#18BC9C}::-webkit-input-placeholder{color:#acb6c0}::-moz-placeholder{color:#acb6c0}:-ms-input-placeholder{color:#acb6c0}:-moz-placeholder{color:#acb6c0}

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

@ -0,0 +1,168 @@
<!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 - flatly
</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">#2C3E50</div>
<div class="g-box-color bg-success">#18BC9C</div>
<div class="g-box-color bg-info">#3498DB</div>
<div class="g-box-color bg-warning">#F39C12</div>
<div class="g-box-color bg-danger">#E74C3C</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-base">#000000</div>
<div class="g-box-color bg-gray-darker">#222222</div>
<div class="g-box-color bg-gray-dark">#7b8a8b</div>
<div class="g-box-color bg-gray">#95a5a6</div>
<div class="g-box-color bg-gray-light">#b4bcc2</div>
<div class="g-box-color bg-gray-lighter inherit">#ecf0f1</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>