Bentley Systems Form Elements

Developer
Jon Graft
Size
3,204 Kb
Views
2,024
  1. Bentley Systems Form Elements Previews
  2. Bentley Systems Form Elements HTML Codes
  3. Bentley Systems Form Elements CSS Codes

How do I make an bentley systems form elements?

These are the standard form elements to be used by all Bentley System products.. What is a bentley systems form elements? How do you make a bentley systems form elements? This script and codes were developed by Jon Graft on 30 January 2023, Monday.

Bentley Systems Form Elements Previews
IQ Test

Bentley Systems Form Elements - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bentley Systems Form Elements</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div style="height: 100%; width: 100%;">	<div class="col1">	<h1>Form Elements - Light Theme</h1>	<hr />	<input placeholder="Placeholder" style="width: 256px;" />	<br />	<!-- <input type="text" value="Onfocus" style="width: 256px; border-color: #858C92;" />	<br /> -->	<input type="text" placeholder="Disabled" class="light" style="width: 256px;" disabled />	<br />	<input type="text" class="error" value="Greg@Bentley" style="width: 256px;" />	<div class="error-msg" style="width: 258px;">	<p><strong>Error!</strong> Something went wrong.</p>	</div>	<br />	<input type="text" class="success" value="[email protected]" style="width: 256px;" />	<div class="success-msg" style="width: 258px;">	<p><strong>Success!</strong> Signing in.</p>	</div>	<br />	<input type="text" class="warning" value="Warning" style="width: 256px;" />	<div class="warning-msg" style="width: 258px;">	<p>Warning message here</p>	</div>	<br />	<input type="text" class="info" value="Info" style="width: 256px;" />	<div class="info-msg" style="width: 258px;">	<p>Info message text here</p>	</div>	<br />	<input type="text" class="search" placeholder="Search&hellip;" style="width: 256px;" />	<br />	<textarea rows="3" style="width: 272px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>	</div>	<div class="col2">	<h1>Form Elements - Dark Theme</h1>	<hr />	<input placeholder="Placeholder" class="dark" style="width: 256px;" />	<br />	<!-- <input type="text" value="Onfocus" class="dark" style="width: 256px; border-color: #FFFFFF; background: #FFFFFF;" />	<br /> -->	<input type="text" placeholder="Disabled" class="dark" style="width: 256px;" disabled />	<br />	<input type="text" class="error-dark" value="Greg@Bentley" style="width: 256px;" />	<div class="error-msg error-msg-dark" style="width: 258px;">	<p><strong>Error!</strong> Something went wrong.</p>	</div>	<br />	<input type="text" class="success-dark" value="[email protected]" style="width: 256px;" />	<div class="success-msg success-msg-dark" style="width: 258px;">	<p><strong>Success!</strong> Signing in.</p>	</div>	<br />	<input type="text" class="warning-dark" value="Warning" style="width: 256px;" />	<div class="warning-msg warning-msg-dark" style="width: 258px;">	<p>Warning message here</p>	</div>	<br />	<input type="text" class="info-dark" value="Info" style="width: 256px;" />	<div class="info-msg info-msg-dark" style="width: 258px;">	<p>Info message text here</p>	</div>	<br />	<input type="text" class="search-dark dark" placeholder="Search&hellip;" style="width: 256px;" />	</td>	<br />	<textarea rows="3" style="width: 272px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>	<br />	</div>
</div>
</body>
</html>

Bentley Systems Form Elements - Script Codes CSS Codes

