andrewdds
GitHub
commit
c05e72d98f
@ -18,9 +18,14 @@ class OrgForm(ValidatedForm):
|
||||
description='Enter a 10-digit phone number',
|
||||
validators=[Required(), PhoneNumber()])
|
||||
|
||||
service_branch = StringField("Service Branch or Agency", validators=[Required()])
|
||||
service_branch = StringField(
|
||||
"Service Branch or Agency",
|
||||
description="Which services and organizations do you belong to within the DoD?",
|
||||
validators=[Required()]
|
||||
)
|
||||
|
||||
citizenship = RadioField(
|
||||
description="What is your citizenship status?",
|
||||
choices=[
|
||||
("United States", "United States"),
|
||||
("Foreign National", "Foreign National"),
|
||||
@ -31,6 +36,7 @@ class OrgForm(ValidatedForm):
|
||||
|
||||
designation = RadioField(
|
||||
"Designation of Person",
|
||||
description="What is your designation within the DoD?",
|
||||
choices=[
|
||||
("military", "Military"),
|
||||
("civilian", "Civilian"),
|
||||
@ -41,6 +47,7 @@ class OrgForm(ValidatedForm):
|
||||
|
||||
date_latest_training = DateField(
|
||||
"Latest Information Assurance (IA) Training completion date",
|
||||
description="To complete the training, you can find it in <a class=\"icon-link\" href=\"https://iatraining.disa.mil/eta/disa_cac2018/launchPage.htm\" target=\"_blank\">Information Assurance Cyber Awareness Challange</a> website.",
|
||||
validators=[
|
||||
Required(),
|
||||
DateRange(
|
||||
|
||||
@ -49,12 +49,10 @@ class RequestForm(ValidatedForm):
|
||||
|
||||
jedi_usage = TextAreaField(
|
||||
"JEDI Usage",
|
||||
description="Briefly describe how you are expecting to use the JEDI Cloud",
|
||||
render_kw={
|
||||
"placeholder": "e.g. We are migrating XYZ application to the cloud so that..."
|
||||
},
|
||||
description="Please tell us more about what the systems/applications you are working with and why the cloud is a good place to host these applications",
|
||||
)
|
||||
|
||||
|
||||
# Details of Use: Cloud Readiness
|
||||
num_software_systems = IntegerField(
|
||||
"Number of Software System",
|
||||
@ -62,35 +60,37 @@ class RequestForm(ValidatedForm):
|
||||
)
|
||||
|
||||
jedi_migration = RadioField(
|
||||
"Are you using the JEDI Cloud to migrate existing systems?",
|
||||
"JEDI Migration",
|
||||
description="Are you using the JEDI Cloud to migrate existing systems?",
|
||||
choices=[("yes", "Yes"), ("no", "No")],
|
||||
default="",
|
||||
)
|
||||
|
||||
rationalization_software_systems = RadioField(
|
||||
"Have you completed a “rationalization” of your software systems to move to the cloud?",
|
||||
description="Have you completed a “rationalization” of your software systems to move to the cloud?",
|
||||
choices=[("yes", "Yes"), ("no", "No"), ("in_progress", "In Progress")],
|
||||
default="",
|
||||
)
|
||||
|
||||
technical_support_team = RadioField(
|
||||
"Are you working with a technical support team experienced in cloud migrations?",
|
||||
description="Are you working with a technical support team experienced in cloud migrations?",
|
||||
choices=[("yes", "Yes"), ("no", "No")],
|
||||
default="",
|
||||
)
|
||||
|
||||
organization_providing_assistance = RadioField( # this needs to be updated to use checkboxes instead of radio
|
||||
"If you are receiving migration assistance, indicate the type of organization providing assistance below:",
|
||||
description="If you are receiving migration assistance, what is the type of organization providing assistance?",
|
||||
choices=[
|
||||
("in_house_staff", "In-house staff"),
|
||||
("contractor", "Contractor"),
|
||||
("other_dod_organization", "Other DoD organization"),
|
||||
("none", "None"),
|
||||
],
|
||||
default="",
|
||||
)
|
||||
|
||||
engineering_assessment = RadioField(
|
||||
"Have you completed an engineering assessment of your software systems for cloud readiness?",
|
||||
description="Have you completed an engineering assessment of your systems for cloud readiness?",
|
||||
choices=[("yes", "Yes"), ("no", "No"), ("in_progress", "In Progress")],
|
||||
default="",
|
||||
)
|
||||
@ -124,7 +124,7 @@ class RequestForm(ValidatedForm):
|
||||
)
|
||||
|
||||
cloud_native = RadioField(
|
||||
"Are your software systems being developed cloud native?",
|
||||
description="Are your software systems being developed cloud native?",
|
||||
choices=[("yes", "Yes"), ("no", "No")],
|
||||
default="",
|
||||
)
|
||||
@ -132,7 +132,7 @@ class RequestForm(ValidatedForm):
|
||||
# Details of Use: Financial Usage
|
||||
estimated_monthly_spend = IntegerField(
|
||||
"Estimated monthly spend",
|
||||
description='Use the <a href="#">JEDI CSP Calculator</a> to estimate your monthly cloud resource usage and enter the dollar amount below. Note these estimates are for initial approval only. After the request is approved, you will be asked to provide a valid Task Order number with specific CLIN amounts for cloud services.',
|
||||
description='Use the <a href="#" target="_blank" class="icon-link">JEDI CSP Calculator</a> to estimate your monthly cloud resource usage and enter the dollar amount below. Note these estimates are for initial approval only. After the request is approved, you will be asked to provide a valid Task Order number with specific CLIN amounts for cloud services.',
|
||||
)
|
||||
|
||||
dollar_value = IntegerField(
|
||||
@ -145,6 +145,12 @@ class RequestForm(ValidatedForm):
|
||||
)
|
||||
|
||||
average_daily_traffic = IntegerField(
|
||||
"Average Daily Traffic (Number of Requests)",
|
||||
description="What is the average daily traffic you expect the systems under this cloud contract to use?"
|
||||
)
|
||||
|
||||
average_daily_traffic_gb = IntegerField(
|
||||
"Average Daily Traffic (GB)",
|
||||
description="What is the average daily traffic you expect the systems under this cloud contract to use?"
|
||||
)
|
||||
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import classes from '../styles/atat.scss'
|
||||
import Vue from 'vue/dist/vue'
|
||||
import VTooltip from 'v-tooltip'
|
||||
|
||||
import optionsinput from './components/options_input'
|
||||
import textinput from './components/text_input'
|
||||
import DetailsOfUse from './components/forms/details_of_use'
|
||||
|
||||
Vue.use(VTooltip)
|
||||
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app-root',
|
||||
components: {
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"parcel": "^1.9.7",
|
||||
"text-mask-addons": "^3.8.0",
|
||||
"uswds": "^1.6.3",
|
||||
"v-tooltip": "^2.0.0-rc.33",
|
||||
"vue": "^2.5.17",
|
||||
"vue-text-mask": "^6.1.2"
|
||||
},
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
@import 'elements/action_group';
|
||||
@import 'elements/labels';
|
||||
@import 'elements/diff';
|
||||
@import 'elements/tooltip';
|
||||
@import 'elements/kpi';
|
||||
|
||||
@import 'components/topbar';
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
$state-color: $color-green;
|
||||
}
|
||||
|
||||
.icon {
|
||||
.icon-validation {
|
||||
@include icon-color($state-color);
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
@include line-max;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
.icon-validation {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
@ -79,13 +79,27 @@
|
||||
margin-left: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-input__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-tooltip {
|
||||
padding: 0 $gap/2;
|
||||
cursor: default;
|
||||
margin-left: $gap/2;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-input__help {
|
||||
display: block;
|
||||
@include h4;
|
||||
font-weight: normal;
|
||||
padding: $gap/2 0;
|
||||
@include line-max;
|
||||
|
||||
.icon-link {
|
||||
padding: 0 $gap/2;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
@ -93,6 +107,17 @@
|
||||
select {
|
||||
@include line-max;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $color-blue;
|
||||
color: $color-blue;
|
||||
box-shadow: inset 0 0 0 1px $color-blue;
|
||||
&::placeholder {
|
||||
color: $color-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.usa-input__choices { // checkbox & radio sets
|
||||
@ -104,10 +129,6 @@
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -121,6 +142,12 @@
|
||||
[type='radio'] + label,
|
||||
[type='checkbox'] + label {
|
||||
margin: 0;
|
||||
&:hover {
|
||||
color: $color-blue;
|
||||
&:before {
|
||||
box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
119
styles/elements/_tooltip.scss
Normal file
119
styles/elements/_tooltip.scss
Normal file
@ -0,0 +1,119 @@
|
||||
.tooltip {
|
||||
display: block;
|
||||
z-index: 10000;
|
||||
max-width: $text-max-width;
|
||||
|
||||
.tooltip-inner {
|
||||
background: $color-black;
|
||||
color: $color-white;
|
||||
border-radius: $border-radius;
|
||||
padding: $gap*2;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: black;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
$color: #f9f9f9;
|
||||
|
||||
.popover-inner {
|
||||
background: $color;
|
||||
color: black;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 30px rgba(black, .1);
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
|
||||
&[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-tooltip {
|
||||
@include icon-link;
|
||||
|
||||
.icon {
|
||||
@include icon-size(16);
|
||||
}
|
||||
}
|
||||
@ -3,11 +3,12 @@
|
||||
{% set context=g.navigationContext %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>{% block title %}JEDI{% endblock %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}JEDI Cloud{% endblock %}</title>
|
||||
{% assets "css" %}
|
||||
<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">
|
||||
{% endassets %}
|
||||
|
||||
@ -1,19 +1,23 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/tooltip.html" import Tooltip %}
|
||||
|
||||
{% macro OptionsInput(field, inline=False) -%}
|
||||
{% macro OptionsInput(field, tooltip, inline=False) -%}
|
||||
<optionsinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
|
||||
<div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
|
||||
|
||||
<fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
|
||||
<legend>
|
||||
{{ field.label | striptags}}
|
||||
<div class="usa-input__title">
|
||||
{{ field.label | striptags}}
|
||||
{% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
|
||||
</div>
|
||||
|
||||
{% if field.description %}
|
||||
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if field.errors %}
|
||||
{{ Icon('alert') }}
|
||||
{{ Icon('alert',classes="icon-validation") }}
|
||||
{% endif %}
|
||||
</legend>
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/tooltip.html" import Tooltip %}
|
||||
|
||||
{% macro TextInput(field, placeholder='', validation='anything', paragraph=False) -%}
|
||||
{% macro TextInput(field, tooltip='', placeholder='', validation='anything', paragraph=False) -%}
|
||||
<textinput
|
||||
name='{{ field.name }}'
|
||||
validation='{{ validation }}'
|
||||
@ -13,14 +14,14 @@
|
||||
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
|
||||
|
||||
<label for={{field.name}}>
|
||||
{{ field.label | striptags }}
|
||||
<div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
|
||||
|
||||
{% if field.description %}
|
||||
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
||||
{% endif %}
|
||||
|
||||
<span v-show='showError'>{{ Icon('alert') }}</span>
|
||||
<span v-show='showValid'>{{ Icon('ok') }}</span>
|
||||
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
||||
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
||||
|
||||
</label>
|
||||
|
||||
@ -61,5 +62,5 @@
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</textinput>
|
||||
</textinput>
|
||||
{%- endmacro %}
|
||||
|
||||
9
templates/components/tooltip.html
Normal file
9
templates/components/tooltip.html
Normal file
@ -0,0 +1,9 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% macro Tooltip(message,title='Help') -%}
|
||||
|
||||
<span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
|
||||
{{ Icon('help') }}<span>{{ title }}</span>
|
||||
</span>
|
||||
|
||||
{%- endmacro %}
|
||||
@ -25,34 +25,36 @@
|
||||
|
||||
<h2>General</h2>
|
||||
{{ OptionsInput(f.dod_component) }}
|
||||
{{ TextInput(f.jedi_usage, paragraph=True, placeholder="e.g. We are migrating XYZ application to the cloud so that...") }}
|
||||
{{ TextInput(f.jedi_usage, paragraph=True, placeholder="Briefly describe how you are expecting to use the JEDI Cloud. \n e.g. We are migrating XYZ application to the cloud so that...",tooltip="Your answer will help us provide tangible examples to DoD leadership how and why commercial cloud resources are accelerating the Department\\'s missions.") }}
|
||||
|
||||
<h2>Cloud Readiness</h2>
|
||||
{{ TextInput(f.num_software_systems, validation='integer') }}
|
||||
{{ OptionsInput(f.jedi_migration) }}
|
||||
{{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.") }}
|
||||
{{ OptionsInput(f.jedi_migration, tooltip="Cloud migration is the process of moving data, applications or other business elements from an organization\\'s onsite computers/data centers to the cloud, or moving them from one cloud environment to another.") }}
|
||||
<template v-if="jediMigrationOptionSelected">
|
||||
<template v-if='isJediMigration' v-cloak>
|
||||
{{ OptionsInput(f.rationalization_software_systems) }}
|
||||
{{ OptionsInput(f.rationalization_software_systems, tooltip="Rationalization is the DoD process to determine whether the application should move to the cloud.") }}
|
||||
{{ OptionsInput(f.technical_support_team) }}
|
||||
<template v-if="hasTechnicalSupportTeam">
|
||||
{{ OptionsInput(f.organization_providing_assistance) }}
|
||||
</template>
|
||||
{{ OptionsInput(f.engineering_assessment) }}
|
||||
{{ OptionsInput(f.engineering_assessment, tooltip="An engineering assessment is an evaluation to convert your application architecture from on-premises to using the commercial cloud") }}
|
||||
{{ OptionsInput(f.data_transfers) }}
|
||||
{{ OptionsInput(f.expected_completion_date) }}
|
||||
</template>
|
||||
<template v-else-if='!isJediMigration' v-cloak>
|
||||
{{ OptionsInput(f.cloud_native) }}
|
||||
{{ OptionsInput(f.cloud_native, tooltip="Cloud native is architecting and designing your application to use all the benefits of the commercial cloud. Specifically, designing applications so that they are decoupled from a physical resource.") }}
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<h2>Financial Usage</h2>
|
||||
{{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
|
||||
<p>So this means you are spending approximately <b>!{ annualSpendStr }</b> annually</p>
|
||||
{{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars") }}
|
||||
<p>So this means you are spending approximately <span class="label">!{ annualSpendStr }</span> annually</p>
|
||||
|
||||
{{ TextInput(f.dollar_value, validation='dollars') }}
|
||||
<template v-if="annualSpend > 1000000">
|
||||
{{ TextInput(f.number_user_sessions, validation='integer') }}
|
||||
{{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}
|
||||
{{ TextInput(f.number_user_sessions, validation='integer') }}
|
||||
{{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer") }}
|
||||
{{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes") }}
|
||||
</template>
|
||||
{{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
|
||||
|
||||
|
||||
@ -24,11 +24,10 @@
|
||||
{{ TextInput(f.email_request, placeholder='jane@mail.mil', validation='email') }}
|
||||
{{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }}
|
||||
|
||||
<p>We want to collect the following information from you for security auditing and determining priviledged user access</p>
|
||||
<p>We want to collect the following information from you for security auditing and determining priviledged user access.</p>
|
||||
|
||||
{{ TextInput(f.service_branch,placeholder='e.g. US Air Force, US Army, US Navy, Marine Corps, Defense Media Agency') }}
|
||||
{{ OptionsInput(f.citizenship) }}
|
||||
{{ OptionsInput(f.designation) }}
|
||||
{{ TextInput(f.date_latest_training, placeholder='MM / DD / YYYY', validation='date') }}
|
||||
|
||||
{{ TextInput(f.date_latest_training,tooltip="When was the last time you completed the IA training? <br> Information Assurance (IA) training is an important step in cyber awareness.",placeholder="MM / DD / YYYY", validation="date") }}
|
||||
{% endblock %}
|
||||
|
||||
@ -98,10 +98,15 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt>Average Daily Traffic</dt>
|
||||
<dt>Average Daily Traffic (Number of Requests)</dt>
|
||||
<dd>{{data['details_of_use']['average_daily_traffic']}}</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt>Average Daily Traffic (GB)</dt>
|
||||
<dd>{{data['details_of_use']['average_daily_traffic_gb']}}</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt>Start Date</dt>
|
||||
<dd>{{data['details_of_use']['start_date']}}</dd>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/alert.html" import Alert %}
|
||||
{% from "components/tooltip.html" import Tooltip %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
@ -128,7 +129,6 @@
|
||||
<div class='col col--grow'>col 12</div>
|
||||
</div>
|
||||
|
||||
|
||||
<form>
|
||||
<textinput inline-template validation='dollars' value='1231231'>
|
||||
<div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
|
||||
@ -286,6 +286,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel__content">
|
||||
<h5>Tooltips</h5>
|
||||
{{ Tooltip('this is a tooltip text') }}<code>default</code> <br>
|
||||
<span v-tooltip.top-start="'this is a tooltip text'">{{ Icon('help') }}</span><code>top-start</code> <br>
|
||||
<span v-tooltip.right="'this is a tooltip text'">{{ Icon('help') }}</span><code>right</code> <br>
|
||||
<span v-tooltip.bottom="'this is a tooltip text'">{{ Icon('help') }}</span><code>bottom</code> <br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel__content">
|
||||
<h5>Labels</h5>
|
||||
<span class="label">Label</span>
|
||||
<span class="label label--info">Label Info</span>
|
||||
<span class="label label--warning">Label Warning</span>
|
||||
<span class="label label--error">Label Error</span>
|
||||
<span class="label label--success">Label Success</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='panel'>
|
||||
Another panel without padding
|
||||
</div>
|
||||
|
||||
81
yarn.lock
81
yarn.lock
@ -127,14 +127,10 @@ anymatch@^2.0.0:
|
||||
micromatch "^3.1.4"
|
||||
normalize-path "^2.1.1"
|
||||
|
||||
aproba@^1.0.3, aproba@^1.1.1, aproba@^1.1.2, aproba@~1.2.0:
|
||||
aproba@^1.0.3, aproba@^1.1.1, aproba@^1.1.2, "aproba@^1.1.2 || 2", aproba@~1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
|
||||
|
||||
"aproba@^1.1.2 || 2":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
|
||||
|
||||
archy@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
|
||||
@ -1355,14 +1351,10 @@ color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.1:
|
||||
dependencies:
|
||||
color-name "1.1.1"
|
||||
|
||||
color-name@1.1.1:
|
||||
color-name@1.1.1, color-name@^1.0.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
|
||||
|
||||
color-name@^1.0.0:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
|
||||
color-string@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
|
||||
@ -2148,18 +2140,7 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
|
||||
|
||||
escodegen@^1.8.1:
|
||||
version "1.11.0"
|
||||
resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.11.0.tgz#b27a9389481d5bfd5bec76f7bb1eb3f8f4556589"
|
||||
dependencies:
|
||||
esprima "^3.1.3"
|
||||
estraverse "^4.2.0"
|
||||
esutils "^2.0.2"
|
||||
optionator "^0.8.1"
|
||||
optionalDependencies:
|
||||
source-map "~0.6.1"
|
||||
|
||||
escodegen@~1.9.0:
|
||||
escodegen@^1.8.1, escodegen@~1.9.0:
|
||||
version "1.9.1"
|
||||
resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
|
||||
dependencies:
|
||||
@ -2259,14 +2240,10 @@ extglob@^2.0.4:
|
||||
snapdragon "^0.8.1"
|
||||
to-regex "^3.0.1"
|
||||
|
||||
extsprintf@1.3.0:
|
||||
extsprintf@1.3.0, extsprintf@^1.2.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
|
||||
|
||||
extsprintf@^1.2.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
|
||||
|
||||
falafel@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/falafel/-/falafel-2.1.0.tgz#96bb17761daba94f46d001738b3cedf3a67fe06c"
|
||||
@ -3214,11 +3191,7 @@ js-beautify@^1.7.5:
|
||||
mkdirp "~0.5.0"
|
||||
nopt "~3.0.1"
|
||||
|
||||
"js-tokens@^3.0.0 || ^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||
|
||||
js-tokens@^3.0.2:
|
||||
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
|
||||
|
||||
@ -3482,6 +3455,10 @@ lodash.memoize@~3.0.3:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
|
||||
|
||||
lodash.merge@^4.6.0:
|
||||
version "4.6.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
|
||||
|
||||
lodash.mergewith@^4.6.0:
|
||||
version "4.6.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
|
||||
@ -3802,14 +3779,10 @@ move-concurrently@^1.0.1:
|
||||
rimraf "^2.5.4"
|
||||
run-queue "^1.0.3"
|
||||
|
||||
ms@2.0.0:
|
||||
ms@2.0.0, ms@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
|
||||
|
||||
ms@^2.0.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
|
||||
|
||||
mute-stream@~0.0.4:
|
||||
version "0.0.7"
|
||||
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
|
||||
@ -4556,14 +4529,10 @@ pascalcase@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
|
||||
|
||||
path-browserify@0.0.0:
|
||||
path-browserify@0.0.0, path-browserify@~0.0.0:
|
||||
version "0.0.0"
|
||||
resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
|
||||
|
||||
path-browserify@~0.0.0:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
|
||||
|
||||
path-dirname@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
|
||||
@ -4652,6 +4621,10 @@ pinkie@^2.0.0:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
|
||||
|
||||
popper.js@^1.12.9:
|
||||
version "1.14.4"
|
||||
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
|
||||
|
||||
posix-character-classes@^0.1.0:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
|
||||
@ -6084,11 +6057,7 @@ static-module@^2.2.0:
|
||||
static-eval "^2.0.0"
|
||||
through2 "~2.0.3"
|
||||
|
||||
"statuses@>= 1.4.0 < 2":
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
|
||||
|
||||
statuses@~1.4.0:
|
||||
"statuses@>= 1.4.0 < 2", statuses@~1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
|
||||
|
||||
@ -6430,14 +6399,10 @@ trim-right@^1.0.1:
|
||||
dependencies:
|
||||
glob "^6.0.4"
|
||||
|
||||
tty-browserify@0.0.0:
|
||||
tty-browserify@0.0.0, tty-browserify@~0.0.0:
|
||||
version "0.0.0"
|
||||
resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
|
||||
|
||||
tty-browserify@~0.0.0:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.1.tgz#3f05251ee17904dfd0677546670db9651682b811"
|
||||
|
||||
tunnel-agent@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
|
||||
@ -6640,6 +6605,14 @@ uuid@^3.0.0, uuid@^3.1.0, uuid@^3.3.2:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
|
||||
|
||||
v-tooltip@^2.0.0-rc.33:
|
||||
version "2.0.0-rc.33"
|
||||
resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.0.0-rc.33.tgz#78f7d8e9c34265622be65ba9dc78c67f1dc02b73"
|
||||
dependencies:
|
||||
lodash.merge "^4.6.0"
|
||||
popper.js "^1.12.9"
|
||||
vue-resize "^0.4.3"
|
||||
|
||||
v8-compile-cache@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.0.tgz#526492e35fc616864284700b7043e01baee09f0a"
|
||||
@ -6679,6 +6652,10 @@ vm-browserify@0.0.4, vm-browserify@~0.0.1:
|
||||
dependencies:
|
||||
indexof "0.0.1"
|
||||
|
||||
vue-resize@^0.4.3:
|
||||
version "0.4.4"
|
||||
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.4.tgz#dee9b8dd1b189e7e3f6ec47f86c60694a241bb17"
|
||||
|
||||
vue-text-mask@^6.1.2:
|
||||
version "6.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vue-text-mask/-/vue-text-mask-6.1.2.tgz#2cc18a1ca04ea66798518a9373929a12256d14b9"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user