Skip to content

Commit

Permalink
iOS input fix and extended settings.json
Browse files Browse the repository at this point in the history
  • Loading branch information
@wslysi
wslysi committed Oct 17, 2018
1 parent 7d8ef67 commit 59e6f9e
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 40 deletions.
18 changes: 18 additions & 0 deletions settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,24 @@
"class": "pull-right"
}
]
},
{
"name": "Hide On Phone",
"type": "Toggle",
"description": "Hide element on phone.",
"class": "hidden-xs"
},
{
"name": "Hide On Tablet",
"type": "Toggle",
"description": "Hide element on tablet.",
"class": "hidden-sm"
},
{
"name": "Hide On Desktop",
"type": "Toggle",
"description": "Hide element on desktop.",
"class": "hidden-md"
}
],
"DivContainer": [
Expand Down
2 changes: 1 addition & 1 deletion styles/css/lib/lib.css
View file

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions styles/sass/lib/components/_helpers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,3 +287,19 @@
.d-block {
display: block !important;
}

@media (max-width: $screen-xs-max) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: $screen-sm) and (max-width: $screen-sm-max) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: $screen-md) {
.hidden-md {
display: none !important;
}
}
5 changes: 4 additions & 1 deletion styles/sass/lib/components/_inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,10 @@ select.form-control {
font-weight: $form-label-weight;
}
}

// Targets only webkit iOS devices
.dj_webkit.dj_ios .form-control {
transform: translateZ(0);
}
// Orientation
.form-horizontal {
@media (min-width: $screen-sm) {
Expand Down
76 changes: 38 additions & 38 deletions styles/sass/lib/components/_tabcontainer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
.mx-tabcontainer-tabs {
margin-bottom: 20px;
border-color: $tabs-border-color;
> li > a {
& > li > a {
margin-right: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
Expand All @@ -22,9 +22,9 @@
background-color: $tabs-bg-hover;
}
}
> li.active > a,
> li.active > a:hover,
> li.active > a:focus {
& > li.active > a,
& > li.active > a:hover,
& > li.active > a:focus {
color: $tabs-color-active;
border: 1px solid $tabs-border-color;
border-bottom-color: transparent;
Expand All @@ -38,9 +38,9 @@
//-------------------------------------------------------------------------------------------------------------------//
// Style as pills
.tab-pills.mx-tabcontainer {
.mx-tabcontainer-tabs {
& > .mx-tabcontainer-tabs {
border: 0;
> li > a {
& > li > a {
margin-right: 2px;
color: $tabs-color;
border: 1px solid $tabs-border-color;
Expand All @@ -50,9 +50,9 @@
background-color: $tabs-bg-hover;
}
}
> li.active > a,
> li.active > a:hover,
> li.active > a:focus {
& > li.active > a,
& > li.active > a:hover,
& > li.active > a:focus {
color: #FFFFFF;
border-color: $tabs-bg-active;
background-color: $tabs-bg-active;
Expand All @@ -62,12 +62,12 @@

// Style with lines
.tab-lined.mx-tabcontainer {
.mx-tabcontainer-tabs {
& > .mx-tabcontainer-tabs {
border-width: 3px;
li {
margin-right: 30px;
margin-bottom: -3px;
> a {
& > a {
padding: 10px 0;
color: $tabs-color;
border: 0;
Expand Down Expand Up @@ -98,10 +98,10 @@
// Justified style
// Lets your tabs take 100% of the width
.tab-justified.mx-tabcontainer {
.mx-tabcontainer-tabs {
& > .mx-tabcontainer-tabs {
width: 100%;
border-bottom: 0;
> li {
& > li {
display: table-cell;
float: none;
width: 1%;
Expand All @@ -110,12 +110,12 @@
display: block;
width: 100%;
}
> a {
& > a {
text-align: center;
border-bottom: 1px solid $tabs-border-color;
}
}
> li.active > a {
& > li.active > a {
border-bottom-color: transparent;
border-radius: 4px;
@media (max-width: $screen-xs-max) {
Expand All @@ -127,10 +127,10 @@

// Bordered
.tab-bordered.mx-tabcontainer {
.mx-tabcontainer-tabs {
& > .mx-tabcontainer-tabs {
margin: 0;
}
.mx-tabcontainer-content {
& > .mx-tabcontainer-content {
padding: 10px;
border-width: 0 1px 1px 1px;
border-style: solid;
Expand All @@ -141,44 +141,44 @@

// Wizard
.tab-wizard.mx-tabcontainer {
.mx-tabcontainer-tabs {
border-style: none;
& > .mx-tabcontainer-tabs {
position: relative;
display: flex;
justify-content: space-between;
border-style: none;

&::before {
content: "";
height: 1px;
position: absolute;
width: 100%;
display: block;
top: 16px;
display: block;
width: 100%;
height: 1px;
content: "";
background-color: $tabs-border-color;
}
> li {
& > li {
position: relative;
float: none;
width: 100%;
text-align: center;
float: none;
> a {
text-align: center;
margin: auto;
height: 33px;
& > a {
width: 33px;
height: 33px;
margin: auto;
padding: 0;
line-height: 33px;
font-size: 18px;
font-weight: bold;
text-align: center;
color: $brand-default;
border: 1px solid $tabs-border-color;
background-color: #FFFFFF;
border-radius: 100%;
background-color: #FFFFFF;
font-size: 18px;
font-weight: bold;
line-height: 33px;
}
&.active {
> a,
> a:hover,
> a:focus {
& > a,
& > a:hover,
& > a:focus {
color: #FFFFFF;
border-color: $tabs-bg-active;
background-color: $tabs-bg-active;
Expand All @@ -190,7 +190,7 @@

// Tab Styling Specific for mobile
.tab-mobile.mx-tabcontainer {
.mx-tabcontainer-tabs {
& > .mx-tabcontainer-tabs {
margin: 0;
text-align: center;
border-style: none;
Expand All @@ -209,7 +209,7 @@
color: #FFFFFF;
border-width: 0 1px 0 0;
border-style: solid;
border-color: rgba(255,255,255,0.3);
border-color: rgba(255, 255, 255, 0.3);
border-radius: 0;
font-size: 12px;
font-weight: $font-weight-normal;
Expand Down

0 comments on commit 59e6f9e

Please sign in to comment.