/* NOT NEEDED FOR FORM ELEMENTS */
body {font-family: 'Open Sans', sans-serif;}
.col1, .col2 { width: 48%; height: 100%; padding: 0 10px;
}
.col1 { background-color: #FFFFFF; float: left;
}
.col2 { background-color: #212325; color: #FFFFFF; float: right;
}
/* FORM ELEMENTS - BASE */
input, textarea {	outline: none;	resize: none;	display: block;	width: 100%;	font-size: 15px;	color: #424649;	border: 1px solid #B8BFC5;	border-radius: 3px;	background-color: #FFFFFF;	-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input {	padding: 8px 16px;
}
textarea {	padding: 8px;
}
input:hover, input:focus, textarea:hover, textarea:focus {	border-color: #858C92;
}
input.light[disabled], input.light[readonly], textarea.light[disabled], textarea.light[readonly] {	cursor: not-allowed;	background-color: #EDEFF1;	border-color: #DBDFE2;
}
input.light[disabled]:hover, input.light[readonly]:hover, textarea.light[disabled], textarea.light[readonly] {	border-color: #DBDFE2;
}
/* FORM ELEMENTS - MESSAGES & SEARCH */
.error-msg, .success-msg, .warning-msg, .info-msg {	font-size: 12px;	padding: 1px 16px;	border-radius: 0 0 3px 3px;
}
.error, .error:hover {	color: #D30A0A;	border-color: #D30A0A;
}
.success, .success:hover {	color: #57AA1D;	border-color: #57AA1D;
}
.warning, .warning:hover {	color: #E67E22;	border-color: #E67E22;
}
.info, .info:hover {	color: #0576BC;	border-color: #0576BC;
}
.error-msg { color: #D30A0A;	background-color: #F7E2E2;
}
.success-msg { color: #57AA1D;	background-color: #E4F0DB;
}
.warning-msg { color: #E67E22;	background-color: #FAF5DB;
}
.info-msg { color: #0576BC;	background-color: #CDECFF;
}
.search {	background: #FFFFFF url('https://i.imgur.com/xr81XNm.png') no-repeat scroll right center;
}
/* DARK THEME */
input.dark, textarea.dark {	border: 1px solid #64696E;	border-radius: 3px;	background-color: #64696E;
}
input.dark:focus, textarea.dark:focus {	background: #FFFFFF;	border-color: #FFFFFF;
}
input.dark[disabled], input.dark[readonly], textarea.dark[disabled], textarea.dark[readonly] {	cursor: not-allowed;	background-color: #424649;	border-color: #424649;
}
input.dark[disabled]:hover, input.dark[readonly]:hover, textarea.dark[disabled], textarea.dark[readonly] {	border-color: #424649;
}
.error-dark, .error-dark:hover {	color: #D30A0A;	border-color: #D30A0A;	background-color: #F7E2E2;
}
.success-dark, .success-dark:hover {	color: #57AA1D ;	border-color: #57AA1D;	background-color: #E4F0DB;
}
.warning-dark, .warning-dark:hover {	color: #E67E22 ;	border-color: #E67E22;	background-color: #FAF5DB;
}
.info-dark, .info-dark:hover {	color: #0576BC;	border-color: #0576BC;	background-color: #CDECFF;
}
.error-msg-dark { color: #F7E2E2;	background-color: #D30A0A;
}
.success-msg-dark { color: #E4F0DB;	background-color: #57AA1D;
}
.warning-msg-dark { color: #FAF5DB;	background-color: #E67E22;
}
.info-msg-dark { color: #CDECFF;	background-color: #0576BC;
}
.search-dark {	background: #64696E url('https://i.imgur.com/xfe6NQf.png') no-repeat scroll right center;
}
.search-dark:hover, .search-dark:focus {	background: #FFFFFF url('https://i.imgur.com/xr81XNm.png') no-repeat scroll right center;	border-color: #FFFFFF;
}
Bentley Systems Form Elements - Script Codes
Bentley Systems Form Elements - Script Codes
Home Page Home
Developer Jon Graft
Username FlyersPh9
Uploaded January 30, 2023
Rating 3
Size 3,204 Kb
Views 2,024
Do you need developer help for Bentley Systems Form Elements?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jon Graft (FlyersPh9) Script Codes
Name
Bentley Systems CSS Buttons
Bar Graph
Bentley Systems Progress Bar
Bentley Systems Cards
Simple Social Buttons from Dribbble
Bentley Systems Toggles
Pie Chart
User Profile in CSS
A Pen by Jon Graft
ID Card
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!