UNCLASSIFIED - NO CUI

Skip to content
Snippets Groups Projects
Commit 3c9a646e authored by luke.glasscock's avatar luke.glasscock
Browse files

Add arrows

parent 0122f523
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/CyberSecurityContinuousCollapsible.vue 0 → 100644
+ 159
− 0
View file @ 3c9a646e
<template>
<v-container class="cs-interactive">
<v-row>
<v-col id="accordion-contiainer" cols="12">
<div class="border-vertical left"></div>
<v-expansion-panels multiple class="px-4" disabled :value="[2]">
<v-expansion-panel class="expansion-panel-card">
<v-expansion-panel-header class="justify-center mt-5">
Authorize the Platform
<div class="border-container single">
<v-icon class="top">mdi-arrow-right-bold</v-icon>
</div>
</v-expansion-panel-header>
</v-expansion-panel>
<v-expansion-panel class="expansion-panel-card">
<v-expansion-panel-header class="justify-center mt-4">
Authroize the DevSecOps Process
<div class="border-container double">
<v-icon class="top">mdi-arrow-right-bold</v-icon>
<v-icon class="bottom">mdi-arrow-right-bold</v-icon>
</div>
</v-expansion-panel-header>
</v-expansion-panel>
<v-expansion-panel
class="expansion-panel-card"
style="min-height:250px"
>
<v-expansion-panel-header class="justify-center mt-3">
Authorize the Team
<div class="border-container single clear">
<v-icon>mdi-arrow-right-bold</v-icon>
</div>
</v-expansion-panel-header>
<v-expansion-panel-content>
<div class="row justify-content-center">
<v-card class="col-md-4 col-11 text-center mx-2 mb-4">
<p>Teams that run the Platform</p>
</v-card>
<v-card class="col-md-6 col-11 text-center mx-2 mb-4">
<p>
Teams that Create, Build, Secure and Operate the Software
Product
</p>
</v-card>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
components: {},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.expansion-panel-card {
background-color: #002743 !important;
color: white !important;
margin: 10px 0 !important;
height: 90px;
}
.cs-interactive {
$dark-blue: #094b5f;
.border {
border: 2px solid $dark-blue;
}
.col {
padding-left: 4px;
padding-right: 4px;
}
#accordion-contiainer {
$arrow-color: #bdc931;
$border-color: #0684a9;
position: relative;
.border-vertical {
position: absolute;
width: 16px;
bottom: 150px;
&.left {
border-left: 2px dashed $border-color;
top: 70px;
}
&.right {
border-right: 2px dashed $border-color;
right: 4px;
top: 149px;
}
}
.border-container {
position: absolute;
left: -16px;
width: 16px;
&.single {
border-top: 2px dashed $border-color;
&.right {
border-right: 2px solid #ffffff;
right: -16px;
left: unset;
.v-icon {
right: 11px;
}
}
}
&.double {
border-top: 2px dashed $border-color;
border-bottom: 2px dashed $border-color;
border-left: 2px solid #ffffff;
height: 30px;
}
&.clear {
border-left: 2px solid #ffffff;
height: 100%;
top: 45px;
}
.v-icon {
color: $arrow-color;
position: absolute;
right: -21px;
top: -13px;
&.bottom {
top: 15px;
}
}
}
.v-expansion-panel {
svg {
width: 60px;
height: 60px;
flex: none;
margin-right: 0.5rem;
margin-left: -0.25rem;
}
.v-expansion-panel-content {
text-align: left;
margin-left: 10px;
@include xs {
margin-left: 0px;
}
}
}
}
svg {
width: 5rem;
height: 5rem;
padding: 0.5rem;
}
}
</style>
src/components/CyberSecurityTraditionalCollapsible.vue 0 → 100644
+ 148
− 0
View file @ 3c9a646e
<template>
<v-container class="cs-interactive">
<v-row>
<v-col id="accordion-contiainer" cols="12">
<div class="border-vertical left"></div>
<v-expansion-panels multiple class="px-4" disabled>
<v-expansion-panel class="expansion-panel-card">
<v-expansion-panel-header class="justify-center mt-5">
System Development and Testing
<div class="border-container single"></div>
</v-expansion-panel-header>
</v-expansion-panel>
<v-expansion-panel class="expansion-panel-card">
<v-expansion-panel-header class="justify-center mt-4">
Authorize System Security Controls
<div class="border-container double">
<v-icon class="top">mdi-arrow-right-bold</v-icon>
</div>
</v-expansion-panel-header>
</v-expansion-panel>
<v-expansion-panel class="expansion-panel-card">
<v-expansion-panel-header class="justify-center mt-4">
Authorize System
<div class="border-container double">
<v-icon class="top">mdi-arrow-right-bold</v-icon>
</div>
</v-expansion-panel-header>
</v-expansion-panel>
<v-expansion-panel class="expansion-panel-card">
<v-expansion-panel-header class="justify-center mt-3">
Operate System
<div class="border-container single clear">
<v-icon>mdi-arrow-right-bold</v-icon>
</div>
</v-expansion-panel-header>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
components: {},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.expansion-panel-card {
background-color: #002743 !important;
color: white !important;
margin: 10px 0 !important;
height: 90px;
}
.cs-interactive {
$dark-blue: #094b5f;
.border {
border: 2px solid $dark-blue;
}
.col {
padding-left: 4px;
padding-right: 4px;
}
#accordion-contiainer {
$arrow-color: #bdc931;
$border-color: #0684a9;
position: relative;
.border-vertical {
position: absolute;
width: 16px;
bottom: 50px;
&.left {
border-left: 2px dashed $border-color;
top: 70px;
}
&.right {
border-right: 2px dashed $border-color;
right: 4px;
top: 149px;
}
}
.border-container {
position: absolute;
left: -16px;
width: 16px;
&.single {
border-top: 2px dashed $border-color;
&.right {
border-right: 2px solid #ffffff;
right: -16px;
left: unset;
.v-icon {
right: 11px;
}
}
}
&.double {
border-top: 2px dashed $border-color;
border-bottom: 2px dashed $border-color;
border-left: 2px solid #ffffff;
height: 30px;
}
&.clear {
border-left: 2px solid #ffffff;
height: 100%;
top: 45px;
}
.v-icon {
color: $arrow-color;
position: absolute;
right: -21px;
top: -13px;
&.bottom {
top: 15px;
}
}
}
.v-expansion-panel {
svg {
width: 60px;
height: 60px;
flex: none;
margin-right: 0.5rem;
margin-left: -0.25rem;
}
.v-expansion-panel-content {
text-align: left;
margin-left: 76px;
@include xs {
margin-left: 0px;
}
}
}
}
svg {
width: 5rem;
height: 5rem;
padding: 0.5rem;
}
}
</style>
src/components/IBCollapsiblesDownloadSteps.vue
+ 3
− 3
View file @ 3c9a646e
......@@ -76,13 +76,13 @@ export default {
RepositoriesIcon,
SearchIcon,
StackedDocumentsIcon,
TerminalWindowIcon
TerminalWindowIcon,
},
data() {
return {
logonImage: LogonImage
logonImage: LogonImage,
};
}
},
};
</script>
<style lang="scss" scoped>
......
src/views/Cybersecurity.vue
+ 11
− 57
View file @ 3c9a646e
......@@ -121,31 +121,8 @@
"
>
<h2>traditional authorization approach</h2>
<p class="ml-8">Authorize System</p>
<v-card
class="text-center mx-8"
style="background-color: #002743 !important;"
>
<p class="py-8 white--text">System Development and Testing</p>
</v-card>
<v-card
class="text-center mx-8"
style="background-color: #002743 !important;"
>
<p class="py-8 white--text">Authorize System Security Controls</p>
</v-card>
<v-card
class="text-center mx-8"
style="background-color: #002743 !important;"
>
<p class="py-8 white--text">Authorize System</p>
</v-card>
<v-card
class="text-center mx-8"
style="background-color: #002743 !important;"
>
<p class="py-8 white--text">Operate System</p>
</v-card>
<p class="ml-8 mb-n4">Authorize System</p>
<CyberSecurityTraditionalCollapsible />
<h4>industry average performance*</h4>
<p class="ml-8">(Traditional Development Approach)</p>
<p class="ml-8 mb-n1">
......@@ -171,36 +148,9 @@
"
>
<h2>continuous authorization approach</h2>
<p class="ml-8">Authorize Platform, Process, Team</p>
<v-card
class="text-center mx-8"
style="background-color: #002743 !important;"
>
<p class="py-8 white--text">Authorize the Platform</p>
</v-card>
<v-card
class="text-center mx-8"
style="background-color: #002743 !important;"
>
<p class="py-8 white--text">Authorize the DevSecOps Process</p>
</v-card>
<v-card
class="text-center mx-8"
style="background-color: #002743 !important;"
>
<p class="py-8 white--text">Authorize the Team</p>
<div class="row justify-content-center mt-n8">
<v-card class="col-md-3 col-11 text-center mx-2 mb-4">
<p>Teams that run the Platform</p>
</v-card>
<v-card class="col-md-6 col-11 text-center mx-2 mb-4">
<p>
Teams that Create, Build, Secure and Operate the Software
Product
</p>
</v-card>
</div>
</v-card>
<p class="ml-8 mb-n4">Authorize Platform, Process, Team</p>
<CyberSecurityContinuousCollapsible />
<h4>cato performance targets*</h4>
<p class="ml-8">(Industry Elite DevSecOps Performance)</p>
<p class="ml-8 mb-n1">
......@@ -312,10 +262,10 @@
<h2 class="mx-auto">
Have more questions about platform one?
</h2>
<body-copy>
<p>
Click Get Answers to find most of your questions answered on the
FAQ page. Click Contact Us for more specific inquiries.
</body-copy>
</p>
</div>
</div>
<div class="row justify-content-center">
......@@ -360,6 +310,8 @@
import PageHeader from "@/components/PageHeader";
import Wave from "@/components/Wave";
import Lifecycle from "@/assets/images/CyberSecurity/Lifecycle.svg";
import CyberSecurityTraditionalCollapsible from "@/components/CyberSecurityTraditionalCollapsible";
import CyberSecurityContinuousCollapsible from "@/components/CyberSecurityContinuousCollapsible";
import VueEasyLightbox from "vue-easy-lightbox";
export default {
......@@ -369,6 +321,8 @@ export default {
Wave,
VueEasyLightbox,
Lifecycle,
CyberSecurityTraditionalCollapsible,
CyberSecurityContinuousCollapsible,
},
methods: {
showImg(index) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

UNCLASSIFIED - NO CUI