Skip to content
Snippets Groups Projects
Commit f2156cd5 authored by Kyle Doherty's avatar Kyle Doherty
Browse files

styling

parent 2dae912e
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/admin/databases/partials/database_edit_forms.html
+ 2
− 2
View file @ f2156cd5
......@@ -4,9 +4,9 @@
<mb-form-label display-name="Database type" field-name="engine"></mb-form-label>
<ul ng-show="!database.engine">
<li ng-repeat="(type, properties) in ENGINES">
<button ng-click="database.engine = type">
<div ng-click="database.engine = type">
{{properties.name}}
</button>
</div>
</li>
</ul>
<div ng-show="database.engine">
......
resources/frontend_client/app/components/form/form.css
+ 13
− 4
View file @ f2156cd5
......@@ -4,6 +4,7 @@
--form-input-size: 1.571rem;
--form-label-color: #949494;
--form-offset: 2.4rem;
}
/* TODO: deprecate this base object, it shouldn't be this specific */
......@@ -43,9 +44,10 @@
}
.Form-input {
padding-top: 0.8em;
padding-bottom: 0.8em;
padding-top: 0.6em;
padding-bottom: 0.6em;
font-size: var(--form-input-size);
line-height: 1;
border: none;
background-color: transparent;
transition: color .3s linear;
......@@ -57,7 +59,7 @@
}
.Form-offset {
padding-left: 2.4rem;
padding-left: var(--form-offset);
}
.Form-charm {
......@@ -90,6 +92,12 @@
background: rgba(0, 0, 0, 0.02);
}
/* ewww */
.Form-field:hover .Form-input.ng-dirty {
color: #222;
background-color: #fff;
}
.Form-field:hover .Form-charm {
opacity: 1;
}
......@@ -115,7 +123,8 @@
}
.Form-actions {
padding: 1em 2em 2em;
padding-left: var(--form-offset);
padding-bottom: var(--form-offset);
display: flex;
align-items: center;
}
......
resources/frontend_client/app/css/setup.css
+ 4
− 0
View file @ f2156cd5
......@@ -28,6 +28,9 @@
.SetupStep {
margin-bottom: 1.714em;
background-color: var(--alt-bg-color);
transition: background .3s linear;
transition: background .3s linear;
flex: 1;
}
.SetupStep.SetupStep--active {
......@@ -36,6 +39,7 @@
.SetupStep.SetupStep--completed {
color: var(--success-color);
background-color: #fff;
}
.SetupStep-indicator {
......
resources/frontend_client/app/setup/partials/setup_info.html
+ 16
− 14
View file @ f2156cd5
<div class="SetupSteps flex flex-column layout-centered wrapper wrapper-max-sm">
<section class="SetupStep bordered rounded full relative" ng-class="{ 'SetupStep--active shadowed' : activeStep == 'user', 'SetupStep--completed shadowed' : completedSteps.user }">
<div class="flex align-center py2" ng-click="activeStep = 'user'">
<div class="flex align-center py4" ng-click="activeStep = 'user'">
<span class="SetupStep-indicator flex layout-centered absolute bordered">
<span class="SetupStep-number">1</span>
<cv-check-icon class="SetupStep-check" width="16px" height="16px"></cv-check-icon>
......@@ -8,15 +8,17 @@
<h3 class="SetupStep-title ml4 text-brand">What should we call you?</h3>
</div>
<form class="Form-new" name="form" ng-submit="createOrgAndUser()" novalidate ng-if="activeStep == 'user'" novalidate>
<div class="Form-field" mb-form-field="first_name">
<mb-form-label display-name="First name" field-name="first_name"></mb-form-label>
<input class="Form-input Form-offset full" name="name" placeholder="Johnny" ng-model="newUser.first_name" required autofocus />
<span class="Form-charm"></span>
</div>
<div class="Form-field" mb-form-field="last_name">
<mb-form-label display-name="Last name" field-name="last_name"></mb-form-label>
<input class="Form-input Form-offset full" name="name" placeholder="Appleseed" ng-model="newUser.last_name" required />
<span class="Form-charm"></span>
<div class="Form-field Grid" mb-form-field="first_name">
<div>
<mb-form-label display-name="First name" field-name="first_name"></mb-form-label>
<input class="Form-input Form-offset full" name="name" placeholder="Johnny" ng-model="newUser.first_name" required autofocus />
<span class="Form-charm"></span>
</div>
<div>
<mb-form-label display-name="Last name" field-name="last_name"></mb-form-label>
<input class="Form-input Form-offset" name="name" placeholder="Appleseed" ng-model="newUser.last_name" required />
<span class="Form-charm"></span>
</div>
</div>
<div class="Form-field" mb-form-field="email">
......@@ -27,19 +29,19 @@
<div class="Form-field" mb-form-field="password">
<mb-form-label display-name="Create a password - Must be 8 characters long and include one upper case letter, one a number and one special character" field-name="password"></mb-form-label>
<input class="Form-input Form-offset full" name="password" type="password" placeholder="Create a new password" ng-model="newUser.password" required>
<input class="Form-input Form-offset full" name="password" type="password" placeholder="Shhh..." ng-model="newUser.password" required>
<span class="Form-charm"></span>
</div>
<div class="Form-field" mb-form-field="repeated_password">
<mb-form-label display-name="Verify your new password" field-name="password"></mb-form-label>
<input class="Form-input Form-offset full" type="password" placeholder="Type it again so we can verify it" ng-model="newUser.repeated_password" required>
<input class="Form-input Form-offset full" type="password" placeholder="Please type it again so we can verify it" ng-model="newUser.repeated_password" required>
<span class="Form-charm"></span>
</div>
<div class="Form-field" mb-form-field="organization">
<mb-form-label display-name="Your organization or company name" field-name="organization"></mb-form-label>
<input class="Form-input Form-offset full" name="organization" type="text" placeholder="Organization name" ng-model="newUser.orgName" autofocus required>
<input class="Form-input Form-offset full" name="organization" type="text" placeholder="Department of awesome" ng-model="newUser.orgName" autofocus required>
<span class="Form-charm"></span>
</div>
......@@ -55,7 +57,7 @@
</section>
<section class="SetupStep bordered border-dashed rounded full relative" ng-class="{ 'SetupStep--active shadowed' : activeStep == 'database', 'SetupStep--completed shadowed' : completedSteps.database }">
<div class="flex align-center py2">
<div class="flex align-center py4">
<span class="SetupStep-indicator flex layout-centered absolute bordered">
<span class="SetupStep-number">2</span>
<cv-check-icon class="SetupStep-check" width="16px" height="16px"></cv-check-icon>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment